wxThird/pages/integral/integralgoodsDetail.vue

<template>
<view class="box">
	<view class="spwBox">
		<swiper class="swiper" circular  :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
			<swiper-item v-for="(item,index) in info.imgList">
				<view class="swiper-item">
					<img mode="aspectFit" :src="item.img" alt="" class="swiper-itemImg" v-if="item.imgType==1">
					<video :src="item.url" v-if="item.imgType==2" show-fullscreen-btn controls style="width: 100%;height: 100%;"></video>
				</view>
			</swiper-item>
			
		</swiper>
	</view>
	<view class="shopCont">
		<view class="goodsName">{{info.name}}</view>
		<view class="jfNumBox" style="padding-left: 24rpx;">
			<span class="jfspan1">{{info.integral}}</span> <span class="jfspan2">积分</span>
			<span class="marketvalue">市场价 ￥{{info.salePrice}}</span>
		</view>
	
		
	</view>
	
	<!-- 商品详情 -->
	<view class="goodsDetail" v-if="info.details">
		<view class="goodsDetailTitle">商品详情</view>
		<!-- <view v-html="info.details" style="background: #fff;"></view> -->
		 <rich-text :nodes="info.details" style="background: #fff;"></rich-text>
	</view>
	<view style="height: 120rpx;padding-bottom: env(safe-area-inset-bottom)"></view>
	
	<view class="bottomBox">
		<view class="ktyong">可用 <span class="ktyong1">{{avaIntegral}}</span><span class="ktyong2">积分</span> </view>
		<view class="bottomBtn" @click="ljbuy">立即兑换</view>
		
	</view>
	

	
	<!-- 立即购买 -->
	<view class="buyBox" v-if="buyShow" @click="buyShow=false">
		<view class="buyCont" @click.stop="">
			<image src="../../static/timg/chahao.png" mode="" class="buyContCh" @click="buyShow=false"></image>
			<view class="goodsBox">
				<view class="hotGoodsLine" >
					<view>
						<image :src="info.imgList[0].img" mode="" v-if="info.imgList.length>0" class="hotGoodsLineImg"></image>
					    <image src="../../static/timg/noimg.png"  class="hotGoodsLineImg" v-else></image>
					</view>
					<view class="hotGoodsLineRIght">
						<view class="goodsName2">{{info.name}}</view>
						<view class="goodsPriceTk">
							<view class="jfNumBox">
								<span class="jfspan1">{{info.integral}}</span> <span class="jfspan2">积分</span>
								<span class="marketvalue">市场价 ￥{{info.salePrice}}</span>
							</view>
							<view class="surplus">剩余{{shopInfo.qty}}个</view>
						</view>
					</view>
				</view>
			</view>
			<view class="buyNumBox">
				<view class="bugNUm">
					<view class="bugNUmLeft">
						<view class="buySl">数量</view>
						<!-- <view class="buyXg" v-if="info.oneQty">限购{{info.oneQty}}件</view> -->
					</view>
					<view class="numJsbox">
						<view class="numJj" @click="calculation(1)">-</view>
						<view class="goodsnum">
						 <input type="number" value="" v-model="goodsnum" class="goodsnumInput"/>
						</view>
						<view class="numJj" @click="calculation(2)">+</view>
					</view>
				</view>
				<view class="buySHop" @click="ckShop" style="border-bottom: 1px solid #EEEEEE;">
					<view>服务门店</view>
					<view class="buyShopRight" >
						<view v-if="shopInfo.shopId">{{shopInfo.shopName}}</view>
						<view v-else>请选择</view>
						<image src="../../static/timg/icon_arrow_right.png" mode="" class="buyShopRightJt"></image>
					</view>
				</view>
				<view class="buySHop">
					<view>兑换限制</view>
					<view class="buyShopRight" >
						每人限兑{{info.oneCount}}个，每天限兑{{info.dayCount}}个
					</view>
				</view>
			</view>
			
			<view class="buybtnBox">
				<view class="ktyong"><view>合计 <span class="ktyong1">{{totalIntegral}}</span><span class="ktyong2">积分</span>   </view> 
				   <view class="kyNum">可用积分：{{avaIntegral}}</view>
				</view>
				<view class="bottomBtn" @click="goBuy">立即兑换</view>
			</view>
			
		</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 :style="{color:colorX}">asdfas</view> -->
   <!-- 门店弹框 -->
   <view class="baomingBox ckshopBox" v-if="ckshopShow">
   	<view class="baomingCont">
   		<view class="bmTop">
   			<view class="bmTitle">选择门店</view>
   			<img src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="noShowShop">
   		</view>
   		<view style="padding: 0 24rpx; height: 45vh;overflow-y: scroll;">
   			<view class="ckshopLine" v-for="(item,index) in info.shopList" @click="ckshop2(item)">
				<view class="shopName"> {{item.shopName}}</view>
   			    <view class="surplus" style="padding-top: 2rpx;">剩余{{item.qty?item.qty:0}}个</view>
   			</view>
   		</view>
   		
   		
   	</view>
   </view>
