jiangximiniprogramSchool/pages/recordEntry/operate/mySchedule/mouldEdit/mouldEdit.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="添加编辑模版"></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="tit flex">
					<view class="lab">模板标题</view>
					<view class="inputBox my">
						 <u--input placeholder="请输入内容" border="none" v-model="FormData.title" ></u--input>
					</view>
				</view>
			</view>
			
			<view class="card timeCon" v-for="(item,index) in FormData.tiemArr">
				<view class="deleteIcon" @click="deleteFn(item.id)">
					<u-icon name="close-circle-fill" color="#ADADAD"  size="22"></u-icon>
				</view>
				<view class="row">
					<view class="lab">选择时间段</view>
					<view class="flex">
						<view class="timeTag" >
							<mySelect :value="item.startTime" @click="showTime(item,'startTime')" placeholder="开始时间"></mySelect>
						</view>
						<view class="line"></view>
						<view class="timeTag"  @click.capture="showTime(item,'endTime')">
							<mySelect :value="item.startTime" @click="showTime(item,'startTime')" placeholder="结束时间"></mySelect>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">选择人数</view>
					<view class="numBox">
						<u-number-box v-model="item.people" :max="10"></u-number-box>
					</view>
				</view>
			</view>
			
			<view class="add" @click="addFn">
				<view class="addIcon">
					<image src="@/static/images/coach/tianjia.png" mode=""></image>
				</view>
				<view class="text">添加</view>
			</view>
			
			<view class="btnBg">保存为模板</view>
		</view>
		
		 <u-datetime-picker
				:show="show"
				v-model="value1"
				mode="time"
				@confirm="confirmTime"
		></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				FormData: {
					title: '',
					tiemArr: [
						{startTime: '',endTime: '', people: 1, id: new Date() * 1}
					]
				},
				show: false,
				value1: ''
			}
		},
		methods: {
			addFn() {
				let obj = {startTime: '',endTime: '', people: 1, id: new Date() * 1}
				this.FormData.tiemArr.push(obj)
			},
			deleteFn(id) {
				let arr = this.FormData.tiemArr
				if(arr.length==1) return
				let index = arr.findIndex(item=>item.id==id)
				if(index==-1) return
				arr.splice(index, 1)
			},
			confirmTime(val) {
				console.log(val.value)
				this.show = false
			},
			showTime(item, name) {
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageBgImg {
	  .pad {
	    .card {
			padding: 0 28rpx;
			margin-bottom: 20rpx;
			&.timeCon {
				padding: 28rpx;
			}
	      .tit {
			  height: 96rpx;
			  background: #FFFFFF;
			  border-radius: 16px;
	        .lab {
				width: 172rpx;
				font-weight: 500;
				color: #333333;
	        }
	
	        .inputBox.my {
	          flex: 1;
	        }
	      }
	    }
		
		.card {
			position: relative;
		  .deleteIcon {
		    position: absolute;
			right: 20rpx;
			top: 20rpx
		  }
		
		  .row {
			  padding: 12rpx 0;
			  display: flex;
			  align-items: center;
		    .lab {
				font-size: 30rpx;
				width: 172rpx;
				
				flex-shrink: 0;
		    }
		
		    .flex {
		      .timeTag {
				  // padding: 8rpx 14rpx;
				  background: #F8F8F8;
				  border-radius: 34rpx;
				  width: 150rpx;
				  text-align: center;
				  height: 52rpx;
				  line-height: 52rpx;
				  // width:fit-content;
		        input {
					display: block;
					width: 100%;
					height: 100%;
					font-size: 26rpx;
					color: #333333;
		        }
		      }
		
		      .line {
				width: 26rpx;
				height: 2rpx;
				background: #DADADA;
				margin: 0 14rpx;
		      }
		    }
		  }
		}
	
	    .add {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 20rpx;
	      .addIcon {
	        width: 36rpx;
	        height: 36rpx;
	      }
	
	      .text {
			font-size: 28rpx;
			color: $themC;
			margin-left: 10rpx;
	      }
	    }
	
	    .btnBg {
			width: 396rpx;
			margin: 96rpx auto 20rpx auto;
	    }
	  }
	}
</style>