The project needs to generate a QR code on the front end, and the qrcode plugin is used.
old rules
//引入依赖
yarn add qrcodejs2
import QRCode from 'qrcodejs2'
//放二维码的盒子,这里用的element-ui 给二维码加载的时候加了个loading,不需要的可以去除,这里默认给盒子一个宽高就不会因为二维码加载造成的页面抖动了
<div class="codeWrapper" ref="qrCodeUrl" v-loading="qrloading"></div>
creatQrCode(customer, payInfo) {
//这里后端给的地址只需要域名即可,我们是给了全部地址,所以做了个截取, 截取链接域名,参数自己拼接
let url = payInfo.data.payUrl;
if (url.indexOf("?") != -1) {
url = url.split("?")[0];
}
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: `${url}?phone=${customer.mobile}&name=${customer.custName}`, // 需要转换为二维码的地址,域名+参数,域名是后端给的,参数是从其他接口获取的
width: 200,
height: 200,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
this.qrloading = false;
}
{{o.name}}
{{m.name}}