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

<template>
	<up-popup :show="show" mode="bottom" @close="close" :round="10" :closeable="true">
		<view class="popup-container">
			<view class="popup-title">宠物服务时间列表</view>
			<view class="pet-list">
				<!-- 宠物列表循环 -->
				<view class="pet-item" v-for="(pet, petIndex) in petList" :key="pet.id">
					<view class="pet-info">
						<up-image class="pet-avatar" width="50px" height="50px" :src="pet.photo" shape="circle"></up-image>
						<view class="pet-details">
							<view class="pet-name">{{ pet.name }}</view>
							<view class="pet-breed">{{ pet.breed }} {{ pet.bodyType }}</view>
						</view>
					</view>
					
					<!-- 该宠物的服务时间列表 -->
					<view class="service-list">
						<view class="service-item" v-for="(service, index) in pet.services" :key="index">
							<view class="service-header">
								<view class="service-date">{{ service.serviceDate }}</view>
								<view class="service-time">{{ getServiceTimeText(service.expectServiceTime) }}</view>
							</view>
							<view class="service-products">
								<view class="product-item" v-for="(product, pIndex) in service.products" :key="pIndex">
									<view class="product-name">{{ product.productName }}</view>
									<!-- <view class="product-price">￥{{ product.salePrice }}</view> -->
								</view>
							</view>
							<view class="service-footer">
								<up-button 
                                type="primary" 
                                text="打卡" 
                                @click="handleClock(service)" 
                                shape="circle" 
                                size="mini" 
                                style="height: 60rpx;"
                                color="#FFAA48"></up-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

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

const props = defineProps({
	show: {
		type: Boolean,
		default: false
	},
	orderData: {
		type: Object,
		default: () => ({})
	}
});

const emit = defineEmits(['close']);
const petList = ref([]);

// 关闭弹窗
const close = () => {
	emit('close');
};

// 获取服务时间段文本
const getServiceTimeText = (timeCode) => {
	const timeMap = {
		'MORNING': '早上',
		'AFTERNOON': '下午',
		'EVENING': '晚上'
	};
	return timeMap[timeCode] || '未指定';
};

// 处理打卡事件
const handleClock = (service) => {
	if (!props.orderData || !service) return;

    let url = `/otherPages/myOrdersManage/clock/index?id=${props.orderData.orderId}&itemID=${props.orderData.id}&serviceId=${service.id}`

    if(service){

    }
	
	uni.navigateTo({
		url,
	});
};

// 处理数据，将订单数据转换为按宠物分组的服务时间列表格式
const processOrderData = (orderData) => {
	if (!orderData || !orderData.h5OrderVO) return [];
	
	const { orderServiceList, orderItemList, petVOList } = orderData.h5OrderVO;
	if (!orderServiceList || !orderItemList || !petVOList) return [];
	
	// 按宠物ID分组
	const petMap = {};
	
	// 先将宠物信息添加到映射中
	petVOList.forEach(pet => {
		petMap[pet.id] = {
			...pet,
			services: []
		};
	});
	
	// 按服务日期和宠物ID组织数据
	const serviceMap = {};
	
	// 遍历服务列表，创建日期和宠物ID的映射
	orderServiceList.forEach(service => {
		const serviceId = service.id;
		const petId = service.petId;
		const serviceDate = service.serviceDate;
		const expectServiceTime = service.expectServiceTime;
		
		if (!serviceMap[serviceId]) {
			serviceMap[serviceId] = {
				id: serviceId,
				petId,
				serviceDate,
				expectServiceTime,
				products: []
			};
		}
	});
	
	// 遍历订单项，将产品添加到对应的服务日期中
	orderItemList.forEach(item => {
		const serviceId = item.orderServiceId;
		if (serviceMap[serviceId]) {
			serviceMap[serviceId].products.push({
				productName: item.productName,
				salePrice: item.salePrice,
				pic: item.pic,
				quantity: item.quantity,
				spData: item.spData ? JSON.parse(item.spData) : {}
			});
		}
	});
	
	// 将服务添加到对应的宠物中
	Object.values(serviceMap).forEach(service => {
		if (petMap[service.petId]) {
			petMap[service.petId].services.push(service);
		}
	});
	
	// 转换为数组格式并按日期排序每个宠物的服务
	const result = Object.values(petMap);
	result.forEach(pet => {
		pet.services.sort((a, b) => new Date(a.serviceDate) - new Date(b.serviceDate));
	});
	
	return result;
};

// 更新服务列表数据
const updateServiceList = () => {
	if (props.orderData && props.orderData.h5OrderVO) {
		petList.value = processOrderData(props.orderData);
	}
};

// 暴露方法给父组件
defineExpose({
	updateServiceList
});
</script>

<style scoped lang="scss">
.popup-container {
	padding: 30rpx;
	max-height: 70vh;
	overflow-y: auto;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.pet-list {
	.pet-item {
		margin-bottom: 40rpx;
		
		.pet-info {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.pet-avatar {
				flex-shrink: 0;
				margin-right: 20rpx;
			}
			
			.pet-details {
				.pet-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
				}
				
				.pet-breed {
					font-size: 24rpx;
					color: #666;
					margin-top: 6rpx;
				}
			}
		}
	}
}

.service-list {
	.service-item {
		margin-bottom: 20rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 20rpx;
		
		.service-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #eee;
			
			.service-date {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}
			
			.service-time {
				font-size: 24rpx;
				color: #666;
				background-color: #f0f0f0;
				padding: 4rpx 12rpx;
				border-radius: 20rpx;
			}
		}
		
		.service-products {
			margin-bottom: 20rpx;
			
			.product-item {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
				
				.product-name {
					font-size: 26rpx;
					color: #666;
				}
				
				.product-price {
					font-size: 26rpx;
					color: #FF530A;
				}
			}
		}
		
		.service-footer {
			display: flex;
			justify-content: flex-end;
		}
	}
}
</style>