flavorOfTimeSz/subPackages/order/orderDetail.vue

<template>
	<view class="bg">
		<view class="title-box">
			<uni-icons type="left" size="30"  @click="goBack"></uni-icons>
			<view>订单状态</view>
		</view>
		
		<view class="state-box">
			<view>{{info.state_text}}</view>
		
			<!-- 待支付时会显示自动取消时间 -->
			<view v-if="info.state=='WAIT_PAYMENT'" class="close-time">订单将在<span>{{info.close_time.slice(-8)}}</span>自动取消</view>
		
			<!-- 待退款 -->
			<view v-if="info.state=='REFUNDING'" class="close-time">系统将在1-7个工作日内原路退回您的原支付账户</view>
		
			<!-- 退款完成 -->
			<view v-if="info.state=='REFUND'" class="close-time">您的退款金额已退还到您的原支付账户</view>
		</view>
		
		<view class="box">
			<!-- 循环子订单 -->
			<view v-for="(item,index) in orderChildList" :key="index">
				<view class="product-box">
					<view class="title" @click="item.type=item.product_model;gotoDetailByType(item)">
						{{item.product_title}}
						<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/rightIcon.png" class="rightIcon"></image>
					</view>
					<view class="subtitle" v-if="item.use_date"><span>出行时间：</span>{{item.use_date}}</view>
					<view class="subtitle" v-if="item.use_date"><span>开放时间：</span>{{item.use_date}}</view>
					<view class="line"></view>
					<view class="skutitle flex-between">
						<view>{{item.sku_name}}</view>
						<view>
							<span>￥{{item.product_price / 100}}</span>
							x{{item.product_num}}
						</view>
					</view>
				</view>
				
				<view class="product-box">
					<view class="title">出行人</view>
					<view class="subtitle flex-between">
						<span>手机号：</span>{{item.phone}}
					</view>
				</view>
			</view>
			
			<view class="product-box">
				<view class="subtitle flex-between">
					<span>商品总额：</span>￥{{info.total_money / 100}}
				</view>
				<view class="subtitle flex-between">
					<span>优惠券：</span>-￥{{info.preference_money / 100}}
				</view>
				<view class="subtitle flex-between">
					<span>实付金额：</span><view class="price">{{info.paid_money / 100}}</view>
				</view>
			</view>
			
			<view class="product-box">
				<view class="title">订单信息</view>
				<view class="subtitle" style="display: flex;">
					<span>订单账号：</span>{{info.order_id}}
					<view class="copy flex-around" @click="clickCopy">
						<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/copy.png"></image>
						复制
					</view>
				</view>
				<view class="subtitle">
					<span>下单时间：</span>{{info.close_time}}
				</view>
			</view>
			
			<view class="kefu-box">
				<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/kefu.png"></image>
				联系客服
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				info: {},
				orderChildList: []
			}
		},
		onLoad(option) {
			this.orderId = option.id
			this.getDetail()
		},
		methods: {
			getDetail() {
				this.Post({
					order_id: this.orderId
				},'/api/order/query').then(res => {
					console.log(res.data)
					this.info = res.data
					this.orderChildList = res.data.order_product_list
					// 景点、线路、自提需展示二维码
					// this.info.order_product_list.forEach(item => {})
				})
			},
			// 复制订单号
			clickCopy() {
				uni.setClipboardData({
					data: this.info.order_id, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		overflow-x: hidden;
		min-height: 100vh;
		background-color: #F7F7F7;
		padding-bottom: 200rpx;
	}
	
	.title-box {
		font-size: 40rpx;
		padding: 0 26.67rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		width: 100%;
		background: #D3E8A7;
		height: 176rpx;
		padding: 90rpx 26rpx 0 ;
	
		view {
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			margin-left: 230rpx;
		}
	}
	
	.state-box {
		width: 750rpx;
		height: 240rpx;
		background: linear-gradient(180deg, #D3E8A7, #D3E8A7, #D3E8A7, #F7F7F7);
		padding: 42rpx 0 0 53rpx;
		font-weight: bold;
		font-size: 43rpx;
		color: #000000;
	
		.close-time {
			font-weight: 500;
			font-size: 27rpx;
			color: #000000;
			
			span {
				color: #C3282E;
			}
		}
	}
	
	.box {
		position: relative;
		padding: 0 26rpx;
		margin-top: -66rpx;
		
		.product-box {
			padding: 28rpx 28rpx 46rpx;
			margin-bottom: 22rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			
			.title {
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
				display: flex;
				align-items: center;
				
				.rightIcon {
					width: 17.33rpx;
					height: 29.33rpx;
					margin-left: 25rpx;
				}
			}
			
			.subtitle {
				font-weight: 500;
				font-size: 27rpx;
				color: #000000;
				margin-top: 18rpx;
				
				span {
					color: #666666;
					min-width: 125rpx;
				}
			}
			
			.line {
				width: 643rpx;
				height: 1rpx;
				background: #D8D8D8;
				margin: 33rpx 0;
			}
			
			.skutitle {
				font-weight: 500;
				font-size: 27rpx;
				color: #000000;
				
				span {
					margin-right: 60rpx;
				}
			}
			
			.price {
				font-weight: bold;
				font-size: 34rpx;
				color: #C3282E;
			}
			.price::before {
				font-size: 24rpx;
				content: '￥';
			}
			
			.copy {
				width: 93rpx;
				height: 37rpx;
				border-radius: 11rpx;
				border: 1rpx solid #515150;
				font-weight: 500;
				font-size: 22rpx;
				color: #515150;
				margin-left: 30rpx;
				
				image {
					width: 22rpx;
					height: 23.33rpx;
				}
			}
		}
		
		.kefu-box {
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding-left: 27rpx;
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 31rpx;
			color: #000000;
			
			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 14rpx;
			}
		}
	}
</style>