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="service-list">
				<view class="service-item" v-for="(service, index) in serviceList" :key="index">
					<view class="service-date">{{ service.serviceDate }}</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>
			</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 serviceList = ref([]);

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

// 处理数据，将订单数据转换为服务时间列表格式
const processOrderData = (orderData) => {
	if (!orderData || !orderData.h5OrderVO) return [];
	
	const { orderServiceList, orderItemList } = orderData.h5OrderVO;
	if (!orderServiceList || !orderItemList) return [];
	
	// 按服务日期组织数据
	const serviceMap = {};
	
	// 遍历服务列表，创建日期映射
	orderServiceList.forEach(service => {
		const serviceId = service.id;
		const serviceDate = service.serviceDate;
		
		if (!serviceMap[serviceId]) {
			serviceMap[serviceId] = {
				serviceDate,
				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) : {}
			});
		}
	});
	
	// 转换为数组格式
	return Object.values(serviceMap);
};

// 监听orderData变化，处理数据
const updateServiceList = () => {
	if (props.orderData && props.orderData.h5OrderVO) {
		serviceList.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;
}

.service-list {
	.service-item {
		margin-bottom: 30rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 20rpx;
		
		.service-date {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #eee;
		}
		
		.service-products {
			.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;
				}
			}
		}
	}
}
</style>