</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				userInfo:'',
				goodsnum:1,
				buyShow:false,
				id:'',
				info:'',
				shopInfo:{
					shopName:'',
					shopId:''
				},
				authorizShow:false,
				code:'',
				wxOpenData:'',
				ext:'',
				categoryIds:'',
				thenShow:false,
				activityEnd:true,
				shengyuD:1,
				shengyuH:12,
				shengyuM:21,
				totalIntegral:'',
				avaIntegral:'',
				ckshopShow:false,
				//snapup:
			}
		},
		onLoad(opt) {
			this.id=opt.id;
			this.avaIntegral=opt.avaIntegral;
			//this.id='F58D6DEA-726A-4E28-93FA-EE6E5D6E3BDF'
			//this.userInfo = uni.getStorageSync("userInfo");
			this.userInfo=this.$store.state.userInfo;
			this.ext=this.$common.getExtStoreId();
			if(this.userInfo){
				this.wxOpenData=this.$store.state.wxOpenData;
				this.openGoodsDetailById();
			}else{
				this.$common.automaticlogin().then(val => {
					this.userInfo=this.$store.state.userInfo;
					this.wxOpenData=this.$store.state.wxOpenData;
					this.openGoodsDetailById();
					console.log(this.userInfo)
				})
			}
			
			
			
		},
		onShow() {
			//this.shopInfo=this.$store.state.ckshopInfo;
			
			//console.log(this.shopInfo)
		},
		onPullDownRefresh(){
			this.openGoodsDetailById();
			setTimeout(() => {
					uni.stopPullDownRefresh(); // 关闭下拉刷新 
			}, 2000);
		},
		methods: {
			sharewx(){
				
			},
			noShowShop(){
				this.ckshopShow=false;
			},
			ckShop(){
				this.ckshopShow=true;
			},
			ckshop2(item){
				if(item.qty){
					this.shopInfo=item;
					this.ckshopShow=false;
				}else{
					uni.showToast({
						title: '服务门店库存不足',
						icon: 'none',
						duration: 3000
					});
				}
				
			},
			openGoodsDetailById(){
				this.$http('openIntegralMall/integralGoodsDetailById', {
				  id:this.id,
				 },'GET').then(res => {
						this.info=res.data;
						if(this.info.details){
							this.info.details = this.info.details.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
						}
						this.shopInfo=res.data.shopList[0];
						this.totalIntegral=this.goodsnum*this.info.integral
						//this.$store.commit('mutationsckshopInfo', '')
						//this.szShop()
						
				 })
			},
		
			ljbuy(){
				if(!this.userInfo){
					this.authorizShow=true
				}else{
					this.buyShow=true
				}
			
			},
			
			goINdex(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			goBuy(){
				if(!this.shopInfo.shopId){
					uni.showToast({
						title: '请选择服务门店',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				var that=this;
				
				 uni.setStorage({
				 	key: 'jfgoodsDetail',
				 	data: that.info,
				 	 success: function () {
					   uni.navigateTo({
				 	   	url:'integralConfirm?shopID='+that.shopInfo.shopId+'&shopName='+that.shopInfo.shopName+'&goodsnum='+that.goodsnum+'&avaIntegral='+that.avaIntegral
				 	   })
				 	 }
				 }); 
				
			},
			calculation(type){
				if(type==1){
					if(this.goodsnum>1){
						this.goodsnum--
					}
				}else{
					//console.log("+++")
					if(this.goodsnum<this.info.dayCount){
						if(this.goodsnum<this.shopInfo.qty){
							this.goodsnum++
						}else{
							uni.showToast({
								title:'剩余个数不足',
								icon:'none',
							})
						}
						
					}else{
						uni.showToast({
							title:'超过兑换限制',
							icon:'none',
						})
					}
					
				}
				this.totalIntegral=this.goodsnum*this.info.integral
			},
			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.loginInfo)
							this.$store.commit('mutationsuserInfo', this.userInfo)
						    
						    this.szShop()
						}	
					  })
			},
			
		},
		onShareAppMessage(res) {
			var img='';
			if(this.info.ImgList.length>0){
				img=this.info.ImgList[0].url
			}
			return {
				title: this.info.name,
				imageUrl:img,
				path: 'pages/shop/goodsDetail?id=' + this.id,
				success(res){
					uni.showToast({
						title:'分享成功'
					})
				},
				fail(res){
					uni.showToast({
						title:'分享失败',
						icon:'none',
						duration: 3000
					})
				}
			}
		},
	}
