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

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
 -->
 <template>
@@ -24,9 +24,10 @@
 				float suffix prefix :money="orderInfo.payAmount"/>
 			<div class="pay--code">
 				<img :src="imgUrl" v-if="imgUrl"/>
+				<span v-else>{{imgTip}}</span>
 			</div>
 			<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>
 	</el-dialog>
 </template>
@@ -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;