realty/virgo.wzfrontend/yui_wx/pages/reservation/reservation.vue

<template>
	<view class="reservation-index form-box">
		<uni-forms label-position="top" :modelValue="formData">
			<uni-forms-item label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" disabled />
			</uni-forms-item>
			<uni-forms-item label="联系方式" name="phone">
				<uni-easyinput type="tel" v-model="formData.phone" placeholder="请输入姓名" disabled />
			</uni-forms-item>
			<uni-forms-item label="预约时间" name="date">
				<view class="select-box" @click="open">
					<text class="select-text" v-if="formData.date">{{formData.date}}</text>
					<text class="select-label" v-else>请选择日期</text>
					<uni-icons class="form-icon" type="down" size="12" color="#8c8c8c"></uni-icons>
				</view>
			</uni-forms-item>
		</uni-forms>
		<uv-datetime-picker ref="dateTimePicker" v-model="nowTime" mode="datetime" @confirm="confirm"
			:minDate="nowTime">
		</uv-datetime-picker>
		<view class="hui-button-box">
			<view class="hui-button-view">
				<view class="hui-button" @click="submit">提交预约</view>
			</view>
			<uv-safe-bottom></uv-safe-bottom>
		</view>
	</view>
</template>

<script>
	import lotusCalendar from "@/components/Winglau14-lotusCalendar/Winglau14-lotusCalendar.vue";
	import {
		insertReservation
	} from '@/request/api/house.js'

	export default {
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					date: ''
				},
				houseId: '',
				projectId: '',
				chargePersonId: '',
				nowTime: Number(new Date())
			}
		},
		onLoad(body) {
			if (body.houseId) this.houseId = body.houseId;
			if (body.projectId) this.projectId = body.projectId;
			if (body.chargePersonId) this.chargePersonId = body.chargePersonId;
		},
		onShow() {
			this.formData.date = this.$dayjs().format('YYYY-MM-DD HH:mm');
			this.formData['name'] = this.$store.getters.user.userName;
			this.formData['phone'] = this.$store.getters.user.phone;
		},
		methods: {
			open() {
				this.$refs.dateTimePicker.open();
			},
			confirm(e) {
				let date = this.$dayjs(e.value).format('YYYY-MM-DD HH:mm');
				this.formData.date = date;
			},
			submit() {
				insertReservation({
					userId: this.$store.getters.user.userId,
					projectItemTargetRoomId: this.houseId,
					date: this.formData.date,
					projectId: this.projectId,
					chargePersonId: this.chargePersonId
				}).then(res => {
					if (res.code == 200) {
						this.$toast('预约成功');
						setTimeout(() => {
							this.$navigateBack();
						}, 1000);
					}
				})
			}
		},
		components: {
			lotusCalendar
		},
	}
</script>

<style lang="scss">
	.reservation-index {
		padding: 30rpx;
	}
</style>