添加支付宝支付

components/BsPay.vue

@@ -2,32 +2,43 @@
  * @Author: ch
  * @Date: 2022-05-08 00:39:50
  * @LastEditors: ch
- * @LastEditTime: 2022-06-15 16:40:14
+ * @LastEditTime: 2022-06-29 15:34:08
  * @Description: file content
 -->
 <template>
-	<el-dialog title="打开微信扫描付款" width="380px" class="box" center
+	<el-dialog :title="title" width="380px" class="box" center
 		 :visible.sync="myVisible" @open="open" @close="close" :modal="false">
-		<div class="pay">
+		<div class="pay-type" v-if="!myPayType">
+			<el-radio-group v-model="myPayType">
+				<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" >
+					<img class="pay-type--zfb" src="@/assets/img/order/zfb.png"/>
+				</el-radio>
+			</el-radio-group>
+		</div>
+		<div class="pay" v-else>
 			<span class="pay--timer">{{timerTxt}}</span>
 			<UiMoney class="money" sufSize="14px" preSize="14px" size="20px" 
 				float suffix prefix :money="orderInfo.payAmount"/>
 			<div class="pay--code">
 				<img :src="imgUrl" v-if="imgUrl"/>
-				<!-- <p v-if="!timer">已超时，请重新下单</p> -->
 			</div>
 			<p class="pay--tips">如支付后没有自动跳转，请点击 <span class="pay--finish" @click="finish">完成付款</span></p>
+			<UiButton class="pay--btn" type='yellow_gradual' @click="myPayType = null">其他支付方式</UiButton>
 		</div>
 	</el-dialog>
 </template>
 <script>
-import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
+import {ApiPostWxPayCdoeImg, ApiPostZfbPayCdoeImg} from '@/plugins/api/pay'
 import {ApiGetOrderDetail} from '@/plugins/api/order'
 import UiMoney from './UiMoney.vue';
