wxThird/pages/subPack/jkDetail.vue

<template>
	<view class="content">
		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'活动详情'"></homenav>
		<view class="top">
			<img :src="mainImg" alt="" class="topimg" mode="widthFix">
		</view>
		<view class="cont">
			<view class="name">
			<view class="ptNameBz" v-if="info.groupType">
							  {{info.groupNumber}}人团
			</view>
			<view style="width: 550rpx;"> {{info.activityName}}</view></view>
			<view class="name2">{{info.startTime.slice(0,10)}}~{{info.endTime.slice(0,10)}}</view>
			<view class="name3">{{info.activityContent}}</view>
		</view>
	
		 <view class="couponPackageData" v-if="info.couponPackageName">
		 	<view class="couponPackageTitle">{{info.couponPackageName}}</view>
		 	<view class="linecouponCont" v-for="item in info.couponList">
		 	  <view class="linecouponContLeft">
		 		  <view class="couponType" v-if="item.discountType==1">满减券</view>
		 		  <view class="couponType" v-if="item.discountType==2">商品券</view>
		 		  <view class="couponType" v-if="item.discountType==3">服务券</view>
		 		  <view class="couponName">{{item.actName}}</view>
		 	  </view>
		 	  <view class="couponNum">x{{item.actQty}}</view>
		 	</view>
		 </view>
		 
		<view class="shopBox">
			<view class="shopBoxTop">
				<view class="shopMs">活动门店</view>
				<view class="shopTy" @click="useShow">
					<view class="shopTyTxt">{{info.shopCount}}家门店通用</view>
					<img src="../../static/timg/jt2.png" alt="" class="shopjt">
				</view>
			</view>
			<view class="shopCont">
				<view class="shopContLeft">
					<view class="shopName">{{shopInfo.shopName}}</view>
					<view class="shopaddress">{{shopInfo.address?shopInfo.address:''}}</view>
				</view>
				<view class="shopContRight">
					<view class="shopContRightLine" @click="getmap">
						<img src="../../static/timg/icon_map.png" alt="" class="shopRightIcon">
						<view class="shopRightTxt">地图</view>
					</view>
					<view class="shopRightSx"></view>
					<view class="shopContRightLine" @click="call">
						<img src="../../static/timg/icon_phone.png" alt="" class="shopRightIcon">
						<view class="shopRightTxt">电话</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- //0拼团取消1拼团失败 2拼团中3拼团成功4自动成团 groupState -->
		<!-- 拼团信息 -->
		<view class="ptCont" v-if="info.shareOpenGroup.groupState == 2&&!ptState">
			<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">{{info.shareOpenGroup.firstMobilePhone}}</view>
			</view>
			<view class="DiffBNumber">还差 <span style="#FF0000">{{info.shareOpenGroup.groupNumber - info.shareGroupList.length}}</span> 人，赶快邀请好友来拼团吧</view>
		    <view class="ptBtnBox" v-if="!ifMyself">
				<view class="yqhypt" @click="jionPt">参与拼团</view>
		    </view>
			<view class="ptBtnBox" v-if="ifMyself">
				<view class="seeTy" @click="seeTyshowBtn">查看全部团员</view>
				<button open-type="share" class=" shareBtn" >
				    <view class="yqhypt">邀请好友拼团</view>
				</button>
			</view>
		</view>
		<!-- //0拼团取消1拼团失败 2拼团中3拼团成功4自动成团 groupState -->
		<view class="ptCont2" v-if="info.shareOpenGroup.groupState == 3||info.shareOpenGroup.groupState == 4||info.shareOpenGroup.groupState == 1||info.shareOpenGroup.groupState == 0">
			<view class="groupStateBox " v-if="info.shareOpenGroup.groupState==3||info.shareOpenGroup.groupState == 4||info.shareOpenGroup.groupState == 0">
				 <image src="../../static/timg/icon_checked@2x.png" mode="" class="groupStateIcon"></image>
				 <view class="groupStateTxt">拼团成功</view>
			</view>
			<view class="groupStateBox " v-if="info.shareOpenGroup.groupState==1">
				 <image src="../../static/img/icon_del_red.png" mode="" class="groupStateIcon"></image>
				 <view class="groupStateTxt">未满人数,拼团失败</view>
			</view>
			<view class="ptmobilePhoneLine">
				<image src="../../static/timg/icon_guan.png" mode="" class="vipIcon"></image>
				<view class="ptmobilePhone">{{info.shareOpenGroup.firstMobilePhone}}</view>
			</view>
			
		    <view class="ptBtnBox" style="padding-top: 20rpx;">
				<view class="seeTy" @click="seeTyshowBtn">查看全部团员</view>
		    </view>
		</view>
		
		
		
		<view class="detailBOx" v-if="dimgList.length>0">
			<view class="detailTitle">活动详情</view>
			<view class="detailImgBox" v-for="(item,index) in dimgList">
				<img :src="item.img" alt="" class="detailImg" mode="widthFix">
			</view>
		</view>
		<view class="companyName">©{{info.supportInfo}}</view>
		<view style="height: 200rpx;padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);"></view>
		<view class="bottom">
			<view class="timeTbox" v-if="!activityEnd">
			  <view class="timeviewTxt" v-if="activityNoOpen"> 距开始</view>
			  <view class="timeviewTxt" v-if="!activityNoOpen"> 距结束</view>
			  <view class="timeK">{{shengyuD}}</view>
			  <view class="timeviewTxt" > 天</view>
			  <view class="timeK">{{shengyuH}}</view>
			  <view class="timeviewTxt"> 时</view>
			  <view class="timeK">{{shengyuM}}</view>
			  <view class="timeviewTxt" > 分</view>
			</view>
			<view class="bottomBtnBox" v-if="info.clState!=1">
				<view class="bottomBtnBoxLeft" @click="shareShowzs">
					<img src="../../static/timg/share.png" alt="" class="shareIcon">
					<view class="shareTxt">分享</view>
				</view>
				<!-- <button open-type="share" class="bottomBtnBoxLeft shareBtn" >
					<image src="../../static/timg/share.png" mode="" class="shareIcon"></image>
					<view class="shareTxt">分享</view>
				</button> -->
				<!-- 状态1未开始 2进行中3已结束 -->
				<view class="bottomBtn" v-if="info.state==2&&info.groupType!=1" @click="signUp" :style="{background:'#'+themeColor}">
				  <span v-if="info.payType==1">￥{{info.money}} &nbsp; 立即抢购</span>
				  <span v-else>立即报名</span>
				</view>
				<view class="bottomPtBox" v-if="info.state==2&&info.groupType==1"  >
				    <view class="separate" @click="signUp">
						<view class="separateTop">￥{{info.money}}</view>
						<view class="separateTxt">单独购买</view>
					</view>
					<view class="groupBtn" @click="groupFn">
						<view class="groupBtnTop">￥{{info.groupMoney}}</view>
						<view class="groupBtnTxt">发起拼团</view>
					</view>
				</view>
				<view class="bottomBtn2" v-if="info.state==1">报名未开始</view>
				<view class="bottomBtn2" v-if="info.state==3">报名已结束</view>
			</view>
			<view class="bottomBtnBox" v-if="info.clState==1">
				<view class="bottomBtnBoxLeft" @click="shareShowzs">
					<img src="../../static/timg/share.png" alt="" class="shareIcon">
					<view class="shareTxt">分享</view>
				</view>
				<view class="bottomBtn2" >该活动已停用，暂无法参与拼团</view>
			</view>
		</view>
		<!-- 报名弹框 -->
		<view class="baomingBox" v-if="bmShow" @click="nobmshow">
			<view class="baomingCont applicationTk" @click.stop="" :style="{bottom: jpHeight}">
				<view class="bmTop">
					<view class="bmTitle">登记信息</view>
					<img src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="nobmshow">
				</view>
				<view style="padding: 0 24rpx;">
					<view class="bmshopLine" @click="showCkshop">
						<view class="bmshopname" v-if="!shopName">请选择门店</view>
						<view class="bmshopname" style="color: #333333;">{{shopName}}</view>
						<img src="../../static/timg/icon_arrow_right.png" alt="" class="bmshopjt">
					</view>
					<!-- clWhere报名凭证1,2,3,4 1手机号2车牌号3姓名4单位 -->
					<view class="bmLine" v-if="info.clWhere.indexOf(1)!=-1" @click="focusState1cl">
					<!-- :focus="focusState1" -->	<input  type="number" :hold-keyboard="true" :adjust-position="false" @blur="inputBindBlur" @focus="inputBindFocus" v-model="mobilePhone"  class="bmlineInput" placeholder="输入手机号" placeholder-style="color:#999999">
					</view>
					<view class="bmLine" v-if="info.clWhere.indexOf(2)!=-1" @click="focusState2cl">
						<input type="text" :hold-keyboard="true"  :adjust-position="false" @blur="inputBindBlur" @focus="inputBindFocus" v-model="plateNumber"   class="bmlineInput" placeholder="输入车牌号" placeholder-style="color:#999999">
					</view>
					<view class="bmLine" v-if="info.clWhere.indexOf(3)!=-1" @click="focusState3cl">
						<input type="text" :hold-keyboard="true" :adjust-position="false"  @blur="inputBindBlur" @focus="inputBindFocus" v-model="customerName"  class="bmlineInput" placeholder="输入姓名" placeholder-style="color:#999999">
					</view>
					<view class="bmLine" v-if="info.clWhere.indexOf(4)!=-1" @click="focusState4cl">
					  <input type="text" :adjust-position="false" :hold-keyboard="true"   @blur="inputBindBlur" @focus="inputBindFocus"  v-model="unit"  class="bmlineInput" placeholder="输入单位" placeholder-style="color:#999999">
					</view>
				</view>
				<view class="bmTtnBox">
					<view style="height: 1rpx;"></view>
					<view class="bmBtn" @click="submitOrder" :style="{background:'#'+themeColor}">
						<span v-if="groupOwner">
							￥{{info.groupMoney}} &nbsp; 立即拼团
						</span>
						<span v-else>
							<span v-if="info.payType==1">￥{{info.money}} &nbsp; 单独购买</span>
							<span v-else>立即报名</span>
						</span>
					</view>
				</view>
			</view>
		</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: 65vh;overflow-y: scroll;">
					<view class="ckshopLine" v-for="(item,index) in info.shopList" @click="ckshop(item)">
						<view class="shoplineLeft">
							<image :src="item.photoPath" mode="" class="shopImg" v-if="item.photoPath"></image>
							<image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
						</view>
						<view class="shopright" style="padding-left: 20rpx;">
							<view class="shopTop">
								<view class="shopName">{{item.shopName}}</view>
							</view>
							<view class="brandsBg" v-if="item.brands">
								<view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
							</view>
							<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
									v-if="item.endTime">{{item.endTime}}</span> </view>
							<view class="shopBottomLeft">
								<span class="shopaddress"
									v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
								<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
		</view>
		<!-- 适用门店 -->
		<view class="baomingBox ckshopBox" v-if="useShopShow" @click="noShowShop2">
			<view class="baomingCont" @click.stop="">
				<view class="bmTop">
					<view class="bmTitle">选择门店</view>
					<img src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="noShowShop2">
				</view>
				<view style="padding: 0 24rpx; height: 65vh;overflow-y: scroll;">
					<view class="ckshopLine" v-for="(item,index) in info.shopList"  @click="ckshop(item)">
						<view class="shoplineLeft">
							<image :src="item.photoPath" mode="" class="shopImg" v-if="item.photoPath"></image>
							<image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
						</view>
						<view class="shopright" style="padding-left: 20rpx;">
							<view class="shopTop">
								<view class="shopName">{{item.shopName}}</view>
							</view>
							<view class="brandsBg" v-if="item.brands">
								<view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
							</view>
							<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
									v-if="item.endTime">{{item.endTime}}</span> </view>
							<view class="shopBottomLeft">
								<span class="shopaddress"
									v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
								<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
		</view>
		<img src="../../static/timg/mp3.png" class="mp3Img" @click="play()" v-if="!payshow&mp3Url!=''">
		<img src=".../../static/timg/mp31.png" class="mp3Img" @click="play2()" id="bofang" v-if="payshow&mp3Url!=''">
		
		<view class="shareBox" v-if="shareShow" @click="shareShowyc">
			   <img :src="shareQrCode" alt=""style="width: 300rpx;height:300rpx">
			 <view class="shareCont" @click.stop="">
				 <button open-type="share" class=" shareBtn" >
				 	<image src="../../static/timg/icon_wxhy.png" mode="" class="shareBimg"></image>
				 	<view class="bottomTxtshare">分享</view>
				 </button>
				 <view @click="gowp">
					 <img src="../../static/timg/icon_haibao.png" alt="" class="shareBimg">
					 <view class="bottomTxtshare">生成海报</view> 
				 </view>
			 </view>
		</view>
		<!-- 手机号授权 -->
		<view class="authorizBox" v-if="authorizShow" @click="authorizShowno">
			<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"  @click="authorizShowno" mode="" class="authorizCloseImg"></image>
			</view>
		</view>
		
		<!-- 拼单更多 -->
		
		<view class="baomingBox" v-if="djsMoreShow">
			<view class="djsCont">
				<view class="bmTop">
					<view class="bmTitle">12人正在拼单，可直接参与</view>
					<img src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="noShowShop2">
				</view>
				<view class="djsLineBox">
					<view class="ptLine" v-for="(item,index) in info.groupList">
						<view class="FirstMobilePhone">{{item.FirstMobilePhone?item.FirstMobilePhone:'***'}}</view>
						<view class="ptlineRight">
							<view class="ptlinexx">
								<view class="DiffBNumber">还差 <span>{{item.DiffBNumber}}人</span>拼成 </view>
								<view class="ptdjs">剩余{{item.EndTime | limitTimeFilter }}</view><!-- | limitTimeFilter -->
							</view>
							<view class="ptBtn" @click="join(item)">{{item.IfMyself?'邀请好友':'去拼团'}} </view>
						</view>
					</view>
				</view>
			</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 info.shareGroupList">
					  <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 homenav from "../../components/homenav/nav.vue"
	let that;
	export default {
		components: {
			homenav
		},
		data() {
			return {
				info:'',
				type:'',
				shopNum:'',
				shopInfo:'',
				activityEnd:true,
				activityNoOpen:true,
				shengyuD:'',
				shengyuH:'',
				shengyuM:'',
				queryShopList:'',
				collectingID:'',
				bmShow:false,
				ckshopShow:false,
				mainImg:'',
				dimgList:[],
				shopName:'',
				ckshopdata:'',
				customerName:'',
				mobilePhone:'',
				unit:'',
				plateNumber:'',
				comment:'',
				userInfo:'',
				useShopShow:false,
				jpHeight:0,
				 isPlay: false,
				 mp3Url:'',
				 payshow:false,
				 jpNum:1,
				 focusState1:false,
				 focusState2:false,
				 focusState3:false,
				 focusState4:false,
				 shareShow:false,
				 ext:'',
				 shareId:'',
				 scene:'',
				 themeColor:'',
				 authorizShow:false,
				 wxOpenData:'',
				 ext:'',
				 iStatusBarHeight:'',
				 groupOwner:'',
				 groupID:'',
				 ticker: null,
				 djsMoreShow:false,
				 dh:'',
				 dm:'',
				 ds:'',
				 seeTyshow:false,
				 ptState:false,
				 cyptNum:'',
				 shareOpenID:'',
				 shareName:'',
				 ifMyself:'',
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			if(opt.shareId){
				this.shareOpenID=opt.shareId;
				this.shareName=opt.shareName;
				this.groupID=opt.groupID
			}
			
			//this.groupID="E035EA0C-6095-466F-8580-89E6683FE1FF"
		   console.log(opt)
		   if(opt.shareId){
			   this.shareId=opt.shareId
		   }
		  
		   this.ext=this.$common.getExtStoreId();
		  // opt.scene='10002'
		   if(this.userInfo){
			   this.userInfo=this.$store.state.userInfo;
			   this.wxOpenData=this.$store.state.wxOpenData;
			   this.themeColor = uni.getStorageSync("themeColor");
			this.queryGoodsLook()
			if(opt.scene&&opt.scene!='undefined'){
				this.scene=opt.scene;
				this.getShareParams()
			}else{
				this.collectingID=opt.id;
				//this.getInfo();
				this.queryActivityInfo();
				this.queryGoodsLook()
			}
		   	
		   }else{
		   	this.$common.automaticlogin().then(val => {
				this.themeColor = uni.getStorageSync("themeColor");
		   		this.userInfo=this.$store.state.userInfo;
		   		this.wxOpenData=this.$store.state.wxOpenData;
		   		if(opt.scene&&opt.scene!='undefined'){
		   			this.scene=opt.scene;
		   			this.getShareParams()
		   		}else{
		   			this.collectingID=opt.id;
		   			//this.getInfo();
		   			this.queryActivityInfo();
		   			this.queryGoodsLook()
		   		}
		   		//this.queryActivityInfo();
				
		   	})
		   }
		  
		   this.shopckList= uni.getStorageSync("shopckList");
		   //this.ckmusic=uni.getStorageSync("ckmusic");
		  //这一段是防止进入页面出去后再进来计时器重复启动
			  if (this.ticker) {
			   clearInterval(this.ticker);
			 }
		    this.beginTimer();
		   
		},
		onPullDownRefresh(){
			//this.getInfo();
			this.queryActivityInfo();
			setTimeout(() => {
					uni.stopPullDownRefresh(); // 关闭下拉刷新 
			}, 1000);
		},
		onHide(){
			this.bgmMusic.stop(()=>{
			console.log('背景音乐停止了');
			});
		},
		onUnload(){
			this.bgmMusic.stop()
		},
		
		
		methods: {
			seeTyHide(){
				this.seeTyshow=false;
			},
			seeTyshowBtn(){
				this.seeTyshow=true;
			},
			beginTimer() { //这个计时器是每秒减去数组中指定字段的时间
			
			  this.ticker = setInterval(() => {
				 this.info.groupList= JSON.parse(JSON.stringify( this.info.groupList))
				/* for (let i = 0, len = this.info.groupList.length; i < len; i++) {
				  const item = this.info.groupList[i];
				  if (item.EndTime) {
					
				  }
				} */
			  }, 1000);
			},
			setDate(time) {    
					var t_s = Date.parse(new Date(time)); //转化为时间戳毫秒数
			      //  console.log(t_s)
			        var newt=t_s - 1000; //设置新时间比旧时间少一秒                
			       return this.formatDate(newt) 
			    }  ,
			    
			  formatDate(time) {
			   	let date = new Date(time);
			   	
			   	let YY = date.getFullYear();
			       let MM = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			       let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			       let hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			       let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			       let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			   	
			   	// 这里可以修改返回的日期格式
			   	return YY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
			   },
			  
			authorizShowno(){
				this.authorizShow=false
			},
			getShareParams(){
				this.$http('openMall/getShareParams', {
				  scene:this.scene,
				 },'GET').then(res => {
					 this.collectingID=res.data.goodsID;
					 this.shareId=res.data.operatorID
					 this.queryActivityInfo();
					 this.queryGoodsLook()
				 })
			},
			gowp(){
				
				var time=''
				if(this.info.startTime){
					var time = this.info.startTime.slice(0,10) + '~' +this.info.endTime.slice(0,10)
				}else{
					
				}
				var sellingPoint='';
				
				if(this.info.activityContent){
					sellingPoint=this.info.activityContent
				}
				//console.log(sellingPoint)
				this.shareShow=false;
				uni.navigateTo({
					url:'../shop/wp?img='+this.mainImg+'&name='+this.info.activityName+'&time='+time+'&sellingPoint='+sellingPoint+'&id='+this.collectingID+'&type=2'
				})
			},
			shareShowyc(){
				this.shareShow=false;
			},
			shareShowzs(){
				this.shareShow=true;
			},
			
			focusState1cl(){
				this.focusState1=true;
			},
			focusState2cl(){
				this.focusState2=true;
			},
			focusState3cl(){
				this.focusState3=true;
			},
			focusState4cl(){
				this.focusState4=true;
			},
			inputBindFocus(e){
				//console.log( e.detail.height);
				this.jpHeight=e.detail.height+ "px";
				//console.log(this.jpHeight)
			},
			inputBindBlur(){
				//return false;
				uni.onKeyboardHeightChange((obj)=>{
				    console.log("inputBindBlur"+obj.height)
					let _sysInfo = uni.getSystemInfoSync();
					let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
					let _diff = obj.height - _heightDiff;
					console.log(_diff)
					if(_diff<0||_diff==0){
						this.jpHeight=0
					}
					// 键盘高度
					//this.jpHeight = (_diff > 0 ? _diff : 0) - 2 + "px";
				})
				if(this.jpNum==1){
					this.jpHeight=0
				}
				this.jpNum++;
			},
			queryGoodsLook(){
				this.$http('openmy/queryGoodsLook', {
				  goodsId:this.collectingID,
				  openId:this.userInfo.openId
				 },'POST').then(res => {
					
				 })
			},
			noShowShop2(){
				this.useShopShow=false;
			},
			useShow(){
				this.useShopShow=true;
			},
			submitOrder(){
				uni.hideKeyboard()
				var jsonArray={
					itemId:this.collectingID,
					itemName:this.info.activityName,
					itemQty:1,
					salePrice:this.info.money?this.info.money:0,
					totalPrice:this.info.money?this.info.money:0,
				}
				if(this.ckshopdata==''){
					uni.showToast({
						title: '请选择服务门店',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if(this.info.clWhere.indexOf(1)!=-1&&this.mobilePhone==''){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if(this.info.clWhere.indexOf(2)!=-1&&this.plateNumber==''){
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if(this.info.clWhere.indexOf(3)!=-1&&this.customerName==''){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if(this.info.clWhere.indexOf(4)!=-1&&this.unit==''){
					uni.showToast({
						title: '请输入单位',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				var arr=[]
				arr.push(jsonArray)
				var params={
					sheetType:'6',
					sheetContent:this.info.activityName,
					customerName:this.customerName,
					mobilePhone:this.mobilePhone,
					unit:this.unit,
					plateNumber:this.plateNumber,
					//carModel:this.carInfo.carModel,
					totalMoney:this.info.money?this.info.money:0,
					shopId:this.ckshopdata.id,
					comment:this.comment,
					sheetDetail:JSON.stringify(arr),
					payType:this.info.payType,
					shareId:this.shareId,
					groupType:0,
				}
				if(this.groupOwner==1){
					params.groupOwner=1;
					params.groupType=1;
					params.totalMoney=this.info.groupMoney;
					//params.groupID=this.groupID;
					if(this.cyptNum==1){
						params.shareOpenID=this.shareOpenID;
						params.shareName=this.shareName;
					}
					
				}
				if(this.groupOwner==2){
					params.groupOwner=2;
					params.groupType=1;
					params.groupID=this.groupID;
					params.totalMoney=this.info.groupMoney;
					if(this.cyptNum==1){
						params.shareOpenID=this.shareOpenID;
						params.shareName=this.shareName;
					}
				}
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openMallOrder/submitOrder', params,'POST').then(res => {
					uni.hideLoading();
					if(res.code==0){
						this.orderData=res.data
						if(this.info.payType==1){
							this.unifiedPay(res.data)
						}else{
							uni.showToast({
								title: '报名成功',
								icon: 'none',
								duration: 3000
							});
							uni.redirectTo({
								url: "../user/myOrder/activityOrderDetail?id=" + this.orderData.id +"&SheetType=" + this.orderData.sheetType
							})
						}
						
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
				 })
			},
			unifiedPay(res){
				this.$http('openMallOrder/unifiedPay', {
					sheetId:res.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
						 });
						 
						  	uni.redirectTo({
						  		url: "../user/myOrder/activityOrderDetail?id=" + that.orderData.id +"&SheetType=" + that.orderData.sheetType
						  	})
						  
						
				    },
				    fail: function (err) {
					  console.log(err)
				      uni.showToast({
						 title: '支付失败',
						 icon:'none',
						 duration: 2000
				      });
					  console.log(that.orderData)
					  uni.redirectTo({
					  	url: "../user/myOrder/activityOrderDetail?id=" + that.orderData.id +"&SheetType=" + that.orderData.sheetType
					  })
				    }
				}); 
			},
			signUp(){
				this.groupOwner=0;
				if(this.userInfo){
					/* this.info.shopList.forEach(item=>{
						if(item.id == this.shopInfo.id){
							this.ckshopdata=item;
							this.shopName=item.shopName;
						}
					}) */
					
					
					this.bmShow=true;
				}else{
					this.authorizShow=true
				}
				
			},
			groupFn(){
				this.groupOwner=1;
				this.cyptNum=2;
				if(this.userInfo){	
					this.bmShow=true;
				}else{
					this.authorizShow=true
				}
			},
			jionPt(){
				if(this.info.state==3){
					uni.showToast({
						title: '活动已结束',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				
				this.groupOwner=2;
				this.cyptNum=1;
				if(this.userInfo){	
					this.bmShow=true;
				}else{
					this.authorizShow=true
				}
			},
			join(e){
				this.cyptNum=2;
				this.groupOwner=2;
				this.groupID=e.ID
				if(this.userInfo){	
					this.bmShow=true;
				}else{
					this.authorizShow=true
				}
			},
			nobmshow(){
				this.bmShow=false;
			},
			ckshop(item){
				this.ckshopdata=item;
				this.shopName=item.shopName;
				this.ckshopShow=false;
				this.shopInfo=item
				this.useShopShow=false;
			},
			showCkshop(){
				console.log("选择门店")
				this.ckshopShow=true;
				
			},
			noShowShop(){
				this.ckshopShow=false;
			},
			queryActivityInfo(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openHome/queryActivityInfo', {
					collectingID:this.collectingID,
					groupID:this.groupID
				}, 'GET').then(res => {
					//uni.hideLoading();
					this.info = res.data;
					console.log(this.info)
					this.getInfo();
					this.dimgList=[]
					if(this.info.imgList){
						this.info.imgList.forEach(item=>{
							if(item.imgType==1){
								this.mainImg=item.img
							}else{
								this.dimgList.push(item)
							}
						})
					}
					if (this.info.endTime < this.info.startTime) {
					  // this.$vux.toast.text('时间设置错误')
					  return
					}
					// this.activityNoOpen
					if (Number(new Date().getTime()) > (Number(new Date(this.info.startTime.replace(/-/g, '/')).getTime()) || 0)) {
					  console.log("现在时间大于开始时间")
					  this.activityNoOpen = false
					} else {
					  this.activityNoOpen = true
					}
					if (Number(new Date().getTime()) > Number(new Date(this.info.endTime.replace(/-/g, '/')).getTime())) {
					  console.log("现在时间大于结束时间")
					  this.activityEnd = true
					} else {
					  this.activityEnd = false
					}
					
					if (!this.activityNoOpen && !this.activityEnd) {
					  this.clock()
					}
					if (this.activityNoOpen && !this.activityEnd) {
					  this.clock2()
					}
					if (this.info.shareOpenGroup.groupState==2) {
					  this.clock3()
					}
					if(this.info.music){
						   this.bgmMusic = uni.createInnerAudioContext();
						   this.bgmMusic.autoplay = true;//自动播放
						   this.bgmMusic.loop = true;//循环播放
						   this.mp3Url='http://dmsimg.66km.com/music/sakuratears.mp3';
						   this.bgmMusic.src ='http://dmsimg.66km.com/music/sakuratears.mp3'//, mp3Url;//背景音乐地址
						   this.bgmMusic.onPlay(function(){
							  console.log('背景音乐播放中');
						   });
						   this.bgmMusic.onError((res) => {
							 console.log(res.errMsg);
							 console.log(res.errCode);
						   });
								   		 
					}
					//console.log(this.userInfo)
					this.info.shareGroupList.forEach(item=>{
						if(item.openID==this.userInfo.openId){
							this.ifMyself=true
						}
					})
					
				})
			},
			play2(){
				 this.bgmMusic.play();
				 this.payshow=false;
			},
			play(){
				this.payshow=true;
				this.bgmMusic.stop(()=>{
				
				console.log('背景音乐停止了');
				
				});
			},
			getInfo(){
				this.$http('openreservation/getInfo', {
					lat: '',
					lng: '',
				
				}, 'GET').then(res => {
					uni.hideLoading();
					//this.shopInfo = res.data.shopInfo
					var shopinfo=res.data.shopInfo;
					this.info.shopList.forEach(item=>{
						//console.log(item.id)
						//console.log(shopinfo.id)
						if(item.id==shopinfo.id){
							
							this.shopInfo=shopinfo
						}
					})
					if(this.shopInfo==''){
						this.shopInfo=this.info.shopList[0]
					}
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.mobilePhone
				});
			},
			getmap() {
				console.log("打开地图")
				var that = this;
				if (!that.shopInfo.lat || !that.shopInfo.lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					
					uni.openLocation({
						latitude: Number(that.shopInfo.lat),
						longitude: Number(that.shopInfo.lng),
						name: that.shopInfo.shopName,
						address: that.shopInfo.provinceName + that.shopInfo.cityName + that.shopInfo.areaName + that.shopInfo.address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}
			
			},
			clock () {
			  let _this = this
			  let today = new Date() // 当前时间
			  let h = today.getHours()
			  let m = today.getMinutes()
			  let s = today.getSeconds()
			  let stopTime = new Date(_this.info.endTime.replace(/-/g, '/')) // 结束时间
			  if (Number(new Date(_this.info.endTime).getTime()) < Number(new Date().getTime())) {
			    this.activityEnd = true
			    return
			  }
			
			  let stopH = stopTime.getHours()
			  let stopM = stopTime.getMinutes()
			  let stopS = stopTime.getSeconds()
			  let shenyu = stopTime.getTime() - today.getTime() // 倒计时毫秒数
			  let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
			  let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
			  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.shengyuM=shengyuM;
			  this.shengyuD=shengyuD;
			  this.shengyuH=shengyuH;
			  setTimeout(_this.clock, 500)
			},
			clock2(){
			  let _this = this
			  let today = new Date() // 当前时间
			  let h = today.getHours()
			  let m = today.getMinutes()
			  let s = today.getSeconds()
			  let startTime = new Date(_this.info.startTime.replace(/-/g, '/')) // 结束时间
			  if (Number(new Date(_this.info.startTime).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 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.shengyuM=shengyuM;
			  this.shengyuD=shengyuD;
			  this.shengyuH=shengyuH;
			  setTimeout(_this.clock2, 500)
			},
			clock3(){
			  let _this = this
			  let today = new Date() // 当前时间
			  let h = today.getHours()
			  let m = today.getMinutes()
			  let s = today.getSeconds()
			  let startTime = new Date(_this.info.shareOpenGroup.endTime.replace(/-/g, '/')) // 结束时间
			  if (Number(new Date(_this.info.shareOpenGroup.endTime).getTime()) < Number(new Date().getTime())) {
			    this.ptState = true;
				this.dh=0;
				this.dm=0;
				this.ds=0;
				//this.queryActivityInfo();
				//this.info.state=3
			    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;
			  if(this.dh<10){
			  		this.dh='0'+this.dh
			  }
			  if(this.dm<10){
			  	 this.dm='0'+this.dm
			  }
			  if(this.ds<10){
			  	 this.ds='0'+this.ds
			  }
			  setTimeout(_this.clock3, 500)
			},
			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.getInfo()
		   			}	
		   		  })
		   },
		},
		filters: {
		    	// 拼团有效期的filter
		    	limitTimeFilter (val) {
					//console.log('limitTimeFilter')
					//https://blog.csdn.net/qq_39905409/article/details/104478623
			      	if (val) {
						console.log(val)
			            let formateLimitTimes = that.$common.formateTimeStamp(val);
			            let txt = `${formateLimitTimes.hour}: ${formateLimitTimes.min} :${formateLimitTimes.seconds} `;
			           /* if (formateLimitTimes.day != '00') {
			              txt = `${Number(formateLimitTimes.day)*24} 时 ${formateLimitTimes.min} 分   ${formateLimitTimes.seconds} 秒`;
			            } */
			          return txt;
			         } else {
			            const twtxt = `0 : 0 : 0 `
			            return twtxt;
			         }
			    }
			    
		   },
		beforeCreate: function () {
		  that = this;
		},
		onShareAppMessage(res) {
			console.log(this.userInfo)
			var img='';
			/* if(this.info.ImgList.length>0){
				img=this.info.ImgList[0].url
			} */
			return {
				title: this.info.activityName,
				//imageUrl:this.mainImg,
				imageUrl:'http://dmsphoto.66km.com.cn/thFiles/83074F71-F5C9-4C8E-B23F-2D195788960B.png',
				path: 'pages/activity/jkDetail?id=' + this.collectingID+'&shareId='+this.userInfo.openId,
				success(res){
					uni.showToast({
						title:'分享成功'
					})
				},
				fail(res){
					uni.showToast({
						title:'分享失败',
						icon:'none',
						duration: 3000
					})
				}
			}
		},
	}
</script>

<style scoped>
.djsCont{
	width: 638rpx;
	height: 60vh;
	background: #fff;
	margin-top: 20vh;
	margin-left:56rpx ;border-radius: 15rpx;
}
.djsLineBox{
	height: calc(60vh - 120rpx);
	overflow-y: scroll;
}
.ptLine{
	display: flex;
	justify-content: space-between;
	padding: 26rpx 24rpx;border-top: 1px solid #EEEEEE;
}
.FirstMobilePhone{
	font-weight: 400;
	color: #222222;font-size: 28rpx;line-height: 60rpx;
}
.DiffBNumber{
	font-weight: 400;text-align: right;
	color: #222222;font-size: 26rpx;
}
.ptlineRight{
	display: flex;
}
.ptlinexx{
	padding-right: 12rpx;
}
.ptBtn{
	width: 137rpx;font-weight: 400;
color: #FFFFFF;font-size: 26rpx;
	height: 60rpx;text-align: center;
	background: #E02E24;line-height: 60rpx;
	border-radius: 6rpx;
}
.ptdjs{
	font-weight: 400;
	color: #666666;font-size: 24rpx;
}
.ptBox{
	background: #ffffff;margin-top: 20rpx;
}
.bottomPtBox{
	display: flex;padding-top: 24rpx;
}
.ptNum{
	font-weight: 400;
	color: #222222;font-size: 28rpx;
}
.ptBoxtop{
	display: flex;justify-content: space-between;
	padding: 20rpx 24rpx;
}
.ptMore{
	font-weight: 400;
	color: #666666;font-size: 24rpx;
}
.separate{
	width: 284rpx;margin-left: 30rpx;
	height: 74rpx;
	background: #FFE4E2;
	border-radius: 37rpx;
	text-align: center;color:#D53533;
}
.separate .separateTop{
	color:#D53533;
}
.separate .separateTxt{
	color:#D53533;
}
.groupBtn{
	width: 284rpx;text-align: center;color: #ffffff;
	height: 74rpx;margin-left: 30rpx;
	background: #D53533;
	border-radius: 37rpx;
}
.separateTop{
	font-weight: 500;font-size: 28rpx;
	color: #D53533;
}
.groupBtnTop{
	font-weight: 500;font-size: 28rpx;
	color: #FFFFFF;padding-top: 2rpx;
}
.separateTxt{
	color: #D53533;font-size: 26rpx;line-height: 26rpx;
}
.groupBtnTxt{
	color: #FFFFFF;font-size: 26rpx;line-height: 26rpx;
}
	.companyName{
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 33rpx;
		text-align: center;
		padding: 40rpx;
	}
	.shareBtn{
			/* width: 100rpx; */
			background: #F4F5F7;
		}
	.shareBimg{
		width: 102rpx;
		height: 102rpx;
	}
	.bottomTxtshare{
		color: #333333;
		font-size: 22rpx;
		padding-top: 20rpx;
	}
	.shareBox{
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 11;
	}
	.shareCont{
		width: 100%;
		background: #F4F5F7;
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		padding: 50rpx 0;
		border-radius: 40rpx 40rpx 0px 0px;
	}
	.mp3Img{
	 /* transform: translate(-1584.4%, 121.5%) scale(1); */
	  position: fixed;
	  top: 40rpx;
	  right: 40rpx;
	  width: 60rpx;
	  height: 60rpx;
	}
	.ckshopBox{
		z-index: 111 !important;
	}
	.shopline {
		padding: 20rpx 0;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
	}
	
	.baomingBox{
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 11;
		/* display: flex;
		align-items: center; */
	}
	.bmTtnBox{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 10rpx 0px rgba(153,153,153,0.2000);
		 position: absolute;
		left: 0;
		bottom: 0; 
		 padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
	}
	.bmBtn{
		width: 690rpx;
		height: 74rpx;
		background: #D53533;
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #ffffff;
		font-size: 30rpx;
		margin-top: 23rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}
	.bmshopjt{
		width: 12rpx;
		height: 20rpx;
		margin-top: 10rpx;
	}
	.bmlineInput{
		color: #333333;
		font-size: 28rpx;
		height: 98rpx;
		line-height: 98rpx;
	}
	.bmshopname{
		font-weight: 400;
		color: #999999;
		font-size: 28rpx;
		line-height: 40rpx;
		width: 500rpx;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.bmshopLine{
		display: flex;
		justify-content: space-between;
		padding: 26rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}
	.bmLine{
		border-bottom: 1px solid #EEEEEE;
	}
	.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;
	}
	.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;
		padding-bottom: 10rpx;
	}
	.shareIcon{
		width: 48rpx;
		height: 48rpx;
		display: block;
	}
	.bottomBtnBox{
		display: flex;
		
	}
	.bottomBtnBoxLeft{
		padding-left: 40rpx;
		padding-top: 21rpx;
	}
	.shareTxt{
		color: #666666;font-size: 20rpx;
		text-align: center;
	}
	.bottomBtn{
		width: 598rpx;
		height: 74rpx;
		background: #D53533;
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		color: #ffffff;
		font-size: 30rpx;
		margin-top: 24rpx;
		margin-left: 34rpx;
	}
	.bottomBtn2{
		width: 598rpx;
		height: 74rpx;
		background: #DDDDDD;
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		color: #ffffff;
		font-size: 30rpx;
		margin-top: 24rpx;
		margin-left: 34rpx;
	}
	.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;
	
	}
	.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;
	}
.bottom{
	width: 750rpx;
	height: 180rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0px 0px;
	position: fixed;
	left: 0;
	bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.signupBox{
	background: #ffffff;
	margin-top: 20rpx;
}
.seeBox{
	display: flex;
	flex-wrap: wrap;
	padding-left: 24rpx;
	padding-bottom: 20rpx;
}
.seeLine{
	padding-top: 14rpx;
	padding-right: 16rpx;
}
.signupLine{
 display: flex;
 justify-content: space-between;
 padding: 11rpx 0;
 border-bottom: 1px solid #DDDDDD;
}
.signupLineM{
	color: #3C3C3C;font-size: 26rpx;
	line-height: 56rpx;
}
.signupLineR{
	color: #999999;
	font-size: 26rpx;
	line-height: 56rpx;
}
.signupLineLName{
	font-weight: 400;
	color: #3C3C3C;
	font-size: 26rpx;
	padding-left: 16rpx;
	line-height: 56rpx;
	width: 150rpx;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.signupCont{
	padding: 0 24rpx;
}
.signupLineLImg{
	width: 56rpx;
	height: 56rpx;
	border-radius: 8rpx;
}
.signupLineL{
	display: flex;
}
.signupTop{
	width: 750rpx;
	height: 78rpx;
	background: url(http://dmsphoto.66km.com.cn/thFiles/FF582E15-1971-4C04-8AB3-F7618FFB961D.png);
	background-size: 100% 100%;
	text-align: center;
	line-height: 78rpx;
}
.signupTops1{
	color: #FF0000;font-weight: 500;
	font-size: 28rpx;
}
.signupTops1{
	color: #703917;font-weight: 500;
	font-size: 28rpx;
}
	.shopRightIcon{
		width: 44rpx;
		height: 44rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 10rpx;
	}
	.shopName{
		color: #3C3C3C;
		font-size: 28rpx;
		width: 500rpx;
	}
	.shopaddress{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 10rpx;
		width: 500rpx;
	}
	.shopRightSx{
		width: 2rpx;
		height: 69rpx;
		background:#EEEEEE ;
		margin-left: 34rpx;
		margin-right: 34rpx;
		margin-top: 14rpx;
	}
	.shopCont{
		display: flex;
		justify-content: space-between;
		padding-top: 25rpx;
	}
	.shopContRight{
		display: flex;
		
	}
	.shopContRightLine{
		text-align: center;
		color: #999999;
		font-size: 24rpx;
	}
	.content{
		min-height: 100vh;
		background:#F4F5F7;
	}
	.detailImg{
		width: 750rpx;
		display: block;
	}
	.detailBOx{
		background: #ffffff;
		margin-top: 20rpx;
	}
	.detailTitle{
		color: #222222;
		font-weight: 500;
		padding: 20rpx 24rpx;
		font-size: 30rpx;
	}
	.topimg{
		width: 750rpx;
	}
	.shopMs{
		font-weight: 500;
		color: #222222;
		line-height: 42rpx;
		font-size: 30rpx;
	}
	.shopBox{
		background: #ffffff;
		margin-top: 20rpx;
		padding: 20rpx 24rpx;
	}
	.shopBoxTop{
		display: flex;
		justify-content: space-between;
	}
	.shopTy{
		display: flex;
	}
	.shopTyTxt{
		font-weight: 400;
		color: #666666;
		font-size: 24rpx;
		line-height: 42rpx;
	}
	.shopjt{
		width: 14rpx;
		height: 23rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}
	.cont{
		background: #ffffff;
		border-radius: 24rpx 24rpx 0px 0px;
		margin-top: -30rpx;
		padding: 30rpx 24rpx;
		position: relative;
	}
	.name{
		color: #3C3C3C;
		line-height: 42rpx;
		font-weight: 500;
		font-size: 30rpx;
		display: flex;
	}
	.name2{
		color: #3C3C3C;
		line-height: 36rpx;
		font-weight: 400;
		font-size: 26rpx;
		padding-top: 16rpx;
	}
	.name3{
		color: #999999;
		line-height: 36rpx;
		font-weight: 400;
		font-size: 26rpx;
		padding-top: 16rpx;
	}
	.shopImg {
		width: 146rpx;
		height: 146rpx;
		border-radius: 6rpx;
	}
	
	.shopBox2 {
		padding-top: 30rpx;
		display: flex;
	}
	
	.flex {
		display: flex;
		justify-content: space-between;
	}
	
	.shopCont2 {
		padding-left: 22rpx;
		width: 520rpx;
	}
	
	.shopName {
		color: #333333;
		font-size: 26rpx;
		font-weight: 600;
	}
	
	.span1 {
		color: #FF4F00;
		font-size: 36rpx;
	}
	
	.span2 {
		color: #FF4F00;
		font-size: 22rpx;
	}
	
	.span3 {
		color: #333333;
		font-size: 22rpx;
		padding-left: 22rpx;
	}
	
	.shopBq {
		color: #FF4F00;
		font-size: 22rpx;
		border-radius: 4rpx;
		border: 1px solid #FF4F00;
		line-height: 30rpx;
		height: 30rpx;
		padding: 0rpx 5rpx;
		margin-top: 10rpx;
	}
	
	.brandsBg {
		display: flex;
	    height: 38rpx;
		flex-wrap: wrap;
		align-items: center;
		overflow: hidden;
		padding: 5rpx 0rpx;
	
	}
	
	.brands {
		border-radius: 4rpx;
		padding: 0 5rpx;
		color: #F19D01;
		height: 28rpx;
		border: 1px solid #F19D01;
	
		font-size: 20rpx;
		line-height: 28rpx;
		margin: 5rpx 10rpx 5rpx 0rpx;
	}
	
	.timeBg {
		display: flex;
	
	}
	
	.shopTime {
		color: #666666;
		font-size: 22rpx;
	}
	
	.addressBox {
		color: #666666;
		font-size: 22rpx;
	}
	.ckshopLine{
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}
	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%;
		}
		.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;
		}
		.applicationTk{
			height: 60vh;
		}
		.ptCont{
			width: 702rpx;
			height: 297rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
			border-radius: 10rpx;
			margin-left: 24rpx;
			margin-top: 20rpx;
		}
		.ptCont2{
			width: 702rpx;
			padding-bottom: 20rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
			border-radius: 10rpx;
			margin-left: 24rpx;
			margin-top: 20rpx;
		}
		.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;
		}
		.groupStateIcon{
			width: 28rpx;height: 28rpx;
		}
		.groupStateTxt{
			font-weight: 400;padding-left: 8rpx;
			color: #3C3C3C;line-height: 28rpx;
			font-size: 26rpx;
		}
		.groupStateBox{
			display: flex;justify-content: center;
			padding-top: 18rpx;
		}
		.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;
		}
		.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;
		}
		.ptNameBz{
			font-weight: 500;line-height: 34rpx;
		    font-size: 22rpx;height: 32rpx;
			color: #FD0F00;margin-top: 6rpx;margin-right: 10rpx;
			background: url('http://dmsphoto.66km.com.cn/thFiles/2AF1130F-C318-45D3-B057-FA0728B41046.png') no-repeat;
			background-size: 100% 100%;
			padding-left: 64rpx;padding-right: 4rpx;
		}
		.couponPackageData{
			background: #ffffff;
			margin-top: 20rpx;
		}
		.couponPackageTitle{
			padding-left: 24rpx;
			padding-top: 30rpx;
			color: #333333;
			font-size: 32rpx;
			line-height: 45rpx;
			font-weight: 500;
		}
		.linecoupon{
			justify-content: space-between;
		}
		.linecouponCont{
			display: flex;
			justify-content: space-between;
			padding: 15rpx 24rpx;
		}
		.linecouponContLeft{
			display: flex;
			
		}
		.couponType{
			color: #FFA511;
			border: 1px solid #FFA511;
			border-radius: 4rpx;
			font-size: 18rpx;
			line-height: 26rpx;
			padding: 0 8rpx;
			height: 26rpx;
			margin-top: 5rpx;
		}
		.couponName{
			font-size: 26rpx;line-height: 38rpx;color: #3C3C3C;
			padding-left: 20rpx;
		}
		.couponNum{
			font-size: 26rpx;line-height: 38rpx;color: #999999;
		}
</style>