jikeH5/pages/addjk/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.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: 65vh;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()
		},
		onHide(){
			this.bgmMusic.stop(()=>{
			console.log('背景音乐停止了');
			});
		},
		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;
		padding-bottom: 10rpx;
	}
	.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>