1.活动详情

pages.json

@@ -66,9 +66,14 @@
 				"navigationBarTitleText": "数据统计",
 				"enablePullDownRefresh": true
 			}
+		},
+		{
+			"path": "pages/addjk/activityDetail",
+			"style": {
+				"navigationBarTitleText": "活动详情"
+			}
 		}
 		
-		
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/addjk/activity.vue

@@ -200,9 +200,9 @@
 				this.myOrderCoupon()
 			},
 			goDetail(id) {
-				// uni.navigateTo({
-				// 	url: 'jkDetail?id=' + id
-				// })
+				uni.navigateTo({
+					url: 'activityDetail?id=' + id
+				})
 			},
 			goEdit(id) {
 				uni.navigateTo({

pages/addjk/activityDetail.vue

@@ -0,0 +1,519 @@
+<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.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="showuse">
+					<view class="shopTyTxt">{{shopNum}}家门店通用</view>
+					<img src="../../static/img/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/img/icon_map.png" alt="" class="shopRightIcon">
+						<view class="shopRightTxt">地图</view>
+					</view>
+					<view class="shopRightSx"></view>
+					<view class="shopContRightLine" @click="call">
+						<img src="../../static/img/icon_phone.png" alt="" class="shopRightIcon">
+						<view class="shopRightTxt">电话</view>
+					</view>
+				</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">
+			</view>
+		</view>
+		
+		<view style="height: 120rpx;"></view>
+		<!-- <view class="bottom" v-if="type==1"> 
+			<view class="bottomLeft" @click="edit1">编辑活动内容</view>
+			<view class="bottomRight" @click="generate">生成活动</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/img/chahao.png" alt="" class="bmChimg" @click="noShowShop2">
+				</view>
+				<view style="padding: 0 24rpx; height: 45vh;overflow-y: scroll;">
+					<view class="ckshopLine" v-for="(item,index) in shopckList" >
+						<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>
+		<!-- <audio id="video"  controls autoplay="autoplay" ref="iosclick" loop="loop" >
+		  <source src="http://dmsimg.66km.com/music/sakuratears.mp3" type="audio/mpeg">
+		 </audio> -->
+		 <img src="../../static/img/mp3.png" class="mp3Img" @click="play()" v-if="!payshow&mp3Url!=''">
+		 <img src=".../../static/img/mp31.png" class="mp3Img" @click="play2()" id="bofang" v-if="payshow&mp3Url!=''">
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				info:'',
+				type:'',
+				shopNum:'',
+				shopInfo:'',
+				useShopShow:false,
+				shopckList:'',
+				ckmusic:'',
+				bgmMusic:'',
+				payshow:false,
+				mp3Url:'',
+			}
+		},
+		onLoad(opt) {
+			if(opt.type==1){
+				this.type=1;
+				this.info = uni.getStorageSync("editdata");
+				this.shopNum=this.info.shopList.split(',').length
+				uni.setNavigationBarTitle({
+				title:this.info.activityName
+				})
+			}
+			this.getShopinfo()
+            this.shopckList= uni.getStorageSync("shopckList");
+			this.ckmusic=uni.getStorageSync("ckmusic");
+			if(this.ckmusic){
+				this.mp3Url=this.ckmusic.music;
+				this.bgmMusic = uni.createInnerAudioContext();
+				this.bgmMusic.autoplay = true;//自动播放
+				this.bgmMusic.loop = true;//循环播放
+				this.bgmMusic.src = 'http://dmsimg.66km.com/music/sakuratears.mp3';//背景音乐地址
+				this.bgmMusic.onPlay(function(){
+				   console.log('背景音乐播放中');
+						
+				});
+				this.bgmMusic.onError((res) => {
+				  console.log(res.errMsg);
+				  console.log(res.errCode);
+				});
+			}
+			
+			//console.log(this.bgmMusic)
+			
+		},
+		onUnload(){
+			this.bgmMusic.stop()
+		},
+		methods: {
+			play2(){
+				 this.bgmMusic.play();
+				 this.payshow=false;
+			},
+			play(){
+				this.payshow=true;
+				this.bgmMusic.stop(()=>{
+				
+				console.log('背景音乐停止了');
+				
+				});
+			},
+			noShowShop2(){
+				this.useShopShow=false;
+			},
+			showuse(){
+				this.useShopShow=true;
+			},
+			call() {
+				uni.makePhoneCall({
+					phoneNumber: this.shopInfo.mobilePhone
+				});
+			},
+			getmap() {
+				console.log("打开地图");
+				return false;
+				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)
+						}
+					});
+				}
+			
+			},
+			edit1(){
+				uni.navigateBack(-1)
+			},
+			auditSetTheGuest(){
+				uni.showLoading({
+					title: '加载中'
+				})
+				this.$http('openH5SetTheGuest/auditSetTheGuest', this.info,'POST').then(res => {
+						uni.hideLoading();
+						if(res.code==0){
+							uni.showToast({
+								 title: '活动已生成',
+								 icon:'none',
+								 duration: 2000
+							});
+							uni.navigateTo({
+								url:'activity?type=2'
+							})
+						}
+						//this.list=res.data
+				 })
+			},
+			getShopinfo(){
+				this.$http('openH5SetTheGuest/getShopinfo',{},'GET').then(res => {
+						//this.shopInfo=res.data;
+						var shopinfo=res.data;
+						this.shopckList.forEach(item=>{
+							if(item.id==shopinfo.id){
+								this.shopInfo=shopinfo
+							}
+						})
+						if(this.shopInfo==''){
+							this.shopInfo=this.shopckList[0]
+						}
+				 })
+			},
+            generate(){
+				var that=this;
+				uni.showModal({
+					title: '提示',
+					content: '活动已生成，是否立即启用',
+					cancelText:'暂不启用',
+					confirmText:'立即启用',
+					success: function(res) {
+						if (res.confirm) {
+							that.info.clState=2;
+							that.auditSetTheGuest()
+						}else{
+							console.log("no")
+							that.info.clState=1;
+							that.auditSetTheGuest()
+						}
+					}
+				
+				
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.mp3Img{
+	 /* transform: translate(-1584.4%, 121.5%) scale(1); */
+	  position: fixed;
+	  top: 100rpx;
+	  right: 40rpx;
+	  width: 60rpx;
+	  height: 60rpx;
+	}
+	.shopImg {
+		width: 146rpx;
+		height: 146rpx;
+		border-radius: 6rpx;
+	}
+	.ckshopLine{
+		display: flex;
+		padding: 20rpx 0;
+		border-bottom: 1px solid #EEEEEE;
+	}
+	.baomingBox{
+		width: 750rpx;
+		height: 100vh;
+		background: rgba(0, 0, 0, 0.4);
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 11;
+	}
+	.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;
+	}
+	.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;
+	}
+	.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;
+	}
+</style>