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() } },