</script>

<style scoped lang="less">
	.ckshopLine{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}
	.shopName{
		font-size: 28rpx;
		color: #333333;
		width: 500rpx;
	}
	.ckshopBox{
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 111 !important;
	}
	.baomingCont{
		position: absolute;
		width: 750rpx;
		/* height:850rpx; */
		/* padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); */
		left: 0;
		bottom: 0;
		background: #ffffff;
		border-radius: 24rpx 24rpx 0px 0px;
	}
	.bmTop{
		display: flex;
		justify-content: space-between;
		padding: 40rpx 24rpx 10rpx 24rpx;
	}
	.bmTitle{
		font-weight: 500;
		color: #3C3C3C;
		font-size: 30rpx;
		line-height: 36rpx;
	}
	.bmChimg{
		width: 36rpx;
		height: 36rpx;
	}
	.kyNum{
		color: #999999;
		font-size: 24rpx;
	}
	.goodsPriceTk{
		display: flex;
		justify-content: space-between;
		width: 460rpx;
	}
	.surplus{
		color: #FF0000;font-size: 24rpx;padding-top: 6rpx;
	}
	.ktyong{
		font-weight: 500;
		color: #666666;
		font-size: 24rpx;
		padding-left: 30rpx;
		padding-top: 18rpx;
	}
    .ktyong1{
		color: #FF0000;
		font-size: 32rpx;
	}
	.ktyong2{
		color: #FF0000;
		font-size: 24rpx;
	}
	.jfspan1{
		font-weight: 500;
		color: #FF0000;
		font-size:32rpx;
		line-height: 45rpx;
		
	}
	.jfspan2{
		font-weight: 400;
		color: #FF0000;
		font-size:24rpx;
		line-height: 45rpx;
		padding-left: 10rpx;
	}
	.marketvalue{
		font-weight: 400;
		color: #999999;
		font-size:24rpx;
		line-height: 45rpx;
		padding-left: 10rpx;
		text-decoration: line-through;
	}
.timeTbox{
		width: 750rpx;
		height: 60rpx;
		background:#FFF5F0;
		border-radius: 24rpx 24rpx 0px 0px;
		border: 1px solid #EFE1D5;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #764D49;
	
	}
	.timeTbox2{
		height: 60rpx;
	}
	.timeviewTxt{
			line-height: 41rpx;
			padding-top: 10rpx;
	}
	.timeDivTxt{
		line-height: 60rpx;
		padding: 0 10rpx;
	}
	.timeK{
		height: 41rpx;
		line-height: 41rpx;
		color: #FFFFFF;
		width: 41rpx;
		text-align: center;
		background: #F03B3B;
		border-radius: 6rpx;
		margin-top: 9rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
	.bottomHz{
		width: 750rpx;
		/* height: 180rpx; */
		position: fixed;left: 0;
		bottom: 0;
		
		border-radius: 24rpx 24rpx 0px 0px;
	}
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.buySHop{
	display: flex;
	justify-content: space-between;
	font-size:28rpx ;
	color: #666666;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
}
.buybtnBox{
	width: 750rpx;
	height: 120rpx;
	background: #FFFFFF;
	box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
	display: flex;
	justify-content: space-between;
}
.buyBox{
	width: 750rpx;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.5);
	
}
.buyBtn{
	width: 690rpx;
	height: 74rpx;
	background: #D53533;
	border-radius: 37rpx;
	text-align: center;
	line-height: 74rpx;
	color: #FFFFFF;
	font-size: 30rpx;
	margin-left: 30rpx;
}
.buyShopRightJt{
	width: 12rpx;
	height: 20rpx;
	margin-top: 8rpx;
	margin-left: 10rpx;
}
.buyShopRight{
	display: flex;
}
.bugNUm{
	border-top: 1px solid #EEEEEE;
	border-Bottom: 1px solid #EEEEEE;
	padding: 28rpx 0;
	display: flex;
	justify-content: space-between;
}
.buyXg{
	width: 110rpx;
	height: 36rpx;
	border-radius: 4rpx;
	border: 1px solid #F19D01;
	text-align: center;
	line-height: 36rpx;
	color: #F19D01;
	font-size: 24rpx;
}
.numJj{
	width: 44rpx;
	height: 44rpx;
	background: #F4F5F7;
	border-radius: 0px 6rpx 6rpx 0px;	
	text-align: center;
	line-height: 44rpx;
	font-size: 32rpx;
	color: #999999;
}
.bugNUmLeft{
	display: flex;
}
.buySl{
	color: #666666;font-size: 28rpx;padding-right: 30rpx;
}
.goodsnum{
	width: 88rpx;
	height: 44rpx;
	background: #F4F5F7;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
	margin: 0 4rpx;
}
.goodsnumInput{
	width: 88rpx;
	height: 44rpx;
	background: #F4F5F7;
	line-height: 44rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 24rpx;
}
.numJsbox{
	display: flex;
}
.buyCont{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 750rpx;
	/* height: 688rpx; */
	background: #FFFFFF;
	border-radius: 26rpx 26rpx 0px 0px;
}
.buyNumBox{
	padding: 30rpx;
    padding-top: 10rpx;
	
}
.buyContCh{
	position: absolute;
	top: 53rpx;
	right: 36rpx;
	width: 36rpx;
	height: 36rpx;
}

