修改命名

components/BsPay.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-08 00:39:50
  * @LastEditors: ch
- * @LastEditTime: 2022-06-29 15:34:08
+ * @LastEditTime: 2022-06-29 16:51:50
  * @Description: file content
 -->
 <template>
@@ -13,8 +13,8 @@
 				<el-radio label="wx" class="pay-type--item" >
 					<img class="pay-type--wx" src="@/assets/img/order/wx.png"/>
 				</el-radio>
-				<el-radio label="zfb" class="pay-type--item" >
+				<el-radio label="ali" class="pay-type--item" >
-					<img class="pay-type--zfb" src="@/assets/img/order/zfb.png"/>
+					<img class="pay-type--ali" src="@/assets/img/order/zfb.png"/>
 				</el-radio>
 			</el-radio-group>
 		</div>
@@ -31,7 +31,7 @@
 	</el-dialog>
 </template>
 <script>
-import {ApiPostWxPayCdoeImg, ApiPostZfbPayCdoeImg} from '@/plugins/api/pay'
+import {ApiPostWxPayCdoeImg, ApiPostAliPayCdoeImg} from '@/plugins/api/pay'
 import {ApiGetOrderDetail} from '@/plugins/api/order'
 import UiMoney from './UiMoney.vue';
 import UiButton from './UiButton.vue';
@@ -63,6 +63,14 @@ export default {
 			myPayType : null
 		}
 	},
+	watch:{
+		myPayType(val){
+			// 单选框change事件无效，使用watch代替
+			if(val){
+				this.getQrCode()
+			}
+		}
+	},
 	computed:{
 		myVisible : {
 			get(){
@@ -76,7 +84,7 @@ export default {
 			let str = '请选择支付方式';
 			if(this.myPayType === 'wx'){
 				str = '打开微信扫描付款';
-			}else if(this.myPayType === 'zfb'){
+			}else if(this.myPayType === 'ali'){
 				str = '打开支付宝扫描付款';
 			};
 			return str;
@@ -112,17 +120,18 @@ export default {
 			}
 		},
 		getQrCode(){
+			console.log(this.myPayType);
 			if(this.myPayType == 'wx'){
 				this.getWxCodeImg();
-			}else if(this.myPayType === 'zfb'){
+			}else if(this.myPayType === 'ali'){
-				this.getZfbCodeImg();
+				this.getAliCodeImg();
 			}
 		},
 		/**
 		 * 支付宝二维码
 		 */
-		async getZfbCodeImg(){
+		async getAliCodeImg(){
-			const {error, result} = await ApiPostZfbPayCdoeImg({orderId : this.orderId});
+			const {error, result} = await ApiPostAliPayCdoeImg({orderId : this.orderId});
 			if(error){
 				return false;
 			}
@@ -205,7 +214,7 @@ export default {
 	&--wx{
 		width: 108px;
 	}
-	&--zfb{
+	&--ali{
 		width: 78px;
 	}
 }

pages/order/submit/index.vue

@@ -18,7 +18,7 @@
 				<el-radio label="wx" >
 					<img class="pay-type--wx" src="@/assets/img/order/wx.png"/>
 				</el-radio>
-				<el-radio label="zfb" >
+				<el-radio label="ali" >
 					<img class="pay-type--zfb" src="@/assets/img/order/zfb.png"/>
 				</el-radio>
 			</el-radio-group>
@@ -175,7 +175,7 @@ export default {
 	&--wx{
 		width: 130px;
 	}
-	&--zfb{
+	&--ali{
 		width:92px
 	}
 }

plugins/api/pay.js

@@ -22,5 +22,5 @@ export const ApiPostWxPayCdoeImg = (data) =>
  * 获取支付宝支付二维码
  * @param {*} data 
  */
-export const ApiPostZfbPayCdoeImg = (data) => 
+export const ApiPostAliPayCdoeImg = (data) => 
 	ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/aliPay/qr`, data));