pet-front/pages/myOrdersManage/components/orderListByData.vue

<template>
	<up-list @scrolltolower="scrolltolower">
		<template v-for="(item, index) in orderList" :key="index">
			<view class="date-label">
				<view class="date-box">{{ item.date }}</view>
				<view class="order-tag">
					<template v-if="item.orders[0].status === 'completed'">已完成{{ item.orders.length }}单</template>
					<template v-else>待上门{{ item.orders.length }}单</template>
				</view>
			</view>

			<view class="timeline-container">
				<view class="timeline-line" :class="{'timeline-line-completed': item.orders[0].status === 'completed'}">
				</view>
				<up-list-item v-for="(order, orderIndex) in item.orders" :key="orderIndex">
					<view class="timeline-item" :class="{'item-completed': order.status === 'completed'}">
						<view class="timeline-dot"></view>
						<view class="mb28 container-list-item">
							<view class="order-time-tag"
							:class="{'order-time-tag-completed' : order.status === 'completed'}">
								<!-- <view class="time-box">{{ order.time }}</view> -->
								<view class="order-status">
									<view class="status-icon"></view>
									<view>
										<!-- {{ order.count }}单
{{ order.count }}单 -->
										<template v-if="order.status === 'completed'">已完成</template>
										<template v-else>待上门</template>
									</view>
								</view>
							</view>

							<view class="container-list">
								<view class="flex-between flex">
									<view class="address-info flex">
										<view class="address-icon"></view>
										<view class="address-text">{{ order.address }}</view>
									</view>
									<view class="expand-btn" @click="toggleExpand(index, orderIndex)">
										{{ order.isExpanded ? '收起' : '展开' }} <text
											class="expand-icon">{{ order.isExpanded ? '∧' : '∨' }}</text>
									</view>
								</view>

								<view v-if="order.isExpanded" class="pet-info">
									<view class="pet-title">陪伴对象</view>
									<view class="pet-list">
										<view v-for="(pet, petIndex) in order.pets" :key="petIndex" class="pet-item">
											<view class="pet-avatar">
												<up-image width="70px" height="70px" :src="pet.avatar"
													shape="circle"></up-image>
											</view>
											<view class="pet-detail">
												<view class="pet-name">{{ pet.name }} <text
														class="pet-tag" :class="{'pet-tag-female': pet.gender === 'female', 'pet-tag-male': pet.gender === 'male'}">{{ pet.gender === 'female' ? '♀' : '♂' }}</text></view>
												<view class="pet-desc">{{ pet.desc }}</view>
											</view>
										</view>
									</view>

									<view class="address-detail mb28">{{ order.fullAddress }}</view>

									<view class="action-buttons flex flex-between">
										<up-button type="primary" text="打卡" v-if="false" @click="toClock" shape="circle"
											class="mr20" color="var(--status-color)"></up-button>
										<up-button type="primary" text="查看订单详情" @click="toDetail" shape="circle"
											class="mr20" color="var(--status-color)"></up-button>
										<up-button type="primary" text="查看宠物档案" @click="toPet" shape="circle"
											class="mr20" color="var(--status-color)"></up-button>
										<up-button type="primary" text="服务档案" @click="toService" shape="circle"
											color="var(--status-color)"></up-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</up-list-item>
			</view>
		</template>
	</up-list>
</template>

<script setup>
	import {
		ref,
		reactive,
	} from 'vue';

	const {
		list
	} = defineProps({
		list: {
			type: Array,
			required: true
		},
	});


	// 模拟订单数据
	const orderList = reactive([{
			date: '12-04',
			orders: [{
				time: '12-04',
				count: 2,
				status: 'completed', // 已完成状态
				address: '湖南省长沙市雨花区人民东路',
				fullAddress: '湖南省长沙市雨花区人民东路88号',
				isExpanded: true,
				pets: [{
						avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
						name: '小咪',
						gender: 'female',
						desc: '中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩'
					},
					{
						avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
						name: 'Billion',
						gender: 'male',
						desc: '狗狗(小型狗) | 上门喂养+陪玩'
					}
				]
			},
			{
				time: '12-04',
				count: 2,
				status: 'completed', // 已完成状态
				address: '湖南省长沙市雨花区人民东路',
				fullAddress: '湖南省长沙市雨花区人民东路88号',
				isExpanded: true,
				pets: [{
						avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
						name: '小咪',
						gender: 'female',
						desc: '中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩'
					},
					{
						avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
						name: 'Billion',
						gender: 'male',
						desc: '狗狗(小型狗) | 上门喂养+陪玩'
					}
				]
			}]
		},
		{
			date: '12-05',
			orders: [{
				time: '12-05',
				count: 1,
				status: 'completed', // 已完成状态
				address: '湖南省长沙市雨花区人民东路',
				fullAddress: '湖南省长沙市雨花区人民东路88号',
				isExpanded: false,
				pets: [{
					avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
					name: '小黑',
					gender: 'male',
					desc: '中华田园犬(小型犬) | 专业喂养+提前熟悉+陪玩'
				}]
			}]
		},
		{
			date: '12-08',
			orders: [{
				time: '12-08',
				count: 1,
				status: 'pending', // 待上门状态
				address: '湖南省长沙市雨花区人民东路',
				fullAddress: '湖南省长沙市雨花区人民东路88号',
				isExpanded: false,
				pets: [{
					avatar: 'https://cdn.catmdogd.com/Work/image/work/tx.png',
					name: '小白',
					gender: 'female',
					desc: '中华田园猫 | 专业喂养+提前熟悉+陪玩'
				}]
			}]
		}
	]);

	// 展开/收起订单详情
	function toggleExpand(dateIndex, orderIndex) {
		orderList[dateIndex].orders[orderIndex].isExpanded = !orderList[dateIndex].orders[orderIndex].isExpanded;
	}

	// 滚动到底部加载更多
	const scrolltolower = () => {
		// 实际项目中这里应该调用API加载更多数据
		console.log('加载更多数据');
	}

	// 页面跳转函数
	function toClock() {
		uni.navigateTo({
			url: "/otherPages/myOrdersManage/clock/index"
		})
	}

	function toDetail() {
		uni.navigateTo({
			url: "/otherPages/orderTakingManage/detail/index"
		})
	}

	function toPet() {
		uni.navigateTo({
			url: "/otherPages/orderTakingManage/pet/index"
		})
	}

	function toService() {
		uni.navigateTo({
			url: "/otherPages/myOrdersManage/service/index"
		})
	}
