111

pages/addjk/eadit.vue

@@ -3,6 +3,89 @@
 		<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>
@@ -12,9 +95,9 @@
 		data() {
 			return {
 				id:'',                //类型：String  可有字段  备注：新增无编辑有
-				activityName:"mock",                //类型：String  必有字段  备注：活动名称
-				startTime:"mock",                //类型：String  必有字段  备注：营业开始时间
-				endTime:"mock",                //类型：String  必有字段  备注：营业结束时间
+				activityName:'',                //类型：String  必有字段  备注：活动名称
+				startTime:"",                //类型：String  必有字段  备注：营业开始时间
+				endTime:"",                //类型：String  必有字段  备注：营业结束时间
 				number:"mock",                //类型：String  必有字段  备注：报名人数
 				activityContent:"mock",                //类型：String  必有字段  备注：活动说明
 				clWhere:"mock",                //类型：String  必有字段  备注：报名凭证1,2,3,4 1手机号2车牌号3姓名4单位
@@ -22,14 +105,21 @@
 				music:"mock",                //类型：String  必有字段  备注：背景音乐
 				clState:"mock",                //类型：String  必有字段  备注：1未启用2启用
 				img:"mock",                //类型：String  必有字段  备注：从首页带进来的图片
-				imgList:"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>
@@ -39,6 +129,95 @@
 	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;
 }