You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
3.1 KiB
145 lines
3.1 KiB
<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>
|