|
|
<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>
|
