|
|
@@ -0,0 +1,421 @@
|
|
|
+<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>
|
guo
