luoyangCoachApp/pages/recordEntry/operate/mySchedule/mouldEdit/mouldAdd.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.templateName" ></u--input>
					</view>
				</view>
			</view>
			
			<view class="card timeCon" v-for="(item,index) in FormData.scheduleClassTemplateDetailList">
				<view class="deleteIcon" @click="deleteFn(item.id)" v-if="FormData.scheduleClassTemplateDetailList.length>1">
					<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" @click="showTime(index,'startTime')">
							<mySelect :value="item.startTime"  placeholder="开始时间"></mySelect>
						</view>
						<view class="line"></view>
						<view class="timeTag"  @click.capture="showTime(index,'endTime')">
							<mySelect :value="item.endTime"   placeholder="结束时间"></mySelect>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">选择人数</view>
					<view class="numBox">
						<u-number-box v-model="item.personCount" :max="10"></u-number-box>
					</view>
				</view>
			</view>
			
			<view class="add" @click="$u.throttle(addFn, 500)">
				<view class="addIcon">
					<image src="@/static/images/coach/tianjia.png" mode=""></image>
				</view>
				<view class="text">添加</view>
			</view>
			
			<view class="btnBg" @click="$u.throttle(getClassCreateFn, 500)">保存为模板</view>
		</view>
		
		 <u-datetime-picker
				:show="show"
				v-model="value1"
				mode="time"
				:minHour="datePicker.minHour"
				:maxHour="datePicker.maxHour"
				:minMinute="datePicker.minMinute"
				:maxMinute="0"
				@confirm="confirmTime"
				@close="show=false"
				@cancel="show=false"
		></u-datetime-picker>
	</view>
</template>

<script>
	import { getClassCreate, getClassTimeLimt } from '@/config/api.js'
	export default {
		data() {
			return {
				datePicker: {
					minHour: 0,
					maxHour: 0,
					maxMinute: 0,
					minMinute: 0
				},
				FormData: {},
				show: false,
				value1: '',
				tempDateObj: {},//选择日期的临时保存对象
			}
		},
		onLoad() {
			this.initFormData()
			this.getClassTimeLimtFn()
		},
		methods: {
			initFormData() {
				this.FormData = {
					templateName: '',
					scheduleClassTemplateDetailList: [
						{startTime: '',endTime: '', personCount: 1, id: new Date() * 1}
					]}
				this.FormData.coachId = this.vuex_coachId
				this.FormData.deptId = this.vuex_deptId
			},
			// 获取最小时间段
			async getClassTimeLimtFn() {
				const {data: res} = await getClassTimeLimt({ coachId: this.vuex_coachId})
				this.datePicker.minHour = res.currentClassStartTime.split(':')[0]*1
				this.datePicker.maxHour = res.currentClassEndTime.split(':')[0]*1
				console.log(this.datePicker)
			},
			// 创建模版
			async getClassCreateFn() {
				this.FormData.scheduleClassTemplateDetailList.forEach((item)=>{
					
				})
				for(let i=0; i<this.FormData.scheduleClassTemplateDetailList.length; i++) {
					let item = this.FormData.scheduleClassTemplateDetailList[i]
					if(!item.endTime||!item.startTime||!item.personCount)
					return this.$u.toast('请输入完整的信息')
				}
				const {data: res} = await getClassCreate(this.FormData)
				if(res) this.$u.toast('创建成功')
				uni.$emit('refreshMould')
				uni.navigateBack()
				// this.initFormData()
			},
			addFn() {
				let obj = {startTime: '',endTime: '', personCount: 1, id: new Date() * 1}
				this.FormData.scheduleClassTemplateDetailList.push(obj)
			},
			deleteFn(id) {
				let arr = this.FormData.scheduleClassTemplateDetailList
				if(arr.length==1) return
				let index = arr.findIndex(item=>item.id==id)
				if(index==-1) return
				arr.splice(index, 1)
			},
			confirmTime(val) {
				this.FormData.scheduleClassTemplateDetailList[this.tempDateObj.index][this.tempDateObj.name] = val.value
				console.log(val.value) 
				this.show = false
				
			},
			showTime(index, name) {
				this.tempDateObj = {
					index, 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>