family-education/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="orderContent" @click="gotoDetail(item.orderId)">
		            <view>
		                <text>订单号</text>
		                <text class="orderDetail">{{item.orderId}}</text>
		            </view>
		            <view class="centerContent">
						<uni-row>
							<uni-col :span="14">
								<text>订单内容</text>
								<text class="orderDetail">{{item.requireDetail}}</text>
							</uni-col>
							<uni-col :span="10">
								<view>
								    <text>对方</text>
								    <text class="orderDetail">{{item.studentName}}</text>
								</view>
							</uni-col>
						</uni-row>
		            </view>
		            <view>
						<uni-row>
							<uni-col :span="14">
								<text>订单日期</text>
								<text class="orderDetail">{{item.date}}</text>
							</uni-col>
							<uni-col :span="10">
								<view>
								    <text>订单状态</text>
								    <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
				for (let i = 0; i < this.orders.length; i++) {
					const arr = this.orders[i].datetime.split(" ")
					this.orders[i].date = arr[0]
				}
			},
			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{
    position: relative;
    display: flex;
    height: 160rpx;
    background-color: #FFF2CC;
    padding-left: 20rpx;
    font-size: 28rpx;
    margin: 20rpx;
    border-radius: 20rpx;
}

.centerContent {
	margin: 7px 0;
}

.orderContent{
    height: 140rpx;
	width: 100%;
    padding: 10rpx 0;
}

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