package.json ファイル内の「qrcodejs2」:「0.0.2」をインポートします。
<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
})
})
},
ここでの CouponQrCode() メソッドは、this.$refs.qrCodeDiv を使用して、<div> タグが正常に生成されたかどうかを判断する必要があります。それ以外の場合、QR コードは空白になります。ここで注意する必要があるのは、<div> が <uni-popup> タグ内にあることです。<div> でレンダリングする前に、<uni-popup> を生成してレンダリングする必要があります。 QRコード。ここで注意が必要なのは順番で、取得できていない場合は時間をおいてdivタグを再取得してQRコードを生成してください。----ここも落とし穴ですね。
.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;
}