hxj/src/pages/case/appointment/appointment-form.vue

<template>
	<view>
		<!-- <image src="../../../static/image/index/appointment_top.png" mode=""></image> -->
		<app-nav-bar v-if="true" :fixed="true" :xStyle="1" :hasMallSetting="2" :title="'预约'" color="#fff" :background-color="'#e2c47b'"></app-nav-bar>
		<!-- <app-nav-bar v-if="true" :fixed="true" :background-color="''" :xStyle="1" :hasMallSetting="2" -->
		<view class="main-between-y builInfo">
			<view class="main-between cross-center" style="height: 72rpx;" @click="$jump({open_type:'navigate',url:'/pages/sale/properties/addProperties'})">
				<view class="hjx-ts-30 hjx-tw-600 hjx-tc-222">楼盘名称</view>
				<view class="hjx-ts-30 hjx-tc-222">
					<view class="cross-center hjx-ts-28 t-omit" style="width: 510rpx;text-align: right;"
						:class="{'hjx-tc-999':estate_name==''?true:false,'hjx-tc-000':estate_name!=''?true:false}">{{estate_name===''?'请选择':estate_name}}
						<image style="width: 12.8rpx;height: 22.8rpx;margin-left: 20rpx;"
							src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="main-between cross-center" style="height: 72rpx;" @click="$jump({open_type:'navigate',url:'/pages/sale/properties/addProperties'})">
				<view class="hjx-ts-30 hjx-tw-600 hjx-tc-222">楼盘地址</view>
				<view class="hjx-ts-30 hjx-tc-222">
					<view class="cross-center hjx-ts-28 t-omit" style="width: 510rpx;text-align: right;"
						:class="{'hjx-tc-999':estate_address==''?true:false,'hjx-tc-000':estate_address!=''?true:false}">{{estate_address===''?'请选择':estate_address}}
						<image style="width: 12.8rpx;height: 22.8rpx;margin-left: 20rpx;"
							src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="form_box">
			<view class="title">预约人信息</view>
			<view class="hjx-line"></view>
			<view class="item main-between cross-center">
				<view class="hjx-ts-28 hjx-tw-600 hjx-tc-000">姓名</view>
				<view>
					<view class="cross-center hjx-ts-28 ">
						<input type="text" v-model="username" style="text-align:right;color: #000000;" placeholder="请输入"
							placeholder-style="text-align:right" placeholder-class="hjx-tc-999" />
					</view>

				</view>
			</view>
			<view class="item main-between cross-center">
				<view class="hjx-ts-28 hjx-tw-600 hjx-tc-000">电话</view>
				<view>
					<view class="cross-center hjx-ts-28 ">
						<input type="number" v-model="mobile" style="text-align:right;color: #000000;" placeholder="请输入"
							placeholder-style="text-align:right" placeholder-class="hjx-tc-999" />
					</view>

				</view>
			</view>
			<view class="item main-between cross-center">
				<view class="hjx-ts-28 hjx-tw-600 hjx-tc-000">看房日期</view>
				<view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="cross-center hjx-ts-28"
							:class="{'hjx-tc-999':date=='请选择'?true:false,'hjx-tc-000':date!='请选择'?true:false}">{{date}}
							<image style="width: 12.8rpx;height: 22.8rpx;margin-left: 20rpx;"
								src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="item main-between cross-center">
				<view class="hjx-ts-28 hjx-tw-600 hjx-tc-000">看房时间</view>
				<view>
					<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
						<view class="cross-center hjx-ts-28"
							:class="{'hjx-tc-999':time=='请选择'?true:false,'hjx-tc-000':time!='请选择'?true:false}">{{time}}
							<image style="width: 12.8rpx;height: 22.8rpx;margin-left: 20rpx;"
								src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="noMake cross-center">
			<button type="default" @tap="goAppointment">立即预约</button>
		</view>
	</view>
</template>

<script>
	import AppNavBar from '@/components/page-component/index/app-nav-bar.vue';
	export default {
		components: {
			AppNavBar,
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data() {
			return {
				estate_id:'',
				estate_name:'',
				estate_address:'',
				
				username: '',
				mobile: '',
				time: '请选择',
				date: '请选择'
			};
		},
		onShow() {
			var pages = getCurrentPages();
			var currPage = pages[pages.length - 1]; //当前页面
		
			'estateInfo' in currPage.$vm ? this.estate_name = currPage.$vm.estateInfo.name : ''
			'estateInfo' in currPage.$vm ? this.estate_id = currPage.$vm.estateInfo.id : ''
			// 'estateInfo' in currPage.$vm ? this.multiIndex = currPage.$vm.estateInfo.multiIndex : ''
			if('estateInfo' in currPage.$vm){
				let address=currPage.$vm.estateInfo.address.split(' ').filter((s)=>{
					return s && s.trim()
				})
				this.estate_address=address[2]+address[3]
			}''
			
			
		},
		methods: {
			bindTimeChange(e) {
				this.time = e.target.value
			},
			bindDateChange(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			goAppointment() {
				this.$request({
					url: this.$api.user.visit_house,
					data: {
						estate_id: this.estate_id,
						username: this.username,
						phone: this.mobile,
						visit_date: this.date + ' ' + this.time,
					},
					method: 'post'
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '预约成功'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.builInfo {
		padding: 30rpx 36rpx;
		height: auto;
	}

	.form_box {
		width: 678rpx;
		height: 459rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		margin: 20rpx auto;

		.title {
			height: 99rpx;
			padding: 0 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			line-height: 99rpx;
		}

		.item {
			height: 89rpx;
			padding: 0 30rpx;
		}
	}

	.noMake {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 156rpx;
		background: #FFFFFF;
		box-shadow: 0px 7rpx 45rpx 1rpx rgba(85, 82, 82, 0.64);

		button {
			width: 678rpx;
			height: 84rpx;
			background: #A18353;
			border-radius: 6rpx;
			margin: 0 auto;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>