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">请选择活动门店，可多选请选择活动门店，可多选</view>
				 <view class="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" >手机号</view>
			 <view class="clWhereLine clWhereActive" >车牌号</view>
			 <view class="clWhereLine" >姓名</view>
			 <view class="clWhereLine" >单位</view>
		  </view>
		</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 payBox">
			 <view class="payType">
				 <img src="../../static/img/ckn.png" alt="" class="payTypeImg">
				 <view class="payTypeTxt">在线支付</view>
			 </view>
			 <view class="payType">
				 <img src="../../static/img/cky.png" alt="" class="payTypeImg">
				 <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="activityName" placeholder="请输入" class="lineRightInput" placeholder-class="inputPlace">
		  </view>
		</view>
	  </view>
	  <view class="kk"></view>
	  <view class="box">
	  		<view class="title">活动详情</view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',                //类型：String  可有字段  备注：新增无编辑有
				activityName:'',                //类型：String  必有字段  备注：活动名称
				startTime:"",                //类型：String  必有字段  备注：营业开始时间
				endTime:"",                //类型：String  必有字段  备注：营业结束时间
				number:"mock",                //类型：String  必有字段  备注：报名人数
				activityContent:"mock",                //类型：String  必有字段  备注：活动说明
				clWhere:"mock",                //类型：String  必有字段  备注：报名凭证1,2,3,4 1手机号2车牌号3姓名4单位
				payType:"mock",                //类型：String  必有字段  备注：1在线支付2无需支付
				music:"mock",                //类型：String  必有字段  备注：背景音乐
				clState:"mock",                //类型：String  必有字段  备注：1未启用2启用
				img:"mock",                //类型：String  必有字段  备注：从首页带进来的图片
				imgList:"mock",//类型：String  必有字段  备注：详情图片多个以逗号分割
				datetimerange: '',
			}
		},
		onLoad() {

		},
		methods: {
          bindTimeChangeStart(e){
			  console.log(e)
			  this.startTime=e.detail.value;
		  },
		  bindTimeChangeendTime(e){
			  this.endTime=e.detail.value;
		  }
		}
	}
</script>

<style scoped>
.content{
	min-height: 100vh;
	background:#F4F5F7;
}
.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;
}
.timelineRight{
	display: flex;
	
}
.shopListNo{
	width: 400rpx;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	color: #CCCCCC;
}
.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;
}
</style>