yfs/pages/other/order_info.vue

<template>
	<page-container title="订单详情" :showBack="true">
		<view class="order-info" v-if="orderInfo">
			<view class="info-section">
				<view class="section-title">订单信息</view>
			
				<view class="info-item">
					<text class="label">订单名称：</text>
					<text class="value">{{orderInfo.goods_title}}</text>
				</view>
				<view class="info-item">
					<text class="label">订单编号：</text>
					<text class="value">{{orderInfo.order_num}}</text>
				</view>
				<view class="info-item">
					<text class="label">购买数量：</text>
					<text class="value">{{orderInfo.prize_num}}</text>
				</view>
				<view class="info-item">
					<text class="label">单价：</text>
					<text class="value">¥{{orderInfo.goods_price}}</text>
				</view>
			</view>
			
			<view class="info-section">
				<view class="section-title">支付信息</view>
				<view class="info-item">
					<text class="label">订单原价：</text>
					<text class="value">¥{{orderInfo.order_total}}</text>
				</view>
				<view class="info-item">
					<text class="label">实际支付：</text>
					<text class="value price">¥{{orderInfo.order_zhe_total}}</text>
				</view>
				<view class="info-item">
					<text class="label">微信支付：</text>
					<text class="value">¥{{orderInfo.price}}</text>
				</view>
				<view class="info-item">
					<text class="label">钻石支付：</text>
					<text class="value">¥{{orderInfo.use_money}}</text>
				</view>
				<view class="info-item">
					<text class="label">UU币支付：</text>
					<text class="value">¥{{orderInfo.use_integral}}</text>
				</view>
				<view class="info-item">
					<text class="label">达达券支付：</text>
					<text class="value">¥{{orderInfo.use_money2}}</text>
				</view>
				<view class="info-item">
					<text class="label">优惠金额：</text>
					<text class="value">¥{{orderInfo.use_coupon}}</text>
				</view>
				<view class="info-item">
					<text class="label">支付时间：</text>
					<text class="value">{{orderInfo.pay_time}}</text>
				</view>
			</view>
			
			<view class="info-section" v-if="orderInfo.goods_list && orderInfo.goods_list.length > 0">
				<view class="section-title">奖品列表</view>
				<view class="prize-list">
					<view class="prize-item" v-for="(item, index) in orderInfo.goods_list" :key="index">
						<image class="prize-image" :src="item.goodslist_imgurl" mode="aspectFill"></image>
						<view class="prize-info">
							<view class="prize-title">{{item.goodslist_title}}</view>
							<view class="prize-price">¥{{item.goodslist_price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="loading" v-else-if="loading">加载中...</view>
		<view class="error" v-else>订单数据加载失败</view>
	</page-container>

</template>

<script>
	import PageContainer from '@/components/page-container/page-container.vue'
	export default {
		components: {
			PageContainer
		},
		data() {
			return {
				orderNum: '',
				orderInfo: null,
				loading: true
			}
		},
		onLoad(options) {
			if (options.order_num) {
				this.orderNum = options.order_num;
				this.load();
			} else {
				this.$c.msg('订单参数缺失');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			async load() {
				this.loading = true;
				try {
					const { status, data, msg } = await this.$request.post('order_detail', { 
						order_num: this.orderNum 
					});
					
					if (status !== 1) {
						this.$c.msg(msg);
						return;
					}
					
					this.orderInfo = data;
				} catch (error) {
					console.error('加载订单详情失败', error);
					this.$c.msg('加载失败，请重试');
				} finally {
					this.loading = false;
				}
			},

		}
	}
</script>

<style lang="scss">
.order-info {
	padding: 30rpx;
	
	.info-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
			border-bottom: 1px solid #eee;
			padding-bottom: 16rpx;
		}
		
		.info-item {
			display: flex;
			margin-bottom: 16rpx;
			font-size: 28rpx;
			line-height: 1.5;
			
			.label {
				color: #666;
				width: 180rpx;
				flex-shrink: 0;
			}
			
			.value {
				flex: 1;
				
				&.price {
					color: #f56c6c;
					font-weight: bold;
				}
			}
		}
		
		.prize-list {
			.prize-item {
				display: flex;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				
				&:last-child {
					margin-bottom: 0;
					padding-bottom: 0;
					border-bottom: none;
				}
				
				.prize-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
					background-color: #f5f5f5;
				}
				
				.prize-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.prize-title {
						font-size: 28rpx;
					}
					
					.prize-price {
						font-size: 28rpx;
						color: #f56c6c;
					}
				}
			}
		}
	}
}

.loading, .error {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}
</style>