订单倒计时

pages/bookShop/orderList.vue

@@ -10,12 +10,17 @@
 				:class="orderListTab==item.value?'ordStyle':''">{{item.name}}</view>
 		</view>
 
-		<view class="orderList">
+		<view class="orderList" v-if="orderList.length > 0">
 			<view class="orderItem" v-for="(ifex,inten) in orderList">
 				<text class="orderState orderState0"  v-if="ifex.orderStatus==0">待支付</text>
 				<text class="orderState orderState1" v-if="ifex.orderStatus==1">待发货</text>
 				<text class="orderState orderState2" v-if="ifex.orderStatus==2">待收货</text>
 				<text class="orderState orderState3" v-if="ifex.orderStatus==3">已完成</text>
+				<text class="orderState orderState5" v-if="ifex.orderStatus==5">已超时</text>
+				<view class="guoqi flexbox" v-if="ifex.orderStatus==0 && ifex.overTime > 0">
+					<text>剩余支付时间：</text>
+					<uni-countdown background-color="#ff5500" color="#ffffff" :font-size="14" :show-day="false" :hour="0" :minute="0" :second="ifex.overTime" @timeup="countDown"></uni-countdown>
+				</view>
 				<view class="flexbox orderSn">
 					<text class="">订单编号: {{ifex.orderSn}}</text>
 				</view>				
@@ -72,6 +77,9 @@
 				</view>
 			</view>
 		</view>
+		<view class="" v-else style=" margin-top: 250rpx;">
+			<u-divider text="暂无列表数据"></u-divider>
+		</view>
 <z-navigation></z-navigation>
 <music-play :playData="playData"></music-play>
 	</view>
@@ -106,7 +114,11 @@ import {
 				}, {
 					name: '已完成',
 					value: 3
-				}],
+				},{
+					name: '已超时',
+					value: 5
+				},
+				],
 				orderListTab: 9,
 				orderList: [],
 				iapChannel:{},
@@ -119,6 +131,8 @@ import {
 			this.getOrderList()
 			this.checkIapOrders()    //检查未完成的苹果支付订单
 			this.getOS()
+			// this.countDown()
+			
 		},
 		computed: {
 			...mapState(['userInfo']),
@@ -133,6 +147,11 @@ import {
 		},
 		methods: {
 			...mapMutations(['setUserInfo']),
+			// 倒计时回调
+			countDown(){				
+					console.log('重新刷新订单')
+					this.getOrderList()				
+			},
 			// 获得操作系统
 			getOS(){
 				let oprateOs = ''
@@ -171,8 +190,17 @@ import {
 			getOrderList() {
 				this.$http
 					.post(`book/buyorder/appUserGetlist?userId=${this.userInfo.id}&orderStatus=${this.orderListTab}`)
-					.then(res => {	
+					.then(res => {
+						res.page.list.forEach((item,index) => {								
+							var seconds = item.timestamp + 30 * 60 + 2    // 过期时间 30分钟+2
+							// var seconds = item.timestamp + 30 + 2    // 过期时间 30秒
+							var nowSeconds = Math.floor(new Date().getTime() / 1000);  // 单位秒
+							item.overTime = seconds - nowSeconds
+							// console.log(item.overTime,'item.overTime')
+							
+						})
 						this.orderList = res.page.list
+						console.log(this.orderList,'订单列表')
 					})
 			},
 
@@ -510,16 +538,15 @@ import {
 
 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
+	.guoqi{ font-size: 28rpx; align-items: center; color: red; float: right; line-height: 40rpx;}
 	.flexbox{display: flex;}
-	.orderTabs {
-		
-		margin: 100rpx 0 0 0;
-		width: 100%;
-		
-		padding: 0 3% 3% 3%;
+	.orderTabs { 		
+		margin: 60rpx 0 0 0;
+		width: 100%;		
+		padding: 30rpx 3% 3% 3%;
+		// padding-top: 100rpx;
 		position: fixed;
-		top: 80rpx;
-		
+		top: 80rpx;		
 		background-color: #fff;
 		z-index: 100;
 
@@ -566,6 +593,7 @@ import {
 			.orderState1{background-color: #409eff;}
 			.orderState2{background-color: #f56c6c;}
 			.orderState3{background-color: #67c23a;}
+			.orderState5{background-color: #787878;}
 			.orderContent {
 				margin-bottom: 20rpx;