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="" v-if="item.isQrcode && item.qrcode.length > 0">
					<view class="qrcode-remain">
						还剩<span>{{item.remainNum}}</span>张未核销
					</view>

					<swiper class="qrcode-box" :circular="false" previous-margin="100rpx" next-margin="100rpx"
						:duration="800" :current="item.current" @change="swiperChange($event,item)">
						<swiper-item v-for="(qrItem, qrIndex) in item.qrcode" :key="qrIndex" class="flex-center">
							<view class="qrcode-item flex-column">
								<view class="qrcode-title">{{item.sku_name}}</view>
								<image :src="qrItem.qrcodeimg" style="width: 300rpx;height: 300rpx;"
									mode="aspectFill"></image>
								<canvas :id="'qrcodeT'+qrItem.use_code+qrIndex" :canvas-id="'qrcodeT'+qrItem.use_code+qrIndex"
									style="width:150px;height:150px;z-index: -20;bottom: -500px;position: absolute;"></canvas>
								<view class="qrcode-subtitle">
									核销码:{{qrItem.use_code}}</view>

								<view class="complete-text flex-center"
									v-if="qrItem.state > 0">
									<view class="flex-center" v-if="qrItem.state == 1">
										已核销
									</view>
									<view class="flex-center" v-else>
										已失效
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>

					<!-- 指示点 -->
					<view class="swiper-point flex-center">
						<view v-for="(qrItem,qrIndex) in item.qrcode" :key="qrIndex"
							:class="[{'swiper-points': qrIndex == item.current}]"></view>
					</view>

					<!-- 提示语 -->
					<view class="swiper-prompt">左右滑动核销其他二维码</view>
				</view>
				
				<!-- 收货地址 -->
				<view class="product-box" v-if="item.product_model == 'post' && !Array.isArray(item.consignee_info)">
					<view class="title">收货信息</view>
					<view class="subtitle" style="font-weight: bold;font-size: 31rpx;">{{item.consignee_info.name}}  {{item.consignee_info.tel}}</view>
					<view class="subtitle"><span>{{item.consignee_info.address}}</span></view>
				</view>
				
				<!-- 景点商品详情 -->
				<view class="product-box" v-if="item.product_model == 'ticket'">
					<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.scene_detail.open_time"><span>开放时间：</span>{{item.scene_detail.open_time}}</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" v-if="item.product_model == 'post' && item.pickup_shop_id > 0">
					<view class="title">自提信息</view>
					<view class="pick-box flex-between">
						<view class="pick-title">
							<view style="display: flex;align-items: center;">
								<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/location.png" mode=""></image>
								{{item.pickup_shop_info.title}}
							</view>
							<view class="pick-subtitle" style="padding: 20rpx 0 0 50rpx;">
								{{item.pickup_shop_info.address}}
							</view>
						</view>
						<view class="pick-subtitle flex-center">
							<view v-if="item.pickup_shop_info.tel" @click="clickPhone(item.pickup_shop_info.tel)">
								<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/phone.png" mode=""></image>
								电话
							</view>
							<view style="margin-left: 35rpx;" v-if="item.pickup_shop_info.lon && item.pickup_shop_info.lat"
							 @click="openLocation(item.pickup_shop_info.lat,item.pickup_shop_info.lon)">
								<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/navigation.png" mode=""></image>
								导航
							</view>
						</view>
					</view>
				</view>
				
				<!-- 邮寄、自提商品详情 -->
				<view class="product-box" v-if="item.product_model == 'post'">
					<view class="good-box">
						<image :src="item.product_img" mode="aspectFill" @click="item.type=item.product_model;gotoDetailByType(item)"></image>
						<view class="flex-column">
							<span class="good-title text-overflowRows">{{item.product_title}}</span>
							<span class="good-subtitle">{{item.sku_name}}</span>
						</view>
						<view class="flex-column">
							<span class="good-title">￥{{item.product_price / 100}}</span>
							<span class="good-subtitle">x{{item.product_num}}</span>
						</view>
					</view>
				</view>
				
				<!-- 酒店信息 -->
				<view class="product-box" v-if="item.product_model == 'hotel'">
					<view class="title">入住信息</view>
					<view class="hotel-title">
						{{item.product_title}}
					</view>
				</view>
				<!-- <view class="product-box" v-if="item.product_model == 'hotel'">
					<view class="title">{{入住信息}}</view>
					<view class="good-title">
						{{item.product_title}}
					</view>
					
					<view class="order-time flex-between" style="justify-content: space-around;">
						<view class="time">
							<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.startDay).Format('MM-dd')}}</view>
							<view style="padding:0 14rpx">{{ ShowDateDay(new Date(selectDate.startDay).getDay()) }}</view>
							<view style="color: #999999;">入住</view>
						</view>
						<view class="cal-day">
							共{{selectDate.differDays}}晚
						</view>
						<view class="time">
							<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.endDay).Format('MM-dd')}}</view>
							<view style="padding:0 14rpx">{{ShowDateDay(new Date(selectDate.endDay).getDay()) }}</view>
							<view style="color: #999999;">离店</view>
						</view>
					</view>
				</view> -->
				
				<!-- 景点出行人 -->
				<view class="product-box" v-if="item.product_model == 'ticket' && item.phone">
					<view class="title">出行人</view>
					<view class="subtitle">
						<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>

			<button id="contact" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
				<view class="kefu-box">
					<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/kefu.png"></image>
					联系客服
				</view>
			</button>
		</view>
	</view>
