jikeH5/pages/europeOrder/eorderDetail.vue

<template>
	<view class="box">

	   <view class="top">
		   
		   <view class="nav"  :style="{top: iStatusBarHeight + 'px'}">
			   <view>
				     <image src="../../static/img/baiback22.png" mode="" class="gobackImg" @click="goback"></image>
					<!-- <image src="../../static/img/baigoindex22.png" mode="" class="goIndexImg" @click="goIndex()"></image> -->
			   </view>
			 
			   <view>订单详情</view>
			   <view style="width: 92rpx;"></view>
		   </view>
		   <view style="height: 44px;"></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||orderData.SheetState==5">订单已完成</view>
		   <view class="SheetState" v-if="orderData.SheetState==0">订单已取消</view>
		   <view class="SheetState" v-if="orderData.SheetState==4">订单已完成</view>
	   </view>
	 <view v-if="orderData">
		 <!-- 服务确认码 -->
		 <view class="orderTop" v-if="orderData.SheetState==2 || orderData.SheetState==3 || 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==3 || orderData.SheetState==4 || orderData.SheetState==5 && orderData.ServiceCode!=null">{{orderData.ServiceCode}}</view>
		 		<view class="rightShou" v-if="orderData.SheetState==2">
		 			<view class="timeRight" style="color: #FF2400;" @click="showMa">收起</view>
		 			<image src="../../static/img/icon_arrow_up_orange.png" style="width: 17rpx; height: 11rpx; margin-left:10rpx ;">
		 			</image>
		 		</view>
		 		<view style="color: #999999; font-size: 26rpx;" v-if="orderData.SheetState==3 || orderData.SheetState==4 || orderData.SheetState==5">已使用</view>
		 	</view>
		 	<!-- 确认码 -->
		 	<view class="querenMa" v-if="isShowMa==true && orderData.SheetState==2">
		 		<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 v-if="orderData.SheetState==1||orderData.SheetState==2||orderData.SheetState==0">预约到店：{{orderData.OrderTime}}</span>
						   <span v-else>服务时间：{{orderData.ServiceTime}}</span>
		 				   <image v-if="orderData.SheetState==1||orderData.SheetState==2" src="../../static/img/icon_edit.png" mode="" class="timeEditImg" @click="timeShowClick"></image>
		 			   </view>
		 			   <view class="timeRight" @click="qrcodeClick">订单码</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>
		 			   <view class="shopRightBox" @click="map">
		 					   <view> <image src="../../static/img/icon_ditu2.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_phone2.png" mode="" class="shopRightImg"></image> </view>
		 				   <view class="shopRihgtTxt">电话</view>
		 			   </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>
		 <view style="margin-top: -40rpx;"></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/noitem.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>
		 		<!-- 订单信息 -->
		 		<!-- 支付信息 -->
		 		<view class="information">
		 			 <view class="detailedTitle">支付信息</view>
		 			 <view class="informationLine">
		 				 <view class="informationTxt">支付状态：</view>
		 				 <view class="informationNum" v-if="orderData.SheetState==2||orderData.SheetState==3||orderData.SheetState==4">已支付</view>
		 				 <view class="informationNum" v-if="orderData.SheetState==1">未支付</view>
		 			 </view>
		 			 <view class="informationLine">
		 				 <view class="informationTxt">支付方式：</view>
		 				 <view class="informationNum">{{orderData.PayMethod==1?'线上支付':'线下支付'}}</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||orderData.SheetState==2">
					<view class="payBtn" v-if="orderData.SheetState!=2" @click="orderPay">立即支付</view>
		 			<view class="cancelBtn" style="margin-right: 16rpx;"  @click="cancelOrder">取消订单</view>
		 		</view>
		 		<view class="orderBottom" v-if="orderData.EvaluateState==1">
		 			<view class="cancelBtn" style="margin-right: 16rpx;" @click="gopingjia">查看评价</view>
		 		</view>
		 		<view class="orderBottom" v-if="orderData.EvaluateState==0&&orderData.EState==1"><!-- 4 -->
		 				<view class="payBtn" @click="evaluate">立即评价</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" pdground="#000000"
		 				: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: '#333333', // 角标色
			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;
		 this.getOrderTimes();
	},
	onShow() {
		if(this.id){
			this.getData()
		}
	},
	methods: {
		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('miniAppMyBMemberCar/queryMiniAppSheetDetail', {
			 lat:this.location.lat,
			 lng:this.location.lng,
			  id:this.id,
			 },'GET').then(res => {
				  uni.hideLoading();
				  this.orderData=res.data;
			})
		},
		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
			})
		},
		goIndex(){
			uni.switchTab({
				url:'../index/index'
			})
		},
		cancelOrder(){
			var that=this;
			uni.showModal({
			    title: '提示',
			    content: '确定要取消订单吗',
			    success: function (res) {
			        if (res.confirm) {
			          uni.showLoading({ title: '加载中'});
			          that.$http('miniAppMyBMemberCar/updateBMSheetState', {
			            id:that.orderData.ID
			           },'POST').then(res => {
			          	uni.hideLoading();
						if(that.orderData.SheetState!=1){
							uni.showModal({
							    title: '订单取消成功，请等待银行处理',
							    content: '金额将原路退还至您的账户。若您使用了优惠券，将退至您的账户',
								showCancel:false,
							    success: function (res) {
							       that.getData()
							    }
							});
						}else{
							uni.showModal({
							    title: '提示',
							    content: '订单取消成功',
								showCancel:false,
							    success: function (res) {
							       that.getData()
							    }
							});
						}
					   
			           // that.getData()
			          })
			        } else if (res.cancel) {
			           
			        }
			    }
			});
		},
       orderPay(){
       	uni.showLoading({ title: '加载中'});
		var that=this;
       	this.$http('miniApp/maintainOrder/orderPay', {
       	  sheetID:this.orderData.ID
       	 },'POST').then(res => {
       		  uni.hideLoading();
       		  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;
		   this.$http('miniApp/maintainOrder/changeOrderTime', {
		     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('miniApp/maintainOrder/getOrderTimes', {
	   		     
	   		    },'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: 242rpx;
		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: 24rpx;
	}
	
	.orderTop{
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx 24rpx;
	}
	.timeEditImg{
		width: 25rpx;height: 25rpx;padding-left: 20rpx;
	}
	.timeLeft{
		font-size: 28rpx;
		color: #3C3C3C;font-weight: 500;
	}
	.timeRight{
		font-size: 26rpx;
		color: #3F90F7;
	}
	.timeBox{
		display: flex;
		justify-content: space-between;
		padding: 24rpx 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.orderTop{
		position: relative;
		top: -44rpx;
	}
	.shopBoximg{
		width: 40rpx;height: 40rpx;
	}
	.shopRightImg{
		width: 52rpx;height: 38rpx;
	}
	.shopsx{
		width: 1px;
		height: 50rpx;
		background: #EEEEEE;
		margin-top: 30rpx;
		margin-left: 28rpx;
	}
	.shopBox{
		display: flex;
		padding: 30rpx 20rpx 20rpx 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;
		font-weight: 500;
		color: #3C3C3C;
		padding-left: 20rpx;
	}
	.people{
		display: flex;
		padding-left: 20rpx;
		padding-bottom: 36rpx;
	}
	.PlateNumberBox{
		display: flex;padding-left: 20rpx;padding-bottom: 30rpx;
	}
	.PlateNumbercx{
		font-size: 28rpx;
		font-weight: 500;
		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{
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin-left: 24rpx;
		margin-top: -60rpx;
		padding-bottom: 20rpx;
	}
	.itemBox{
		margin-top: 20rpx;
	}
	.detailedTitle{
		font-size: 32rpx;
		color: #3C3C3C;
		padding-left: 20rpx;padding-top: 30rpx;
		font-weight: 600;
		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: 150rpx;
		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;
	}
	.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: 40rpx;
	}
	.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;
	}
	.goIndexImg{
		width: 92rpx;
		height: 88rpx;
	}
	
	.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>