wxThird/pages/user/myOrder/activityOrderDetail.vue

<template>
	<view class="box">
	
		<!-- 自定义导航 -->
	<!-- 	<view class="zdyNavBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNav">
				<view class="zdyNavLeft">
					<image src="../../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback"></image>
					<image src="../../../static/img/nav_icon_home.png" mode="" class="homeImg" @click="gohome"></image>
				</view>
				<view class="zdyNavTitle">订单详情</view>
				<view style="width: 100px;"></view>
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view> -->
		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'订单详情'" :cj="3"></homenav>
		
		<view class="top" :style="{background:'#'+themeColor}">
			<view class="orderState">
				<image src="../../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>


				<view class="SheetState" v-if="orderData.data.sheetState == 1">待付款</view>
				<view class="SheetState" v-if="orderData.data.sheetState == 2">待服务</view>
				<view class="SheetState" v-if="orderData.data.sheetState == 3">已完成</view>
				<view class="SheetState" v-if="orderData.data.sheetState == 4">已取消</view>
                <view class="SheetState" v-if="orderData.data.sheetState == 5">待成团</view>
			</view>


		</view>
		<!-- 拼团信息 -->
		<view class="ptCont" v-if="orderData.data.sheetState == 5">
			<view class="ptTimeBox">
				<view class="ptTimeTxt">拼团剩余</view>
				<view class="ptTime">{{dh}}</view>
				<view class="ptdd">:</view>
				<view class="ptTime">{{dm}}</view>
				<view class="ptdd">:</view>
				<view class="ptTime">{{ds}}</view>
			</view>
			<view class="ptmobilePhoneLine">
				<image src="../../../static/timg/icon_guan.png" mode="" class="vipIcon"></image>
				<view class="ptmobilePhone">{{orderData.openGroup.firstMobilePhone}}</view>
			</view>
			<view class="DiffBNumber">还差 <span style="#FF0000">{{orderData.openGroup.groupNumber - orderData.groupList.length}}</span> 人，赶快邀请好友来拼团吧</view>
		    <view class="ptBtnBox">
		    	<view class="seeTy" @click="seeTyshowBtn">查看全部团员</view>
				<view class="yqhypt">邀请好友拼团</view>
		    </view>
		</view>

		<!-- 店铺信息 -->
		<view class="shopBox" :class="{shopBoxpt:orderData.data.sheetState == 5}">
			<image src="../../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
			<view class="shopCont">
				<view class="shopName">{{orderData.shopInfo.shopName}}</view>
				<view class="Address">
					{{orderData.shopInfo.provinceName}}{{orderData.shopInfo.cityName}}{{orderData.shopInfo.areaName}}{{orderData.shopInfo.address}}
				</view>

			</view>
			<view class="shopRightBox" @click="map">

				<image src="../../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>

				<view class="shopRihgtTxt">地图</view>
			</view>
			<view class="shopsx"></view>
			<view class="shopRightBox" @click="call">

				<image src="../../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>

				<view class="shopRihgtTxt">电话</view>
			</view>
		</view>

		<!-- 订单内容 -->
		<view class="information">
			<view class="detailedTitle">订单内容</view>
			
			<view v-if="orderData.openSheetDetail.length>0" v-for="(item,index) in orderData.openSheetDetail" :key="index">
				<view class="informationLine2">
					<view class="goodsName">{{item.itemName}}</view>
					<view class="huodong" @click="goDetail(item.itemId)">
						<view class="goodsName3">活动详情</view>
						<image src="../../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
					</view>
				</view>
				<view class="salePrice"><span class="informationNum">￥</span>{{orderData.data.payType==1? item.salePrice:0}}</view>
			</view>
			
			<view v-if="orderData.data.sheetState != 1 && orderData.data.sheetState != 4" class="line"></view>
			<view v-if="orderData.data.sheetState != 1 && orderData.data.sheetState != 4">
				<view class="goodsName2">
					券码信息（{{quanMaList.length?quanMaList.length:0}}张可用）
				</view>
				<view class="detailedLine" v-for="(v,index) in orderData.OpenSheetQRCode">

					<view v-if="v.writeoffState==1" class="detailedName">
						<view class="redPoint"></view>
						<view class="code">{{v.qrCode}}</view>
						<view class="quanState">待使用</view>

					</view>
					<view v-if="v.writeoffState==3" class="detailedName">
						<view class="redPoint"></view>
						<view class="code old" >{{v.qrCode}}</view>
						<view class="quanState2">已使用</view>
					
					</view>
					
					<image src="../../../static/img/icon_erweima.png" mode="" style="width: 36rpx;height: 36rpx;"
						v-if="v.writeoffState==1" @click="isShowMaSHow "></image>
				</view>
			</view>

		</view>

		
		<!-- 实付款 -->
		<view class="money">
			<view class="informationNum">实付款：</view>
			<view class="informationNum" style="color: #FF0000;font-weight: bold;">￥{{orderData.data.payType==1?orderData.data.realMoney:0}}</view>
		</view>

		<!-- 订单信息 -->
		<view class="information">
			<view class="detailedTitle">订单信息</view>
			<view class="informationLine" v-if="orderData.data.plateNumber">
				<view class="informationTxt">车牌号：</view>
				<view class="informationNum">{{orderData.data.plateNumber}}</view>
			</view>
			
			<view class="informationLine" v-if="orderData.data.customerName">
				<view class="informationTxt">联系人：</view>
				<view class="informationNum">{{orderData.data.customerName}}</view>
			</view>
			<view class="informationLine" v-if="orderData.data.mobilePhone">
				<view class="informationTxt">手机号：</view>
				<view class="informationNum">{{orderData.data.mobilePhone}}</view>
			</view>
			<view class="informationLine" v-if="orderData.data.unit">
				<view class="informationTxt">单位：</view>
				<view class="informationNum">{{orderData.data.unit}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">报名时间：</view>
				<view class="informationNum">{{orderData.data.createTime}}</view>
			</view>
			
			<view class="informationLine">
				<view class="informationTxt">订单单号：</view>
				<view class="informationNum">{{orderData.data.code}}<span class="codeCopy"
						@click="copy(orderData.data.code)">复制</span></view>
			</view>
			

		</view>

		<!-- 支付信息 -->
		<view class="information">
			<view class="detailedTitle">支付信息</view>
			<view class="informationLine">
				<view class="informationTxt">支付状态：</view>
				<view class="informationNum" v-if="orderData.data.payState==1">未支付</view>
				<view class="informationNum" v-if="orderData.data.payState==2">已支付</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">支付方式：</view>
				<view class="informationNum" v-if="orderData.data.payType==1">在线支付</view>
				<view class="informationNum" v-if="orderData.data.payType==2">-</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">支付时间：</view>
				<view class="informationNum">{{orderData.data.payTime?orderData.data.payTime:'-'}}</view>
			</view>

		</view>

		<view style="height: 50rpx;background-color: #F4F5F7;"></view>

		<view class="bottom" v-if="orderData.data.sheetState == 1">

			<view class="cancel" @click="cancelBespeak">取消订单</view>
			<view class="defer" :style="{border:'1rpx solid #'+themeColor,color:'#'+themeColor}" @click="pay">立即支付</view>
		</view>


		<!-- 券码 -->
		<view class="maBox" v-if="isShowMa==true" @click="isShowMaHide">
			<view class="querenMa">
				<view class="maTop">
					<view class="maTitle">请到店出示券码即可开始服务</view>
					<image @click="isShowMa=false" src="../../../static/img/icon_delete.png" mode=""
						style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>

				</view>
				<swiper class="swiper" circular  :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
					<swiper-item v-for="(item,index) in quanMaList">
						<view class="swiper-item">
							<view class="maCode">{{item}}</view>
							<view class="maBoximg">
								<tki-qrcode cid="qrcode1" ref="qrcode" :val="item" :size="400" :unit="unit"
									:pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
									:loadMake="loadMake" :usingComponents="true" @result="qrR" />
							</view>
						</view>
					</swiper-item>
					
					
				</swiper>
				
			
			</view>
		</view>

<!-- 手机号授权 -->
	<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
		<view class="authorizCont" @click.stop="">
			<view class="authorizName">{{wxOpenData.miniAppName}}</view>
			<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
			<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
		</view>
		<view style="text-align: center;padding-top: 56rpx;">
			<image src="../../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
		</view>
	</view>
	
	<!-- 全部团员 -->
	<view class="maBox" v-if="seeTyshow" @click="seeTyHide">
		<view class="grouptk" @click.stop="">
			<view class="maTop">
				<view class="maTitle">全部团员</view>
				<image  src="../../../static/img/icon_delete.png" mode=""
					style="width: 26rpx;height: 26rpx;margin-left: 10rpx;" @click="seeTyHide"></image>
			</view>
			<view class="grouptkCobt">
				<view class="grouptkLIne" v-for="(item,index) in orderData.groupList">
				  <view class="grouptkLIneLeft">
					  <view class="groupTz" v-if="item.groupMemberLevel==1">团长</view>
					   <view class="groupTy" v-else>团员</view>
					  <view class="groupmobilePhone">{{item.mobilePhone}}</view>
				  </view>
				  <view class="grouptkLIneTime">{{item.payTime}}</view>
				</view>
				
			</view>
		</view>
	</view>
	

	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import homenav from "@/components/homenav/nav.vue"
	export default {
		components: {
			tkiQrcode,homenav
		},
		data() {
			return {

				id: '',
				iStatusBarHeight:'',
				
				orderData: '',

				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
				isShowMa: false,
				quanMaList:[],
				 themeColor:'',
                authorizShow:false,
                userInfo:'',
                ext:'',
                wxOpenData:'',
				dh:'',
				dm:'',
				ds:'',
				seeTyshow:false,
			}
		},
		onLoad(opt) {
			 this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.id = opt.id
			this.themeColor = uni.getStorageSync("themeColor");
            this.userInfo=this.$store.state.userInfo;
            this.ext=this.$common.getExtStoreId();
            if(this.userInfo){
            	if (this.id) {
            		this.getData()
            	}
            }else{
            	this.$common.automaticlogin().then(val => {
            		this.userInfo=this.$store.state.userInfo;
            		this.wxOpenData=this.$store.state.wxOpenData;
            		this.themeColor = uni.getStorageSync("themeColor");
            		if (this.id) {
            			this.getData()
            		}
					if(!this.userInfo){
						this.authorizShow=true
					}
            	})
            }
			
			

		},
		

		methods: {
			seeTyHide(){
				this.seeTyshow=false;
			},
			seeTyshowBtn(){
				this.seeTyshow=true;
			},
			decryptPhoneNumber: function(e) {
			  console.log(e);
			  this.code=e.detail.code
			  this.wxPhoneLogin()
			  this.authorizShow=false;
			},
			wxPhoneLogin(){
					 var that=this;
					 this.$http('miniApp2/sys/wxPhoneLogin', {
					   appId:this.ext.appId,
					   unionId:this.ext.unionId,
					   code:this.code,
					   openId:this.wxOpenData.openid
					  },'POST').then(res => {
						var data = res.data;
						if(data.loginInfo){
							this.userInfo=data.loginInfo.openUser;
							this.wxOpenData=data.loginInfo;
							this.$store.commit('mutationswxOpenData', data)
							this.$store.commit('mutationsuserInfo', this.userInfo)
						    this.getData()
						}	
					  })
			},
			isShowMaSHow(){
				 this.isShowMa=true
			},
			isShowMaHide(){
				this.isShowMa=false
			},
			goDetail(id) {
				console.log('id--',id);
				uni.navigateTo({
					
					url: '../../activity/jkDetail?id=' + id
				})
			},
			pay(){
				this.$http('openMallOrder/unifiedPay', {
					sheetId:this.id
				},'POST').then(res => {
					
					if(res.code==0){
						
						this.requestPayment(res.data)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
				 })
			},
			requestPayment(res){
				var payInfo=res;
				//console.log(payInfo)
				//console.log(String(Date.now()))
				var that=this;
				uni.requestPayment({
					provider: 'wxpay',
					//timeStamp: String(Date.now()),
					timeStamp: payInfo.timeStamp,
					nonceStr: payInfo.nonceStr,
					package:payInfo.package,
					signType: payInfo.signType,
					paySign: payInfo.paySign,
					appid:payInfo.appId,	
				
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
						 uni.showToast({
							 title: '支付成功',
							 icon:'none',
							 duration: 2000
						 });
						that.getData()
				    },
				    fail: function (err) {
					  console.log(err)
				      uni.showToast({
						 title: '支付失败',
						 icon:'none',
						 duration: 2000
				      });
					
				    }
				}); 
			},
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			upTime() {
				uni.showLoading({
					title: '加载中'
				})
				var that = this
				this.$http('openreservation/carOwner/updateTimeOfAppointment', {

					id: this.id,
					shopId: this.orderData.shopInfo.id,
					billDate: this.billDate
				}, 'POST').then(res => {
					uni.hideLoading();
					// var list = res.data.Items
					var list = res.data
					console.log("result+=", res.data);
					uni.showToast({
						title: '延期成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						that.getData();
					}, 1000);


				})
			},
			cancelBespeak(){
				var that = this
				uni.showModal({
				    title: '提示',
				    content: '是否取消该订单',
					cancelText:'否',
					confirmText:'是',
				    success: function (res) {
				        if (res.confirm) {
							
								uni.showLoading({
									title: '加载中'
								})
								
								that.$http('openOrderManagement/updateSheetState', {
							
									id: that.id,
							
								}, 'POST').then(res => {
									uni.hideLoading();
									// var list = res.data.Items
									
									uni.showToast({
										title: '取消成功',
										icon: 'none',
										duration: 2000
									});
									setTimeout(function() {
										that.getData();
									}, 1000);
								})
							
				          
				        } else if (res.cancel) {
				           
				        }
				    }
				});
			},
			
			map() {
				console.log("打开地图")
				var that = this;
				if (!that.orderData.shopInfo.lat || !that.orderData.shopInfo.lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.openLocation({
						latitude: Number(that.orderData.shopInfo.lat),
						longitude: Number(that.orderData.shopInfo.lng),
						name: that.orderData.shopInfo.shopName,
						address: that.orderData.shopInfo.provinceName + that.orderData.shopInfo.cityName + that
							.orderData.shopInfo.areaName + that.orderData.shopInfo.address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}

			},

			call() {
				uni.makePhoneCall({
					phoneNumber: this.orderData.shopInfo.mobilePhone
				});
			},


			getData() {
				uni.showLoading({
					title: '加载中'
				});

				this.$http('openOrderManagement/queryOpenSheet', {

					id: this.id,
				}, 'GET').then(res => {
					uni.hideLoading();
					this.orderData = res.data;
					if (this.quanMaList) {
						this.quanMaList = [];
					}
					let maList = this.orderData.OpenSheetQRCode;
					if (maList) {
						maList.forEach(item =>{
							if (item.writeoffState==1) {
								this.quanMaList.push(item.qrCode);
							}
						})
					}
					this.clock()
					console.log('可用券码--',this.quanMaList);
					
				})
			},
			clock(){
			  let _this = this
			  let today = new Date() // 当前时间
			  let h = today.getHours()
			  let m = today.getMinutes()
			  let s = today.getSeconds()
			  let startTime = new Date(_this.orderData.openGroup.endTime.replace(/-/g, '/')) // 结束时间
			  if (Number(new Date(_this.orderData.openGroup.endTime).getTime()) < Number(new Date().getTime())) {
			    //this.activityNoOpen = true
			    return
			  }
			
			  let stopH = startTime.getHours()
			  let stopM = startTime.getMinutes()
			  let stopS = startTime.getSeconds()
			  let shenyu = startTime.getTime() - today.getTime() // 倒计时毫秒数
			  let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
			 // let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
			  let D = parseInt(shenyu)
			  let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
			  let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
			  let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
			  let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
			  let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
			
			 // this.daojishi = '报名倒计时:' + shengyuD + '天' + shengyuH + '小时' + shengyuM + '分' + S + '秒'
			  // setTimeout("clock()",500);
			  this.dh=shengyuH;
			  this.dm=shengyuM;
			  this.ds=s;
			  setTimeout(_this.clock, 500)
			},
			goback() {
				uni.navigateBack({
				 	delta: 1
				})
			},
			gohome(){
				uni.switchTab({
					url:'../../index/index'
				})
			},

		},
		onPullDownRefresh() {

			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</script>

<style scoped>
.grouptk{
	width: 638rpx;
	height: 750rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	margin-top: 300rpx;
	margin-left: 56rpx;
}
.grouptkLIneLeft{
	display: flex;
}
.groupTz{
	border-radius: 15rpx;padding: 0 10rpx;margin-right: 8rpx;
	border: 1rpx solid #FF9D00;color: #FF9D00;font-size: 22rpx;
}
.groupTy{
	border-radius: 15rpx;padding: 0 10rpx;margin-right: 8rpx;
	border: 1rpx solid #764D49;color: #764D49;font-size: 22rpx;
}
.grouptkLIne{
	display: flex;padding: 15rpx 24rpx;
	justify-content: space-between;font-weight: 400;
color: #3C3C3C;font-size: 26rpx;line-height: 32rpx;
}
.grouptk .maTitle{
	padding-left: 24rpx;
}
.ptCont{
	width: 702rpx;
	height: 297rpx;
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
	border-radius: 10rpx;
	margin-left: 24rpx;
	margin-top: -60rpx;
}
.ptTimeBox{
	display: flex;font-weight: 400;justify-content: center;padding-top: 24rpx;
}
.ptTimeTxt{
	font-weight: 400;font-size: 24rpx;line-height: 42rpx;
	color: #764D49;padding-right: 18rpx;
}
.ptdd{
	font-size: 24rpx;padding:0 8rpx;
	line-height: 42rpx;
	font-weight: 400;
	color: #764D49;
}
.ptTime{
	width: 42rpx;font-size: 24rpx;
	height: 42rpx;text-align: center;line-height: 42rpx;
	background: #FF0000;
	border-radius: 6rpx;
	font-weight: 500;
	color: #FFFFFF;
}
.DiffBNumber{
	color: #764D49;font-size: 24rpx;text-align: center;padding-top:16rpx;padding-bottom: 30rpx;
}
.ptmobilePhoneLine{
	display: flex;font-weight: 400;justify-content: center;
color: #764D49;font-size: 26rpx;padding-top:20rpx;
}
.vipIcon{
	width: 32rpx;height: 32rpx;
}
.seeTy{
	width: 260rpx;line-height: 62rpx;text-align: center;
	height: 62rpx;color: #FF0000;
	border-radius: 36rpx;font-size: 26rpx;
	border: 2rpx solid #FF0000;
}
.ptBtnBox{
	display: flex;
	justify-content: space-around;
}
.yqhypt{
	width: 260rpx;color: #FFFFFF;line-height: 66rpx;text-align: center;
	height: 66rpx;font-size: 26rpx;
	background: linear-gradient(132deg, #FD5C05 0%, #FD0323 100%);
	border-radius: 36rpx;
}
	.box {
		min-height: 100vh;
		background: #F4F5F7;
		padding-bottom: 135rpx;
	}
	.zdyNavBox{
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;
	}
	.zdyNav{
		height: 44px;
		display: flex;
		justify-content: space-between;
		
		align-items: center;
	}
	
	.backImg{
		width: 44rpx;
		height: 44rpx;
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	.homeImg{
		width: 44rpx;
		height: 44rpx;
		
	}
	.zdyNavLeft{
		display: flex;
		align-items: center;
	}
	.zdyNavTitle{
		width: 100vw;
		height: 44px;
		background: #FFFFFF;
		text-align: center;
		font-size: 34rpx;
		line-height: 44px;
	}
	

	.top {
		height: 190rpx;
		background: #FF0000;

	}

	.orderState {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 40rpx;
	}

	.SheetState {
		display: flex;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 15rpx;

	}



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



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

	.shopRightImg {
		width: 44rpx;
		height: 45rpx;
	}

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

	.shopBox {

		display: flex;
		padding: 30rpx 20rpx;
		margin: 0rpx 24rpx;
		margin-top: -60rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

	}

	.shopCont {
		width: 405rpx;
		padding-left: 20rpx;

	}

	.shopName {
		font-size: 30rpx;
		font-weight: bold;
		color: #3C3C3C;
		line-height: 42rpx;
	}

	.Address {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

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

	}

	.shopRightBox {

		padding-left: 28rpx;
	}





	.detailedTitle {
		padding: 23rpx 20rpx;
		display: flex;
		text-align: center;
		align-content: flex-start;
		border-bottom: 1rpx solid #EEEEEE;

		font-size: 30rpx;
		font-weight: bold;
		color: #3C3C3C;
	}


	.detailedLine {
		display: flex;
		padding: 16rpx 20rpx;
		justify-content: space-between;
		align-items: center;
	}

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



	.detailedName {
		display: flex;
		align-items: center;


	}

	.code {
		font-size: 26rpx;
		color: #333333;
		font-weight: bold;
		width: 180rpx
	}

	.old {
		color: #999999;

		font-weight: 400;
		text-decoration: line-through;
	}

	.redPoint {
		width: 10rpx;
		height: 10rpx;
		background: #FF0000;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.quanState {
		font-size: 22rpx;
		color: #F19D01;
		padding: 0 10rpx;

		border: 1rpx solid #F19D01;

		border-radius: 4rpx;
		margin-left: 20rpx;
	}
	.quanState2{
		font-size: 22rpx;
		color: #999999;
		padding: 0 10rpx;
		
		border: 1rpx solid #DDDDDD;
		
		border-radius: 4rpx;
		margin-left: 20rpx;
	}



	.information {

		background: #FFFFFF;
		border-radius: 10rpx;

		margin: 20rpx 24rpx;
		padding-bottom: 15rpx;
	}

	.informationLine {
		display: flex;

		padding: 15rpx 20rpx;
	}

	.informationLine2 {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 20rpx;
		align-items: center;
		padding-bottom: 0;
	}

	.salePrice {
		    padding-left: 20rpx;
		    padding-top: 15rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;
	}

	.money {
		background: #FFFFFF;
		border-radius: 10rpx;

		margin: 20rpx 24rpx;

		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 30rpx 20rpx;
	}

	.informationTxt {
		width: 190rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.line {
		height: 20rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.goodsName {
		width: 70%;
		color: #333333;
		font-size: 26rpx;
		
	}
	.huodong{
		display: flex;
		align-items: center;
	}
	.goodsName3{
		color: #333333;
		font-size: 26rpx;
		
	}
	.goodsName2{
		padding: 20rpx 20rpx 15rpx;
		
		color: #333333;
		font-size: 26rpx;
	}

	.informationNum {
		color: #333333;
		font-size: 26rpx;
	}

	.codeCopy {
		width: 77rpx;
		height: 36rpx;
		background: #F4F5F7;
		border-radius: 22rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 33rpx;
		padding: 0 15rpx;
		margin-left: 20rpx;
	}

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






	.bottom {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		background-color: #FFFFFF;
		align-items: center;
		height: 98rpx;
		width: 100vw;
		position: fixed;
		bottom: 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.cancel {
		color: #3C3C3C;
		font-size: 28rpx;
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 1rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		margin-right: 40rpx;
	}

	.defer {
		color: #D53533;
		font-size: 28rpx;
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 1rpx solid #D53533;
		text-align: center;
		line-height: 56rpx;
		margin-right: 40rpx;
	}

	.itemBox {
		margin: 20rpx;
		border-radius: 10rpx;
		border: 2rpx solid #EEEEEE;
	}

	.itemTop {
		padding: 18rpx 20rpx;
		padding-right: 0;
		background-color: #FFEFD5;

		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.topTitle {
		width: 104rpx;
		font-size: 26rpx;
		color: #333333;
		margin-right: 20rpx;
		text-align: right;
	}
	

	.leftItem {
		font-size: 26rpx;
		color: #333333;
		margin-right: 20rpx;
		flex-grow: 1;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.itemContent {
		padding: 20rpx;
		padding-right: 0;
		background-color: #FFFFFF;

		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.maBox {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
	}

	.querenMa {
		width: 578;
		height: 640rpx;
		background: #ffffff;
		margin: 0 86rpx;
		margin-top: 50%;
		border-radius: 24rpx;
	}

	.maTop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx 15rpx;
	}


	.maTitle {
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		padding-left: 100rpx;
	}
	.swiper{
		width: 100%;
		height: 85%;
		background: #FFFFFF;
		
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	
	
	.maCode {

		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.maBoximg {
		width: 400rpx;
		height: 400rpx;
		margin-left: 86rpx;
	}
	.authorizBox{
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
		}
		.authorizCont{
			margin-top: 30vh;
			width: 564rpx;
			height: 408rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-left: 93rpx;
			position: relative;
		}
		.authorizCloseImg{
			width: 62rpx;
			height: 62rpx;
		}
		.sqLogoBox{
			width: 180rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 90rpx;
			text-align: center;
			position: absolute;
			top: -50rpx;
			left: 192rpx;
		}
		.authorizName{
			color: #333333;
			line-height: 42rpx;
			font-size: 30rpx;
			text-align: center;
			padding-top: 58rpx;
		}
		.authorizMs{
			color: #999999;
			line-height: 36rpx;
			font-size: 26rpx;
			width: 452rpx;
			padding-top: 24rpx;
			text-align: center;
			margin-left: 56rpx;
		}
		.authorizContbutton{
			width: 422rpx;
			height: 88rpx;
			background: #D53533;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size:30rpx;
			color: #FFFFFF;
			margin-top: 62rpx;
			margin-left:71rpx;
		}
		.shopBoxpt{
			margin-top: 20rpx;
		}
</style>