</template>

<script>
	import QRCode from '@/static/js/weapp-qrcode.js'
	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
					// 景点ticket、线路line、自提需展示二维码
					this.info.order_product_list.forEach(item => {
						// 收货地址
						if(item.product_model == 'post' && item.consignee_info) item.consignee_info = JSON.parse(item.consignee_info)
						console.log(item.consignee_info)
						// 自提信息
						if(item.product_model == 'post' && item.pickup_shop_id > 0) item.pickup_shop_info = JSON.parse(item.pickup_shop_info)
						
						// 判断是否展示核销码
						if (['ticket', 'line', 'post'].includes(item.product_model)) {
							item.isQrcode = true
							if (item.product_model == 'post' && !item.pickup_shop_id) {
								item.isQrcode = false
							}
							// 未核销数量
							item.remainNum = 0
							// 轮播图滚动index
							item.current = 0

							// 生成二维码
							item.qrcode.forEach((qrItem, qrIndex) => {
								if (qrItem.state == 0) {
									item.remainNum += 1
								}

								this.getCodeImg(qrItem, qrIndex)
							})
						}
					})
				})
			},
			// 生成二维码
			getCodeImg(item, index) {
				new QRCode('qrcodeT' + item.use_code + index, {
					text: item.use_code,
					width: 150,
					height: 150,
					padding: 2,
					colorDark: 'rgb(0,0,0)',
					colorLight: 'rgb(255,255,255)',
					correctLevel: QRCode.CorrectLevel.M, // 二维码可辨识度
					callback: res => {
						this.$set(item, 'qrcodeimg', res.path);
						this.$forceUpdate();
					}
				});
			},
			//轮播图左右滑动
			swiperChange(e,item) {
				let {
					current,
					source
				} = e.detail;
				//在自动或手动的时候才赋予current值
				if (source === 'autoplay' || source === 'touch') {
					item.current = current;
				}
				this.$forceUpdate()
			},
			// 复制订单号
			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: #d8d8d83b;
				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;
				}
			}
			
			.pick-box {
				margin-top: 50rpx;
				
				.pick-title {
					font-weight: bold;
					font-size: 31rpx;
					color: #222222;
					width: 500rpx;
					
					image {
						width: 33.33rpx;
						height: 33.33rpx;
						margin-right: 18rpx;
					}
				}
				
				.pick-subtitle {
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
					
					image {
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 10rpx;
						display: block;
					}
					
					&>view {
						display: flex;
						flex-direction: column;
						align-items: center;
					}
				}
			}
			
			.hotel-title {
				font-weight: bold;
				font-size: 31rpx;
				color: #222222;
				margin-top: 30rpx;
			}
		}

		.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;
			}
		}
		
		.good-box {
			display: flex;
			
			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 13rpx;
			}
			
			&>view {
				height: 140rpx;
				justify-content: space-between;
				padding-bottom: 14rpx;
				margin-left: 18rpx;
				width: 371rpx;
			}
			&>view:last-child {
				margin-left: auto;
				width: fit-content;
				text-align: right;
			}
			
			.good-title {
				font-weight: bold;
				font-size: 27rpx;
				color: #000000;
			}
			
			.good-subtitle {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
			
			.order-time{
				height: 107rpx;
				background: linear-gradient(180deg, #FFFFFF, #F7F7F7);
				.time{
					display: flex;
					font-family: PingFang SC;
					font-size: 24rpx;
					color: #000000;
					align-items: center;
				}
			}
			.cal-day{
				background: #F2F2F2;
				border-radius: 17rpx;
				padding: 5rpx 16rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
			}
		}
	}

	button {
		padding: 0;
	}

	button::after {
		border: none;
		background-color: rgba(0, 0, 0, 0);
	}
	
	
	
	
	
	
	
	
	// 二维码
	.qrcode-remain {
		font-weight: bold;
		font-size: 29rpx;
		color: #000000;
		text-align: center;
	
		span {
			width: 60rpx;
			text-align: center;
			color: #C3282E;
			display: inline-block;
		}
	}
	
	.qrcode-box {
		height: 456rpx;
		display: flex;
		align-items: center;
		margin-top: 32rpx;
	
		.qrcode-item {
			width: 467rpx !important;
			height: 456rpx !important;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 33rpx 0rpx rgba(102, 102, 102, 0.2);
			border-radius: 20rpx;
			padding: 25rpx 0;
			justify-content: space-between;
			align-items: center;
			position: relative;
	
			image {
				width: 300rpx;
				height: 300rpx;
			}
	
			.qrcode-title {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}
	
			.qrcode-subtitle {
				font-weight: 500;
				font-size: 27rpx;
				color: #888888;
			}
	
			.complete-text {
				position: absolute;
				width: 300rpx;
				height: 300rpx;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				background: rgba(0, 0, 0, .5);
	
				view {
					width: 200rpx;
					height: 200rpx;
					background: #FFFFFF;
					border-radius: 100rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}
			}
		}
	}
	
	.swiper-point {
		height: 63rpx;
	
		view {
			width: 11rpx;
			height: 11rpx;
			background: #D3E8A7;
			border-radius: 50%;
		}
	
		view:not(:first-child) {
			margin-left: 13rpx;
		}
	
		.swiper-points {
			background: #6A8A2D;
		}
	}
	
	.swiper-prompt {
		font-weight: 500;
		font-size: 29rpx;
		color: #C3282E;
		text-align: center;
		margin-bottom: 45rpx;
	}
</style>