pet-front-order/pages_order/components/order/timelineService.vue

<template>
	<view class="timeline-container">
		<!-- 日期和状态标签 -->
		<view class="date-header">
			<view class="date-box">
				<view class="date-box-color" :style="{'background-color': getTopBgColor()}"></view>
				<view class="date-month-day">{{ formatDate(date).month }}-{{ formatDate(date).day }}</view>
			</view>
			<!-- <view class="status-tag" :class="{'status-tag-pending': status}">

				<image src="/static/images/ydd/icon1.png" 
                mode="aspectFit" 
                v-if="status"
                class="status-icon"></image>

				<image src="/static/images/order/success.png" 
                mode="aspectFit" 
                v-else
                class="status-icon"></image>

				{{ status ? '待上门' : '已完成' }}
			</view> -->
		</view>
		
		<!-- 空状态显示 -->
		<view v-if="!list || list.length === 0" class="empty-state">
    		<text class="empty-text">暂无订单数据</text>
		</view>
		
		<!-- 时间线主体 -->
		<view v-else class="timeline-body" v-for="(item, index) in list" :key="index">
			<view class="timeline-line"></view>
			
			<!-- <view class="time-point">
				<view class="time-icon">
					<image src="/static/images/order/address.png" mode="aspectFit" class="time-image"></image>
				</view>
				<view class="time-text">{{ item.receiverCity }}</view>
				<view class="collapse-icon" @click="toggleServiceCard(index)">
					{{ serviceCardCollapsed[index] ? '展开' : '收起' }} <text class="arrow" :class="{'arrow-up': !serviceCardCollapsed[index]}">▼</text>
				</view>
			</view> -->
			
			<!-- 服务内容卡片 -->
			<view v-if="!serviceCardCollapsed[index]" class="service-card">
				<!-- 服务日期 -->
				<view class="service-section">
					<view class="section-title">
						<view class="title-indicator"></view>
						<text>服务日期</text>
						<text style="margin-left: auto;font-weight: 500;font-size: 24rpx;">订单编号：{{ item.orderId }}</text>
					</view>
					<view class="section-content date-content" :class="{bgSuccessQ : item.status == '2'}">
						{{ dayjs(item.serviceDate).format('YYYY/MM/DD') }}
					</view>
				</view>
				
				<!-- 陪伴对象 -->
				<view class="service-section">
					<view class="section-title">
						<view class="title-indicator"></view>
						<text>陪伴对象</text>
						<view class="collapse-icon" @click="togglePetList(index)">
							{{ petListCollapsed[index] ? '展开' : '收起' }} <text class="arrow" :class="{'arrow-up': !petListCollapsed[index]}">▼</text>
						</view>
					</view>
					<view class="section-content pet-list" :class="{bgSuccessQ : item.status == '2'}" v-if="!petListCollapsed[index]">
						<view v-for="(pet, i) in item.pets" :key="i" class="pet-item">
							<view class="pet-avatar">
								<image :src="pet.photo" mode="aspectFill" class="avatar-image"></image>
							</view>
							<view class="pet-info">
								<view class="pet-name">
									{{ pet.name }}
									<text class="pet-gender" :class="{'pet-gender-male': pet.gender === 'male', 'pet-gender-female': pet.gender === 'female'}">
										{{ pet.gender === 'male' ? '♂' : '♀' }}
									</text>
								</view>
								<view class="pet-description">
									{{ pet.breed }}{{ pet.bodyType }} | {{ pet.orderItemList.map(n => n.productName).join(',') }}
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 上门地址 -->
				<!-- <view class="service-section">
					<view class="section-title">
						<view class="title-indicator"></view>
						<text>上门地址</text>
					</view>
					<view class="section-content address-content" :class="{bgSuccessQ : item.status == '2'}">
						{{ item.receiverDetailAddress }}
					</view>
				</view> -->
				
				<!-- 操作按钮 -->
				<view class="action-buttons">
					<view class="btn btn-clock" 
                    v-if="item.status == '2'"
                    :class="{bgSuccess : item.status == '2'}" 
					@click="handleClock(item)">查看记录</view>

                    <view class="btn btn-clock" 
                    v-else
                    style="background-color: #aaa;color: #fff;"
					>暂无记录</view>
				</view>

                
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from '@/utils/lib/dayjs.min.js';
	
	export default {
		name: 'TimelineService',
		// 定义组件属性
		props: {
			date: {
				type: String,
				default: '2024-12-08'
			},
			orderCount: {
				type: Number,
				default: 2
			},
			status: {
				type: Boolean,
				default: true
			},
			current: {
				type: Number,
				default: 0
			},
			list: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				// 宠物列表折叠状态 - 使用数组来单独控制每个卡片中的宠物列表
				petListCollapsed: [],
				// 服务卡片折叠状态 - 使用数组来单独控制每个卡片
				serviceCardCollapsed: []
			};
		},
        //计算属性
        computed: {
            // 判断list中是否所有项的status都等于2
            orderCompleted() {
                if (!this.list || this.list.length === 0) {
                    return false;
                }
                return !this.list.every(item => item.status == '2');
            }
        },
		methods: {
            dayjs,
			// 切换宠物列表显示状态
			togglePetList(index) {
				if (this.petListCollapsed[index] === undefined) {
					this.$set(this.petListCollapsed, index, true);
				} else {
					this.$set(this.petListCollapsed, index, !this.petListCollapsed[index]);
				}
			},
			
			// 切换服务卡片显示状态
			toggleServiceCard(index) {
				if (this.serviceCardCollapsed[index] === undefined) {
					this.$set(this.serviceCardCollapsed, index, true);
				} else {
					this.$set(this.serviceCardCollapsed, index, !this.serviceCardCollapsed[index]);
				}
			},
			
			// 格式化日期
			formatDate(dateString) {
				const date = new Date(dateString);
				return {
					day: date.getDate().toString().padStart(2, '0'),
					month: (date.getMonth() + 1).toString().padStart(2, '0')
				};
			},
			
			// 按钮事件处理函数
			handleClock(item) {
				uni.navigateTo({
					url: `/pages/personalCenter/orderDetailImage?id=${item.id}`,
				});
			},
			
			getTopBgColor() {
				return this.orderCompleted ? '#FFAA48' : '#4CD964';
			}
		}
	}
