pet-front-order/pages_order/order/orderDetail.vue

<template>
	<view class="order-detail-page">
		
		<!-- 订单内容区域 -->
		<view class="order-detail-content">
			<!-- 服务地址组件 -->
			<service-address :address="orderDetail.address"></service-address>
			
			<!-- 服务宠物组件 -->
			<service-pets :pets="orderDetail.pets"></service-pets>
			
			<!-- 服务项目及费用组件 -->
			<service-items :items="orderDetail.items" :totalAmount="orderDetail.totalAmount" 
				:discount="orderDetail.discount" :finalAmount="orderDetail.finalAmount"></service-items>
			
			<!-- 服务备注组件 -->
			<service-remarks :remarks="orderDetail.remarks"></service-remarks>
			
			<!-- 其他信息组件 -->
			<order-info :orderInfo="orderDetail.orderInfo"></order-info>
		</view>
		
		<!-- 底部按钮区域 -->
		<view class="order-detail-footer">
			<view class="footer-btn cancel-btn" v-if="orderDetail.status == '0'" @click="$refs.cancelOrderPopup.open()">
				<text>取消订单</text>
			</view>
			<view class="footer-btn pay-btn" v-if="orderDetail.status == '0'" @click="goToPay">
				<text>去付款</text>
			</view>
			<!-- <view class="footer-btn modify-btn" v-if="orderDetail.status == '1' || orderDetail.status == '2'" @click="modifyOrder">
				<text>修改订单</text>
			</view> -->
			<view class="footer-btn pay-btn" v-if="orderDetail.status == '3'" @click="goToReview">
				<text>去评价</text>
			</view>
			<view class="footer-btn pay-btn" v-if="orderDetail.status == '3'" @click="handleReorder">
				<text>再来一单</text>
			</view>
			<view class="footer-btn pay-btn" v-if="orderDetail.status == '2'" @click="handleReorder">
				<text>查看服务记录</text>
			</view>
			<view class="footer-btn contact-btn">
				<text>联系客服</text>
			</view>
		</view>
		
		<!-- 取消订单弹窗 -->
		<cancel-order-popup 
        ref="cancelOrderPopup"
        @cancel="handleCancelOrder"
		></cancel-order-popup>
		
		<!-- 客服组件 -->
		<Kefu></Kefu>
	</view>
</template>

