zdqy_firm_former/src/views/component/qrcodeed.vue

<template>
    <div style="height:150px">
        <div id="qrcode" ref="qrcodes" class="qrCode" />
    </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
        }
    },
    data () {
        return {
            qrCode: ''
        }
    },
    watch: {
        'formData.changJingId': {
            handler () {
                this.$nextTick(() => {
                    this.qrcode()
                })
            },
            immediate: true

        }
    },
    mounted () {
        // setTimeout(() => {
        //     this.qrcode()
        // }, 500)
    },
    destroyed () {
        if (window.qrTimer) {
            clearInterval(window.qrTimer)
        }
    },

    methods: {
        qrcode () {
            if (this.qrCode) {
                this.$refs.qrcodes.innerHTML = ''
            }
            this.qrCode = new QRCode('qrcode', {
                width: 132,
                height: 132,
                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`,
                // text: `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxea2c214ca5d25739&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 {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
</style>