peiwan-uniapp/pages/order/my/components/orderList.vue

<template>
	  <view @click="onOrderDetail(order.id)"  :id="`zp-id-${order.zp_index}`" :key="order.zp_index" v-for="(order,index) in orderList" class="order-card">
	  	<view class="no-box">
			<view class="order-no">
				<u-icon name="order"></u-icon>
				<text class="number">{{ order.no }}</text>
			</view>
			<view class="status">{{order.statusStr}}</view>
		</view> 
		
		<view class="main-box" v-for="item in order.items" :key="item.id">
			<view @tap.stop="onBuy(item.spuId)">
				<u-avatar size="100" :src="item.avatar"></u-avatar>
			</view>
			<view class="right-box">
				<view class="nickname-box">
					<view class="nickname" v-if="item.nickname">{{item.nickname}}</view>
					<view class="nickname" v-else>待接单..</view>
					<view class="info">订单时间：{{order.createTimeStr}}</view> 
					<view class="info">服务内容：{{item.spuName}} {{item.properties.map((property) => property.valueName).join(' ')}}×{{item.count}}</view>
					<view class="info">开始服务时间：{{order.deliveryTimeStr}}</view>
					<view class="info">
						<text>剩余时间：</text>
						<view v-if="order.receiveTime">
							<text v-if="order.end">已结束</text>
							<view v-else>
								<u-count-down :timestamp="order.timestamp" format="DD天HH时mm分ss秒" @end="order.end = true"></u-count-down>
							</view>
						</view>
						<text v-else>暂未接单</text>
					</view>
					<view class="info" v-if="order.status == 40">取消原因：{{order.cancelReason}}</view>
				</view>
				<view class="price-box"> 
					<text class="price">{{order.payPrice}}</text>
					<text>/钻</text>
				</view>
			</view>
		</view>
		
		<view class="bottom-box">
			<view class="btn-box">
				<view v-if="order.buttons.includes('detail')" @tap.stop="onOrderDetail(order.id)" class="btn">查看详情</view>
				<view v-if="order.buttons.includes('unpay')" @tap.stop="onOrderDetail(order.id)" class="btn">取消订单</view>
				<view v-if="order.buttons.includes('cancel')" @tap.stop="onCancel(order.id)" class="btn">取消订单</view>
				<view v-if="order.buttons.includes('buy') && order.items[0].spuId" @tap.stop="onBuy(order.items[0].spuId)" class="btn active">再来一单</view>
				<view v-if="order.buttons.includes('comment')" @tap.stop="onComment(order.id)" class="btn active">评价</view>
				<view v-if="order.buttons.includes('pay')" @tap.stop="onPay(order.payOrderId)" class="btn active">继续支付</view>
			</view>
		</view>
		
	  </view>
  
</template>

<script>
	import sheep from '@/sheep';
	import dayjs from 'dayjs';
	export default {
		components: {
			
		},
		props: {
			virtualList: {
				type: Array,
				default: [],
			},
		},
		emits: ["onCancel"],
		data() {
			return {
				
			}
		},
		computed: {
			orderList() {
				this.virtualList.forEach((order) => order.createTimeStr = sheep.$helper.timeFormat(order.createTime, 'yyyy-mm-dd hh:MM:ss'));
				this.virtualList.forEach((order) => order.deliveryTimeStr = order.deliveryTime ? sheep.$helper.timeFormat(order.deliveryTime, 'yyyy-mm-dd hh:MM:ss') : '');
				this.virtualList.forEach((order) => order.timestamp = order.receiveTime ? sheep.$helper.parseTimeData(order.receiveTime) : 0);
				return this.virtualList;
			},
		},
		methods: {
			// 订单详情
			onOrderDetail(id) { 
			  sheep.$router.go('/pages/order/my/detail', {
			    id,
			  });
			},
			onCancel(orderId) {
			  this.$emit('onCancel', orderId);
			},
			onBuy(id) {
			  if(id){
				  sheep.$router.go('/pages/clerk/detail/index', {
				  				id,
				  });
			  }
			},
			// 评价
			onComment(id) { 
			  sheep.$router.go('/pages/goods/comment/worker/add', {
			    id,
			  });
			},
			// 继续支付
			onPay(payOrderId) {
			  sheep.$router.go('/pages/pay/worker/index', {
			    id: payOrderId,
			  });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-card {
		padding: 10px;
		margin-top: 10px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		flex: 1;
		
		.no-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			padding-bottom: 10px;
			color: rgb(100, 101, 102);
			
			.order-no {
				
				.number {
					margin-left: 5px;
					font-size: 22rpx;
				}
			}
			
			.status {
				font-size: 22rpx;
			}
		}
		
		.main-box {
			display: flex;
			padding: 10px 0;
			border-top: 1px solid #fbf0f0;
			border-bottom: 1px solid #fbf0f0;
			margin-bottom: 10px;
			
			.right-box {
				display: flex;
				justify-content: space-between;
				flex: 1;
				align-items: center;
				margin-left: 10px;
				
				.nickname {
					font-size: 12px;
					font-weight: bold;
					margin-bottom: 10px;
				}
				
				.info {
					font-size: 22rpx;
					color: rgb(100, 101, 102);
					line-height: 22rpx;
					margin-bottom: 5px;
					display: flex;
					align-items: center;
					
					.weixin {
						margin-right: 5px;
					}
				}
				
				.price-box {
					font-size: 22rpx;
					color: rgb(100, 101, 102);
					
					.price {
						font-size: 34rpx;
						font-weight: bold;
						color: var(--ui-BG-Main);
					}
				}
			}
		}
		
		.bottom-box {
			display: flex;
			justify-content: flex-end;
			
			.btn-box {
				display: flex;
				align-items: center;
			}
			
			.btn {
				background-color: #ddd;
				color: rgb(100, 101, 102);
				font-size: 22rpx;
				border-radius: 40px;
				padding: 5px 10px;
				margin-left: 10px;
				min-width: 140rpx;
				display: flex;
				justify-content: center;
			}
			
			.active {
				background-color: var(--ui-BG-Main);
				color: #fff;
			}
		}
	}
</style>