Import "qrcodejs2": "0.0.2" in the package.json file
<template>
<view class="businessPay">
<action-bar style="width: 100%;" title="确认支付" leftIcon="back"></action-bar>
<!-- <uni-section title="预存现金" type="line"></uni-section> -->
<!-- <cash-advance ref="cashAdvance"></cash-advance> -->
<!-- <uni-section title="支付方式" type="line"></uni-section> -->
<!-- <pay-way ref="payWay"></pay-way> -->
<view class="msgBox">
<common-msg-item title="订单金额" :content="payAmount"></common-msg-item>
<PickMsgItem title="支付方式" :range="payWay" rangeKey="mname" iconfont="" @onPick="onPercombPick">
</PickMsgItem>
<view>
<uni-popup ref="popup" type="center" :mask-click="false">
<uni-card>
<view v-if="isShowModal">
<!-- <view style="width: 450upx;height: 500upx;margin-top: 10px"> -->
<view class="qrcode">
<!-- <canvas style="width: 450upx;height: 500upx;" canvas-id="couponQrcode"></canvas> -->
<div id="qrCode" ref="qrCodeDiv"></div>
</view>
<!-- </view> -->
<view class="title" style="margin-top: 10px;font-weight:bold">
扫码二维码支付
</view>
</view>
</uni-card>
</uni-popup>
</view>
</view>
<view class="businessPay-btn">
<view class="btn" @click="businessPay()">
立即支付
</view>
</view>
<web-view v-if="webViewSrc" :src="webViewSrc"></web-view>
</view>
</template>
import QRCode from 'qrcodejs2';
businessPay(){
this.couponQrCode();
},
// 二维码生成工具
couponQrCode() {
// new qrCode('couponQrcode', {
// text: this.qrCodeValue,
// width: 200,
// height: 225,
// colorDark: "#333333",
// colorLight: "#FFFFFF",
// correctLevel: qrCode.CorrectLevel.H
// })
// 这里打开生成二维码的时候,需要多一层判断body主体渲染完后,才能获取this.$refs.qrCodeDiv这个div拿来渲染,不然会导致无法获取div标签到时无法渲染成功,二维码为空白的情况
const el = this.$refs.qrCodeDiv
if(!el) {
setTimeout(() => {
// 进行回调二维码生成工具方法
this.couponQrCode()
}, 300)
}
this.$nextTick(() => {
new QRCode(this.$refs.qrCodeDiv, {
text: this.qrCodeValue,
width: 220,
height: 245,
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H
})
})
},
The couponQrCode() method here needs to use this.$refs.qrCodeDiv to determine whether the <div> tag is generated successfully. Otherwise, the QR code will be blank. What needs to be noted here is that <div> is inside the <uni-popup> tag. <uni-popup> must be generated and rendered before it can be rendered in <div>. QR code. Here you need to pay attention to the order. If it is not obtained, delay and re-obtain the div tag to generate the QR code. ---- This is also a pit.
.businessPay {
width: 100%;
overflow: hidden;
box-sizing: border-box;
view {
box-sizing: border-box;
}
.msgBox {
width: 100%;
background-color: #fff;
padding: 30rpx 40rpx;
}
&-btn {
width: 100%;
overflow: hidden;
padding: 40rpx 20rpx;
.btn {
width: 100%;
overflow: hidden;
color: #fff;
font-size: 28rpx;
background-color: #1F77FF;
line-height: 100rpx;
height: 100rpx;
border-radius: 50rpx;
text-align: center;
}
}
}
.qrcode {
padding: 50 upx 0 20 upx 0;
display: flex;
align-items: center;
justify-content: center;
}
.title {
text-align: center;
}