+import UiButton from './UiButton.vue';
 import QRcode from 'qrcode';
 
 export default {
-	components: { UiMoney },
+	components: { UiMoney, UiButton },
 	props : {
 		visible : {
 			type : Boolean,
@@ -36,6 +47,10 @@ export default {
 		orderId : {
 			type : Number | String,
 			default : ''
+		},
+		payType:{
+			type : String | null,
+			require : true
 		}
 	},
 	data(){
@@ -45,6 +60,7 @@ export default {
 			timerTxt : '',
 			startSecondNum : 0,
 			timerStop : null,
+			myPayType : null
 		}
 	},
 	computed:{
@@ -55,12 +71,25 @@ export default {
 			set(val){
 				this.$emit('update:visible', val)
 			}
+		},
+		title(){
+			let str = '请选择支付方式';
+			if(this.myPayType === 'wx'){
+				str = '打开微信扫描付款';
+			}else if(this.myPayType === 'zfb'){
+				str = '打开支付宝扫描付款';
+			};
+			return str;
 		}
 	},
 	methods : {
 		open(){
 			this.getOrderInfo();
-			this.getCodeImg();
+			this.myPayType = this.payType;
+			if(this.myPayType){
+				this.getQrCode();
+			}
+			
 		},
 		/**
 		 * 获取订单最新信息
@@ -82,8 +111,32 @@ export default {
 
 			}
 		},
-		async getCodeImg(){
-			const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
+		getQrCode(){
+			if(this.myPayType == 'wx'){
+				this.getWxCodeImg();
+			}else if(this.myPayType === 'zfb'){
+				this.getZfbCodeImg();
+			}
+		},
+		/**
+		 * 支付宝二维码
+		 */
+		async getZfbCodeImg(){
+			const {error, result} = await ApiPostZfbPayCdoeImg({orderId : this.orderId});
+			if(error){
+				return false;
+			}
+			QRcode.toDataURL(result.payDataInfo.qrCodeData,{
+				width : 200
+			}, (err, url)=>{
+				this.imgUrl = url;
+			})
+		},
+		/**
+		 * 微信二维码
+		 */
+		async getWxCodeImg(){
+			const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId});
 			if(error){
 				return false;
 			}
@@ -123,6 +176,7 @@ export default {
 		close(){
 			clearInterval(this.timerStop);
 			this.timerStop = null;
+			this.myPayType = this.payType;
 			this.$emit('cancel');
 		},
 		finish(){
@@ -136,6 +190,25 @@ export default {
 .box{
 	background: rgba(0,0,0, .5);
 }
+.pay-type{
+	width: 270px;
+	padding: 0 30px;
+	&--item{
+		width: 270px;
+		height: 56px;
+		display: flex;
+		align-items: center;
+		border: 1px solid #ccc;
+		padding-left: 55px;
+		margin-bottom: 20px;
+	}
+	&--wx{
+		width: 108px;
+	}
+	&--zfb{
+		width: 78px;
+	}
+}
 .pay{
 	text-align: center;
 	&--code{
@@ -163,6 +236,12 @@ export default {
 		color: #FF512B;
 		cursor: pointer;
 	}
+	&--btn{
+		border-radius: 4px;
+		width: 143px;
+		height: 32px;
+		margin-top: 20px;
+	}
 }
 .money{
 	color: #FF512B;

pages/order/submit/index.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:30:58
  * @LastEditors: ch
- * @LastEditTime: 2022-05-27 19:54:39
+ * @LastEditTime: 2022-06-29 15:39:44
  * @Description: file content
 -->
 
@@ -12,11 +12,17 @@
 			<h3 class="title">收货地址</h3>
 			<BsAddress v-model="address"/>
 		</template>
-		<!-- <h3 class="title">支付方式</h3>
+		<h3 class="title">支付方式</h3>
 		<div class="pay-type">
-			<el-radio label="微信支付" />
-			<el-radio label="支付宝支付" />
-		</div> -->
+			<el-radio-group v-model="payType">
+				<el-radio label="wx" >
+					<img class="pay-type--wx" src="@/assets/img/order/wx.png"/>
+				</el-radio>
+				<el-radio label="zfb" >
+					<img class="pay-type--zfb" src="@/assets/img/order/zfb.png"/>
+				</el-radio>
+			</el-radio-group>
+		</div>
 		<h3 class="title">确认商品信息</h3>
 		<OrderInfo :products="orderInfo.products" />
 		<Message :orderInfo="orderInfo" :message.sync="userMessage"/>
@@ -24,7 +30,7 @@
 		<div class="pay">
 			<UiButton radius type="red_panel" @click="submit">立即支付</UiButton>
 		</div>
-		<BsPay :visible.sync="payVisible" :orderId="payOrder.orderId"
+		<BsPay :visible.sync="payVisible" :payType="payType" :orderId="payOrder.orderId"
 			@cancel="cancelPay" @finish="finishPay" />
 	</div>
 </template>
@@ -45,6 +51,7 @@ export default {
 			orderInfo : {},
 			userMessage : '',
 			payOrder : {},
+			payType : 'wx',
 			payVisible : false,
 			payTimerTxt : '',
 			payTimerStop : null,
@@ -165,6 +172,12 @@ export default {
 .pay-type{
 	border: 1px solid #DDDDDD;
 	padding: 30px 70px;
+	&--wx{
+		width: 130px;
+	}
+	&--zfb{
+		width:92px
+	}
 }
 .pay{
 	text-align: right;

plugins/api/pay.js

@@ -0,0 +1,26 @@
+/*
+ * @Author: ch
+ * @Date: 2022-05-08 00:44:22
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-29 14:51:00
+ * @Description: file content
+ */
+
+
+import {axiosTk} from "../axiosTk";
+import {ToAsyncAwait} from "@/plugins/utils";
+import ENV from '../config/env';
+
+const BASE_URL = `${ENV.base_url}/mall/trade`;
+/**
+ * 获取微信支付二维码
+ * @param {*} data 
+ */
+export const ApiPostWxPayCdoeImg = (data) => 
+	ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/wxPay/nativeData`, data));
+/**
+ * 获取支付宝支付二维码
+ * @param {*} data 
+ */
+export const ApiPostZfbPayCdoeImg = (data) => 
+	ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/aliPay/qr`, data));

plugins/api/wx.js

@@ -1,17 +0,0 @@
-/*
- * @Author: ch
- * @Date: 2022-05-08 00:44:22
- * @LastEditors: ch
- * @LastEditTime: 2022-06-15 15:07:13
- * @Description: file content
- */
-
-
-import {axiosTk} from "../axiosTk";
-import {ToAsyncAwait} from "@/plugins/utils";
-import ENV from '../config/env';
-
-const BASE_URL = `${ENV.base_url}/mall/trade`;
-
-export const ApiPostPayCdoeImg = (data) => 
-	ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/wxPay/nativeData`, data));