wx-dangyuanjiaoyujidi/pages/park/book.vue

<template>
	<view>
		<view class="box-content">
			<view class="box-card">
				<view class="box-tip justify-between">
					<text class="box-tiptxt">已选：3月31日+09:00-10:00</text>
					<view class="box-tipbtn">选择已预约的参观 > </view>
				</view>
				<u--form labelPosition="top" labelWidth="120px" :model="form" ref="form">
					<u-form-item label="预约入场时间" labelPosition="top" borderBottom ref="time">
						<view @click="handleSelectTime" style="color: #EF9525;font-size: 24rpx;">请选择入场时间></view>
						<u-datetime-picker :show="showSelecttime" closeOnClickOverlay @close="cancelTime" @cancel="cancelTime"
							@confirm="confirmTime" v-model="form.time" mode="datetime">
						</u-datetime-picker>
					</u-form-item>
					<u-form-item label="车牌号码" labelPosition="top" borderBottom ref="plate">
						<plate @listenPlateChange="plateChange" :defaultPlate="plateNumber" />
					</u-form-item>
					<u-form-item label="车牌类型" labelPosition="top" borderBottom ref="car_type">
						<u-radio-group v-model="form.car_type" class="justify-around">
							<u-radio shape="circle" activeColor="#EF9525" :name='1' label="普通车"></u-radio>
							<u-radio shape="circle" activeColor="#EF9525" :name='2' label="新能源车"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="手机号" labelPosition="top" borderBottom ref="mobile">
						<u--input placeholder="请输入手机号" v-model="form.mobile" border="surround" clearable></u--input>
					</u-form-item>
				</u--form>

				<view class="box-tip box-tipgray flex-row align-center" @click="handleChange">
					<u-icon :name="(form.checkUser?'checkmark-circle-fill':'checkmark-circle')" color="#828282">
					</u-icon>
					<view class="box-tiptxt" style="margin-left: 10rpx;">请认真阅读、知悉并遵守《实训基地预约停车须知》</view>
				</view>
			</view>
		</view>
		<view class="page-bottom">
			<u-button type="primary">确定</u-button>
		</view>
	</view>
</template>

<script>
	import {
		plate
	} from '@/components/plate/index.vue'
	export default {
		name: "index",
		components: {
			plate
		},
		data() {
			return {
				showSelecttime: false,
				plateNumber: ['苏', 'E', '', '', '', '', ''],
				form: {
					plate: "",
					mobile: "",
					time: Number(new Date()),
					car_park_id: "",
					checkUser: false,
					car_type: 1,
					type: "1"
				}
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			confirmTime() {
				this.showSelecttime = false;
			},
			cancelTime() {
				this.showSelecttime = false;
			},
			plateChange(val) {
				console.log(val);
			},
			handleChange() {
				this.form.checkUser = !this.form.checkUser;
			},
			handleSelectTime() {
				this.showSelecttime = true;
			}
		}
	}
</script>

<style>
	page {
		background: #f7f6f4;
	}

	.box-tip {
		background: #FCF6E3;
		height: 66rpx;
		line-height: 66rpx;
		box-sizing: border-box;
		padding: 0rpx 12rpx;
	}

	.box-tipgray {
		background: #f7f6f4 !important;
	}

	.box-tiptxt {
		font-size: 24rpx;
		color: #828282;
	}

	.box-tipbtn {
		font-size: 24rpx;
		text-decoration: underline;
		color: #EF9525;
	}

	.box-content {
		padding: 30rpx 24rpx;
	}

	.box-card {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 31rpx 18rpx;
		margin-bottom: 20rpx;
	}

	.page-bottom {
		background: #FFFFFF;
		height: 108rpx;
		box-shadow: 2rpx 3rpx 10rpx 0rpx rgba(107, 94, 77, 0.3);
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 15rpx 25rpx;
		box-sizing: border-box;
		z-index: 1024;
	}
</style>