zdqy_firm_former/src/views/component/qrcodeedDialog.vue

<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>