txCar/pages/order/orderDetail.vue

<template>
	<view class="box">

		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view class="top">

			<view class="nav" :style="{top: iStatusBarHeight + 'px'}">
				<view>
					<image src="../../static/img/baiback22.png" mode="" class="gobackImg" @click="goback"></image>
				</view>

				<view>订单详情</view>
				<view style="width: 130rpx;"></view>
			</view>
			<view style="height: 44px;"></view>
			<view :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="SheetState" v-if="orderData.SheetState==1">等待付款</view>
			<view class="SheetState" v-if="orderData.SheetState==2">等待门店确认</view>
			<view class="SheetState" v-if="orderData.SheetState==3">等待门店收货</view>
			<view class="SheetState" v-if="orderData.SheetState==4">请尽快到店享受服务</view>
			<view class="SheetState" v-if="orderData.SheetState==5">订单已完成</view>
			<view class="SheetState" v-if="orderData.SheetState==0">订单已取消</view>
		</view>
		<view v-if="orderData">

			<view style="margin-top: -84rpx;"></view>

			<!-- 服务确认码 -->
			<view class="orderTop" v-if="orderData.SheetState==4 || orderData.SheetState==5">

				<view class="maBox">

					<view class="timeLeft">
						<span>服务确认码</span>
					</view>
					<view style="text-decoration:line-through; color: #999999; font-size: 26rpx;" v-if="orderData.SheetState==5 && orderData.ServiceCode!=null">{{orderData.ServiceCode}}</view>
					<view class="rightShou" v-if="orderData.SheetState==4">
						<view class="timeRight" style="color: #FF2400;" @click="showMa">收起</view>
						<image src="../../static/img/icon_arrow_up_orange.png" style="width: 17rpx; height: 11rpx;"></image>
					</view>
					<view style="color: #999999; font-size: 26rpx;" v-if="orderData.SheetState==5">已使用</view>
				</view>
				<!-- 确认码 -->
				<view class="querenMa" v-if="isShowMa==true && orderData.SheetState==4">
					<view style="color: #FF2400; font-size: 24rpx; text-align: center;">请到店出示券码即可开始服务</view>
					<view class="maBoximg">
						<tki-qrcode  cid="qrcode1" ref="qrcode" :val="orderData.ServiceCode" :size="308" :unit="unit"
							:pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
							:loadMake="loadMake" :usingComponents="true" @result="qrR" />
					</view>
					<view style="color: #333333; font-size: 26rpx; font-weight: bold; text-align: center;">{{orderData.ServiceCode}}
					</view>
				</view>

			</view>

			<!-- 服务信息 -->
			<view class="orderTop">

				<view class="timeBox">

					<view class="timeLeft">
						<span>服务信息</span>
					</view>
					<view class="timeRight" @click="qrcodeClick">订单码</view>
				</view>
				<!-- 客户信息 -->
				<view class="people">
					<image src="../../static/img/icon_ren.png" mode="" class="shopBoximg"></image>
					<view class="peopleCont">{{orderData.ContactName}}</view>
					<view class="peopleCont" style="padding-left: 20rpx;">{{orderData.ContactPhone}}</view>
				</view>
				<!-- 车辆信息 -->
				<view class="PlateNumberBox">
					<image src="../../static/img/icon_che.png" mode="" class="shopBoximg"></image>
					<view class="">
						<view class="PlateNumberBoxTop">
							<view class="PlateNumbercx"> <span v-if="orderData.Brand">{{orderData.Brand}}</span>
								<span style="padding-left: 20rpx;" v-if="orderData.Series">{{orderData.Series}}</span>
							</view>
							<view class="PlateNumber">{{orderData.PlateNumber}}</view>
						</view>
						<view class="CarModel">{{orderData.CarModel}}</view>
					</view>
				</view>
				<!-- 店铺信息 -->
				<view class="shopBox">
					<image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
					<view class="shopCont">
						<view class="shopName">{{orderData.ShopName}}</view>
						<view class="Address">
							{{orderData.ProvinceName}}{{orderData.CityName}}{{orderData.AreaName}}{{orderData.Address}}
						</view>
						<view style="color: #3F90F7; font-size: 26rpx;" v-if="orderData.SheetState==2" @click="changeStore">申请更换服务门店</view>
					</view>
					<view class="shopRightBox" @click="map">
						<view>
							<image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
						</view>
						<view class="shopRihgtTxt">地图</view>
					</view>
					<view class="shopsx"></view>
					<view class="shopRightBox" @click="call">
						<view>
							<image src="../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
						</view>
						<view class="shopRihgtTxt">电话</view>
					</view>
				</view>
			</view>



			<!-- 预约信息 -->
			<view class="yuyueBox" v-if="orderData.SheetState==4 && (orderData.OrderState==2 || orderData.OrderState==3)">

				<view class="timeBox">

					<view class="timeLeft">
						<span>预约信息</span>
					</view>

				</view>
				<view class="yuyueTime">
					<image src="../../static/img/icon_time.png" mode="" class="shopBoximg"></image>
					<view class="peopleCont">预约到店</view>
					<view class="peopleCont" style="padding-left: 20rpx;">{{orderData.OrderTime}}</view>
					<image v-if="orderData.OrderState==2" src="../../static/img/icon_edit.png" mode="" class="timeEditImg"
						@click="timeShowClick"></image>
				</view>
				<view class="yuyueState">
					<image src="../../static/img/icon_state.png" mode="" class="shopBoximg"></image>
					<view class="peopleCont">预约状态</view>
					<view class="peopleCont" style="padding-left: 20rpx;" v-if="orderData.OrderState==2">待确认</view>
					<view class="peopleCont" style="padding-left: 20rpx;" v-if="orderData.OrderState==3">已确认</view>
				</view>

			</view>

			<!-- 商品明细-->
			<view class="detailedBox itemBox" v-if="orderData.goods.length!=0">
				<view class="detailedTitle">商品明细</view>
				<view class="detailedLineBox">
					<view class="detailedLine" v-for="(item,index) in orderData.goods">
						<view>
							<image :src="item.Url" mode="" class="detailedImg" v-if="item.Url"></image>
							<image src="../../static/img/noimg.png" mode="" class="detailedImg" v-else></image>
						</view>
						<view class="detailedCont">
							<view class="detailedName">{{item.GoodsName}}</view>
							<view class="detailedContBottom">
								<span class="SalePrice">￥{{item.SalePrice}}</span>
								<span>x{{item.SaleQty}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 项目明细 -->
			<view class="detailedBox itemBox" v-if=" orderData.items.length!=0">
				<view class="detailedTitle">项目明细</view>
				<view class="detailedLineBox">
					<view class="detailedLine" v-for="(item,index) in orderData.items">
						<view>
							<image :src="item.Url" mode="" class="detailedImg" v-if="item.Url"></image>
							<image src="../../static/img/noimg.png" mode="" class="detailedImg" v-else></image>
						</view>
						<view class="detailedCont">
							<view class="detailedName">{{item.ItemName}}</view>
							<view class="detailedContBottom">
								<span class="SalePrice">￥{{item.SalePrice}}</span>
								<span>x1</span>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 费用明细 -->
			<view class="goodscost">
				<view class="goodscostLine">
					<view class="goodscostTxt">商品费</view>
					<view class="goodsCostNum">￥{{orderData.GoodsMoney}}</view>
				</view>
				<view class="goodscostLine">
					<view class="goodscostTxt">项目费</view>
					<view class="goodsCostNum">￥{{orderData.ItemMoney}}</view>
				</view>
				<view class="goodscostLine">
					<view class="goodscostTxt">优惠券优惠</view>
					<view class="goodsCostNum">-￥{{orderData.CouponMoney}}</view>
				</view>
				<view class="goodscostLine">
					<view class="goodscostTxt">实付款</view>
					<view class="goodsCostNum" style="color: #FF4F00;">￥{{orderData.PayMoney}}</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="information">
				<view class="detailedTitle">订单信息</view>
				<view class="informationLine">
					<view class="informationTxt">订单编号：</view>
					<view class="informationNum">{{orderData.Code}}</view>
					<view class="copyBtn" @click="copy(orderData.Code)">复制</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">下单人：</view>
					<view class="informationNum">{{orderData.MemberName}}</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">下单时间：</view>
					<view class="informationNum">{{orderData.CreateTime}}</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">下单备注：</view>
					<view class="informationNum">{{orderData.Comment}}</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">确认订单时间：</view>
					<view class="informationNum" v-if="orderData.ConfirmTime != null">{{orderData.ConfirmTime}}</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">确认收货时间：</view>
					<view class="informationNum" v-if="orderData.ReceivingTime != null">{{orderData.ReceivingTime}}
					</view>
				</view>
				<view class="informationLine">
					<view class="informationTxt">服务完成时间：</view>
					<view class="informationNum" v-if="orderData.ServiceTime != null">{{orderData.ServiceTime}}</view>
				</view>
			</view>

			<!-- 支付信息 -->
			<view class="information">
				<view class="detailedTitle">支付信息</view>
				<view class="informationLine">
					<view class="informationTxt">支付方式：</view>
					<view class="informationNum">在线支付</view>
				</view>

				<view class="informationLine">
					<view class="informationTxt">支付时间：</view>
					<view class="informationNum" v-if="orderData.PayTime">{{orderData.PayTime}}</view>
				</view>
			</view>

			<!-- 底部按钮 操作 -->
			<view style="height: 150rpx;"></view>
			<view class="orderBottom" v-if="orderData.SheetState==1">
				<view class="cancelBtn" @click="cancelOrder">取消订单</view>
				<view class="payBtn" @click="orderPay">立即支付</view>
			</view>

			<view class="orderBottom" v-if="orderData.SheetState==2">
				<view class="cancelBtn" @click="refundMoney">申请退款</view>
			</view>

			<view class="orderBottom" v-if="orderData.SheetState==3">
				<view class="cancelBtn" @click="refundMoney">申请退款</view>
			</view>

			<view class="orderBottom" v-if="orderData.SheetState==4">
				<view class="cancelBtn" @click="refundMoney">申请退款</view>
				<view class="payBtn" @click="timeShowClick" v-if="orderData.OrderState==1">立即预约</view>
			</view>

			<view class="orderBottom" v-if="orderData.SheetState==5&&orderData.EvaluateState==0&&orderData.EState==1">
				<view class="payBtn" @click="evaluate">立即评价</view>
			</view>
			<view class="orderBottom" v-if="orderData.SheetState==5&&orderData.EvaluateState==1">
				<view class="cancelBtn" style="margin-right: 16rpx;" @click="gopingjia">查看评价</view>
			</view>

			<!-- 二维码 -->
			<view v-if="qrcodeShow" class="qrcodeBox" @click="qrcodeShow=false">
				<view @click.stop="qrc">
					<tki-qrcode cid="qrcode1" ref="qrcode" :val="qrcodeTopVal" :size="size" :unit="unit"
						:pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
						:loadMake="loadMake" :usingComponents="true" @result="qrR" />
				</view>


			</view>

			<!-- 预约时间 -->
			<view class="timeBox2" v-if="timeShow&&OrderTimes" @click="timeShow=false">
				<view class="timeMain">
					<view class="timeTop">
						<view class="timeTopTitle">选择预约时间</view>
						<view class="close" @click="timeShow=false">X</view>
					</view>
					<view class="timeCont">
						<view class="timeLeft2">
							<scroll-view scroll-y="true" class="timeSv">
								<view class="timeleftLine" v-for="(item,index) in OrderTimes"
									:class="{timeLeftActive:index==orderTimeIndex1}"
									@click.stop="orderTimeIndex1=index,orderTimeIndex2=-1">{{item.date.substring(5,10)}}
								</view>
							</scroll-view>
						</view>
						<view class="timeRight2">
							<scroll-view scroll-y="true" class="timeSv">
								<view class="timerightBox">
									<view class="timesf" v-for="(item,index) in OrderTimes[orderTimeIndex1].timeList"
										:class="{timesfNo:item.type!=1,timesfActive:index==orderTimeIndex2}"
										@click.stop="timeSfCk(item,index)">
										<view class="timeSfNum">{{item.time}}</view>
										<view class="timeyy" v-if="item.type==1">可预约</view>
										<view class="timeyy" v-if="item.type==2">已约满</view>
										<view class="timeyy" v-if="item.type==3">已过期</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="timeBottom">
						<view class="timecomplete" @click="timeCk">完成</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				location: '',
				isload: false,
				id: '',
				iStatusBarHeight: '',
				orderData: '',
				type: '',
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				size: 500,
				qrcodeShow: false,
				qrcodeTop: '-100vh',
				qrcodeTopVal: '',
				ifShow: false,
				val: '二维码', // 要生成的二维码值
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#262637', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				src: '', // 二维码生成后的图片地址或base64
				timeShow: false,
				orderTime: '',
				OrderTimes: '',
				orderTimeIndex1: 0,
				orderTimeIndex2: -1,
				isShowMa:true,
				
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.location = uni.getStorageSync("location");
			this.id = opt.id
			this.getData()
			this.type = opt.type;
			
		},
		onShow() {
			if (this.id) {
				this.getData()
			}
		},
		methods: {
			changeStore(){
				this.haveChangeStore();
			},
			haveChangeStore(){
				uni.showLoading({
					title: '加载中'
				});
				
				this.$http('worldKeepCar/orderChangeShop/queryIfConChangeShop', {
					sheetId: this.id,
					
				}, 'GET').then(res => {
					uni.hideLoading();
					
					if (res.code == 0) {
						uni.navigateTo({
							url: '../changeStore/changeStore?id'+this.id
						})
					}
					
				})
			},
			showMa(){
				this.isShowMa = !this.isShowMa
			},
			gopingjia() {
				uni.navigateTo({
					url: '../me/myAppraiseDetail?id=' + this.id
				})
			},
			timeShowClick() {
				if (this.OrderTimes) {
					this.timeShow = true
				} else {
					uni.showToast({
						title: '当前店铺尚未设置可预约时间',
						icon: 'none',
						duration: 3000
					});
				}

			},

			map() {
				console.log("打开地图")
				var that = this;
				if (!that.orderData.Lat || !that.orderData.Lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.openLocation({
						latitude: Number(that.orderData.Lat),
						longitude: Number(that.orderData.Lng),
						name: that.orderData.ShopName,
						address: that.orderData.Address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}

			},
			qrR() {

			},
			qrc() {
				console.log(111)
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.orderData.MobilePhone
				});
			},
			qrcodeClick() {
				this.ifShow = true;
				this.qrcodeShow = true;
				this.qrcodeTopVal = this.orderData.Code;
				//this.$refs.qrcode._makeCode() 

			},
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				});

				this.$http('worldKeepCar/keepCarMy/queryMiNiAppTSheetDetail', {
					lat: this.location.lat,
					lng: this.location.lng,
					id: this.id,
				}, 'GET').then(res => {
					uni.hideLoading();
					this.orderData = res.data;
					
					this.getOrderTimes();
				})
			},
			goback() {
				if (this.type == 2) {
					uni.switchTab({
						url: '../index/index'
					})
				} else {
					uni.navigateBack({})
				}

			},
			evaluate() {
				uni.navigateTo({
					url: 'evaluate?sheetID=' + this.id + '&shopID=' + this.orderData.ShopID
				})
			},
			
			cancelOrder() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({});
							that.$http('worldKeepCar/keepCarMy/cancelMiNiTMSheet', {
								id: that.orderData.ID
							}, 'POST').then(res => {
								uni.hideLoading();

								that.getData()
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			refundMoney(){
				console.log('退款');

				
				// 是否可以退款
				this.haveRefundMoney();
			},
			haveRefundMoney(){
				uni.showLoading({
					title: '加载中'
				});
				
				this.$http('worldKeepCar/orderRefund/queryIfConRefund', {
					sheetId: this.id,
					
				}, 'GET').then(res => {
					uni.hideLoading();
					
					if (res.code == 0) {
						uni.navigateTo({
							url:'../refundMoney/refundMoney?sheetId='+this.id +'&maxMoney=' + this.orderData.PayMoney
						
						})
					}
					
				})
			},
			orderPay() {
				uni.showLoading({});
				var that = this;
				this.$http('worldKeepCar/maintainOrder/orderPay', {
					sheetID: this.orderData.ID
				}, 'POST').then(res => {
					uni.hideLoading();
					if(res.isPay==0){
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							duration: 2000
						});	
						that.getData()
					}else{
						var payInfo = JSON.parse(res.data.payInfo)
						uni.requestPayment({
							provider: 'wxpay',
							// timeStamp: String(Date.now()),
							timeStamp: payInfo.timeStamp,
							nonceStr: payInfo.nonceStr,
							package: payInfo.package,
							signType: payInfo.signType,
							paySign: payInfo.paySign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.showToast({
									title: '支付成功',
									icon: 'none',
									duration: 2000
								});
								that.getData()
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
						
							}
						});
					}
				})
			},
			timeSfCk(item, index) {
				if (item.type == 1) {
					this.orderTimeIndex2 = index;
					var orderTime = this.OrderTimes[this.orderTimeIndex1].date + ' ' + item.time
					this.orderTime = orderTime
				}

			},
			timeCk() {
				this.timeShow = false;
				var urlStr = ''
				if (this.orderData.OrderState==1) {
					urlStr = 'worldKeepCar/keepCarMy/saveOrderTime'
				}
				if (this.orderData.OrderState==2) {
					urlStr = 'worldKeepCar/keepCarMy/changeTSheetTime'
				}
				this.$http(urlStr, {
					id: this.id,
					orderTime: this.orderTime
				}, 'POST').then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '预约成功',
							icon: 'none',
							duration: 2000
						});
					}
					this.getData()
				})
			},
			getOrderTimes() {
				this.$http('worldKeepCar/keepCarMy/getTSheetTimes', {
					shopId: this.orderData.ShopID,
				}, 'GET').then(res => {

					this.OrderTimes = res.data;
				})
			}
		},
		onPullDownRefresh() {
			this.getOrderTimes()
			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
	}

	.status_bar {
		background: #FF4F00;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1111;
	}

	.qrcodeBox {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
	}

	.top {
		width: 750rpx;
		height: 342rpx;
		background: #FF4F00;
		/* background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%); */
	}

	.nav {
		line-height: 44px;
		font-size: 34rpx;
		font-weight: 600;
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
		position: fixed;
		width: 100vw;
		left: 0;
		z-index: 1111;
		background: #FF4F00;
	}

	.gobackImg {
		width: 92rpx;
		height: 88rpx;
		/* padding: 12px; */

	}

	.SheetState {
		font-size: 44rpx;
		font-weight: 500;
		color: #FFFFFF;
		padding-left: 24rpx;
		padding-top: 50rpx;
	}

	.orderTop {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx 24rpx;
	}

	.timeEditImg {
		width: 25rpx;
		height: 25rpx;
		padding-left: 20rpx;
	}

	.timeLeft {
		font-size: 32rpx;
		color: #3C3C3C;

	}

	.timeRight {
		font-size: 26rpx;
		color: #3F90F7;
	}

	.timeBox {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 20rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}



	.shopBoximg {
		width: 40rpx;
		height: 40rpx;
	}

	.shopRightImg {
		width: 52rpx;
		height: 60rpx;
	}

	.shopsx {
		width: 1px;
		height: 50rpx;
		background: #EEEEEE;
		margin-top: 30rpx;
		margin-left: 28rpx;
	}

	.shopBox {
		display: flex;
		padding: 0rpx 20rpx 36rpx 20rpx;
	}

	.shopCont {
		width: 418rpx;
		padding-left: 20rpx;
	}

	.shopName {
		font-size: 28rpx;
		color: #3C3C3C;
	}

	.Address {
		color: #999999;
		font-size: 26rpx;
		padding-top: 10rpx;
	}

	.shopRihgtTxt {
		color: #999999;
		font-size: 22rpx;
		padding-top: 5rpx;
	}

	.shopRightBox {
		padding-top: 30rpx;
		padding-left: 28rpx;
	}

	.peopleCont {
		font-size: 28rpx;
		color: #3C3C3C;
		padding-left: 20rpx;
	}

	.people {
		display: flex;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
	}

	.PlateNumberBox {
		display: flex;
		padding-left: 20rpx;
		padding-bottom: 30rpx;
	}

	.PlateNumbercx {
		font-size: 28rpx;
		font-weight: bold;
		color: #3C3C3C;
		padding-left: 20rpx;
	}

	.PlateNumber {
		width: 130rpx;
		height: 32rpx;
		border-radius: 4rpx;
		border: 1px solid #F19D01;
		line-height: 32rpx;
		text-align: center;
		font-size: 22rpx;
		color: #F19D01;
		margin-left: 26rpx;
	}

	.PlateNumberBoxTop {
		display: flex;
	}

	.CarModel {
		font-size: 26rpx;
		color: #999999;
		padding-left: 20rpx;
		padding-top: 6rpx;
		padding-right: 20rpx;
		padding-bottom: 15rpx;
		width: 600rpx;
	}

	.detailedBox {

		background: #FFFFFF;
		border-radius: 10px;
		margin: 20rpx 24rpx;
		padding: 20rpx 0;
	}

	.itemBox {
		margin-top: 20rpx;
	}

	.detailedTitle {
		font-size: 32rpx;
		color: #3C3C3C;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 10rpx;
	}

	.detailedLine {
		display: flex;
		padding-left: 20rpx;
		padding-top: 40rpx;
	}

	.detailedImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.detailedCont {
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.detailedName {
		font-size: 26rpx;
		color: #3C3C3C;
	}

	.detailedContBottom {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #999999;
		width: 500rpx;
		line-height: 40rpx;
	}

	.SalePrice {
		font-size: 32rpx;
		font-weight: 500;
		color: #3C3C3C;
	}

	.goodscost {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin-left: 24rpx;
		margin-top: 20rpx;
		padding: 15rpx 0;
	}

	.goodscostLine {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		padding: 20rpx 20rpx;
		color: #666666;
	}

	.goodsCostNum {
		color: #3C3C3C;
	}

	.information {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin-left: 24rpx;
		margin-top: 20rpx;
		padding: 0rpx 0 15rpx 0;
	}

	.informationLine {
		display: flex;
		font-size: 26rpx;
		padding: 15rpx 20rpx;
	}

	.informationTxt {
		width: 190rpx;
		color: #666666;
	}

	.informationNum {
		color: #333333;
	}

	.copyBtn {
		width: 86rpx;
		height: 40rpx;
		background: #F4F5F7;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 40rpx;
		margin-left: 20rpx;
	}

	.orderBottom {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
	}

	.cancelBtn {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #3C3C3C;
		margin-top: 21rpx;
		margin-right: 16rpx;
		margin-left: 20rpx;
	}

	.payBtn {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #FF4F00;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #FF4F00;
		margin-top: 21rpx;
		margin-right: 16rpx;
		margin-left: 20rpx;
	}

	.timeBox2 {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
	}

	.timeLeftActive {
		background: #FFFFFF;
	}

	.timeMain {
		width: 100vw;
		height: 70vh;
		margin-top: 30vh;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0px 0px;
	}

	.timesfNo {
		background: #F5F5F5;
	}

	.timesfActive {
		background: #FF4F00;

	}

	.timesfActive .timeSfNum {
		color: #FFFFFF;
	}

	.timesfActive .timeyy {
		color: #FFFFFF;
	}

	.topBox {
		padding: 20rpx 24rpx;
	}

	.timeTop {
		display: flex;
		line-height: 90rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		justify-content: space-between;
	}

	.timeTopTitle {
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #3C3C3C;
	}

	.close {
		color: #999999;
		font-size: 30rpx;
		padding-left: 30rpx;
	}

	.timeCont {
		height: calc(70vh - 210rpx);
	}

	.timeSv {
		height: calc(70vh - 210rpx);
	}

	.timeLeft2 {
		width: 162rpx;
		background: #F4F5F7;
		border-top: 1px soid #F4F5F7;
		border-right: 1px soid #F4F5F7;
	}

	.timeRight2 {
		width: 588rpx;
	}

	.timesf {
		width: 165rpx;
		height: 98rpx;
		border-radius: 7rpx;
		border: 2rpx solid #EEEEEE;
		text-align: center;
		margin-left: 20rpx;
		margin-bottom: 24rpx;
	}

	.timeBottom {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
		display: flex;
		align-items: center;

	}

	.timerightBox {
		display: flex;
		flex-wrap: wrap;
	}

	.timeCont {
		display: flex;
	}

	.timeSfNum {
		color: #666666;
		font-size: 28rpx;
		padding-top: 15rpx;
	}

	.timeyy {
		font-size: 24rpx;
		color: #999999;
	}

	.timecomplete {
		width: 690rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}

	.timeleftLine {
		font-size: 30rpx;
		color: #999999;
		text-align: center;
		padding: 28rpx 10rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.yuyueBox {

		background: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;

	}

	.yuyueTime {
		display: flex;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
		align-items: center;
	}

	.yuyueState {
		display: flex;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
	}

	.maBox {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 20rpx;
	}

	.querenMa {

		margin: 20rpx 0;
		padding-bottom: 30rpx;
	}

	.maBoximg {
		width: 308rpx;
		height: 308rpx;
		margin: 30rpx 197rpx;


	}
	.rightShou{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>