P003-WX-HomeTeacher/education_uni/subpkg/my/order/my_order.vue

<template>
	<view>
		<view class="orderWrapper">
		    <view class="myOrder" v-for="(item, index) in orders" :key="index">
		        <view class="centerContent" @click="gotoDetail(item.orderId)">
		            <view>
		                <text>订单号</text>
		                <text class="orderDetail">{{item.orderId}}</text>
		            </view>
		            <view>
						<uni-row>
							<uni-col :span="17">
								<text>订单内容</text>
								<text class="orderDetail">{{item.requireDetail}}</text>
							</uni-col>
							<uni-col :span="7">
								<view>
								    <text>对方</text>
								    <text class="orderDetail">{{item.studentName}}</text>
								</view>
							</uni-col>
						</uni-row>
		            </view>
		            <view>
						<uni-row>
							<uni-col :span="17">
								<text>日期</text>
								<text class="orderDetail">{{item.datetime}}</text>
							</uni-col>
							<uni-col :span="7">
								<view>
								    <text class="orderDetailStatus">{{item.status}}</text>
								</view>
							</uni-col>
						</uni-row>
		            </view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orders: []
			};
		},
		created() {
			this.getOrdersByUid()
		},
		methods: {
			async getOrdersByUid() {
				const { data: result } = await uni.$http.get('/payment/order-info/list/uid')
				this.orders = result.data.list
				//console.log(this.orders)
				//下面的 new Date().getTime()，后面也要改造从服务器取，不用本机时间
              for(var i = 0;i < this.orders.length; i++){
					let secCount = Math.floor((new Date().getTime() - new Date(this.orders[i].datetime).getTime()) / 1000)
					//console.log(secCount)
					// 判断支付状态, 15分钟 = 900 秒
					if (this.orders[i].status == '未支付' && secCount > 900){
						this.orders[i].status = "超时关闭支付"
					}
			  }
				
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '/subpkg/my/order/my_order_detail?orderId=' + id
				})
			}
		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		height: 100%;
		// background-color: #FFF;
	}
</style>

<style lang="scss" scoped>
/* 设置页面背景 */
.orderWrapper{
    height: 100%;
    // background-color: #E2F0D9;
}
.myOrder{
    display: flex;
    height: 120rpx;
    background-color: #FFF;
    padding: 20rpx;
    font-size: 30rpx;
    margin: 10rpx 30rpx;
    border-radius: 30rpx;
	align-items: center;
	justify-content: center;
}

.centerContent {
	margin-left: 20rpx;
	width: 100%;
}

/* 设置活动内容左边距并加粗 */
.orderDetail,
.orderDetailStatus{
    margin-left: 10rpx;
    font-weight: bold;
}
/* 设置订单状态的字体颜色 */
.orderDetailStatus{
    color: red;
}
</style>