</script>

<style lang="scss" scoped>

.bgSuccess{
    background-color: #4CD964 !important;
}
.bgSuccessQ{
    background-color: #4CD96422 !important;
}

.timeline-container {
	position: relative;
	padding: 20rpx;
	margin-bottom: 30rpx;
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 40rpx;
		
		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		.empty-text {
			color: #999;
			font-size: 28rpx;
		}
	}
	
	.date-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
        
		
		.date-box {
			width: 80rpx;
			background-color: #ffffff;
			border: 2px solid #333;
			border-radius: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
			border-radius: 14rpx;
			
			.date-box-color{
				height: 20rpx;
				width: 100%;
				border-top-left-radius: 14rpx;
				border-top-right-radius: 14rpx;
				position: relative;
				&::before{
					content: '';
					display: block;
					background-color: #ddd;
					width: 100%;
					height: 26rpx;
					top: 100%;
					left: 0;
					position: absolute;
				}
			}
			
			.date-month-day {
				position: relative;
				font-size: 26rpx;
				font-weight: bold;
				color: #333;
				height: 50rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		}
		
		.status-tag {
			background-color: #4CD96422;
			color: #4CD964;
			border: 4rpx solid #4CD964;
			padding: 16rpx 26rpx;
			border-radius: 14rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			position: relative;
			margin-left: 20rpx;
			
			.status-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 0;
				height: 0;
				top: 50%;
				transform: translateY(-50%);
				left: -16rpx;
				border-top: 16rpx solid transparent;
				border-bottom: 16rpx solid transparent;
				border-right: 16rpx solid #4CD964;
			}
			
			&::before{
				content: '';
				display: block;
				position: absolute;
				width: 0;
				height: 0;
				top: 50%;
				transform: translateY(-50%);
				left: -12rpx;
				border-top: 12rpx solid transparent;
				border-bottom: 12rpx solid transparent;
				border-right: 12rpx solid #4CD96422;
				z-index: 1;
			}
		}
		
		.status-tag-pending {
			background-color: #FFAA4822;
			color: #FFAA48;
			border-color: #FFAA48;
			&::after{
				border-right-color: #FFAA48;
			}
			&::before{
				border-right-color: #FFAA4822;
			}
		}
	}
	
	.timeline-body {
		position: relative;
		padding-left: 40rpx;
        padding-bottom: 40rpx;
		
		.timeline-line {
			position: absolute;
			left: 40rpx;
			top: 0;
			height: 100%;
			width: 0;
			border-left: 2rpx dashed #707070;
			border-left-style: dashed;
			border-image: repeating-linear-gradient(to bottom, #707070 0, #707070 8rpx, transparent 8rpx, transparent 20rpx) 1;
			z-index: 0;
            &::after{
                content: '';
                display: block;
                position: absolute;
                width: 8rpx;
                height: 8rpx;
                background-color: #000;
                border: 2rpx solid #707070;
                border-radius: 50%;
                left: -7rpx;
                top: 30rpx;
            }
		}
		
		
		.time-point {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			position: relative;
			z-index: 1;
			
			.time-icon {
				width: 60rpx;
				height: 60rpx;
				background-color: #fff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				position: relative;
				left: 20rpx;
				
				.time-image {
					width: 40rpx;
					height: 40rpx;
				}
			}
			
			.time-text {
				font-size: 28rpx;
				color: #333;
                margin-left: 20rpx;
				flex: 1;
			}
			
			.collapse-icon {
				font-size: 24rpx;
				color: #999;
				padding: 0 20rpx;
				
				.arrow {
					transition: transform 0.3s;
					display: inline-block;
				}
				
				.arrow-up {
					transform: rotate(180deg);
				}
			}
		}
		
		.service-card {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			margin-left: 20rpx;
			
			.service-section {
				margin-bottom: 30rpx;
				
				.section-title {
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;
					
					.title-indicator {
						width: 6rpx;
						height: 30rpx;
						background-color: #FFAA48;
						margin-right: 15rpx;
					}
					
					text {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}
					
					.collapse-icon {
						margin-left: auto;
						font-size: 24rpx;
						color: #999;
						
						.arrow {
							transition: transform 0.3s;
							display: inline-block;
						}
						
						.arrow-up {
							transform: rotate(180deg);
						}
					}
				}
				
				.section-content {
					padding: 0 15rpx;
                    background-color: #FFF9F0;
				}
				
				.date-content {
					background-color: #FFF9F0;
					padding: 20rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #333;
				}
				
				.pet-list {
					padding: 15rpx;
					.pet-item {
						display: flex;
						margin-bottom: 20rpx;
						
						&:last-child {
							margin-bottom: 0;
						}
						
						.pet-avatar {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 20rpx;
							
							.avatar-image {
								width: 100%;
								height: 100%;
							}
						}
						
						.pet-info {
							flex: 1;
							
							.pet-name {
								font-size: 28rpx;
								color: #333;
								margin-bottom: 8rpx;
								
								.pet-gender {
									display: inline-block;
									width: 32rpx;
									height: 32rpx;
									line-height: 32rpx;
									text-align: center;
									border-radius: 50%;
									color: #fff;
									font-size: 20rpx;
									margin-left: 10rpx;
								}
								
								.pet-gender-male {
									background-color: #4A90E2;
								}
								
								.pet-gender-female {
									background-color: #FF6B9A;
								}
							}
							
							.pet-description {
								font-size: 24rpx;
								color: #7D8196;
							}
						}
					}
				}
				
				.address-content {
					padding: 20rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #7D8196;
				}
			}
			
			.action-buttons {
				display: flex;
				justify-content: space-between;
				gap: 20rpx;
				
				.btn {
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 40rpx;
					font-size: 28rpx;
					flex: 1;
				}
				
				.btn-clock {
					background-color: #FFAA48;
					color: #fff;
				}
				
				.btn-pet-file, .btn-service-file {
					background-color: #F6F7FB;
					color: #333;
					border: 1px solid #E5E6EB;
				}
			}
		}
	}
}
</style>