jikeH5/pages/addjk/eadit.vue

<template>
	<view class="content">
		<view class="kk"></view>
	  <view class="box">
		  <view class="title">基础信息</view>
		  <view class="line">
			  <view class="lineLeft">
				  <span class="linexx">*</span> <span>活动名称</span>
			  </view>
			  <view class="lineRight">
				  <input type="text" v-model="activityName" placeholder="请输入" class="lineRightInput" placeholder-class="inputPlace">
			  </view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">
				  <span class="linexx">*</span> <span>报名时间</span>
			  </view>
			  <view class="lineRight timelineRight">
					<picker mode="date" :value="startTime" @change="bindTimeChangeStart">
						<view class="dateViewno" v-if="!startTime">开始时间</view>
						<view class="dateView" v-else>{{startTime}}</view>
					</picker>
					<view class="timeHx">-</view>
					<picker mode="date" :value="endTime" @change="bindTimeChangeendTime">
						<view class="dateViewno" v-if="!endTime">结束时间</view>
						<view class="dateView" v-else>{{endTime}}</view>
					</picker>
			  </view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">
				  <span class="linexx">*</span> <span>活动门店</span>
			  </view>
			  <view class="lineRight shopckBox">
				 <view class="shopListNo" v-if="!shopNames">请选择活动门店，可多选请</view>
				  <view class="shopListY" v-if="shopNames">{{shopNames}}</view>
				 <view class="addshop" @click="addShop">添加</view>
			  </view>
		  </view>
	  </view>
	  <view class="kk"></view>
	  <view class="box">
		<view class="title">报名信息</view>
		<view class="line">
		  <view class="lineLeft">
			  <span class="linexx">*</span> <span>报名凭证</span>
		  </view>
		  <view class="lineRight clWhereBox">
			 <view class="clWhereLine" :class="{clWhereActive:clWhereString.indexOf(1)!=-1}" @click="clWhere(1)">手机号</view>
			 <view class="clWhereLine" :class="{clWhereActive:clWhereString.indexOf(2)!=-1}" @click="clWhere(2)">车牌号</view>
			 <view class="clWhereLine" :class="{clWhereActive:clWhereString.indexOf(3)!=-1}" @click="clWhere(3)">姓名</view>
			 <view class="clWhereLine" :class="{clWhereActive:clWhereString.indexOf(4)!=-1}" @click="clWhere(4)">单位</view>
		  </view>
		</view>
		<view class="line">
		  <view class="lineLeft">
			  <span class="linexx">*</span> <span>最多报名人数</span>
		  </view>
		  <view class="lineRight">
			  <input type="text" v-model="number" placeholder="请输入" class="lineRightInput" placeholder-class="inputPlace">
		  </view>
		</view>
		<view class="line">
		  <view class="lineLeft">
			  <span class="linexx">*</span> <span>支付方式</span>
		  </view>
		  <view class="lineRight payBox">
			 <view class="payType" @click="payType=1">
				 <img src="../../static/img/ckn.png" alt="" class="payTypeImg" v-if="payType!=1">
				 <img src="../../static/img/cky.png" alt="" class="payTypeImg" v-if="payType==1">
				 <view class="payTypeTxt">在线支付</view>
			 </view>
			 <view class="payType" @click="payType=2" style="padding-left: 30rpx;">
				 <img src="../../static/img/cky.png" alt="" class="payTypeImg" v-if="payType==2">
				 <img src="../../static/img/ckn.png" alt="" class="payTypeImg" v-if="payType!=2">
				 <view class="payTypeTxt">无需支付</view>
			 </view>
		  </view>
		</view>
		<view class="line">
		  <view class="lineLeft">
			  <span class="linexx">*</span> <span>支付金额</span>
		  </view>
		  <view class="lineRight">
			  <input type="text" v-model="money" placeholder="请输入" class="lineRightInput" placeholder-class="inputPlace">
		  </view>
		</view>
	  </view>
	  <view class="kk"></view>
	  <view class="box">
	  		<view class="title">活动详情</view>
			<view class="line">
				  <view class="lineLeft">
					  <span class="linexx">*</span> <span>活动说明</span>
				  </view>
				  <view class="lineRight">
					  <textarea placeholder-class="inputPlace" v-model="activityContent" placeholder="请输入" class="textsr"/> 
				  </view>
			</view>
			<view class="line2">
				<view class="lineTitle">详情图片</view>
				<view class="lineMS">此图在活动底部显示，可用于显示门店照片等，建议宽度750px</view>
				<view class="lineImgBOx">
					<view class="lineimghz" v-for="(item,index) in imgListArr">
						<img src="../../static/img/del.png" alt="" class="lineimgdel" @click="delimg(index)" >
						<img :src="item" alt="" class="lineimg">
					</view>
					<view class="lineimghz" @click="upimg">
						<img src="../../static/img/scimg.png" alt="" class="lineimg">
					</view>
				</view>
			</view>
			<view class="line lineBorderNo">
			  <view class="lineLeft">
				<span>音乐</span>
			  </view>
			  <view class="lineRight musicRight">
				 <view class="musicMS">选择/更换音乐</view>
				 <img src="../../static/img/jt.png" alt="" class="musicJt">
			  </view>
			</view>
			<view class="musicBox">
				<view class="musicLine" v-for="(item,index) in 3">
					<view class="musicLineLeft">
						<img src="../../static/img/music.png" alt="" class="musicImg">
						<view class="musicName">Young For You - GALA.mp3</view>
					</view>
					<view>
						<img src="../../static/img/sanchu.png" alt="" class="musicDel">
					</view>
					
				</view>
			</view>
	  </view>
	  <view style="height: 120rpx;"></view>
	  <view class="preview" @click="preview">预览</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',                //类型：String  可有字段  备注：新增无编辑有
				activityName:'',                //类型：String  必有字段  备注：活动名称
				startTime:"",                //类型：String  必有字段  备注：营业开始时间
				endTime:"",                //类型：String  必有字段  备注：营业结束时间
				number:"",                //类型：String  必有字段  备注：报名人数
				activityContent:"",                //类型：String  必有字段  备注：活动说明
				//clWhere:'',                //类型：String  必有字段  备注：报名凭证1,2,3,4 1手机号2车牌号3姓名4单位
				payType:1,                //类型：String  必有字段  备注：1在线支付2无需支付
				music:"",                //类型：String  必有字段  备注：背景音乐
				clState:'',                //类型：String  必有字段  备注：1未启用2启用
				img:'',                //类型：String  必有字段  备注：从首页带进来的图片
				imgList:'',//类型：String  必有字段  备注：详情图片多个以逗号分割
				datetimerange: '',
				shopNames:'',
				shopList:'',
				clWhereList:[],
				clWhereString:'',
				imgListArr:[],
				money:'',
			}
		},
		onLoad(opt) {
            this.img=opt.img
		},
		onShow() {
			const shopckList = uni.getStorageSync("shopckList");
			var shopNames=[];
			var shopList=[];
			shopckList.forEach(item=>{
				shopNames.push(item.shopName)
				shopList.push(item.id)
			})
			this.shopNames=shopNames.join(',')
			this.shopList=shopList.join(',')
		},
		methods: {
		  preview(){
			var editdata={
				id:this.id,
				activityName:this.activityName,
				startTime:this.startTime,
				endTime:this.endTime,
				number:this.number,
				activityContent:this.activityContent,
				clWhere:this.clWhereString,
				payType:this.payType,
				music:this.music,
				money:this.money,
				shopList:this.shopList,
				img:this.img,
				imgList:this.imgListArr.join(','),
				clState:'',
			} 
			console.log(editdata)
			uni.setStorage({
					key: 'editdata',
					data: editdata,
					 success: function () {	
						uni.navigateTo({
							url:'jkDetail?type=1'
						})			
			    }
			});
		  },
		  addShop(){
			  uni.navigateTo({
			  	url:'ckshop'
			  })
		  },
          bindTimeChangeStart(e){
			  console.log(e)
			  this.startTime=e.detail.value;
		  },
		  bindTimeChangeendTime(e){
			  this.endTime=e.detail.value;
		  },
		  clWhere(num){
			  this.clWhereString=this.clWhereList.join(',');
			  if(this.clWhereString.indexOf(num)!=-1){
				 // this.clWhereList.remove(num)
				 let index = this.clWhereList.indexOf(num);
				 this.clWhereList.splice(index, 1)
				 //this.remove(num)
			  }else{
				 this.clWhereList.push(num) 
			  }
			  this.clWhereString=this.clWhereList.join(',');
			  console.log(this.clWhereString)
		  },
		  delimg(index){
			   this.imgListArr.splice(index, 1)
		  },
		  upimg(){
		  	   var that = this;
			   uni.chooseImage({
				sourceType: ['album','camera'],
				count:9, 
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					that.file=tempFilePaths[0]
					 uni.uploadFile({
							url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data );
								that.imgListArr=that.imgListArr.concat(JSON.parse(uploadFileRes.data).data)
								//that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
								//that.imgurl=JSON.parse(uploadFileRes.data).data[0];
								//that.goAddzdy(that.imgurl)
							}
						});
			   
					
				}
			   });
		  }
		 
		}
	}
