province-uniapp-qinghai-gsq/queue-monitor/pages/components/userInfo.vue

<template>
	<view class="content userInfo">
		<u--form labelPosition="left" :model="form" :rules="rules" ref="userForm">
			<u-form-item label="司机姓名" prop="driverName" label-width="80" borderBottom required>
				<u--input v-model="form.driverName" border="none"></u--input>
			</u-form-item>
			<u-form-item label="证件号码" prop="identificationNumber" label-width="80" borderBottom required>
				<u--input v-model="form.identificationNumber" border="none"></u--input>
			</u-form-item>
			<u-form-item label="手机号码" prop="mobileNumber" label-width="80" borderBottom required>
				<u--input v-model="form.mobileNumber" border="none"></u--input>
			</u-form-item>
			<u-form-item label="车辆类型" prop="vehicleType" label-width="80" borderBottom required
				@click="selectShow = true; hideKeyboard()">
				<u--input :value="form.vehicleName" placeholder="请选择车辆类型" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="车牌号" prop="licensePlateNumber" label-width="80" borderBottom required>
				<u--input v-model="form.licensePlateNumber" border="none"></u--input>
			</u-form-item>
			<u-form-item label="司机联系地址" prop="driverAddress" label-width="100" borderBottom>
				<u--input v-model="form.driverAddress" border="none"></u--input>
			</u-form-item>
		</u--form>
		<u-gap height="1" bgColor="#fff"></u-gap>
		<view>
			<u-checkbox-group>
				<u-checkbox :value="agreement" @change="agreementChange"></u-checkbox>
				本人承诺以上所填写情况属实，本人愿承担相关法律责任
			</u-checkbox-group>
			
		</view>
		<u-action-sheet :actions="vehicleTypeList" :closeOnClickOverlay="true" :closeOnClickAction="true" title="选择车辆类型"
			:show="selectShow" @select="onVehicleSelect" @close="selectShow = false">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		simpleRequired, mobileRule, idRule, carNoRule,
		mkRules
	} from '@/utils/rules.js'
	import {
		getVehicleTypes,
	} from '@/api/basic'
	export default {
		data() {
			return {
				vehicleTypeList: [],
				agreement: false,
				selectShow: false,
				form: {
					driverName: null,
					identificationNumber: null,
					mobileNumber: null,
					vehicleType: null,
					vehicleName: null,
					licensePlateNumber: null,
					driverAddress: null,
				},
				rules: {
					'driverName': simpleRequired(),
					'identificationNumber': [simpleRequired(), idRule],
					'mobileNumber': [simpleRequired(), mobileRule],
					'vehicleType': simpleRequired(),
					'licensePlateNumber': [simpleRequired(), carNoRule]
				}
			}
		},
		onReady() {
			this.$refs.userForm.setRules(
				this.rules
			)
		},
		mounted() {
			getVehicleTypes().then(resp => {
				const list = resp.data || []
				list.forEach(d => {
					d.name = d.dictLabel
				})
				this.vehicleTypeList = list
			})
		},
		methods: {
			agreementChange(n) {
				this.agreement = n
			},
			onVehicleSelect(n) {
				this.form.vehicleType = n.id
				this.form.vehicleName = n.name
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			getUserInfo() {
				return new Promise((resolve, reject) => {
					this.$refs.userForm.validate().then(res => {
						if (!this.agreement) {
							reject('请勾选用户协议')
						} else {
							resolve({
								...this.form
							})
						}
					}).catch(err => {
						console.log('err', err);
						reject('请填写必输项')
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo {
		margin-left: 15px;
		margin-right: 15px;
	}
</style>