.hotGoodsLine{
		margin-top: 30rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
	}
	.hotGoodsLineImg{
		width: 208rpx;
		height: 194rpx;
		border-radius: 16rpx;
		border: 1px solid #EEEEEE;
	}
	.goodsName2{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;				
		text-overflow: ellipsis;		
		display: -webkit-box;			
		-webkit-line-clamp: 2;		
		line-clamp: 2;					
		-webkit-box-orient: vertical;
		min-height: 80rpx;
		width: 370rpx;
	}
	.hotGoodsLineRIght{
		padding-left: 24rpx;
		    display: flex;
		    flex-direction: column;
		    justify-content: space-between;
	}
	.goodsPrice{
		display: flex;
		padding-top: 10rpx;
	}
	.goodsPrice11{
		font-size: 24rpx;
		font-weight: 400;
		color: #FF0000;
		padding-top: 8rpx;
		padding-right: 10rpx;
	}
	.goodsPrice22{
		font-size: 22rpx;
		font-weight: 400;
		color: #FF0000;
		padding-top: 8rpx;
		
	}
	.goodsPrice33{
		font-size: 32rpx;
		font-weight: 500;
		color: #FF0000;
	}
	.goodsPrice44{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		padding-top: 8rpx;
		padding-left: 5rpx;
		text-decoration:line-through;
	}

.bottomBox{
	width: 750rpx;
	height: 120rpx;
	background: #FFFFFF;
	box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
	padding-bottom: env(safe-area-inset-bottom);
	background: #FFFFFF;
	display: flex;
	position: fixed;
	left: 0;
	justify-content: space-between;
	bottom: 0;
}
.bottomTxt{
	color: #666666;font-size: 22rpx;
}
.bottomImg{
	width: 48rpx;height: 48rpx;
}
.bottomImgBox{
	text-align: center;
	padding-top: 20rpx;
	padding-left: 40rpx;
}
.shareBtn{
	width: 100rpx;
	background: #FFFFFF;
}
button::after{
 	border: none;
}
button{
	position: relative;
	display: block;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	// font-size: 18px;
	text-align: center;
	text-decoration: none;
	// line-height: 1;
	line-height: 1.35;
	// border-radius: 5px;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	color: #000000;
	background-color: #fff;
	
	height: 100%;
	}

