提交订单基础逻辑

3 years ago · d2a97c734b
parent e957575ae2
commit d2a97c734b
13 changed files with 259 additions and 17 deletions
--- a/components/BsPay.vue
+++ b/components/BsPay.vue
@ -0,0 +1,77 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-08 00:39:50
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-08 01:49:59
+ * @Description: file content
+-->
+<template>
+	<el-dialog :visible="visible" title="打开微信扫描付款" @open="getCodeImg" @close="close">
+		<div>
+			<span v-if="startSecondNum">{{timeTips}}</span>
+			<div class="code-img">
+				<img :src="imgUrl" v-if="imgUrl"/>
+				<p v-if="!startSecondNum">已超时，请重新下单</p>
+			</div>
+			<p>如支付后没有自动跳转，请点击 <span>完成付款</span></p>
+		</div>
+	</el-dialog>
+</template>
+<script>
+import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
+export default {
+	props : {
+		visible : {
+			type : Boolean,
+			default : false
+		},
+		orderId : {
+			type : Number | String,
+			default : ''
+		},
+		money : {
+			type : String | Number,
+			default : 0
+		}
+	},
+	data(){
+		return {
+			imgUrl : '',
+			timeTips : '',
+			timerStop : null,
+			startSecondNum : 1800
+		}
+	},
+	methods : {
+		async getCodeImg(){
+			this.timerStop = null;
+			const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
+			if(error){
+				return false;
+			}
+			// 待支付 开始倒计时
+			if(this.timerStop){
+				clearTimeout(this.timerStop);
+			}
+			this.timer();
+			this.imgUrl = result.dataInfo.codeImgData;
+		},
+		/**
+		 * 待付款的倒计时
+		 */
+		timer(){
+			if(this.startSecondNum === 0){
+				return false
+			}
+			this.startSecondNum--;
+			let minute = parseInt(this.startSecondNum / 60);
+			let second = parseInt(this.startSecondNum % 60);
+			this.timeTips = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
+			this.timerStop = setTimeout(()=>this.timer(),1000)
+		},
+		close(){
+			this.$emit('cancel');
+		}
+	}
+}
+</script>
--- a/components/UiLineBox.vue
+++ b/components/UiLineBox.vue
--- a/components/UiRadio.vue
+++ b/components/UiRadio.vue
@ -0,0 +1,10 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-07 22:57:24
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-07 22:57:39
+ * @Description: file content
+-->
+<template>
+	<el-radio/>
+</template>
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -2,7 +2,7 @@
 * @Author: ch
 * @Date: 2022-05-04 17:56:39
 * @LastEditors: ch
- * @LastEditTime: 2022-05-04 21:19:27
+ * @LastEditTime: 2022-05-07 23:02:34
 * @Description: file content
 -->
 <template>
@ -21,7 +21,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.layout-center {
+.layout-box {
  width: 1200px;
  margin: 0 auto;
 }
--- a/pages/order/detail/index.vue
+++ b/pages/order/detail/index.vue
@ -0,0 +1,10 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-08 01:14:03
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-08 01:14:31
+ * @Description: file content
+-->
+<template>
+	<div>订单详情页</div>
+</template>
--- a/pages/order/payResult.vue
+++ b/pages/order/payResult.vue
@ -0,0 +1,14 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-08 01:11:33
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-08 01:11:40
+ * @Description: file content
+-->
+<template>
+	<div>
+		<p>支付成功</p>
+		<button>返回首页</button>
+		<button>查看订单</button>
+	</div>
+</template>
--- a/pages/order/submit/index.vue
+++ b/pages/order/submit/index.vue
@ -2,22 +2,118 @@
 * @Author: ch
 * @Date: 2022-05-04 17:30:58
 * @LastEditors: ch
- * @LastEditTime: 2022-05-04 17:31:12
+ * @LastEditTime: 2022-05-08 01:17:18
 * @Description: file content
 -->

 <template>
-	<div>我是订单提交页</div>
+	<div style="padding-top:350px">
+		<h3 class="title">支付方式</h3>
+		<div class="pay-type">
+			<el-radio label="微信支付" />
+			<el-radio label="支付宝支付" />
+		</div>
+		<div v-for="item in orderInfo.products" :key="item.productId">
+			<div>{{item.productName}}</div>
+		</div>
+		<button @click="submit">立即支付</button>
+		<BsPay :visible.sync="payVisible" :orderId="orderId" @cancel="cancelPay"/>
+	</div>
 </template>
 <script>
+import {ApiPostSubmitOrder, ApiGetBeforeOrder, ApiGetBeforeCartOrder} from '@/plugins/api/order';
+import BsPay from '../../../components/BsPay.vue';
 export default {
+	components: { BsPay },
 	data(){
 		return {
+			address : {id:3},
+			orderInfo : {},
+			orderId : '',
+			payVisible : false
+		}
+	},
+	created(){
+		this.getBeforeOrder();
+	},
+	methods : {
+		/**
+		 * 获取预订单信息，将要提交的订单信息
+		 */
+		async getBeforeOrder(){
+			const query = this.$route.query;
+			let res = {};
+			// 购物车结算
+			if(query.mode === 'cart'){
+				res = await ApiGetBeforeCartOrder({
+					cartIds: query.ids,
+					recipientAddressId : this.address.id
+				})
+			}
+			// 立即购买
+			if(query.mode === 'buyNow'){
+				res = await ApiGetBeforeOrder({
+					productSkuId : query.skuId,
+					quantity : query.num,
+					activityId : query.activityId,
+					activityTimeId : query.activityTimeId,
+					// 1正常购买 2活动购买
+					activityType : query.activityType,
+					recipientAddressId : this.address.id
+				});
+			}
+			if(res.error){
+				this.$message.error(res.error.message);
+				return false;
+			}
+			this.orderInfo = res.result;
+
+
+		},
+		/**
+		 * 提交订单
+		 */
+		async submit(){
+			const {query} = this.$route;
 			
+			if(!this.address.id){
+				this.$message.error('请选择收货地址');
+				return false;
+			}
+			const {error, result} = await ApiPostSubmitOrder({
+				orderSource :  4,
+				recipientAddressId : this.address.id,
+				shoppingCartIds : query.ids ? query.ids.split(',') : [],
+				products : this.orderInfo.products.map(i => ({
+					activityId : query.activityId,
+					activityTimeId : query.activityTimeId,
+					productId : i.productId,
+					productSkuId : i.productSkuId,
+					quantity : i.quantity,
+					activityType : query.activityType
+				})),
+				userMessage : this.userMessage
+			});
+			if(error){
+				this.$message.error(error.message);
+				return false;
+			}
+			this.payVisible = true;
+			this.orderId = result.orderId;
+
+		},
+		cancelPay(){
+			this.$router.replace('/order/detail')
 		}
 	}
 }
 </script>
 <style lang="scss" scoped>
-
+.title{
+	margin: 24px 0 13px;
+}
+.pay-type{
+	border: 1px solid #DDDDDD;
+	padding: 30px 70px;
+}
 </style>
--- a/pages/order/submit/module/OrderInfo.vue
+++ b/pages/order/submit/module/OrderInfo.vue
@ -2,7 +2,7 @@
 * @Author: ch
 * @Date: 2022-05-04 17:36:46
 * @LastEditors: ch
- * @LastEditTime: 2022-05-04 17:49:58
+ * @LastEditTime: 2022-05-07 22:42:40
 * @Description: file content
 -->

@ -15,7 +15,8 @@ export default {
 		return {
 			
 		}
-	}
+	},
+	
 }
 </script>
 <style lang="scss" scoped>
