wxThird/pages/activity/jkDetail.vue

<template>
	<view class="content">
		<view class="top">
			<img :src="mainImg" alt="" class="topimg" mode="widthFix">
		</view>
		<view class="cont">
			<view class="name">{{info.activityName}}</view>
			<view class="name2">{{info.startTime.slice(0,10)}}~{{info.endTime.slice(0,10)}}</view>
			<view class="name3">{{info.activityContent}}</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>
		<!-- 多少人报名 -->
		<view class="signupBox" v-if="info.signUserList.length">
			<view class="signupTop">
				<span class="signupTops1">{{info.signUserList.length}}</span>
				<span class="signupTops1">人已报名</span>
			</view>
			<view class="signupCont">
				<view class="signupLine" v-for="(item,index) in info.signUserList">
					<view class="signupLineL">
						<img :src="item.headImg" alt="" class="signupLineLImg">
						<view class="signupLineLName" v-if="item.nickName!='null'">{{item.nickName?item.nickName:'微信用户'}}</view>
						<view class="signupLineLName" v-else>微信用户</view>
					</view>
					<view class="signupLineM">{{item.plateNumber?item.plateNumber:''}}</view>
					<view class="signupLineR">{{item.createTime}}</view>
				</view>
			</view>
		</view>
		<!-- 多少人报名 -->
		<!-- 多少人看过 -->
		<view class="signupBox" v-if="info.lookCount">
			<view class="signupTop">
				<span class="signupTops1">{{info.lookCount}}</span>
				<span class="signupTops1">人看过</span>
			</view>
			<!-- <view class="seeBox">
				<view class="seeLine" v-for="(item,index) in 15">
					<img src="http://dmsphoto.66km.com.cn/marketing//accompany/3885B510-6405-4A5E-BD64-B6C09CEE070E.jpg" alt="" class="signupLineLImg">
				</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">
				<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" @click="signUp" :style="{background:'#'+themeColor}">
				  <span v-if="info.money">￥{{info.money}} &nbsp; 立即抢购</span>
				  <span v-else>立即报名</span>
				</view>
				<view class="bottomBtn2" v-if="info.state==1">报名未开始</view>
				<view class="bottomBtn2" v-if="info.state==3">报名已结束</view>
			</view>
		</view>
		<!-- 报名弹框 -->
		<view class="baomingBox" v-if="bmShow" @click="nobmshow">
			<view class="baomingCont" @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="info.money">￥{{info.money}} &nbsp; 立即抢购</span>
						<span v-else>立即报名</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/img/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/img/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>
</template>

<script>
	export default {
		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:'',
			}
		},
		onLoad(opt) {
		   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");
		  
		   
		},
		onPullDownRefresh(){
			//this.getInfo();
			this.queryActivityInfo();
			setTimeout(() => {
					uni.stopPullDownRefresh(); // 关闭下拉刷新 
			}, 1000);
		},
		onHide(){
			this.bgmMusic.stop(()=>{
			console.log('背景音乐停止了');
			});
		},
		onUnload(){
			this.bgmMusic.stop()
		},
		methods: {
			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
				}
				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,
				}
				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(){
				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
				}
				
			},
			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
				}, 'GET').then(res => {
					//uni.hideLoading();
					this.info = res.data;
					this.getInfo()
					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.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);
						   });
								   		 
					}
					
					
				})
			},
			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)
			},
			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.getInfo()
		   			}	
		   		  })
		   },
		},
		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,
				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>
	.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;
	}
	.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;
	}
	.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;
		}
</style>