changshu_WeChat/subPackages/order/detail.vue

<template>
	<view class="bg">
		<view class="title-box">
			<span class="iconfont" @click="goBack">&#xe660;</span>
			<view>订单状态</view>
		</view>
		<view class="top-box">
			<view>{{info.status_text}}</view>

			<!-- 待支付时会显示自动取消时间 -->
			<view v-if="info.status=='WAIT_PAYMENT'" class="close-time">订单将在{{info.close_time.slice(-8)}}自动取消</view>
			
			<!-- 待退款 -->
			<view v-if="info.status=='WAIT_REFUND'" class="close-time">系统将在1-7个工作日内原路退回您的原支付账户</view>
			
			<!-- 退款完成 -->
			<view v-if="info.status=='REFUND_SUCCESS'" class="close-time">您的退款金额已退还到您的原支付账户</view>
		</view>

		<!-- 景点、美食二维码 -->
		<view v-if="isQrcode" style="margin-top: -66rpx;">
			<view class="qrcode-remain" v-if="!info.order_child[0].extract_id">还剩<span>{{remainNum}}</span>张未核销</view>

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

						<view class="complete-text flex-center"
							v-if="['WAIT_REFUND','REFUND_SUCCESS','WAIT_COMMENT','COMPLETE'].includes(item.status)">
							<view class="flex-center" v-if="item.status == 'WAIT_COMMENT'">
								已核销
							</view>
							<view class="flex-center" v-else>
								已失效
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

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

			<!-- 提示语 -->
			<view class="swiper-prompt">左右滑动核销其他二维码</view>
		</view>

		<!-- 子订单里info.order_child[0].goods_genre：景点ticket、酒店hotel、美食food、邮寄自提pgoods、 -->

		<view :style="{margin: isQrcode ? '0' : '-66rpx auto 0'}" v-if="info.order_child">
			<!-- 景点订单 -->
			<view v-if="info.order_child[0].goods_genre == 'ticket'">
				<!-- 景点详情 -->
				<view class="scenic-detail">
					<view>
						<view class="scenic-title" @click="gotoDetail">
							{{info.order_child[0].goods_title}}
							<image src="https://static.ticket.sz-trip.com/yandu/images/order/rightIcon.png"></image>
						</view>
						<view class="scenic-subtitle">
							出行时间：<span>{{info.order_child[0].use_date}}</span>
						</view>
						<view class="scenic-subtitle" v-if="info.order_child[0].scenic_data.open_description">
							开放时间：<span>{{info.order_child[0].scenic_data.open_description}}</span>
						</view>
					</view>

					<!-- 子订单规格 -->
					<view>
						<view v-for="(item,index) in info.order_child" :key="index"
							class="specifications-item flex-between">
							<view>{{item.specifications_name}}</view>
							<view class="flex-between" style="width: 150rpx;">
								<view>￥{{item.money / 100}}</view>
								<view>x{{item.num}}</view>
							</view>
						</view>
					</view>

					<!-- 商品价格 -->
					<view class="public-price">
						<view class="flex-between">
							商品总额：<span>￥{{info.money / 100}}</span>
						</view>
						<view class="flex-between" v-if="info.discounts">
							优惠券：<span>-￥{{info.discounts / 100}}</span>
						</view>
						<view class="flex-between">
							实付金额：<span style="font-size: 35rpx;color: #EE3E3B;">￥{{info.pay_money / 100}}</span>
						</view>
					</view>
				</view>

				<!-- 出行人 -->
				<view class="novice-box" v-if="order_child[0].contact_name">
					出行人
					<view v-for="(item,index) in info.order_child" :key="index" class="novice-item">
						<view class="novice-title">{{item.specifications_name}}</view>
						<view class="novice-subtitle" v-if="item.contact_name">
							<span>姓名：</span>{{item.contact_name}}
						</view>
						<view class="novice-subtitle" v-if="item.id_number">
							<span>身份证：</span>{{item.id_number}}
						</view>
					</view>
				</view>
			</view>

			<!-- 邮寄、自提订单 -->
			<view v-if="info.order_child[0].goods_genre == 'pgoods'">
				<view class="shipping-address" v-if="info.order_child[0].consignee_id">
					收货地址
					<view>{{info.order_child[0].consignee.name}} {{info.order_child[0].consignee.tel}}</view>
					<view class="text-overflowRows">{{info.order_child[0].consignee.address}}</view>
				</view>

				<!-- 产品详情 -->
				<view class="pgoods-detail">
					商家名称
					<view class="pgoods-product" v-for="(item,index) in info.order_child" :key="index">
						<image :src="showImg(item.specifications_image)" mode="aspectFill" class="product-img"></image>
						<view class="product-content flex-column">
							<view class="product-title">{{item.goods_title}}</view>
							<view class="product-subtitle flex-between">
								{{item.specifications_name}}
								<span>x{{item.num}}</span>
							</view>
						</view>
					</view>

					<!-- 商品价格 -->
					<view class="public-price">
						<view class="flex-between">
							商品总额：<span>￥{{info.money / 100}}</span>
						</view>
						<view class="flex-between" v-if="info.discounts">
							优惠券：<span>-￥{{info.discounts / 100}}</span>
						</view>
						<view class="flex-between">
							实付金额：<span style="font-size: 35rpx;color: #EE3E3B;">￥{{info.pay_money / 100}}</span>
						</view>
					</view>
				</view>

				<!-- 自提信息 -->
				<view class="pickup-box" v-if="info.order_child[0].contact_id && info.order_child[0].extract_id">
					自提信息
					<view class="pickup-user">
						<image src="https://static.ticket.sz-trip.com/yandu/images/order/user.png" class="picker-img">
						</image>
						<view>{{info.order_child[0].contact.name}}</view>
						<view>{{info.order_child[0].contact.tel}}</view>
					</view>
					<view class="pickup-address">
						<image src="https://static.ticket.sz-trip.com/yandu/images/order/location.png"
							class="picker-img" style="margin-top: 6rpx;"></image>

						<view>
							<view class="picker-shopName">{{info.order_child[0].extract.extract_name}}</view>
							<view class="picker-shopAddress">{{info.order_child[0].extract.detail_addr}}</view>
						</view>

						<view class="pickup-icon flex-center">
							<view @click="clickPhone(info.order_child[0].extract.mobile)">
								<image src="https://static.ticket.sz-trip.com/yandu/images/order/phone.png" mode="">
								</image>
								电话
							</view>
							<view
								@click="openLocation(info.order_child[0].extract.lat,info.order_child[0].extract.lon)">
								<image src="https://static.ticket.sz-trip.com/yandu/images/order/navigations.png"
									mode=""></image>
								导航
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 场馆 -->
			<view>
				<view class="pgoods-detail">
					购买信息
					<view class="pgoods-product" style="border-bottom: none;">
						<image :src="showImg(foodInfo.image)" mode="aspectFill" class="product-img"></image>
						<view class="product-content flex-column">
							<view class="product-title">{{foodInfo.title}}</view>
							<view class="product-subtitle flex-between">
								<view class="product-tags" v-if="foodInfo.specifications_new_tag">
									<view v-for="(item,index) in foodInfo.specifications_new_tag.split(',').slice(0,3)"
										:key="index">{{item}}</view>
								</view>
								<span>x{{info.order_child[0].num}}</span>
							</view>
						</view>
					</view>

					<!-- 商品价格 -->
					<view class="public-price">
						<view class="flex-between">
							商品总额：<span>￥{{info.money / 100}}</span>
						</view>
						<view class="flex-between" v-if="info.discounts">
							优惠券：<span>-￥{{info.discounts / 100}}</span>
						</view>
						<view class="flex-between">
							实付金额：<span style="font-size: 35rpx;color: #EE3E3B;">￥{{info.pay_money / 100}}</span>
						</view>
					</view>
				</view>

				<!-- <view class="shop-detail">
					商家信息
					<view class="shop-name">店铺名称</view>
					<view class="shop-info">
						<view>
							<view style="margin-top: 23rpx; display: flex;" v-if="info.order_child[0].goods_data.open_description">
								<image src="https://static.ticket.sz-trip.com/yandu/images/order/time.png"
									class="shop-time"></image>
								<view>
									<view class="shop-title">营业时间</view>
									<view class="shop-subtitle">{{info.order_child[0].goods_data.open_description}}</view>
								</view>
							</view>
						</view>

						<view>
							<view class="flex-center" style="margin-top: 23rpx;">
								<view style="display: flex;">
									<image src="https://static.ticket.sz-trip.com/yandu/images/order/location.png"
										class="shop-time"></image>
									<view style="width: 420rpx;">
										<view class="shop-title text-overflow">
											{{info.order_child[0].goods_data.address}}
										</view>
										<view class="shop-subtitle" v-if="info.order_child[0].goods_data.distance">
											距您约{{info.order_child[0].goods_data.distance > 1000 ? (info.order_child[0].goods_data.distance / 1000).toFixed(2) + 'km' : info.order_child[0].goods_data.distance + 'm'}}
										</view>
									</view>
								</view>

								<view class="shop-icon">
									<image src="https://static.ticket.sz-trip.com/yandu/images/order/phone.png"
										@click="clickPhone(info.order_child[0].goods_data.tel)"></image>
									<image src="https://static.ticket.sz-trip.com/yandu/images/order/navigations.png"
										@click="openLocation(info.order_child[0].goods_data.tengxun_map.lat,info.order_child[0].goods_data.tengxun_map.lon)"></image>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>

			<!-- 酒店 -->
			<view v-if="info.order_child[0].goods_genre == 'hotel'">
				<view class="hotel-detail">
					入住信息
					<view class="hotel-title">{{info.order_child[0].goods_title}}</view>

					<view class="hotel-date">
						<view>
							{{(info.order_child[0].start_date).slice(5)}}
							<span>{{ShowDateDay(new Date(info.order_child[0].start_date).getDay())}}入住</span>
						</view>
						<view class="hotel-days">共{{calDate(info.order_child[0].start_date, info.order_child[0].end_date)}}晚</view>
						<view class="use-date">
							{{info.order_child[0].end_date.slice(5)}}
							<span>{{ShowDateDay(new Date(info.order_child[0].end_date).getDay())}}离店</span>
						</view>
					</view>
					
					<view class="flex-between" style="margin-top: 30rpx;">
						<view class="hotel-address flex-between">
							<view class="address text-overflowRows">{{info.order_child[0].scenic_data.address}}</view>
							<view class="address-image" @click="openLocation(info.order_child[0].scenic_data.tengxun_map.lat,info.order_child[0].scenic_data.tengxun_map.lon)">
								<image src="https://static.ticket.sz-trip.com/yandu/images/order/navigation.png"></image>
								<view>地图</view>
							</view>
						</view>
						<view class="hotel-phone flex-center" @click="clickPhone(info.order_child[0].scenic_data.tel)">
							<image src="https://static.ticket.sz-trip.com/yandu/images/order/hotelPhone.png"></image>
							<view>电话</view>
						</view>
					</view>
					
					<view class="hotel-skuName flex-between">
						<view class="text-overflow">{{info.order_child[0].specifications_name}}</view>
						<view class="flex-between">
							<view>￥{{info.order_child[0].money / 100}}</view>
							<view>x{{info.order_child[0].num}}</view>
						</view>
					</view>
					
					<!-- 商品价格 -->
					<view class="public-price">
						<view class="flex-between">
							商品总额：<span>￥{{info.money / 100}}</span>
						</view>
						<view class="flex-between" v-if="info.discounts">
							优惠券：<span>-￥{{info.discounts / 100}}</span>
						</view>
						<view class="flex-between">
							实付金额：<span style="font-size: 35rpx;color: #EE3E3B;">￥{{info.pay_money / 100}}</span>
						</view>
					</view>
				</view>
				
				<view class="hotel-information">
					预订信息
					<view><span>房间数：</span>{{info.order_child[0].num}}间</view>
					<view><span>入住姓名：</span>{{info.reserve_name}}</view>
					<view><span>联系电话：</span>{{info.reserve_phone}}</view>
				</view>
			</view>
		</view>
		
		<!-- 出行人 -->
		<view class="order-info">
			出行人
			<view class="order-subtitle">
				<span>联系电话：</span>{{info.phone}}
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-info">
			订单信息
			<view class="order-subtitle" style="display: flex;align-items: center;">
				<span>订单账号：</span>{{info.order_id}}
				<view class="copy flex-around" @click="clickCopy">
					<image src="https://static.ticket.sz-trip.com/changshu/images/order/copy.png" class="copy-img"></image>
					复制
				</view>
			</view>
			<view class="order-subtitle">
				<span>下单时间：</span>{{info.create_time}}
			</view>
			<view class="order-subtitle" v-if="info.pay_time">
				<span>支付时间：</span>{{info.pay_time}}
			</view>
		</view>

		<!-- 联系客服 -->
		<view class="kefu-box" @click="$refs.popup.open()">
			<image src="https://static.ticket.sz-trip.com/changshu/images/order/kefu.png" mode="" class="kefu-img"></image>
			联系客服
		</view>

		<!-- 底部按钮 -->
		<footer>
			<view class="bottom-price" v-if="info.status == 'WAIT_PAYMENT'">
				合计：
				<span class="price">{{info.pay_money/100}}</span>
			</view>
			<view class="btn-box">
				<view class="btn" v-if="info.status == 'PAYMENT_SUCCESSFULLY'" @click="refund(info.order_id)">
					取消订单
				</view>

				<view class="btn" v-if="info.status == 'WAIT_PAYMENT'" @click="closeOrder(info.order_id)">
					关闭订单
				</view>

				<view class="btn"
					v-if="['WAIT_REFUND','REFUND_SUCCESS','WAIT_COMMENT','COMPLETE','CLOSED'].includes(info.status)"
					@click="gotoDetail">
					再次购买
				</view>

				<view class="btn pay-btn" v-if="info.status == 'WAIT_PAYMENT'" @click="setOrderId(info.order_id)">
					立即支付
				</view>
				
				<view class="btn" v-if="info.status == 'POST' && info.order_child[0].goods_genre == 'pgoods'" @click="openMask()">
					快递查询
				</view>
				
				<view class="btn" v-if="info.status == 'POST' && info.order_child[0].goods_genre == 'pgoods'" @click="confirmGoods()">
					确认收货
				</view>
			</view>
		</footer>
		
		<!-- 快递详情 -->
		<view class="mask" v-if="maskShow">
			<view class="mask-bg" @click="maskShow = false"></view>
			<view class="mask-content">
				<p class="mask-title">物流信息</p>
				<view class="iconfont" @click="maskShow = false">x</view>
				<view class="express-all">
					<view class="express-item" v-for="item,index in postInfo" :key="index">
						<view class="line" v-if="index != postInfo.length - 1"></view>
						<view class="express-item-icon" v-if="index!=0">·</view>
						<view class="express-item-icon express-item-icons" v-else>·</view>
						<view :class="['express-info',index==0?'active':'']">
							<p>{{item.AcceptStation}}</p>
							<p class="express-time">{{item.AcceptTime}}</p>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 客服弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="consult-popup">
				即将拨打客服电话
				<view class="consult-subtitle">服务时间：周一至周五<br>8:30-11:30，14:30-18:00</view>
				<view class="consult-btns">
					<view @click="$refs.popup.close()">取消</view>
					<view @click="clickPhone('0515-69186109')">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import QRCode from '@/static/js/weapp-qrcode.js'
	export default {
		data() {
			return {
				order_id: '',
				info: {},
				foodInfo: {},
				current: 0,
				isQrcode: false,
				remainNum: 0,
				maskShow: false,
				postInfo: []
			}
		},
		onLoad(option) {
			this.order_id = option.id
			this.getDetail()
		},
		onShow() {

		},
		methods: {
			// 计算两个日期间的天数
			calDate(startDate, endDate) {
				var start = new Date(startDate);
				var end = new Date(endDate);
				var diff = end - start;
				var days = Math.floor(diff / (1000 * 60 * 60 * 24)); // 计算天数差
				return days;
			},
			// 获取订单详情
			getDetail() {
				this.Post({
					order_id: this.order_id,
					lon: uni.getStorageSync('location').lon || '110.43785794300781',
					lat: uni.getStorageSync('location').lat || '36.95286642085422'
				}, '/api/order/orderDetail').then(res => {
					this.info = res.data;

					// if (this.info.order_child[0].goods_genre == 'food') {
						// 场馆类的需要调取规格详情
						this.Post({
							goods_id: this.info.order_child[0].goods_id
						}, '/api/goods/getSpecificationsByGoodsId').then(res => {
							res.data.forEach(item => {
								if (item.id == this.info.order_child[0].specifications_id) this
									.foodInfo = item
							})
						})
					// }

					// 景点、美食二维码
					// if (['ticket', 'food'].includes(this.info.order_child[0].goods_genre) || (this.info.order_child[0].contact_id && this.info.order_child[0].extract_id)) {
						if (['PAYMENT_SUCCESSFULLY', 'WAIT_REFUND', 'REFUND_SUCCESS', 'WAIT_COMMENT', 'COMPLETED']
							.includes(this.info.status)) {
							this.isQrcode = true
							for (let i = 0; i < this.info.order_child.length; i++) {
								// 有third_order_id 优先用third_order_id
								this.getCodeImg(this.info.order_child[i].third_order_id||this.info.order_child[i].child_id, i);

								// 未核销数量
								if (this.info.order_child[i].status == 'SUCCESS') this.remainNum += 1
							}
						} else if (!['WAIT_PAYMENT', 'CLOSED'].includes(this.info.status)) {
							for (let i = 0; i < this.info.order_child.length; i++) {
								if (this.info.order_child[i].is_display_order_qrcode) {
									this.isQrcode = true
									this.getCodeImg(this.info.order_child[i].third_order_id||this.info.order_child[i].child_id, i);

									// 未核销数量
									if (this.info.order_child[i].status == 'SUCCESS') this.remainNum += 1
								}
							}
						}
					// }
					setTimeout(() => {
						console.log(this.info.order_child)
					}, 1000)
				})
			},
			// 生成二维码
			getCodeImg(code, index) {
				new QRCode('qrcodeT' + index, {
					text: 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(this.info.order_child[index], 'qrcodeimg', res.path);
						this.$forceUpdate();
					}
				});
			},
			//轮播图左右滑动
			swiperChange(e) {
				let {
					current,
					source
				} = e.detail;
				//在自动或手动的时候才赋予current值
				if (source === 'autoplay' || source === 'touch') {
					this.current = current;
				}
			},
			// 复制订单号
			clickCopy() {
				uni.setClipboardData({
					data: this.info.order_id, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			// 再次购买：跳转产品详情
			gotoDetail() {
				let url = '/subPackages/venue/venueDetail?id=' + this.info.order_child[0].goods_id
				this.gotoPath(url)
			},
			// 申请退款
			refund(id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否申请退款？',
					success: successRes => {
						if (successRes.confirm) {
							that.Post({
									order_id: id
								},
								'/api/order/applyRefund'
							).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '申请成功',
										icon: 'success'
									});
									this.getDetail()
									uni.$emit("updateDataByConnect", {
										msgType: 'updateOrderTrades',
										data: {}
									})
								}
							});
						}
					}
				});
			},
			// 关闭订单
			closeOrder(id, index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认关闭订单？',
					success: successRes => {
						if (successRes.confirm) {
							that.Post({
								order_id: id
							}, '/api/order/closeOrder').then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '关闭成功',
										icon: 'success'
									});
									that.getDetail();
									uni.$emit("updateDataByConnect", {
										msgType: 'updateOrderTrades',
										data: {}
									})
								}
							});
						}
					}
				});
			},
			// 立即支付
			setOrderId(id) {
				let that = this;
				that.orderId = id;
				that.Post({
					order_id: id,
					type: "miniprogram",
					platform: 'miniprogram'
				}, '/api/pay/unify').then(res => {
					if (res.code == 1) {
						uni.requestPayment({
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success: () => {
								that.getDetail();
								uni.$emit("updateDataByConnect", {
									msgType: 'updateOrderTrades',
									data: {}
								})
							}
						});
					}
				});
			},
			// 快递查询
			openMask() {
				this.Post({
					child_order_id: this.info.order_child[0].child_id
				}, '/api/order/getExpress').then(res => {
					if (res.data.length > 0){
						this.postInfo = res.data.reverse()
						this.maskShow = true
					}else {
						uni.showToast({
							title: '暂未查询到物流信息，请联系客服',
							icon: 'none'
						});
					}
				})
			},
			// 确认收货
			confirmGoods() {
				uni.showModal({
					title: '提示',
					content: '是否确认收货？',
					success: successRes => {
						if (successRes.confirm) {
							this.Post({
								order_id: this.info.order_id
							}, '/api/order/confirmPost').then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '确认收货成功',
										icon: 'none'
									});
									this.getDetail();
									uni.$emit("updateDataByConnect", {
										msgType: 'updateOrderTrades',
										data: {}
									})
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		overflow-x: hidden;
		min-height: 100vh;
		background-color: #F7F7F7;
		padding-bottom: 200rpx;
	}

	.title-box {
		position: absolute;
		left: 5rpx;
		top: 101rpx;
		font-size: 40rpx;
		padding: 0 26.67rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		width: 100%;

		view {
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			margin-left: 245rpx;
		}
	}

	.top-box {
		width: 750rpx;
		height: 414rpx;
		background-image: url('https://static.ticket.sz-trip.com/uploads/20250320/9b94a0d8a5252b138eca8f9872c8397b.png');
		background-size: 100% 100%;
		padding: 200rpx 0 0 50rpx;
		font-weight: bold;
		font-size: 43rpx;
		color: #000000;

		.close-time {
			font-weight: 400;
			font-size: 27rpx;
			margin-top: 20rpx;
		}
	}

	// 景点、美食 二维码
	.qrcode-remain {
		font-weight: bold;
		font-size: 29rpx;
		color: #000000;
		text-align: center;

		span {
			width: 60rpx;
			text-align: center;
			color: rgba(238, 62, 59, 1);
			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: #CCCCCC;
			border-radius: 50%;
		}

		view:not(:first-child) {
			margin-left: 13rpx;
		}

		.swiper-points {
			background: #00AEA0;
		}
	}

	.swiper-prompt {
		font-weight: 500;
		font-size: 29rpx;
		color: #EE3E3B;
		text-align: center;
		margin-bottom: 45rpx;
	}

	// 景点订单详情
	.scenic-detail {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx;
		margin: auto;

		&>view:nth-child(2) {
			margin: 30rpx 0;
			border-top: 1rpx solid #D8D8D8;
			border-bottom: 1rpx solid #D8D8D8;
		}

		.scenic-title {
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;

			image {
				width: 17.33rpx;
				height: 29.33rpx;
				margin-left: 20rpx;
				vertical-align: middle;
			}
		}

		.scenic-subtitle {
			font-weight: 500;
			font-size: 27rpx;
			color: #666666;
			margin-top: 20rpx;

			span {
				color: #000;
			}
		}

		.specifications-item {
			font-weight: 500;
			font-size: 27rpx;
			color: #000000;
			margin: 25rpx 0;
		}
	}

	.novice-box {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #010101;
		margin: 20rpx auto;

		.novice-item {
			view {
				margin: 20rpx 0;
			}

			.novice-title {
				font-weight: 800;
				font-size: 27rpx;
				color: #333333;
			}

			.novice-subtitle {
				font-weight: 500;
				font-size: 27rpx;
				color: #000000;

				span {
					display: inline-block;
					width: 130rpx;
					color: #666666;
				}
			}
		}

		.novice-item:nth-child(n+2) {
			border-top: 1rpx solid #D8D8D8;
		}
	}

	// 邮寄订单详情
	.shipping-address {
		width: 697rpx;
		height: 235rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		margin: auto;

		&>view {
			margin-top: 25rpx;
			font-weight: 500;
		}

		&>view:first-child {
			font-size: 31rpx;
			color: #222222;
		}

		&>view:last-child {
			font-size: 31rpx;
			color: #222222;
			font-size: 27rpx;
			color: #666666;
		}
	}

	.pgoods-detail {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx;
		margin: 20rpx auto;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;

		.pgoods-product {
			display: flex;
			margin-top: 24rpx;
			padding-bottom: 33rpx;
			border-bottom: 1rpx solid #D8D8D8;

			.product-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 13rpx;
			}

			.product-content {
				width: 485rpx;
				height: 140rpx;
				margin-left: 18rpx;
				padding: 5rpx 0 12rpx;
				justify-content: space-between;

				.product-title {
					font-weight: bold;
					font-size: 27rpx;
					color: #000000;
				}

				.product-subtitle {
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;

					.product-tags {
						display: flex;

						&>view:not(:last-child)::after {
							content: '丨';
							width: 1rpx;
							height: 26rpx;
							color: #666666;
						}
					}
				}
			}
		}
	}

	// 自提点信息
	.pickup-box {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 33rpx 26rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;

		&>view {
			margin-top: 40rpx;
		}

		.picker-img {
			width: 33.33rpx;
			height: 33.33rpx;
		}

		.pickup-user {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;

			&>view:first-of-type {
				margin: 0 63rpx 0 19rpx;
			}
		}

		.pickup-address {
			display: flex;

			.pickup-addressImg {
				width: 33.33rpx;
				height: 33.33rpx;
			}

			&>view:first-of-type {
				width: 305rpx;
				margin-left: 18rpx;
			}

			.picker-shopName {
				font-weight: bold;
				font-size: 31rpx;
				color: #222222;
			}

			.picker-shopAddress {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin-top: 15rpx;
			}

			.pickup-icon {
				margin-left: auto;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;

				&>view {
					text-align: center;
				}

				&>view:last-child {
					margin-left: 40rpx;
				}

				image {
					width: 56rpx;
					height: 56rpx;
					display: block;
					margin-bottom: 5rpx;
				}
			}
		}
	}

	// 美食
	.food-name {
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		margin-bottom: 40rpx;
	}
	
	.shop-detail {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto 0;
		padding: 33rpx 26rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;

		.shop-name {
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
			margin-top: 30rpx;
		}

		.shop-info {
			.shop-time {
				width: 28rpx;
				height: 28rpx;
				margin: 5rpx 8rpx 0 0;
			}

			.shop-title {
				font-weight: 500;
				font-size: 26rpx;
				color: #000000;
			}

			.shop-subtitle {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin-top: 23rpx;
			}

			.shop-icon {
				margin-left: auto;

				image {
					width: 56rpx;
					height: 56rpx;
				}

				image:first-child {
					margin-right: 40rpx;
				}
			}
		}
	}

	// 酒店
	.hotel-detail {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 33rpx 26rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		margin: auto;

		.hotel-title {
			font-size: 31rpx;
			color: #222222;
			margin-top: 30rpx;
		}

		.hotel-date {
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
			display: flex;
			margin-top: 30rpx;

			span {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin-left: 20rpx;
			}
		}

		.hotel-days {
			width: 113rpx;
			line-height: 37rpx;
			background: #E8F6EB;
			border-radius: 18rpx;
			text-align: center;
			margin: 0 20rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
		}
		
		.hotel-address {
			width: 533rpx;
			height: 107rpx;
			background: url('https://static.ticket.sz-trip.com/yandu/images/order/addreeBg.png') no-repeat right;
			background-size: auto 100%;
			background-color: #E8F6EB;
			border-radius: 20rpx;
			padding: 22rpx 18rpx;
			
			.address {
				width: 398rpx;
				font-weight: 500;
				font-size: 27rpx;
				color: #000000;
			}
			
			.address-image {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				text-align: center;
				
				image {
					width: 30.67rpx;
					height: 30.67rpx;
				}
			}
		}
		
		.hotel-phone {
			width: 93rpx;
			height: 107rpx;
			background: #E8F6EB;
			border-radius: 20rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			flex-direction: column;
			
			image {
				width: 30.67rpx;
				height: 30.67rpx;
				margin-bottom: 8rpx;
			}
		}
		
		.hotel-skuName {
			font-weight: 500;
			font-size: 27rpx;
			color: #000000;
			height: 94rpx;
			border-top: 1rpx solid #D8D8D8;
			border-bottom: 1rpx solid #D8D8D8;
			margin-top: 34rpx;
			
			&>view:first-child {
				width: 400rpx;
			}
			
			&>view:last-child {
				width: 140rpx;
			}
		}
	}
	
	.hotel-information {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx;
		margin: 20rpx auto;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		
		view {
			font-weight: 500;
			font-size: 27rpx;
			margin-top: 30rpx;
		}
		
		span {
			display: inline-block;
			width: 140rpx;
			color: #666666;
		}
	}

	// 商品价格
	.public-price {

		view {
			font-weight: 500;
			font-size: 27rpx;
			color: #666666;
			margin-top: 25rpx;

			span {
				font-weight: bold;
				font-size: 27rpx;
				color: #111111;
			}
		}
	}

	// 订单信息
	.order-info {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 33rpx 26rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;

		.order-subtitle {
			font-weight: 500;
			font-size: 27rpx;
			color: #000;
			margin: 30rpx 0;

			span {
				display: inline-block;
				width: 130rpx;
				color: #666666;
				white-space: nowrap;
			}
		}

		.copy {
			width: 93rpx;
			height: 37rpx;
			border-radius: 11rpx;
			border: 1rpx solid #00AEA0;
			font-weight: 500;
			font-size: 22rpx;
			color: #00AEA0;
			margin-left: 30rpx;

			.copy-img {
				width: 22rpx;
				height: 23.33rpx;
			}
		}
	}

	// 客服
	.kefu-box {
		width: 697rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 31rpx;
		color: #000000;
		padding-left: 27rpx;

		.kefu-img {
			width: 44rpx;
			height: 44rpx;
			margin-right: 14rpx;
		}
	}

	// 底部按钮
	footer {
		width: 750rpx;
		height: 167rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-top: 10rpx solid #F7F7F7;
		padding: 0 26rpx;

		.bottom-price {
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;

			span {
				font-weight: bold;
				font-size: 48rpx;
				color: #EE3E3B;
			}

			span::before {
				content: '￥';
				font-size: 27rpx;
			}
		}

		.btn-box {
			margin-left: auto;
			display: flex;

			.btn {
				width: 213rpx;
				line-height: 71rpx;
				border-radius: 37rpx;
				border: 1rpx solid #999999;
				text-align: center;
				margin-right: 14rpx;
				font-weight: 500;
				font-size: 31rpx;
				color: #000000;
			}

			.btn:last-of-type {
				margin-right: 0;
			}

			.pay-btn {
				height: 73rpx;
				background: linear-gradient(270deg, #FD6F34, #F4A61F);
				border: none;
				color: #FFFFFF;
			}
		}
	}
	
	// 快递查询
	.mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1000;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}
	
	.mask-bg {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	.mask-content {
		width: 100%;
		padding: 28rpx 0;
		border-radius: 20rpx 20rpx 0 0;
		background: white;
		height: 70%;
		position: relative;
		overflow-y: auto;
	}
	
	.mask-content .icon-close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	
	.mask-content .close-btn {
		background-image: url("https://static.ticket.sz-trip.com/taizhou/images/close.png");
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		bottom: -100rpx;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	.mask-title {
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 37rpx;
	}
	
	.mask-content .iconfont {
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}
	
	.express-all {
		margin: 40rpx;
		position: relative;
	}
	
	.express-item {
		display: flex;
		justify-content: space-between;
		padding-bottom: 60rpx;
		position: relative;
		z-index: 1;
	}
	
	
	.line {
		width: 1rpx;
		height: 100%;
		background: #CCCCCC;
		position: absolute;
		left: 13rpx;
	}
	
	.express-info {
		width: 600rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		color: #999;
	}
	
	.express-info.active {
		color: #000;
	}
	
	.express-time {
		font-size: 22rpx;
		color: #666;
		margin-top: 10rpx;
	}
	
	.express-item-icon {
		width: 27rpx;
		height: 27rpx;
		background: #CCCCCC;
		border-radius: 50%;
		position: relative;
	}
	
	.express-item-icons {
		background: #00AEA0;
	}
	
	.consult-popup {
		width: 487rpx;
		height: 367rpx;
		background: #F0F0F0;
		border-radius: 20rpx;
		padding: 65rpx 0 23rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
		
		.consult-subtitle {
			font-weight: 500;
			font-size: 27rpx;
			color: #333333;
			margin-top: 43rpx;
		}
		
		.consult-btns {
			display: flex;
			margin-top: 75rpx;
			
			view {
				width: 50%;
				font-weight: bold;
				font-size: 32rpx;
				color: #00AEA0;
				line-height: 54rpx;
			}
			view:first-child {
				border-right: 1rpx solid #D8D8D8;
				color: #000000;
			}
		}
	}
</style>