</script>

<style scoped>
.content{
	min-height: 100vh;
	background:#F4F5F7;
}
.preview{
	width: 750rpx;
	height: 98rpx;
	background: #3F90F7;
	line-height: 98rpx;
	text-align: center;
	color: #ffffff;
	font-size: 30rpx;
	position: fixed;
	left: 0;
	bottom: 0;
}
.musicBox{
	padding: 0 24rpx;
}
.musicLine{
	display: flex;
	justify-content: space-between;
	margin-bottom:30rpx;
	padding:26rpx 24rpx;
	background: #F4F5F7;
	border-radius: 10rpx;
}
.musicName{
	color: #3C3C3C;font-size: 24rpx;
}
.musicLineLeft{
	display: flex;
}
.musicDel{
	width: 30rpx;
	height: 30rpx;
}
.musicImg{
	width: 36rpx;
	height: 36rpx;
}
.line2{
	padding: 30rpx 24rpx;
	border-bottom: 1px solid #EEEEEE;
}
.musicJt{
	width: 28rpx;
	height: 28rpx;
	margin-top: 8rpx;
}
.musicRight{
	display: flex;
	justify-content: space-between;
	width: 500rpx;
}
.musicMS{
	color: #CCCCCC;
}
.lineimgdel{
	width: 37rpx;
	height: 37rpx;
	position: absolute;
	top: -18rpx;
	right: -18rpx;
}
.lineimghz{
	margin-right: 24rpx;
	position: relative;
	margin-top: 24rpx;
}
.lineimg{
	width: 150rpx;
	height: 150rpx;
}
.lineTitle{
	color: #666666;font-size: 28rpx;
}
.lineMS{
	color: #999999;font-size: 24rpx;padding-top: 10rpx;
}
.lineImgBOx{
	display: flex;
	flex-wrap: wrap;
}
.payBox{
	display: flex;
}
.payTypeImg{
	width: 36rpx;
	height: 36rpx;
}
.payType{
	display: flex;
	line-height: 36rpx;
}
.payTypeTxt{
	padding-left: 10rpx;
	color: #3C3C3C;
}
.line{
	display: flex;
	font-size: 28rpx;
	padding: 30rpx 24rpx;
	border-bottom: 1px solid #EEEEEE;
}
.linexx{
	color: #FF3B30;
}
.dateView{
	color:#3C3C3C ;
}
.lineLeft{
	width: 200rpx;
	color: #666666;
}
.clWhereBox{
	display: flex;
	
}
.clWhereLine{
	width: 100rpx;
	height: 52rpx;
	background: #F4F5F7;
	border-radius: 10rpx;
	text-align: center;
	color: #3C3C3C;
	line-height: 52rpx;
	font-size: 24rpx;
	margin-right: 24rpx;
}
.clWhereBox .clWhereActive{
	background: #EAF3FF;
	border: 2rpx solid #3F90F7;
	height: 48rpx;
	color: #3F90F7;
	height: 48rpx;
	line-height: 48rpx;
	width: 96rpx;
}
.timelineRight{
	display: flex;
	
}

.textsr{
	width: 500rpx;
	height: 180rpx;
}
.shopListNo{
	width: 400rpx;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	color: #CCCCCC;
}
.shopListY{
	width: 400rpx;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	color: #3C3C3C;
}
.addshop{
	color: #3F90F7;
	padding-left: 10rpx;
}
.shopckBox{
	display: flex;
}
.timeHx{
	color: #CCCCCC;
	padding: 0 30rpx;
}
.lineRightInput{
	font-size: 28rpx;
	color:#3C3C3C ;
}
.lineRight{
	color:#3C3C3C ;
}
.inputPlace{
	color: #CCCCCC;
}
.dateViewno{
	color: #CCCCCC;
}
.box{
	background: #ffffff;
}
.kk{
	background:#F4F5F7;
	height: 20rpx;
}
.title{
	padding-left: 24rpx;
	padding-top: 30rpx;
	color: #333333;
	font-size: 32rpx;
	line-height: 45rpx;
	font-weight: 500;
}
.lineBorderNo{
	border-bottom: none !important;
}
</style>