count-pass-app/subpages/driver/add.vue

<template>
	<view class="customer-form">
		<u-navbar :title="form.id?'编辑':'新增'" :autoBack="true" :placeholder="true">
		</u-navbar>
		<u-form labelPosition="left" :model="form" :rules="rules" ref="form1" labelWidth='100'>

			<u-form-item :label="$t('driver.name')" borderBottom prop="driver">
				<u--input v-model="form.driver" border="none"
					:placeholder="$t('base.common.placeholderI')+$t('driver.name')">
				</u--input>
			</u-form-item>
			<!-- #ifndef APP-PLUS -->
			<!-- <u-form-item :label="$t('driver.agricultural')" borderBottom prop="driver">
				<u-radio-group v-model="form.agriculturalVehicle">
					<u-radio shape="circle" name="1" :label="$t('driver.yes')"></u-radio>
					<u-radio shape="circle" name="0" :label="$t('driver.no')"></u-radio>
				</u-radio-group>
			</u-form-item> -->
			<!-- #endif  -->
			<u-form-item :label="$t('order.phone')" borderBottom prop="phone">
				<u--input v-model="form.phone" border="none" type="number"  @input="phoneInput" maxlength="11"
					:placeholder="$t('base.common.placeholderI')+$t('order.phone')">
				</u--input>
			</u-form-item>
				

			<!-- <u-form-item v-if="form.agriculturalVehicle==0" :label="$t('driver.vehicle')" borderBottom prop="vehicle"
				@click="carKeyboardShow=true">
				<u--input readonly v-model="form.vehicle" border="none"
					:placeholder="$t('base.common.placeholderI')+$t('driver.vehicle')"></u--input>
			</u-form-item> -->

			<u-form-item :label="$t('driver.vehicle')" borderBottom prop="vehicle">
				<u--input v-model="form.vehicle" border="none" @input="form.vehicle=form.vehicle.toUpperCase()"
					:placeholder="$t('base.common.placeholderI')+$t('driver.vehicle')"></u--input>
			</u-form-item>
			<!-- <u-form-item :label="$t('driver.fleet')" borderBottom prop="fleet">
				<u--input v-model="form.fleet" border="none"
					:placeholder="$t('base.common.placeholderI')+$t('driver.fleet')"></u--input>
			</u-form-item> -->
			<div style="margin: 16px 0;">
				<u-button type="primary" color='#4680F9' native-type="submit" @click="submit('form1')">
					{{$t('base.common.submit')}}
				</u-button>
			</div>
		</u-form>
		<CarKeyboard :show.sync="carKeyboardShow" :isProvince="isProvince" :vehicleNo="form.vehicle"
			@confirm="keyboardconfirm" vehicleType="car">
		</CarKeyboard>
	</view>

</template>

<script>
	import {
		addVehicle,
		getVehicleInfoById
	} from '../../api/driver'
	import CarKeyboard from '../../components/carKeyboard/carKeyboard'
	import Oss from '../../components/oss/oss'
	export default {
		data() {
			return {
				carKeyboardShow: false,
				isProvince: true,
				form: {
					id: "",
					driver: '',
					phone: '',
					idcard: '',
					vehicleList: [],
					idcardFront: '',
					idcardReverse: '',
					licenseFront: '',
					licenseReverse: '',
					vehicle: '',
					fleet: "",
					// agriculturalVehicle: '0',

				},
				rules: {
					driver: [{
						required: true,
						message: this.$t('base.common.placeholderI') + this.$t('order.driver')
					}],
					vehicle: [{
						required: true,
						message: this.$t('base.common.placeholderI') + this.$t('order.vehicle')
					}]
				},
			}
		},
		components: {
			CarKeyboard,
			Oss
		},
		computed: {},
		onLoad(options) {
			this.form.id = options.id || ''
			this.getVehicleById()
			//#ifdef APP-PLUS
			this.isProvince = false
			//#endif 
		},
		methods: {
			//手机号输入
			phoneInput(){
				if(this.form.phone.length >= 11){
					uni.showToast({
						title: this.$t('base.smsCode.phoneTooLong'),
						icon: 'none'
					})
				}
			},
			//上传成功
			uploadSuccess(data, label) {
				console.log(data);
				this.form[label] = data.url
			},
			//车号键盘输出
			keyboardconfirm(id) {
				this.form.vehicle = id

			},
			getVehicleById() {
				if (this.form.id) {
					getVehicleInfoById(this.form).then(res => {
						if (res.statusCode == 200) {
							var response = res.data.data
							if (response) {
								this.form.vehicle = response.vehicle
								this.form.idcard = response.idcard
								this.form.driver = response.driver
								this.form.fleet = response.fleet
								this.form.phone = response.phone
							}
						}
					})
				}
			},
			//提交司机信息
			submit(ref) {
				let _this = this
				this.$refs[ref].validate().then(() => {
						let data = JSON.parse(JSON.stringify(_this.form))
						addVehicle(data).then(res => {
							if (res.statusCode == 200) {
								uni.showModal({
									showCancel: false,
									// title: '提示',
									content: _this.$t("customer_meter.operateOk"),
									success: function(res) {
										uni.navigateBack({
											delta: 1
										})
									}
								})
								_this.$refs[ref].resetFields()
							}
						})

					})
					.catch(err => {
						console.log('err', err);
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.customer-form {
		padding: 0 32rpx 32rpx;
		background-color: #fff;

		.img-box {
			width: 160rpx;
			height: 160rpx;
			background-color: #f2f2f2;
			position: relative;
			border-radius: 10rpx;
			overflow: hidden;
			margin-right: 20rpx;

			.delete-img {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				line-height: 20px;
				background-color: #000;
				color: #fff;
				position: absolute;
				top: -6px;
				right: -6px;
				z-index: 2000;
			}

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}

	.vehicle-wrap {
		display: flex;
		flex: 1;
		flex-direction: column;

		.vehicle-list {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			column-gap: 10rpx;
		}

		.add-btn {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}

	/deep/ .u-form-item__body__right__content__slot {
		flex-direction: row;
	}
</style>