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-calendar ref="calendar" @confirm="confirm"></uv-calendar>
		<view class="hui-button-box">
			<view class="hui-button" @click="submit">提交预约</view>
		</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: 15
			}
		},
		onLoad(body) {
			console.log(body);
			if (body.houseId) this.houseId = body.houseId;
		},
		onShow() {
			this.formData.date = this.$dayjs().format('YYYY-MM-DD');
			this.formData['name'] = this.$store.getters.user.userName;
			this.formData['phone'] = this.$store.getters.user.phone;
		},
		methods: {
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				this.formData.date = e[0];
			},
			submit() {
				insertReservation({
					userId: this.$store.getters.user.userId,
					projectItemTargetRoomId: this.houseId,
					date: this.formData.date
				}).then(res => {
					if (res.code == 200) {
						this.$toast('预约成功');
						setTimeout(() => {
							this.$navigateBack();
						}, 1000);
					}
				})
			}
		},
		components: {
			lotusCalendar
		},
	}
</script>

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