wxThird/pages/activity/jkDetail.vue

<template>
	<view class="content">
		<view class="top">
			<img :src="info.img" alt="" class="topimg">
		</view>
		<view class="cont">
			<view class="name">{{info.activityName}}</view>
			<view class="name2">{{info.startTime}}~{{info.endTime}}</view>
			<view class="name3">{{info.activityContent}}</view>
		</view>
		<view class="shopBox">
			<view class="shopBoxTop">
				<view class="shopMs">活动门店</view>
				<view class="shopTy">
					<view class="shopTyTxt">{{shopNum}}家门店通用</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">
			<view class="signupTop">
				<span class="signupTops1">122</span>
				<span class="signupTops1">人已报名</span>
			</view>
			<view class="signupCont">
				<view class="signupLine" v-for="(item,index) in 5">
					<view class="signupLineL">
						<img src="http://dmsphoto.66km.com.cn/marketing//accompany/3885B510-6405-4A5E-BD64-B6C09CEE070E.jpg" alt="" class="signupLineLImg">
						<view class="signupLineLName">微信昵称</view>
					</view>
					<view class="signupLineM">鲁A0**21</view>
					<view class="signupLineR">11-12 12:32</view>
				</view>
			</view>
		</view>
		<!-- 多少人报名 -->
		<!-- 多少人看过 -->
		<view class="signupBox">
			<view class="signupTop">
				<span class="signupTops1">122</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="info.imgList">
			<view class="detailTitle">活动详情</view>
			<view class="detailImgBox" v-for="(item,index) in info.imgList.split(',')">
				<img :src="item" alt="" class="detailImg" mode="widthFix">
			</view>
		</view>
		
		<view style="height: 200rpx;"></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
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:'',
				type:'',
				shopNum:'',
				shopInfo:'',
				activityEnd:false,
				activityNoOpen:true,
				shengyuD:1,
				shengyuH:12,
				shengyuM:21
			}
		},
		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.getInfo()
		},
		methods: {
			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)
						}
					});
				}
			
			},
		
		}
	}
</script>

<style scoped>
	.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;
}
.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;
	}
	.bottom{
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
	}
	.bottomLeft{
		width: 375rpx;
		line-height: 98rpx;
		text-align: center;
		color: #3C3C3C;
		font-size: 30rpx;
	}
	.bottomRight{
		width: 375rpx;
		height: 98rpx;
		background: #3F90F7;
		line-height: 98rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
	}
</style>