.bottomBtn{
	width: 204rpx;
	height: 74rpx;
	background: #D53533;
	border-radius: 37rpx;
	line-height: 74rpx;
	text-align: center;
	color: #FFFFFF;
	font-size: 30rpx;
	margin-top: 23rpx;
	margin-left: 70rpx;
	margin-right: 30rpx;
}
.bottomBtn2{
	width: 450rpx;
	height: 74rpx;
	background: #DDDDDD;
	border-radius: 37rpx;
	line-height: 74rpx;
	text-align: center;
	color: #FFFFFF;
	font-size: 30rpx;
	margin-top: 23rpx;
	margin-left: 70rpx;
}
.goodsDetailTitle{
	color: #333333;
	font-size: 30rpx;
	font-weight: 500;
	background: #FFFFFF;
	padding: 20rpx 24rpx;
}
.goodsDetail{
	margin-top: 20rpx;
	padding-bottom: 30rpx;
	background: #FFFFFF;
}
.goodsDetail img{
	width: 750rpx;
}
.goodsDetail image{
	width: 750rpx;
}
.mealBox{
	background: #FFFFFF;
	padding: 20rpx 24rpx;
	margin-top: 20rpx;
}
.mealTopRight{
	display: flex;
	
}
.mealLine{
	margin-top: 20rpx;
	
}

.itemname{
	width: 441rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				
	text-overflow: ellipsis;		
	display: -webkit-box;			
	-webkit-line-clamp: 2;		
	line-clamp: 2;					
	-webkit-box-orient: vertical;
}
.itemline{
	display: flex;
	padding: 10rpx 20rpx;
	justify-content: space-between;
	line-height: 37rpx;
	font-size: 26rpx;
	color: #333333;
}
.itemlinebOX{
	border-radius: 0px 0px 10px 10px;
	border: 2Rpx solid #EEEEEE;
	padding: 10rpx 0;
}
.mealTop{
	display: flex;
	justify-content: space-between;
	height: 72rpx;
	background: #F19D01 linear-gradient(90deg, #FFF7EB 0%, #FFEFD5 100%);
	border-radius: 10rpx 10rpx 0px 0px;
	line-height: 72rpx;
	color: #333333;
	font-size: 26rpx;
	padding: 0 20rpx;
}
.fwlcTitle{
	color: #333333;font-size: 30rpx;font-weight: 500;
}
.fuwuliucBox{
  background: #FFFFFF;
  padding: 20rpx 24rpx;
  margin-top: 20rpx;
}
.fwlcxian{
	padding:30rpx 42rpx 10rpx 42rpx ;
	display: flex;
}
.fwlcyuan{
	width: 16rpx;
	height: 16rpx;
	background: #FF0000;
	border-radius: 50%;
}
.fwHx{
	height: 4rpx;
	background: #FF0000;
	width: 186rpx;
	margin-top: 7rpx;
}
.fwTxt{
	display: flex;
	justify-content: space-between;
}
.fwTxtline{
	color: #333333;
	line-height: 37px;
	font-size: 26rpx;
}
.swiper{
	width: 750rpx;
	height: 700rpx;
	background: #FFFFFF;
	border-bottom: 1px solid #EEEEEE;
}
.swiper-item{
	width: 750rpx;
	height: 700rpx;
}
.swiper-itemImg{
	width: 750rpx;
	height: 700rpx;
}
.shopCtop{
	display: flex;
	padding: 20rpx 24rpx;
	justify-content: space-between;
	background: #FFFFFF;
}
.goodsPrice{
		display: flex;
}
.goodsPrice1{
	font-size: 24rpx;
	font-weight: 400;
	color: #FF0000;
	padding-top: 14rpx;
	padding-right: 14rpx;
}
.goodsPrice2{
	font-size: 28rpx;
	font-weight: 400;
	color: #FF0000;
	padding-top: 10rpx;
	
}

.goodsPrice3{
	font-size: 40rpx;
	font-weight: 500;
	color: #FF0000;
}
.goodsPrice4{
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	padding-top: 14rpx;
	text-decoration:line-through;
	padding-left: 10rpx;
}
.Sold{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 18rpx;
}
.goodsName{
	font-size: 30rpx;
	line-height: 42rpx;
	font-weight: 500;
	color: #333333;
	padding: 20rpx 24rpx;
	padding-top: 0;
	padding-bottom: 16rpx;
}
.goodsMd{
	font-weight: 400;
	color: #999999;
	font-size: 26rpx;
	padding: 0 24rpx;
	padding-bottom: 20rpx;
}
.shopCont{
	background: #FFFFFF;
}
.modeBox{
	margin-top:20rpx ;
	padding: 5rpx 0;
	background: #FFFFFF;
}
.modeline{
	display: flex;
	padding: 15rpx 24rpx;
}
.modelineLeft{
	color: #999999;
	font-size: 26rpx;
	width: 150rpx;
}
.modeLineRight{
	color: #333333;
	font-size: 26rpx;
	width: 550rpx;
}
.expireNumber{
	width: 110rpx;
	text-align: right;
}
.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;
	}
</style>