签到二维码组件调整

src/views/component/qrcodeedDialog.vue

@@ -1,21 +1,26 @@
 <template>
-<div>
-    <el-dialog
-    title="扫码签到"
-    :visible.sync="centerDialogVisible"
-    :append-to-body='true'
-    width="50%"
-    center>
-        <div class="codePic" >
-            <div id="qrcode" ref="qrcodes" class="qrCode" />
-        </div>
-        <span slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="downloadCode()">下载二维码</el-button>
-            <el-button @click="centerDialogVisible = false">关 闭</el-button>
-        </span>
-    </el-dialog>
-    
-</div>
+    <div>
+        <el-dialog
+            title="扫码签到"
+            :visible.sync="dialogVisible"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :append-to-body="true"
+            class="qrcode-dialog"
+            width="50%"
+            top="6vh"
+            center
+        >
+            <div class="codePic">
+                <div id="qrcode" ref="qrcodes" class="qrCode" />
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="downloadCode()">下载二维码</el-button>
+                <el-button @click="dialogVisible = false">关 闭</el-button>
+            </span>
+        </el-dialog>
+
+    </div>
 </template>
 
 <script>
@@ -24,22 +29,11 @@ import { BASE_URL } from '@/constant'
 export default {
     name: 'qrcode',
     props: {
-        field: Object,
-        formData: {
-            type: Object,
-            default () {
-                return {}
-            }
-        },
-        readonly: {
+        visible: {
             type: Boolean,
             default: false
         },
-        dialogVisible:{
-            type: Boolean,
-            default: false
-        },
-        codeId:{
+        codeId: {
             type: String,
             default: ''
         }
@@ -47,49 +41,30 @@ export default {
     data () {
         return {
             qrCode: '',
-            baseUrl: process.env.VUE_APP_BASE_URL,
-            centerDialogVisible:this.dialogVisible
-        }
-    },
-    watch: {
-        'formData.changJingId': {
-            handler () {
-                this.$nextTick(() => {
-                    this.qrcode()
-                })
-            },
-            immediate: true
-
+            dialogVisible: this.visible
         }
     },
     mounted () {
-        // setTimeout(() => {
-        //     this.qrcode()
-        // }, 500)
+        this.$nextTick(() => {
+            this.qrcodeRender()
+        })
     },
-    destroyed () {
-        if (window.qrTimer) {
-            clearInterval(window.qrTimer)
-        }
-    },
-
     methods: {
-        downloadCode(){
-            let myCanvas = document.getElementById("qrcode").getElementsByTagName("canvas");
-            let a = document.createElement("a");
-            a.href = myCanvas[0].toDataURL("image/png");
-            a.download = name;
-            a.click();
+        downloadCode () {
+            const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
+            const a = document.createElement('a')
+            a.href = myCanvas[0].toDataURL('image/png')
+            a.download = name
+            a.click()
         },
-        qrcode () {
+        qrcodeRender () {
             if (this.qrCode) {
                 this.$refs.qrcodes.innerHTML = ''
             }
             this.qrCode = new QRCode('qrcode', {
-                width: 132,
-                height: 132,
-                text:`${this.baseUrl}connect/oauth2/authorize?appid=wxf0aecf99696061a3&redirect_uri=${encodeURIComponent(`${BASE_URL}#/ziliao`)}&response_type=code&scope=snsapi_base&state=${this.formData.changJingId}#wechat_redirect`,
-                // text: `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0aecf99696061a3&redirect_uri=${encodeURIComponent(`${BASE_URL}#/ziliao`)}&response_type=code&scope=snsapi_base&state=${this.formData.changJingId}#wechat_redirect`,
+                width: 200,
+                height: 200,
+                text: `${BASE_URL}h5/#/pages/login/login?qrcodeId=${this.codeId}`,
                 colorDark: '#000000', // 前景色
                 colorLight: '#FFFFFF', // 背景色
                 correctLevel: QRCode.CorrectLevel.L
@@ -100,12 +75,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.qrCode {
-    display: flex;
-    justify-content: center;
-    margin: 5% 0;
-}
-.qrCode >img{
-    width: 50%;
-}
+    .qrcode-dialog {
+        .qrCode {
+            display: flex;
+            justify-content: center;
+            margin: 5% 0;
+        }
+        .qrCode >img{
+            width: 50%;
+        }
+    }
 </style>