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 === '1'" @click="$refs.cancelOrderPopup.open()">
				<text>取消订单</text>
			</view>
			<view class="footer-btn pay-btn" v-if="orderDetail.status === '1'" @click="goToPay">
				<text>去付款</text>
			</view>
			<view class="footer-btn review-btn" @click="goToReview">
				<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'
	
	export default {
		components: {
			Kefu,
			ServiceAddress,
			ServicePets,
			ServiceItems,
			ServiceRemarks,
			OrderInfo,
			CancelOrderPopup
		},
		data() {
			return {
				orderId: null,
				orderDetail: {
					status: '1', // 1-待付款, 2-已接单, 3-服务中, 4-已完成
					address: {
						address: '上海青浦区盈港路888号1-2号-东部公寓',
						contact: '联系电话: 18629356678'
					},
					pets: [
						{
							name: '小咪',
							avatar: '/static/images/personal/pet.png',
							tag: '猫',
							gender: '女生',
							serviceDays: 2,
							serviceDates: ['03-20', '03-22']
						},
						{
							name: '小汪',
							avatar: '/static/images/personal/pet.png',
							tag: '狗',
							gender: '男生',
							serviceDays: 3,
							serviceDates: ['03-20', '03-22', '03-25']
						}
					],
					items: [
						{
							id: '07-07',
							name: '专业喂养',
							price: 75.00,
							pet: '小咪',
							quantity: 1
						},
						{
							id: '07-08',
							name: '专业喂养 + 定制服务1项',
							price: 75.00,
							pet: '小汪',
							quantity: 1,
							customServices: [
								{
									name: '专业喂养',
									price: 75.00,
									quantity: 1
								},
								{
									name: '上门遛狗',
									price: 40.00,
									quantity: 1
								}
							]
						},
						{
							id: '07-10',
							name: '专业喂养 + 定制服务2项',
							price: 95.00,
							pet: '小汪',
							quantity: 1,
							customServices: [
								{
									name: '专业喂养',
									price: 75.00,
									quantity: 1
								},
								{
									name: '上门遛狗',
									price: 40.00,
									quantity: 1
								},
								{
									name: '梳毛',
									price: 40.00,
									quantity: 1
								}
							]
						}
					],
					totalAmount: 290.00,
					discount: 10.00,
					memberDiscount: 20.00,
					finalAmount: 260.00,
					remarks: {
						paymentMethod: '存于平台账户',
						isUrgent: true,
						notes: '* 到达05/2楼\n* 猫咪很胆小，请轻声说话，保持安静。猫粮放在门口柜子上，猫砂盆在卫生间。\n* 狗狗很活泼，喜欢玩球，球放在客厅的篮子里。'
					},
					orderInfo: {
						orderNumber: 'fc241200396263',
						orderTime: '2024-12-03 13:05:57',
						paymentTime: '2024-12-03 13:06:06'
					}
				}
			};
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
				this.getOrderDetail();
			}
		},
		methods: {
			// 获取订单详情
			getOrderDetail() {
				// 实际项目中应调用API获取订单详情
				// 示例代码：
				/*
				const params = {
					openId: getOpenIdKey(),
					orderId: this.orderId
				};
				
				getOrderDetail(params).then(res => {
					if (res && res.code === 200) {
						this.orderDetail = res.data;
					}
				}).catch(err => {
					console.error('获取订单详情失败', err);
				});
				*/
				
				// 这里使用模拟数据
				console.log('获取订单详情，ID:', this.orderId);
			},
			
			// 去付款
			goToPay() {
				uni.navigateTo({
					url: `/pages/details/order?id=${this.orderId}`
				});
			},
			
			// 去评价
			goToReview() {
				uni.navigateTo({
					url: `/pages_order/order/orderReview?id=${this.orderId}`
				});
			},
			
			// 处理取消订单
			handleCancelOrder() {
			}
		}
	}
</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;
		}
		
		.review-btn {
			background-color: #FFAA48;
			color: #FFFFFF;
		}
		
		.contact-btn {
			background-color: #FFFFFF;
			color: #666;
			border: 1px solid #DDDDDD;
		}
	}
</style>