sz-kjsxy-wx-new/packages/booksubmit/index.vue

<template>
	<view class="container">
		<image class="cbg" src="../../static/common_bg.png"></image>
		<view class="wrap">
			<u-form :model="form" ref="uForm" :label-width="140" :label-align="'left'" :error-type="['toast']">
				<u-form-item label="预约日期" prop="date" required>
					<u-input :placeholder="'请选择'" v-model="form.date" :type="'select'" @click="dateShow = true" />
				</u-form-item>
				<u-form-item label="预约时间" prop="timeRange" required>
					<u-input :placeholder="'请选择'" v-model="form.timeRange" :type="'select'" @click="openTime" />
				</u-form-item>
				<u-form-item label="预约事项" prop="content" required>
					<u-input :placeholder="'请输入预约事项'" v-model="form.content" type="textarea" />
				</u-form-item>
				<u-form-item label="预约场地" prop="site" required>
					<u-input :placeholder="'请选择'" v-model="form.siteName" type="select" @click="siteShow = true" />
				</u-form-item>
				<u-form-item label="车牌" prop="plate">
					<u-input :placeholder="'请输入车牌，多个车牌，分隔'" v-model="form.plate" type="textarea" />
				</u-form-item>
				<u-form-item label="同行人" prop="accompany">
					<u-button size="mini" type="primary" @click="addAccompany">新增</u-button>
					<u-table>
						<u-tr>
							<u-th>姓名</u-th>
							<u-th>操作</u-th>
						</u-tr>
						<u-tr v-for="(item,index) in form.accompany">
							<u-td>{{item.name}}</u-td>
							<u-td>
								<button @click="delAccompany(index)">删除</button>
							</u-td>
						</u-tr>
					</u-table>
				</u-form-item>
			</u-form>
			
			<view class="form-btn">
				<view @click="submit" type="primary">预约</view>
			</view>
			
		</view>
		

		<u-picker @confirm="dateConfirm" mode="time" v-model="dateShow" :params="dateParams"></u-picker>
		<timeSlot ref="timeslot" :title="'选择时间段'" @confirm="confirmTime"></timeSlot>
		<u-picker @confirm="siteConfirm" v-model="siteShow" :range="siteList" range-key="name"
			mode="selector"></u-picker>

		<!-- 新增修改同行人 -->
		<view class="modal">
			<u-popup v-model="accompanyShow" mode="bottom">
				<view class="modal-tip">同行人</view>
				<view class="modal-content">
					姓名：<u-input :placeholder="'请输入姓名'" v-model="accompanyObj.name" />
				</view>
				<view class="modal-content">
					身份证：<u-input :placeholder="'请输入身份证'" v-model="accompanyObj.idcard" />
				</view>
				<view class="modal-content">
					手机号：<u-input :placeholder="'请输入手机号'" v-model="accompanyObj.mobile" />
				</view>
				<view class="form-btn">
					<view @click="submitAccompany" type="primary">提交</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"
	export default {
		components: {
			timeSlot
		},
		data() {
			return {
				dateShow: false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				form: {
					date: '',
					timeRange: '',
					start_time: '',
					end_time: '',
					content: '',
					site: "",
					siteName: '',
					accompany: []
				},
				siteShow: false,
				siteList: [],
				accompanyShow: false,
				accompanyObj: {
					name: '',
					idcard: '',
					mobile: ''
				},
				accompanyIndex: -1,
				rules: {
					date: [{
						required: true,
						message: '请选择预约日期',
						trigger: ['change', 'blur'],
					}],
					timeRange: [{
						required: true,
						message: '请选择预约时段',
						trigger: ['change', 'blur'],
					}],
					siteName: [{
						required: true,
						message: '请选择预约场地',
						trigger: ['change', 'blur'],
					}]
				},


			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getSites()
		},
		methods: {
			// 日期
			dateConfirm(e) {
				console.log("date", e)
				this.form.date = e.year + '-' + e.month + '-' + e.day
			},
			// 时间段
			//点击吊起弹窗
			openTime() {
				this.$refs.timeslot.open()
			},
			//确认
			confirmTime(e) {
				console.log(e)
				this.form.timeRange = e.start.hour + ":" + e.start.min + '~' + e.end.hour + ":" + e.end.min
				this.form.start_time = e.start.hour + ":" + e.start.min
				this.form.end_time = e.end.hour + ":" + e.end.min
			},
			// 场地
			getSites() {
				this.$u.api.otherConfig().then(res => {
					this.siteList = res.appointment
				})
			},
			siteConfirm(e) {
				console.log("e", e)
				this.form.site = this.siteList[e[0]].id
				this.form.siteName = this.siteList[e[0]].name
			},
			// 同行人
			addAccompany() {
				this.accompanyShow = true
			},
			submitAccompany() {
				this.form.accompany.push(this.accompanyObj)
				this.accompanyIndex = -1
				this.accompanyObj = {}
				this.accompanyShow = false
			},
			delAccompany(index) {
				this.form.accompany.splice(index, 1)
			},
			submit() {
				let start_time = ''
				let end_time = ''
				console.log("form",this.form)
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
						console.log("123",start_time,end_time)
						start_time = this.form.date + ' ' + this.form.start_time + ':00'
						end_time = this.form.date + ' ' + this.form.end_time + ':00'
						// this.form.start_time = start_time
						// this.form.end_time = end_time
						this.form.accompany_total = this.form.accompany.length
						console.log("this.form", this.form)
						this.$u.api.scheduleSave({
							...this.form,
							start_time:start_time,
							end_time:end_time
						}).then(res => {
							this.base.toast("预约成功",1500,function(){
								uni.redirectTo({
									url:'/packages/mybook/index'
								})
							})

						})
					// } else {
					// 	console.log('验证失败');
					// 	this.base.toast("验证失败")
					// }
				// });
			}
		}
	}
</script>

<style scoped lang="scss">
	.container{
		padding: 30rpx;
		width:100%;
		height:100vh;
		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}
		.wrap{
			position: relative;
		
		}
		.form-btn {
			width: 100%;
			// position: fixed;
			// left: 0;
			// bottom: 0;
			padding: 20rpx 0;
		
			&>view{
				width: 70%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				background-color: #010296;
				border-radius: 10rpx;
				padding: 20rpx;
			}
		}
	}
</style>