vist_go_uniApp/packageOrder/pages/detail/index.vue

<template>
	<view class="order-detail">
		<!-- 订单状态 -->
		<view class="status-section" :class="getStatusClass()">
			<view class="status-bg-pattern"></view>
			<view class="logistics-btn" v-if="[3,4].includes(order.status) && order.expressCode">
				<button class="custom-logistics-btn" @click="viewLogistics">
					<image src="/static/images/order/wuliu.png" mode="aspectFit" class="logistics-icon"></image>
					<text>查看物流</text>
				</button>
			</view>
			<view class="status-content">
				<view class="status-icon">
					<image :src="getStatusImage()" mode="aspectFit" class="status-img"></image>
				</view>
				<view class="status-info">
					<view class="status-text">{{getStatusText()}}</view>
					<view class="status-desc">{{getStatusDesc()}}</view>
				</view>
			</view>
		</view>

		<!-- 收货地址和物流信息 -->
		<view class="address-section">
			<view class="section-header">
				<view class="header-icon">
					<uni-icons type="map-pin-ellipse" size="25" color="#a4d5d9"></uni-icons>
				</view>
				<text class="header-text">收货信息</text>
			</view>
			<view class="address-content">
				<view class="user-info">
					<text class="name">{{order.name}}</text>
					<text class="phone">{{order.mobile}}</text>
				</view>
				<view class="address">
					{{order.province}}{{order.city}}{{order.area}}{{order.address}}
				</view>
				<!-- 物流信息 -->
				<view class="logistics-info" v-if="order.expressCompany && order.expressCode">
					<view class="divider"></view>
					<view class="logistics-item">
						<text class="label">快递公司</text>
						<text class="value">{{order.expressCompany}}</text>
					</view>
					<view class="logistics-item">
						<text class="label">快递单号</text>
						<view class="value-copy">
							<text class="value">{{order.expressCode}}</text>
							<button class="copy-btn" @click="copyExpressCode">复制</button>
						</view>
					</view>
					<view class="logistics-item" v-if="order.shipTime">
						<text class="label">发货时间</text>
						<text class="value">{{order.shipTime}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="product-section">
			<view class="section-header">
				<view class="header-icon">
					<uni-icons type="gift-filled" size="25" color="#a4d5d9"></uni-icons>
				</view>
				<text class="header-text">商品信息</text>
			</view>
			<view class="product-list">
				<view v-for="(item, index) in orderListVos" :key="index" class="product-item">
					<view class="product-image-wrapper" @tap="goDetail(item)">
						<image :src="item.productImage" mode="aspectFill" class="product-image"></image>
					</view>
					<view class="product-info" @tap="goDetail(item)">
						<view class="product-name">{{item.productName}}</view>
						<view class="product-spec" v-if="item.skuName">{{item.skuName}}</view>
						<view class="product-price-count">
							<view class="price-info">
								<text class="price">¥{{item.unitPrice}}</text>
								<text class="subtotal">小计：¥{{item.subtotalAmount}}</text>
							</view>
							<text class="count">x{{item.quantity}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 金额信息 -->
		<view class="amount-section">
			<view class="section-header">
				<view class="header-icon">
					<u-icon name="file-text-fill" size="25" color="#a4d5d9"></u-icon>
				</view>
				<text class="header-text">金额信息</text>
			</view>
			<view class="amount-content">
				<view class="amount-item">
					<text>商品总额</text>
					<text class="price">¥{{getTotalProductPrice()}}</text>
				</view>
				<view class="amount-item total">
					<text>实付款</text>
					<text class="price">¥{{order.paymentPrice}}</text>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="section-header">
				<view class="header-icon">
					<uni-icons type="calendar-filled" size="25" color="#a4d5d9"></uni-icons>
				</view>
				<text class="header-text">订单信息</text>
			</view>
			<view class="info-content">
				<view class="info-item">
					<text class="label">订单编号：</text>
					<text class="value">{{order.orderCode}}</text>
				</view>
				<view class="info-item">
					<text class="label">创建时间：</text>
					<text class="value">{{order.createTime}}</text>
				</view>
				<view class="info-item">
					<text class="label">支付方式：</text>
					<text class="value">微信支付</text>
				</view>
				<view class="info-item" v-if="order.payTime">
					<text class="label">支付时间：</text>
					<text class="value">{{order.payTime}}</text>
				</view>
				<view class="info-item" v-if="order.shipTime">
					<text class="label">发货时间：</text>
					<text class="value">{{order.shipTime}}</text>
				</view>
				<view class="info-item" v-if="order.confirmTime">
					<text class="label">确认收货：</text>
					<text class="value">{{order.confirmTime}}</text>
				</view>
				<view class="info-item" v-if="order.remark">
					<text class="label">订单备注：</text>
					<text class="value">{{order.remark}}</text>
				</view>
			</view>
		</view>



		<!-- 底部按钮 -->
		<view class="bottom-btns">
			<template v-if="order.status === 1">
				<u-button type="primary" size="large" @click="cancelOrder" color="#999"
					class="action-btn">取消订单</u-button>
				<u-button type="primary" size="large" @click="payOrder" color="#D93025"
					class="action-btn primary">立即支付</u-button>
			</template>

			<template v-if="order.status === 2">
				<!-- 待发货状态不显示任何按钮 -->
			</template>

			<template v-if="order.status === 3">
				<u-button type="primary" size="large" @click="confirmReceive" color="#D93025"
					class="action-btn primary">确认收货</u-button>
			</template>

			<template v-if="order.status === 4">
				<u-button type="primary" size="large" @click="goToScore" color="#FF9500" class="action-btn"
					v-if="!order.isEvaluate">评价</u-button>
				<u-button type="primary" size="large" @click="buyAgain" color="#007AFF"
					class="action-btn">再次购买</u-button>

			</template>
		</view>
	</view>
</template>

<script>
	import {
		orderDetail,
		confirmReceipt,
		cancelOrder
	} from '@/config/api.js';
	export default {
		data() {
			return {
				orderId: '',
				order: {
					id: '',
					createTime: '',
					status: 1,
					orderCode: '',
					payCode: '',
					remark: '',
					paymentPrice: 0,
					payType: 1,
					payTime: '',
					addressId: '',
					name: '',
					mobile: '',
					province: '',
					city: '',
					area: '',
					address: '',
					expressCompany: '',
					expressCode: '',
					shipTime: '',
					confirmTime: '',
					isAfter: 0,
					isEvaluate: 0
				},
				orderListVos: []
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id
				this.getOrderDetail()
			}
		},
		methods: {
			async getOrderDetail() {
				try {
					const res = await orderDetail({
						id: this.orderId
					})
					if (res.success && res.data) {
						this.order = res.data.order
						this.orderListVos = res.data.orderListVos || []
					}
				} catch (e) {
					this.$u.toast('获取订单详情失败')
				}
			},

			// 获取状态文本
			getStatusText() {
				const statusMap = {
					1: '待付款',
					2: '待发货',
					3: '待收货',
					4: '已完成'
				}
				return statusMap[this.order.status] || '未知状态'
			},

			// 获取状态描述
			getStatusDesc() {
				const descMap = {
					1: '请尽快完成支付，超时订单将自动取消',
					2: '商家正在为您准备商品，请耐心等待',
					3: '商品正在配送中，请注意查收',
					4: '订单已完成，感谢您的购买'
				}
				return descMap[this.order.status] || ''
			},

			// 获取状态图片
			getStatusImage() {
				const imageMap = {
					1: '/static/images/order/daifukuan.png',
					2: '/static/images/order/daifahuo.png',
					3: '/static/images/order/daishouhuo.png',
					4: '/static/images/order/yiwancheng.png'
				}
				return imageMap[this.order.status] || imageMap[1]
			},

			// 获取状态样式类
			getStatusClass() {
				const classMap = {
					1: 'status-waiting',
					2: 'status-processing',
					3: 'status-shipping',
					4: 'status-completed'
				}
				return classMap[this.order.status] || 'status-waiting'
			},



			// 计算商品总价
			getTotalProductPrice() {
				try {
					const total = this.orderListVos.reduce((sum, item) => {
						const amount = parseFloat(item.subtotalAmount) || 0;
						return sum + amount;
					}, 0);
					return total.toFixed(2);
				} catch (e) {
					return '0.00';
				}
			},

			async cancelOrder() {
				try {
					// 确认对话框
					const result = await new Promise((resolve) => {
						uni.showModal({
							title: '提示',
							content: '确定要取消这个订单吗？',
							confirmText: '确定',
							cancelText: '取消',
							success: (res) => {
								resolve(res.confirm);
							}
						});
					});

					if (!result) {
						return;
					}

					// 调用取消订单接口
					const response = await cancelOrder({
						id: this.orderId
					});

					if (response.code === 200) {
						this.$u.toast('取消订单成功');
						// 重新获取订单详情
						this.getOrderDetail();
					} else {
						this.$u.toast(response.msg || '取消订单失败');
					}
				} catch (e) {
					console.error('取消订单失败:', e);
					this.$u.toast('取消订单失败');
				}
			},
			payOrder() {
				uni.navigateTo({
					url: '/packageOrder/pages/payment/index?id=' + this.orderId
				})
			},
			viewLogistics() {
				uni.navigateTo({
					url: '/packageOrder/pages/logistics/index?id=' + this.orderId
				})
			},
			async confirmReceive() {
				try {
					let res = await confirmReceipt({
						id: this.orderId
					})
					if (res.code == 200) {

						uni.showToast({
							title: "确认收货成功",
							icon: 'success',
							duration: 1000
						})
						setTimeout(() => {
							this.getOrderDetail()
						}, 500)
					}

				} catch (e) {
					this.$u.toast('确认收货失败')
				}
			},
			goToScore() {
				uni.navigateTo({
					url: '/packageOrder/pages/score/index?orderId=' + this.order.id
				})
			},
			buyAgain() {
				const product = this.orderListVos[0]
				uni.navigateTo({
					url: '/packageShop/pages/detail/index?id=' + product.productId
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/packageShop/pages/detail/index?id=' + item.productId
				})
			},
			async deleteOrder() {
				try {
					await this.$api.order.delete(this.orderId)
					this.$u.toast('删除订单成功')
					uni.navigateBack()
				} catch (e) {
					this.$u.toast('删除订单失败')
				}
			},

			// 复制快递单号
			copyExpressCode() {
				uni.setClipboardData({
					data: this.order.expressCode,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 1500
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		min-height: 100vh;
		background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
		padding-bottom: 160rpx;

		.status-section {
			padding: 60rpx 30rpx;
			position: relative;
			overflow: hidden;

			.logistics-btn {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				z-index: 2;

				.custom-logistics-btn {
					background: rgba(255, 255, 255, 0.9);
					border: none;
					padding: 16rpx 32rpx;
					border-radius: 40rpx;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					color: #333;
					font-weight: 500;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
					transition: all 0.3s ease;

					.logistics-icon {
						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}

					&:active {
						transform: scale(0.95);
						background: rgba(255, 255, 255, 1);
					}
				}
			}

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
			}

			&.status-waiting {
				background: linear-gradient(135deg, #FF6B6B 0%, #D93025 100%);
			}

			&.status-processing {
				background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
			}

			&.status-shipping {
				background: linear-gradient(135deg, #45B7D1 0%, #96C93D 100%);
			}

			&.status-completed {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			}

			.status-bg-pattern {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiPgo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=');
				background-size: 200% 200%;
				opacity: 0.1;
				z-index: -1;
			}

			.status-content {
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				color: #fff;

				.status-icon {
					margin-right: 30rpx;
					width: 120rpx;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.status-img {
						width: 100%;
						height: 100%;
					}
				}

				.status-info {
					flex: 1;

					.status-text {
						font-size: 40rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.status-desc {
						font-size: 26rpx;
						opacity: 0.9;
						line-height: 1.4;
					}
				}
			}
		}

		.section-header {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.header-icon {
				margin-right: 15rpx;
			}

			.header-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-left: 15rpx;
			}
		}

		.address-section {
			background: #fff;
			padding: 30rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
			border: 1rpx solid rgba(217, 48, 37, 0.1);

			.address-content {
				.user-info {
					margin-bottom: 15rpx;

					.name {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-right: 20rpx;
					}

					.phone {
						font-size: 28rpx;
						color: #666;
					}
				}

				.address {
					font-size: 28rpx;
					color: #333;
					line-height: 1.5;
					margin-bottom: 20rpx;
				}

				.logistics-info {
					.divider {
						height: 1rpx;
						background: #f0f0f0;
						margin: 20rpx 0;
					}

					.logistics-item {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.label {
							width: 140rpx;
							font-size: 26rpx;
							color: #666;
						}

						.value {
							flex: 1;
							font-size: 26rpx;
							color: #333;
						}

						.value-copy {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.value {
								flex: 1;
								margin-right: 20rpx;
							}

							.copy-btn {
								font-size: 24rpx;
								color: #007AFF;
								background: rgba(0, 122, 255, 0.1);
								padding: 6rpx 20rpx;
								border-radius: 30rpx;
								border: none;
								line-height: 1.5;

								&:active {
									background: rgba(0, 122, 255, 0.2);
								}
							}
						}
					}
				}
			}
		}

		.product-section {
			background: #fff;
			padding: 30rpx;
			margin: 0 20rpx 20rpx;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
			border: 1rpx solid rgba(0, 0, 0, 0.05);

			.product-list {
				.product-item {
					display: flex;
					padding: 25rpx 0;
					border-bottom: 1rpx solid #f0f0f0;

					&:last-child {
						border-bottom: none;
					}

					.product-image-wrapper {
						width: 180rpx;
						height: 180rpx;
						border-radius: 16rpx;
						overflow: hidden;
						margin-right: 25rpx;
						box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.15);
						position: relative;

						&::after {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
							pointer-events: none;
						}
					}

					.product-image {
						width: 100%;
						height: 100%;
					}

					.product-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.product-name {
							font-size: 30rpx;
							color: #333;
							font-weight: 500;
							line-height: 1.4;
							margin-bottom: 10rpx;
						}

						.product-spec {
							font-size: 24rpx;
							color: #666;
							background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
							padding: 6rpx 12rpx;
							border-radius: 12rpx;
							border: 1rpx solid rgba(0, 0, 0, 0.05);
						}

						.product-price-count {
							display: flex;
							justify-content: space-between;
							align-items: flex-end;

							.price-info {
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								flex: 1;
							}

							.price {
								font-size: 34rpx;
								color: #D93025;
								font-weight: bold;
								margin-bottom: 8rpx;
							}

							.subtotal {
								font-size: 24rpx;
								color: #666;
								background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
								padding: 4rpx 8rpx;
								border-radius: 8rpx;
							}

							.count {
								font-size: 26rpx;
								color: #666;
								background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
								padding: 8rpx 16rpx;
								border-radius: 16rpx;
								white-space: nowrap;
								border: 1rpx solid rgba(0, 0, 0, 0.05);
								font-weight: 500;
							}
						}
					}
				}
			}
		}

		.logistics-section {
			background: #fff;
			padding: 30rpx;
			margin: 0 20rpx 20rpx;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
			border: 1rpx solid rgba(0, 122, 255, 0.1);

			.logistics-content {
				.logistics-item {
					display: flex;
					margin-bottom: 15rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						width: 160rpx;
						font-size: 28rpx;
						color: #666;
					}

					.value {
						flex: 1;
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}

		.order-info {
			background: #fff;
			padding: 30rpx;
			margin: 0 20rpx;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
			border: 1rpx solid rgba(0, 0, 0, 0.05);

			.info-content {
				.info-item {
					display: flex;
					margin-bottom: 20rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						width: 160rpx;
						font-size: 28rpx;
						color: #666;
					}

					.value {
						flex: 1;
						font-size: 28rpx;
						color: #646464;
					}
				}
			}
		}

		.amount-section {
			background: #fff;
			padding: 30rpx;
			margin: 0 20rpx 20rpx;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
			border: 1rpx solid rgba(217, 48, 37, 0.1);

			.amount-content {
				.amount-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					color: #666;

					&.total {
						margin-top: 30rpx;
						padding-top: 30rpx;
						border-top: 1rpx solid #f0f0f0;
						color: #333;
						font-weight: bold;
						font-size: 32rpx;
					}

					.price {
						color: #D93025;
						font-weight: bold;
					}
				}
			}
		}

		.bottom-btns {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background: #fff;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			gap: 20rpx;
			box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.12);
			border-top: 1rpx solid #f0f0f0;

			.action-btn {
				flex: 1;
				border-radius: 50rpx;
				font-weight: 600;
				font-size: 32rpx;
				height: 88rpx;
				line-height: 88rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
				transition: all 0.3s ease;

				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
				}
			}

			.primary {
				background: linear-gradient(135deg, #D93025 0%, #FF6B6B 100%);
				color: #fff;
				box-shadow: 0 4rpx 15rpx rgba(217, 48, 37, 0.3);
			}
		}
	}
</style>