做微信支付,通过后端返回的地址生成二维码。

1. 安装qrcodejs2

npm install  qrcodejs2 --save

2. 使用

<template>
    <div class="pointer" ref="qrcode" @click="showQRcode"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
    name: '',
    props: {},
    components: {
    },
    computed: {},
    data() {
        return {
            link: '', // 二维码地址
        }
    },
    mounted() {},
    methods: {
        //微信支付
        /**
         * @description 生成二维码
         * @param  {number} qWidth  宽度
         * @param  {number} qHeight  高度
         * @param  {string} qText  二维码内容(跳转连接)
         * @param  {string} qRender 渲染方式(有两种方式 table和canvas,默认是canvas)
         */
        qrcode(qWidth, qHeight, qText, qRender) {
            let el = this.$refs.qrcode
            new QRCode(el, {
                width: qWidth,
                height: qHeight,
                text: qText,
                render: qRender
            })
        },
        // 获取微信二维码
        showQRcode(params) {
            //二维码初始化
            this.$refs.qrcode.innerHTML = ''
            this.getQRCode(params).then((res) => {
                this.link = res.payUrl
                this.orderId = res.orderId
                this.qrcode(200, 210, this.link, 'canvas')
            })
        }
    }
}
</script>
<style lang="scss" scoped>
</style>
Logo

前往低代码交流专区

更多推荐