</script>

<style scoped lang="scss">
	@import "../index";

	.date-label {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		position: relative;
		z-index: 3;

		.date-box {
			background: #333333;
			color: #FFFFFF;
			padding: 8rpx 16rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			margin-right: 20rpx;
		}

		.order-tag {
			color: #7D8196;
			font-size: 24rpx;
		}
	}

	.order-time-tag {
		display: flex;
		align-items: center;
		background: rgba(#FFAA48, 0.2);
		padding: 22rpx 42rpx;

		.time-box {
			background: var(--status-color);
			color: #FFFFFF;
			padding: 4rpx 12rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			margin-right: 20rpx;
		}

		.order-status {
			display: flex;
			align-items: center;
			font-size: 24rpx;

			.status-icon {
				width: 24rpx;
				height: 24rpx;
				background: var(--status-color);
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.status-icon-completed {
				background: #4CD964;
			}
		}
	}

	.order-time-tag-completed {
		background: rgba(#4CD964, 0.2);
	}

	.time-box-completed {
		background: #4CD964;
	}

	.address-info {
		display: flex;
		align-items: center;
		margin: 20rpx 0;

		.address-icon {
			width: 36rpx;
			height: 36rpx;
			background: var(--status-color);
			border-radius: 50%;
			margin-right: 12rpx;
		}

		.address-icon-completed {
			background: #4CD964;
		}

		.address-text {
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
		}
	}

	.expand-btn {
		font-size: 26rpx;
		color: #FFAA48;
		font-weight: 500;

		.expand-icon {
			margin-left: 8rpx;
		}
	}

	.expand-btn-completed {
		color: #4CD964;
	}

	.pet-info {
		margin-top: 20rpx;

		.pet-title {
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 16rpx;
		}

		.pet-list {
			.pet-item {
				display: flex;
				margin-bottom: 20rpx;

				.pet-avatar {
					margin-right: 20rpx;
					flex-shrink: 0;
				}

				.pet-detail {
					.pet-name {
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 10rpx;

						.pet-tag {
							background: var(--status-color);
							color: #FFFFFF;
							padding: 2rpx 10rpx;
							border-radius: 20rpx;
							font-size: 20rpx;
							margin-left: 10rpx;
						}
						
						.pet-tag-female {
							background: #FF6B9A;
						}
						
						.pet-tag-male {
							background: #4A90E2;
						}
					}

					.pet-desc {
						font-size: 24rpx;
						color: #7D8196;
					}
				}
			}
		}
	}

	.address-detail {
		background: #F6FAFC;
		border-radius: 8rpx;
		padding: 14rpx 20rpx;
		font-size: 24rpx;
		color: #7D8196;
		margin: 20rpx 0;
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}


	/* 时间线样式 */
	.timeline-container {
		position: relative;
		padding-left: 40rpx;
		margin-bottom: 30rpx;
		z-index: 1;
	}

	.timeline-line {
		position: absolute;
		left: 20rpx;
		top: 0;
		height: 100%;
		width: 2rpx;
		background-color: #FFAA48;
		z-index: 0;
	}

	.timeline-line-completed {
		background-color: #4CD964;
	}

	.timeline-item {
		position: relative;
		padding-left: 30rpx;
		margin-bottom: 20rpx;
	}

	.timeline-dot {
		position: absolute;
		left: -10rpx;
		top: 30rpx;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #FFAA48;
		z-index: 2;
		border: 4rpx solid #FFF;
	}

	.timeline-dot-completed {
		background-color: #4CD964;
	}

	/* 默认状态颜色变量 */
	.timeline-item {
		--status-color: #FFAA48;
	}

	/* 添加状态类，集中控制样式 */
	.item-completed {
		--status-color: #4CD964;
	}
</style>