pref:优化获取支付二维码提示

fix/0707-ch
ch 2 years ago
parent 090fd92d51
commit c7199f96db

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-08 00:39:50 * @Date: 2022-05-08 00:39:50
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-29 16:51:50 * @LastEditTime: 2022-07-11 11:32:27
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -24,9 +24,10 @@
float suffix prefix :money="orderInfo.payAmount"/> float suffix prefix :money="orderInfo.payAmount"/>
<div class="pay--code"> <div class="pay--code">
<img :src="imgUrl" v-if="imgUrl"/> <img :src="imgUrl" v-if="imgUrl"/>
<span v-else>{{imgTip}}</span>
</div> </div>
<p class="pay--tips">如支付后没有自动跳转请点击 <span class="pay--finish" @click="finish"></span></p> <p class="pay--tips">如支付后没有自动跳转请点击 <span class="pay--finish" @click="finish"></span></p>
<UiButton class="pay--btn" type='yellow_gradual' @click="myPayType = null">其他支付方</UiButton> <UiButton class="pay--btn" type='yellow_gradual' @click="back"></UiButton>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
@ -36,6 +37,7 @@ import {ApiGetOrderDetail} from '@/plugins/api/order'
import UiMoney from './UiMoney.vue'; import UiMoney from './UiMoney.vue';
import UiButton from './UiButton.vue'; import UiButton from './UiButton.vue';
import QRcode from 'qrcode'; import QRcode from 'qrcode';
import {CreateUUID} from '@/plugins/utils';
export default { export default {
components: { UiMoney, UiButton }, components: { UiMoney, UiButton },
@ -57,17 +59,19 @@ export default {
return { return {
orderInfo: {}, orderInfo: {},
imgUrl : '', imgUrl : '',
imgTip : '二维码获取中',
timerTxt : '', timerTxt : '',
startSecondNum : 0, startSecondNum : 0,
timerStop : null, timerStop : null,
myPayType : null myPayType : null,
payUUID : null
} }
}, },
watch:{ watch:{
myPayType(val){ myPayType(val){
// change使watch // change使watch
if(val){ if(val){
this.getQrCode() this.getQrCode();
} }
} }
}, },
@ -120,33 +124,43 @@ export default {
} }
}, },
getQrCode(){ getQrCode(){
console.log(this.myPayType);
this.payUUID = CreateUUID();
if(this.myPayType == 'wx'){ if(this.myPayType == 'wx'){
this.getWxCodeImg(); this.getWxCodeImg(this.payUUID);
}else if(this.myPayType === 'ali'){ }else if(this.myPayType === 'ali'){
this.getAliCodeImg(); this.getAliCodeImg(this.payUUID);
} }
}, },
/** /**
* 支付宝二维码 * 支付宝二维码
*/ */
async getAliCodeImg(){ async getAliCodeImg(uid){
const {error, result} = await ApiPostAliPayCdoeImg({orderId : this.orderId}); const {error, result} = await ApiPostAliPayCdoeImg({orderId : this.orderId});
if(this.payUUID !== uid){
return false;
}
if(error){ if(error){
this.imgTip = error.message;
return false; return false;
} }
QRcode.toDataURL(result.payDataInfo.qrCodeData,{ QRcode.toDataURL(result.payDataInfo.qrCodeData,{
width : 200 width : 200
}, (err, url)=>{ }, (err, url)=>{
this.imgUrl = url; this.imgUrl = url;
}) })
}, },
/** /**
* 微信二维码 * 微信二维码
*/ */
async getWxCodeImg(){ async getWxCodeImg(uid){
const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId}); const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId});
if(this.payUUID !== uid){
return false;
}
if(error){ if(error){
this.imgTip = error.message;
return false; return false;
} }
QRcode.toDataURL(result.payDataInfo.codeUrlData,{ QRcode.toDataURL(result.payDataInfo.codeUrlData,{
@ -191,6 +205,11 @@ export default {
finish(){ finish(){
this.myVisible = false; this.myVisible = false;
this.$emit('finish') this.$emit('finish')
},
back(){
this.myPayType = null;
this.imgUrl = null;
this.imgTip = '二维码获取中'
} }
} }
} }
@ -232,6 +251,10 @@ export default {
left: -20px; left: -20px;
top: -20px; top: -20px;
} }
span{
line-height: 100px;
color: #999;
}
} }
&--timer{ &--timer{
color: #999; color: #999;

Loading…
Cancel
Save