--- a/plugins/api/order.js
+++ b/plugins/api/order.js
@ -4,10 +4,11 @@
 * @Author: ch
 * @Date: 2022-05-04 18:17:25
 * @LastEditors: ch
- * @LastEditTime: 2022-05-07 10:29:48
+ * @LastEditTime: 2022-05-07 23:27:49
 * @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`;
@ -19,20 +20,20 @@ const APPID = 'wx0643970a8e86d028';
 * @param {*} params 
 */
 export const ApiGetOrderList = (params) => 
-	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/page`, params));
+	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/page`, {params}));
 /**
 * 获取立即购买预订单
 * @param {*} data 
 */
-export const ApiGetBeforeOrder = (data) =>
-	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/buyAdvanceOrder`, data));
+export const ApiGetBeforeOrder = (params) =>
+	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/buyAdvanceOrder`, {params}));

 /**
 * 获取购物车预订单
 * @param {*} data 
 */
-export const ApiGetBeforeCartOrder = (data) =>
-	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/cartAdvanceOrder`, data));
+export const ApiGetBeforeCartOrder = (params) =>
+	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/cartAdvanceOrder`, {params}));

 /**
 * 订单详情
--- a/plugins/api/wx.js
+++ b/plugins/api/wx.js
@ -0,0 +1,17 @@
+/*
+ * @Author: ch
+ * @Date: 2022-05-08 00:44:22
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-08 00:47:55
+ * @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}/pay/wxPay/nativeImage`, data));
--- a/plugins/axiosTk.js
+++ b/plugins/axiosTk.js
@ -2,7 +2,7 @@
 * @Author: ch
 * @Date: 2022-05-04 17:11:07
 * @LastEditors: ch
- * @LastEditTime: 2022-05-04 21:50:14
+ * @LastEditTime: 2022-05-07 23:59:45
 * @Description: file content
 */
 let axiosTk = null;
@ -15,6 +15,22 @@ export default function ({$axios, store}, inject) {
 		config.headers.Authorization = store.state.token;
 		return config;
 	});
+	$axiosTk.onResponse(response => {
+		const result = response.data;
+		if(response.status === 200){
+			if(result.code === 'SUCCESS'){
+				return result.data;
+			}
+			if(result.code === 'TOKEN_FAIL'){
+				alert('这里要弹登录')
+				store.commit('SET_TOKEN', '');
+				return result;
+			}
+			return Promise.reject(result);
+		}
+		return Promise.reject({message:'请求出错'});
+		
+	  });
 	inject('$axiosTk', $axiosTk);
 	axiosTk = $axiosTk;
 	
--- a/plugins/storeStorage.js
+++ b/plugins/storeStorage.js
@ -4,7 +4,7 @@
 * @Author: ch
 * @Date: 2022-05-04 21:15:17
 * @LastEditors: ch
- * @LastEditTime: 2022-05-07 11:05:11
+ * @LastEditTime: 2022-05-07 22:33:57
 * @Description: 服务端没有localStorage对象，在Sotre中不能直接取值，在plugins中统一为state做一次初始取值处理
 */
 import { TOKEN } from "./config/sotrageKey";
--- a/store/index.js
+++ b/store/index.js
@ -2,11 +2,11 @@
 * @Author: ch
 * @Date: 2022-05-04 20:35:20
 * @LastEditors: ch
- * @LastEditTime: 2022-05-04 21:39:42
+ * @LastEditTime: 2022-05-07 22:33:28
 * @Description: file content
 */

-import { TOKEN } from "../plugins/config/localKey";
+import { TOKEN } from "@/plugins/config/sotrageKey";


 export const state = () => ({