wxThird/pages/activity/jkDetail.vue

<template>
	<view class="content">
		<view class="top">
			<img :src="mainImg" alt="" class="topimg">
		</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">
					<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}}</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">{{item.nickName}}</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">
			<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 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">
					<img src="../../static/timg/share.png" alt="" class="shareIcon">
					<view class="shareTxt">分享</view>
				</view><!-- 状态1未开始 2进行中3已结束 -->
				<view class="bottomBtn" v-if="info.state==2" @click="signUp">立即报名</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="">
				<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">{{shopName?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">
						<input type="text" v-model="mobilePhone" class="bmlineInput" placeholder="输入手机号">
					</view>
					<view class="bmLine" v-if="info.clWhere.indexOf(2)!=-1">
						<input type="text" v-model="plateNumber" name="" id="" class="bmlineInput" placeholder="输入车牌号">
					</view>
					<view class="bmLine" v-if="info.clWhere.indexOf(3)!=-1">
						<input type="text"  v-model="customerName" class="bmlineInput" placeholder="输入姓名">
					</view>
					<view class="bmLine" v-if="info.clWhere.indexOf(4)!=-1">
						<input type="text"  v-model="unit" class="bmlineInput" placeholder="输入单位">
					</view>
				</view>
				<view class="bmTtnBox">
					<view class="bmBtn" @click="submitOrder">提交</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: 45vh;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>
</template>

<script>
	export default {
		data() {
			return {
				info:'',
				type:'',
				shopNum:'',
				shopInfo:'',
				activityEnd:true,
				activityNoOpen:true,
				shengyuD:1,
				shengyuH:12,
				shengyuM:21,
				queryShopList:'',
				collectingID:'',
				bmShow:false,
				ckshopShow:false,
				mainImg:'',
				dimgList:[],
				shopName:'',
				ckshopdata:'',
				customerName:'',
				mobilePhone:'',
				unit:'',
				plateNumber:'',
				comment:'',
			}
		},
		onLoad(opt) {
			// this.info={
			// 	activityName:'洗车大礼包洗车大礼包洗车大礼包洗车大礼包',
			// 	startTime:'2022.01.21',
			// 	endTime:'2022-10-01',
			// 	activityContent:'这里展示活动说明，如果后台没填则不展示',
			// 	img: "http://dmsphoto.66km.com.cn/marketing//accompany/3885B510-6405-4A5E-BD64-B6C09CEE070E.jpg",
			// 	imgList: "http://dmsphoto.66km.com.cn/marketing//accompany/855DE839-8691-4432-8989-720AA0EA1206.jpg,http://dmsphoto.66km.com.cn/marketing//accompany/855DE839-8691-4432-8989-720AA0EA1206.jpg",
				
			// }
			this.collectingID=opt.id;
           this.getInfo();
		   this.queryActivityInfo()
		},
		methods: {
			submitOrder(){
				var jsonArray={
					itemId:this.collectingID,
					itemName:this.info.activityName,
					itemQty:1,
					salePrice:this.info.money,
					totalPrice:this.info.money,
				}
				if(this.ckshopdata==''){
					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,
					shopId:this.ckshopdata.id,
					comment:this.comment,
					sheetDetail:JSON.stringify(arr),
					payType:this.info.payType
				}
				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.bmShow=true;
			},
			nobmshow(){
				this.bmShow=false;
			},
			ckshop(item){
				this.ckshopdata=item;
				this.shopName=item.shopName;
				this.ckshopShow=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;
					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()
					}
					
				})
			},
			getInfo(){
				this.$http('openreservation/getInfo', {
					lat: '',
					lng: '',
				
				}, 'GET').then(res => {
					//uni.hideLoading();
					this.shopInfo = res.data.shopInfo
					
				})
			},
			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)
			}
		   
		}
	}
</script>

<style scoped>
	.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;
	}
	.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;
	}
	.bmshopjt{
		width: 12rpx;
		height: 20rpx;
		margin-top: 10rpx;
	}
	.bmlineInput{
		color: #333333;
		font-size: 28rpx;
		height: 98rpx;
		line-height: 98rpx;
	}
	.bmshopname{
		font-weight: 400;
		color: #333333;
		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:770rpx;
		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;
	}
	.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: #FF4F00;
		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: #3C3C3C;
		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 34rpx;
	}
	.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;
	}
</style>