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.
277 lines
6.2 KiB
277 lines
6.2 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="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}&isRead=true`
|
|
|
|
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>
|