支付倒计时修改,订单详情步骤条

assets/scss/global.scss

@@ -35,7 +35,13 @@ a { text-decoration:none;
   color: #333;
   &:hover { text-decoration:none;}
 }
-.layout-box {
+.c-white-main {
   width: 1200px;
   margin: 0 auto;
 }
+.c-grey-main{
+  width: 1200px;
+  margin: 0 auto;
+  background: #fff;
+
+}

components/BsPay.vue

@@ -2,14 +2,14 @@
  * @Author: ch
  * @Date: 2022-05-08 00:39:50
  * @LastEditors: ch
- * @LastEditTime: 2022-05-09 21:37:07
+ * @LastEditTime: 2022-05-10 11:31:50
  * @Description: file content
 -->
 <template>
 	<el-dialog title="打开微信扫描付款" width="380px" class="box" center
 		 :visible.sync="myVisible" @open="getCodeImg" @close="close">
 		<div class="pay">
-			<span class="pay--timer" v-if="startSecondNum">{{timerTxt}}</span>
+			<span class="pay--timer">{{timer}}</span>
 			<UiMoney class="money" sufSize="14px" preSize="14px" size="20px" 
 				float suffix prefix :money="39"/>
 			<div class="pay--code">
@@ -34,6 +34,10 @@ export default {
 			type : Number | String,
 			default : ''
 		},
+		timer : {
+			type : String,
+			default : '',
+		},
 		money : {
 			type : String | Number,
 			default : 0
@@ -43,8 +47,6 @@ export default {
 		return {
 			imgUrl : '',
 			timerTxt : '',
-			timerStop : null,
-			startSecondNum : 0
 		}
 	},
 	computed:{
@@ -59,32 +61,12 @@ export default {
 	},
 	methods : {
 		async getCodeImg(){
-			this.startSecondNum = 1800;
-			// 待支付 开始倒计时
-			if(this.timerStop){
-				clearTimeout(this.timerStop);
-			}
-			this.timerStop = null;
 			const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
 			if(error){
 				return false;
 			}
-			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.timerTxt = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
-			this.timerStop = setTimeout(()=>this.timer(),1000)
-		},
 		close(){
 			this.$emit('cancel');
 		},

components/UIGoodsInfo.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-08 14:41:42
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 15:11:29
+ * @LastEditTime: 2022-05-09 22:01:52
  * @Description: file content
 -->
 <template>
@@ -12,7 +12,7 @@
 		</div>
 		<p>
 			<b>{{goods.productName}}</b>
-			<span>{{goods.skuDescribe}}{{goods.productName}}</span>
+			<span>{{goods.skuDescribe}}</span>
 		</p>
 	</div>
 </template>

pages/account/index.vue

@@ -2,14 +2,17 @@
  * @Author: ch
  * @Date: 2022-05-08 17:48:36
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 20:03:35
+ * @LastEditTime: 2022-05-09 22:06:37
  * @Description: file content
 -->
 <template>
+	<div class="c-white-main" style="padding-top:350px">
 		<div class="account">
 			<div class="account--nav">左侧栏</div>
 			<nuxt-child class="account--main"/>
 		</div>
+	</div>
+	
 </template>
 <script>
 export default {

pages/account/index/order/detail/module/StatusInfo.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-09 14:41:37
  * @LastEditors: ch
- * @LastEditTime: 2022-05-09 21:38:57
+ * @LastEditTime: 2022-05-10 11:38:35
  * @Description: file content
 -->
 <template>
@@ -20,7 +20,7 @@
 			</template>
 			</div>
 			<Cancel :visible.sync="cancelVisible" :orderId="orderInfo.orderId" @cancel="cancel"/>
-			<BsPay :visible.sync="payVisible" :orderId="orderInfo.orderId" @finish="payFinish"/>
+			<BsPay :visible.sync="payVisible" :orderId="orderInfo.orderId" :timer="ctxCon.tips" @finish="payFinish"/>
 		</div>
 </template>
 <script>

pages/account/index/order/detail/module/StatusStep.vue

@@ -2,21 +2,22 @@
  * @Author: ch
  * @Date: 2022-05-09 14:41:37
  * @LastEditors: ch
- * @LastEditTime: 2022-05-09 19:55:10
+ * @LastEditTime: 2022-05-10 10:53:08
  * @Description: file content
 -->
 <template>
 	<ul class="step">
-		<li v-for="item in steps" :key="item.operationType">
+		<li v-for="item in steps" :key="item.id" :class="item.active && 'active'">
-			<img src="@/assets/img/account/order_status_1.png"/>
+			<img :src="item.active ? item.iconActive :item.icon"/>
-			<b>{{item.operationTypeDesc}}</b>
+			<b>{{item.name}}</b>
-			<span>{{item.createTime}}</span>
+			<span>{{item.date}}</span>
-			<span>{{item.createTime}}</span>
+			<span>{{item.time}}</span>
 		</li>
 	</ul>
 </template>
 <script>
-import UiButton from '../../../../../../components/UiButton.vue'
+import UiButton from '../../../../../../components/UiButton.vue';
+import {FormatDate} from '@/plugins/utils'
 export default {
 	components: { UiButton },
 	props: {
@@ -31,16 +32,79 @@ export default {
 	},
 	computed:{
 		steps(){
-			const normalStep = [
+			const defaultStep = [
-				{type : 1, name : '待付款' },
+				{
-				{type : 6, name : '支付订单' },
+					id : 1, name : '提交订单', 
-				{type : 7, name : '平台发货' },
+					icon: require('@/assets/img/account/order_status_1.png'),
-				{type : 1, name : '确认收货' },
+					iconActive : require('@/assets/img/account/order_status_1_active.png')
-				{type : 1, name : '交易完成' },
+				},
-				{type : 2, name : '交易关闭' }
+				{
+					id : 6, name : '支付订单' , 
+					icon: require('@/assets/img/account/order_status_2.png'),
+					iconActive : require('@/assets/img/account/order_status_2_active.png')
+				},
+				{
+					id : 7, name : '平台发货' , 
+					icon: require('@/assets/img/account/order_status_3.png'),
+					iconActive : require('@/assets/img/account/order_status_3_active.png')
+				},
+				{
+					id : 8, name : '确认收货' , 
+					icon: require('@/assets/img/account/order_status_4.png'),
+					iconActive : require('@/assets/img/account/order_status_4_active.png')
+				},
 			];
+			let showStep = [];
+			const logs = this.orderInfo.orderLogs;
+			if(!logs){
 				return [];
 			}
+			if(this.orderInfo.orderStatus === 2){
+				logs.forEach(item => {
+					const cur = defaultStep.find(i => i.id === item.operationType);
+					if(cur){
+						showStep.push({
+							...cur,
+							date : FormatDate(item.createTime,'yyyy-mm-dd'),
+							time : FormatDate(item.createTime, 'hh:ii:ss'), 
+							active:true
+						});
+					}
+				});
+				const createTime = logs[logs.length - 1].createTime;
+				showStep.push({
+					type:-1, name: '交易关闭', active: true,
+					date : FormatDate(createTime,'yyyy-mm-dd'),
+					time : FormatDate(createTime, 'hh:ii:ss'),  
+					icon: require('@/assets/img/account/order_status_close.png'),
+					iconActive : require('@/assets/img/account/order_status_close.png')
+				});
+				
+			}else{
+				showStep = defaultStep.map(item => {
+					const cur = logs.find(i => i.operationType === item.id);
+					if(cur){
+						item.active = true;
+						item.date = FormatDate(cur.createTime,'yyyy-mm-dd');
+						item.time = FormatDate(cur.createTime, 'hh:ii:ss'); 
+						item.createTime = cur.createTime;
+					}
+					return item;
+				})
+				let lastLog = logs[logs.length - 1];
+				let lastStep = {
+					type:-1, name: '交易完成', 
+					icon: require('@/assets/img/account/order_status_5.png'),
+					iconActive : require('@/assets/img/account/order_status_5_active.png')
+				}
+				if(lastLog.id === 8){
+					lastStep.createTime = lastLog.createTime;
+					lastStep.active = true;
+				}
+				showStep.push(lastStep);
+			}
+			return showStep;
+		}
 	},
 	methods:{
 	}
@@ -66,6 +130,12 @@ export default {
 		span{
 			display: block;
 			color: #666;
+			font-size: 12px;
+		}
+		&.active{
+			b{
+				color: #FF875B;
+			}
 		}
 	}
 }

pages/order/payResult.vue

@@ -2,13 +2,61 @@
  * @Author: ch
  * @Date: 2022-05-08 01:11:33
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 01:11:40
+ * @LastEditTime: 2022-05-09 22:27:35
  * @Description: file content
 -->
 <template>
+	<div class="c-white-main" style="padding-top:350px">
+		<img class="icon" src="@/assets/img/order/pay_success.png" />
+		<p>交易成功</p>
 		<div>
-		<p>支付成功</p>
+			<UiButton type="grey" @click="goHome" :radius="true">返回首页</UiButton>
-		<button>返回首页</button>
+		</div>
-		<button>查看订单</button>
 	</div>
 </template>
+<script>
+import UiButton from '../../components/UiButton.vue';
+import {ApiGetOrderPaySatus} from '@/plugins/api/order';
+export default {
+	components: { UiButton },
+	data(){
+		return {
+			orderInfo : {},
+			reuqestNum : 0
+		}
+	},
+	methods:{
+		async getOrderInfo(){
+			this.reuqestNum++;
+			const {error, result} = await ApiGetOrderPaySatus({orderId : this.$route.query.id});
+			if(error){
+				this.$message.warning(error.message);
+				return false
+			}
+			if(!result.isSuccess && this.reuqestNum < 5){
+				setTimeout(()=>{
+					this.getOrderInfo();
+				}, 1000)
+				return false;
+			}
+			this.orderInfo = result;
+		},
+		goHome(){
+			this.$router.replace('/');
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+.c-white-main{
+	text-align: center;
+	padding-bottom: 40px;
+}
+.icon{
+	width: 239px;
+}
+p{
+	margin: 10px 0 25px 0;
+	color: #999;
+}
+</style>

pages/order/submit/index.vue

@@ -2,12 +2,12 @@
  * @Author: ch
  * @Date: 2022-05-04 17:30:58
  * @LastEditors: ch
- * @LastEditTime: 2022-05-09 21:41:07
+ * @LastEditTime: 2022-05-10 11:37:51
  * @Description: file content
 -->
 
 <template>
-	<div style="padding-top:350px">
+	<div class="c-white-main" style="padding-top:350px">
 		<h3 class="title">支付方式</h3>
 		<div class="pay-type">
 			<el-radio label="微信支付" />
@@ -20,7 +20,8 @@
 		<div class="pay">
 			<UiButton radius type="red_panel" @click="submit">立即支付</UiButton>
 		</div>
-		<BsPay :visible.sync="payVisible" :orderId="orderId" @cancel="finishPay" @finish="finishPay"/>
+		<BsPay :visible.sync="payVisible" :orderId="payOrder.orderId" :timer="payTimerTxt"
+			@cancel="cancelPay" @finish="finishPay"/>
 	</div>
 </template>
 <script>
@@ -37,9 +38,11 @@ export default {
 		return {
 			address : {id:3},
 			orderInfo : {},
-			orderId : '',
 			userMessage : '',
-			payVisible : false
+			payOrder : {},
+			payVisible : false,
+			payTimerTxt : '',
+			payTimerStop : null
 		}
 	},
 	mounted(){
@@ -109,11 +112,43 @@ export default {
 				return false;
 			}
 			this.payVisible = true;
-			this.orderId = result.orderId;
+			this.payOrder = result;
+			// 待支付 开始倒计时
+			if(this.payTimerStop){
+				clearTimeout(this.payTimerStop);
+			}
+			this.calcTimerStartSecondNum();
 
 		},
+		/**
+		 * 计算倒计时开始秒数
+		 */
+		calcTimerStartSecondNum(){
+			let expireTime = (new Date(this.payOrder.expireTime.replace(/-/g,'/'))).getTime(),
+				curTime = (new Date(this.payOrder.serverTime.replace(/-/g,'/'))).getTime(),
+				second = Math.floor((expireTime - curTime) / 1000);
+			this.payStartSecondNum = second > 0 ? second : 0;
+			this.timer();
+		},
+		/**
+		 * 待付款的倒计时
+		 */
+		timer(){
+			if(this.payStartSecondNum == 0){
+				this.$emit('close');
+				return;
+			}
+			this.payStartSecondNum--;
+			let minute = parseInt(this.payStartSecondNum / 60);
+			let second = parseInt(this.payStartSecondNum % 60);
+			this.payTimerTxt = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
+			this.payTimerStop = setTimeout(()=>this.timer(),1000)
+		},
+		cancelPay(){
+			this.$router.replace(`/account/order/detail?id=${this.payOrder.orderId}`)
+		},
 		finishPay(){
-			this.$router.replace(`/account/order/detail?id=${this.orderId}`)
+			this.$router.replace(`/order/payResult?id=${this.payOrder.orderId}`)
 		}
 	}
 }