<script>
	import Kefu from '@/pages/common/kefu.vue'
	import ServiceAddress from '@/pages_order/components/order/ServiceAddress.vue'
	import ServicePets from '@/pages_order/components/order/ServicePets.vue'
	import ServiceItems from '@/pages_order/components/order/ServiceItems.vue'
	import ServiceRemarks from '@/pages_order/components/order/ServiceRemarks.vue'
	import OrderInfo from '@/pages_order/components/order/OrderInfo.vue'
	import CancelOrderPopup from '@/pages_order/components/order/CancelOrderPopup.vue'
	import { getOrderList } from "@/api/system/user.js"
	import { getOpenIdKey } from '@/utils/auth'
	import { getOrderDetail } from '@/api/order/order.js'
	import { getOrderServiceText, getProductNameText } from '@/utils/serviceTime.js'
	import dayjs from '@/utils/lib/dayjs.min.js'
	// 服务时间段映射
	const timeSlotMap = {
		'MORNING': '上午',
		'AFTERNOON': '下午',
		'EVENING': '晚上'
	}
	
	export default {
		components: {
			Kefu,
			ServiceAddress,
			ServicePets,
			ServiceItems,
			ServiceRemarks,
			OrderInfo,
			CancelOrderPopup
		},
		data() {
			return {
				orderId: null,
				orderDetail: {},//格式化后的数据
				detail : {},//未格式化的数据
				isPaying: false,
				loading: false
			};
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
				this.getOrderDetail();
			}
		},
		methods: {
			// 获取订单详情
			getOrderDetail() {
				const params = {
					openId: getOpenIdKey(),
					orderId: this.orderId
				};
				
				getOrderDetail(params).then(res => {
					if (res) {
						// 处理接口返回的数据
						const data = res;
						this.detail = data; // 保存原始数据
						
						data.petVOList.forEach(pet => {
							pet.orderServiceText = getOrderServiceText(pet.id, data.orderServiceList) // 日期
							pet.productNameText = getProductNameText(pet.id, data.orderItemList, data.orderServiceList) // 服务
						})
						
						
						//=====================服务项目以及费用的计算开始=====================
						
                        let items = []
						
						//1、找出有哪些日期
						let days = [...new Set(data.orderServiceList.map(item => item.serviceDate))]
						
						
                        days.forEach(day => {

                            let price = 0;

                            let itemsText = []

                            //2、找出每个日期对应的服务对象
                            let dayItems = data.orderServiceList.filter(item => item.serviceDate === day)

                            //3、找出每个服务对象对应的宠物
                            let pets = data.petVOList.filter(item => dayItems.some(dayItem => dayItem.petId === item.id))

                            //深度拷贝pets
                            pets = JSON.parse(JSON.stringify(pets))

                            //4、将每个服务对象添加进对应的宠物
                            pets.forEach(pet => {
                                pet.serviceList = dayItems.filter(item => item.petId === pet.id)

                                let itemList = []

                                //5、将每个服务对象中添加对应的项目
                                pet.serviceList.forEach(item => {
                                    itemList.push(...(data.orderItemList.filter(n => n.orderServiceId == item.id)))
                                })
                                
                                itemList.forEach(p => {
                                    price += p.salePrice * p.quantity
                                    
                                    itemsText = [...new Set([...itemsText, p.productName])]
                                })

                                pet.itemList = itemList
                            })

                            //6、将每个宠物添加进items
                            items.push({
                                price,
                                pets,
                                day,
                                itemsText,
                            })
                        })
						

                        //根据日期排序
						items = items.sort((a, b) => dayjs(a.day).valueOf() - dayjs(b.day).valueOf())
						
                        console.log(items);
                        
						
						//=====================服务项目以及费用的计算结束=====================
						
						
						
						// 构建符合组件渲染需要的数据结构
						this.orderDetail = {
							// 地址信息
							address: {
								address: data.receiverProvince + data.receiverCity + data.receiverDistrict + data.receiverDetailAddress,
								contact: data.receiverName + ' ' + data.receiverPhone
							},
							
							// 宠物信息
							pets: data.petVOList ? data.petVOList.map(pet => {
								return {
									id: pet.id,
									name: pet.name,
									avatar: pet.photo,
									gender: pet.gender,
									serviceDays: pet.orderServiceText ? pet.orderServiceText.length : 0,
									serviceDates: pet.orderServiceText || [],
									services: pet.productNameText || []
								};
							}) : [],
							
							// 服务项目列表
							items,
							
							// 费用信息
							totalAmount: data.totalAmount,
							discount: data.totalAmount - data.payAmount,
							finalAmount: data.payAmount,
							
							// 订单状态
							status: data.status.toString(),
							
							// 备注信息
							remarks: {
								keyHandoverMethod: '存于快递柜',
								isAdvanceFamiliar: true,
								priceInfo: `价格${data.payAmount}元`,
								serviceContent: '服务内容: 伴宠师将按照约定时间上门照顾宠物',
								serviceCondition: '服务保障: 购买此服务后，平台将安排伴宠师与您确认服务细节',
								notes: data.note || ''
							},
							
							// 其他信息
							orderInfo: {
								orderNumber: data.orderSn,
								orderTime: data.createTime,
								paymentTime: data.paymentTime
							}
						};
						
						// 如果有服务信息，处理服务日期和时间段
						if (data.orderServiceList && data.orderServiceList.length > 0) {
							// 处理服务日期和时间段
							const serviceDate = data.orderServiceList[0].serviceDate;
							const serviceTime = data.orderServiceList[0].expectServiceTime;
							
							// 更新服务项目描述
							if (this.orderDetail.items.length > 0) {
								this.orderDetail.items[0].serviceDate = serviceDate;
								this.orderDetail.items[0].serviceTime = timeSlotMap[serviceTime] || serviceTime;
							}
						}
					}
				}).catch(err => {
					console.error('获取订单详情失败', err);
				});
			},
			
			// 去付款
			goToPay() {
				const { orderPay } = require('@/api/order/order.js');
				orderPay({
					orderId: this.orderId
				}).then(res => {
					this.pay(res.data)
				}).catch(err => {
					console.log(err);
				});
			},
			
			pay(params) {
				if (this.isPaying) {
					return;
				}
				this.isPaying = true
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: params.timeStamp,
					nonceStr: params.nonceStr,
					package: params.package_,
					signType: params.signType,
					paySign: params.paySign,
					success: (res) => {
						this.$modal.showToast('支付成功')
						this.getOrderDetail()
					},
					fail: (err) => {
						this.loading = false
						console.log('支付失败', err)
						this.$modal.showToast('支付失败')
					},
					complete: () => {
						this.loading = false
						this.isPaying = false
					}
				})
			},
			
			// 去评价
			goToReview() {
				const order = this.detail;
				uni.navigateTo({
					url: `/pages_order/order/orderReview?id=${order.teacherId}&orderId=${order.orderId}`
				});
			},
			
			// 处理取消订单
			handleCancelOrder() {
				this.getOrderDetail();
			},
			
			// 处理再来一单/查看服务记录
			handleReorder() {
				if (this.orderDetail.status == '3') {
					// 再来一单 - 可以添加伴宠师选择弹窗
					uni.showToast({
						title: '再来一单功能开发中',
						icon: 'none'
					});
				} else if (this.orderDetail.status == '2') {
					// 查看服务记录
					uni.navigateTo({
						url: `/pages_order/order/serviceRecord?orderId=${this.orderId}`
					});
				}
			},
			
			// 修改订单
			modifyOrder() {
				// 跳转到服务选择页面，并传递订单ID参数
                uni.navigateTo({
                    url: `/pages_order/order/orderModify?orderId=${this.orderId}`
                });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}
	
	.order-detail-content {
		flex: 1;
		padding: 20rpx;
	}
	
	.order-detail-footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-top: 1px solid #EEEEEE;
		
		.footer-btn {
			padding: 16rpx 30rpx;
			border-radius: 30rpx;
			font-size: 26rpx;
			margin-left: 20rpx;
		}
		
		.cancel-btn {
			background-color: #FFFFFF;
			color: #666;
			border: 1px solid #DDDDDD;
		}
		
		.pay-btn {
			background-color: #FFAA48;
			color: #FFFFFF;
		}
		
		.modify-btn {
			background-color: #FFAA48;
			color: #FFFFFF;
		}
		
		.review-btn {
			background-color: #FFAA48;
			color: #FFFFFF;
		}
		
		.contact-btn {
			background-color: #FFFFFF;
			color: #666;
			border: 1px solid #DDDDDD;
		}
	}
</style>