二维码对话框（生成二维码未对接移动端）

src/views/component/qrcodeedDialog.vue

@@ -0,0 +1,111 @@
+<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>
+</template>
+
+<script>
+import QRCode from 'qrcodejs2' // 引入qrcode
+import { BASE_URL } from '@/constant'
+export default {
+    name: 'qrcode',
+    props: {
+        field: Object,
+        formData: {
+            type: Object,
+            default () {
+                return {}
+            }
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        dialogVisible:{
+            type: Boolean,
+            default: false
+        },
+        codeId:{
+            type: String,
+            default: ''
+        }
+    },
+    data () {
+        return {
+            qrCode: '',
+            baseUrl: process.env.VUE_APP_BASE_URL,
+            centerDialogVisible:this.dialogVisible
+        }
+    },
+    watch: {
+        'formData.changJingId': {
+            handler () {
+                this.$nextTick(() => {
+                    this.qrcode()
+                })
+            },
+            immediate: true
+
+        }
+    },
+    mounted () {
+        // setTimeout(() => {
+        //     this.qrcode()
+        // }, 500)
+    },
+    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();
+        },
+        qrcode () {
+            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`,
+                colorDark: '#000000', // 前景色
+                colorLight: '#FFFFFF', // 背景色
+                correctLevel: QRCode.CorrectLevel.L
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.qrCode {
+    display: flex;
+    justify-content: center;
+    margin: 5% 0;
+}
+.qrCode >img{
+    width: 50%;
+}
+</style>