diff --git a/components/BsPay.vue b/components/BsPay.vue index 68c0e91..8513c6f 100644 --- a/components/BsPay.vue +++ b/components/BsPay.vue @@ -2,7 +2,7 @@ * @Author: ch * @Date: 2022-05-08 00:39:50 * @LastEditors: ch - * @LastEditTime: 2022-06-29 16:51:50 + * @LastEditTime: 2022-07-11 11:32:27 * @Description: file content --> @@ -36,6 +37,7 @@ import {ApiGetOrderDetail} from '@/plugins/api/order' import UiMoney from './UiMoney.vue'; import UiButton from './UiButton.vue'; import QRcode from 'qrcode'; +import {CreateUUID} from '@/plugins/utils'; export default { components: { UiMoney, UiButton }, @@ -57,17 +59,19 @@ export default { return { orderInfo: {}, imgUrl : '', + imgTip : '二维码获取中', timerTxt : '', startSecondNum : 0, timerStop : null, - myPayType : null + myPayType : null, + payUUID : null } }, watch:{ myPayType(val){ // 单选框change事件无效,使用watch代替 if(val){ - this.getQrCode() + this.getQrCode(); } } }, @@ -120,33 +124,43 @@ export default { } }, getQrCode(){ - console.log(this.myPayType); + + this.payUUID = CreateUUID(); if(this.myPayType == 'wx'){ - this.getWxCodeImg(); + this.getWxCodeImg(this.payUUID); }else if(this.myPayType === 'ali'){ - this.getAliCodeImg(); + this.getAliCodeImg(this.payUUID); } }, /** * 支付宝二维码 */ - async getAliCodeImg(){ + async getAliCodeImg(uid){ const {error, result} = await ApiPostAliPayCdoeImg({orderId : this.orderId}); + if(this.payUUID !== uid){ + return false; + } if(error){ + this.imgTip = error.message; return false; } QRcode.toDataURL(result.payDataInfo.qrCodeData,{ width : 200 }, (err, url)=>{ this.imgUrl = url; + }) }, /** * 微信二维码 */ - async getWxCodeImg(){ + async getWxCodeImg(uid){ const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId}); + if(this.payUUID !== uid){ + return false; + } if(error){ + this.imgTip = error.message; return false; } QRcode.toDataURL(result.payDataInfo.codeUrlData,{ @@ -191,6 +205,11 @@ export default { finish(){ this.myVisible = false; this.$emit('finish') + }, + back(){ + this.myPayType = null; + this.imgUrl = null; + this.imgTip = '二维码获取中' } } } @@ -232,6 +251,10 @@ export default { left: -20px; top: -20px; } + span{ + line-height: 100px; + color: #999; + } } &--timer{ color: #999;