project/assets/js/main/pages/ding.vue

<template>
    <div class="page-message">
        <div class="flex-center position-ref full-height">
            <div class="message">{{ message }}</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .page-message {
        background-color: #fff;
        color: #636b6f;
        font-weight: 400;
        height: 100vh;
        margin: 0;

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .code {
            border-right: 2px solid;
            font-size: 26px;
            padding: 0 15px 0 15px;
            text-align: center;
        }

        .message {
            font-size: 18px;
            padding: 10px;
            text-align: center;
        }
    }
</style>

<script>
    import * as dd from 'dingtalk-jsapi';

    export default {
        data() {
            return {
                message: '钉钉登录中',
                loadIng: 0,
                code: ''
            }
        },
        watch: {
            code: function(newValue, oldValue) {
                $A.ajax({
                    url: $A.apiUrl('ding/login?code='+newValue),
                    data: "",
                    complete: () => {
                        this.loadIng--;
                    },
                    success: (res) => {
                        if (res.ret === 1) {
                            $A.storage("userInfo", res.data);
                            $A.setToken(res.data.token);
                            $A.triggerUserInfoListener(res.data);
                            //
                            this.loadIng--;
                            this.goForward({path: '/todo'}, true);
                        } else {
                            alert(res.msg)
                            this.goForward({path: '/'}, true);
                        }
                    }
                })
            }
        },
        mounted() {
            // $A.ajax({
            //     url: $A.apiUrl('ding/login?code=dc5dc708a99c387c807d7b905c025fbd'),
            //     data: "",
            //     complete: () => {
            //         this.loadIng--;
            //     },
            //     success: (res) => {
            //         console.log(res)
            //         if (res.ret === 1) {
            //             $A.storage("userInfo", res.data);
            //             $A.setToken(res.data.token);
            //             $A.triggerUserInfoListener(res.data);
            //
            //             this.loadIng--;
            //             this.goForward({path: '/todo'}, true);
            //         } else {
            //             that.message = res.msg
            //             if (res.data.code === 'need') {
            //                 this.codeNeed = true;
            //                 this.refreshCode();
            //             }
            //         }
            //     }
            // })


            let query = this.$route.query,that = this;
            dd.ready(function() {
                dd.runtime.permission.requestAuthCode({
                    corpId: query.corpId, // 企业id
                    onSuccess: function (info) {
                        //that.message = info.code
                        that.code = info.code

                    },
                    onFail : function(err) {
                        alert('dd error1: ' + JSON.stringify(err));
                    }
                });
            });
            dd.error(function(error){

                alert('dd error: ' + JSON.stringify(error));
            });



        },
    }


</script>