qrcodejs2二维码生成js

<div class="qrcode" ref="qrCodeUrl"></div>
<div class="rxpired-box" v-show="rxpired">
<p>已过期</p>
<Button type="primary" @click="bindRefresh">点击刷新</Button>
</div>

import QRCode from 'qrcodejs2'

methods: {
            // 切换扫码
            bindScan(){
                if(!this.isScan){
                    this.isScan = true
                    this.getSanCodeKey()
                }
                this.loginType = 1
            },
            // 生成二维码
            creatQrCode() {
                let url= `${window.location.protocol}//${window.location.host}/pages/users/scan_login/index?key=${this.codeKey}`;
                var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                    text: url, // 需要转换为二维码的内容
                    width: 160,
                    height: 160,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                })
            },
            // 关闭模态框
            closeModel () {
                let msg = this.$Message.loading({
                    content: '登录中...',
                    duration: 0
                });
                AccountLogin({
                    account: this.formInline.username,
                    password: this.formInline.password,
                    imgcode: this.formInline.code
                }).then(async res => {
                    msg();
                    let expires = this.getExpiresTime(res.data.exp_time);
                    // 记录用户登陆信息
                    setCookies('kefu_uuid', res.data.kefuInfo.uid, expires);
                    setCookies('kefu_token', res.data.token, expires);
                    setCookies('kefu_expires_time', res.data.exp_time, expires);
                    setCookies('kefuInfo', res.data.kefuInfo, expires);

                    // 记录用户信息
                    this.$store.commit('kefu/setInfo', res.data.kefuInfo)




                    if(this.$store.state.media.isMobile){
                        //手机页面
                        return this.$router.replace({ path: this.$route.query.redirect || '/kefu/mobile_list' });
                    }else{
                        // pc页面
                       return this.$router.replace({ path: this.$route.query.redirect || '/kefu/pc_list' });
                    }
                }).catch(res => {

                    msg();
                    let data = res === undefined ? {} : res;
                    this.errorNum++;
                    this.captchas();
                    this.$Message.error(data.msg || '登录失败');
                    if (this.jigsaw) this.jigsaw.reset();
                });
            },
            getExpiresTime (expiresTime) {
                let nowTimeNum = Math.round(new Date() / 1000);
                let expiresTimeNum = expiresTime - nowTimeNum;
                return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
            },
            closefail () {
                if (this.jigsaw) this.jigsaw.reset();
                this.$Message.error('校验错误');
            },
            handleResize (event) {
                this.fullWidth = document.documentElement.clientWidth

            },
            captchas: function () {
                this.imgcode = Setting.apiBaseURL + '/captcha_pro?' + Date.parse(new Date());
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.closeModel();
                    }
                })
            },
            // 获取客服扫码key
            getSanCodeKey(){
                getSanCodeKey().then(res=>{
                    this.codeKey = res.data.key
                    this.creatQrCode()
                    this.scanTime = setInterval(()=>{
                        this.timeNum++
                        if(this.timeNum>=60){
                            this.timeNum = 0
                            window.clearInterval(this.scanTime)
                            this.rxpired = true
                        }else{
                            this.getScanStatus()
                        }

                    },1000)
                }).catch(error=>{
                    this.timeNum = 0
                    window.clearInterval(this.scanTime)
                    this.rxpired = true
                    this.$Message.error(error.msg)
                })
            },
            // 扫码登录情况
            getScanStatus(){
                scanStatus(this.codeKey).then(async res=>{
                    // 0 = 二维码过期需要重新获取授权凭证
                    if(res.data.status == 0){
                        this.timeNum = 0
                        window.clearInterval(this.scanTime)
                        this.rxpired = true
                    }
                    // 1=正在扫描
                    if(res.data.status == 1){

                    }
                    // 3 扫描成功正在登录
                    if(res.data.status == 3){
                        window.clearInterval(this.scanTime)
                        let expires = this.getExpiresTime(res.data.exp_time);
                        // 记录用户登陆信息
                        setCookies('kefu_uuid', res.data.kefuInfo.uid, expires);
                        setCookies('kefu_token', res.data.token, expires);
                        setCookies('kefu_expires_time', res.data.exp_time, expires);
                        setCookies('kefuInfo', res.data.kefuInfo, expires);
                        // 记录用户信息
                        this.$store.commit('kefu/setInfo', res.data.kefuInfo)
                        if(this.$store.state.media.isMobile){
                            //手机页面
                            return this.$router.replace({ path: this.$route.query.redirect || '/kefu/mobile_list' });
                        }else{
                            // pc页面
                            return this.$router.replace({ path: this.$route.query.redirect || '/kefu/pc_list' });
                        }
                    }
                }).catch(error=>{
                    this.$Modal.error({
                        title: '提示',
                        content: error.msg
                    });
                    this.timeNum = 0
                    window.clearInterval(this.scanTime)
                    this.rxpired = true
                })
            },
            // 刷新二维码
            bindRefresh(){
                this.$refs.qrCodeUrl.innerHTML = ''
                this.rxpired = false
                this.getSanCodeKey()
            }
        },