vue-insagent-app/pages/caragent/addcar.vue

<template>
	<view class="">
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="headers">
			<u-icon name="camera-fill" color="#2979ff" size="80" @tap="upload()">
			</u-icon>
		</view>
		<u-form :model="form" ref="uForm" label-width="230" :rules="rules">
			<u-form-item label="车主" prop="ownerName">
				<u-input placeholder="填写车主姓名" v-model="form.ownerName" type="text"></u-input>
			</u-form-item>
			<u-form-item label="车牌号">
				<u-input placeholder="填写车牌号" v-model="form.licenseNo" type="text"></u-input>
			</u-form-item>
			<u-form-item label="车架号">
				<u-input placeholder="填写车架号" v-model="form.frameNo" type="text"></u-input>
			</u-form-item>
			<u-form-item label="发动机号">
				<u-input placeholder="填写发动机号" v-model="form.engineNo" type="text"></u-input>
			</u-form-item>
			<u-form-item label="品牌">
				<u-input placeholder="填写品牌" v-model="form.vehicleBrand" type="text"></u-input>
			</u-form-item>
			<u-form-item label="车辆类型">
				<u-input type="select" :select-open="selectShow" v-model="form.vehicleType" placeholder="请选择车辆类型"
					@click="selectShow = true"></u-input>
				<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="vehicleTypeConfirm">
				</u-select>
			</u-form-item>
			<u-form-item label="车辆使用性质">
				<u-input type="select" :select-open="selectShow2" v-model="form.natureOfVehicleUse" placeholder="车辆使用性质"
					@click="selectShow2 = true"></u-input>
				<u-select mode="single-column" :list="selectList2" v-model="selectShow2"
					@confirm="natureOfVehicleUseConfirm">
				</u-select>
			</u-form-item>
			<u-form-item label="车辆注册日期">
				<u-input v-model="form.registerTime" type="select" placeholder="选择注册日期" @click="show=true"></u-input>
			</u-form-item>
			<u-form-item label="年检到期日期">
				<u-input v-model="form.expireTime" type="select" placeholder="选择年检到期日期" @click="show1=true"></u-input>
			</u-form-item>
		</u-form>
		<u-picker v-model="show" mode="time" @confirm="confirm"></u-picker>
		<u-picker v-model="show1" mode="time" @confirm="confirm1"></u-picker>
		<u-button @click="carAdd()" type="primary"
			style="border-radius: 50px;font-weight: bold;margin-top: 40rpx;">确认</u-button>

	</view>
</template>
<script>
	import store from '@/store';
	export default {
		data() {
			return {
				rules: {
					ownerName: [{
						required: true,
						message: '请输入姓名',
					}],

				},
				form: {
					engineNo: "", //发动机号		
					expireTime: "", //年检到期时间	
					frameNo: "", //车架号	
					licenseNo: "", //车牌号	
					natureOfVehicleUse: "", //车辆使用性质	
					ownerName: "", //车主姓名
					registerTime: "", //注册日期	
					vehicleType: "", //车辆类型
					vehicleBrand: "", //车辆品牌
				},
				carfrontImg: "",
				show: false, //注册日期
				show1: false, //检验有效期
				selectShow: false, //车辆类型
				selectShow2: false, //性质
				selectList: [{
						value: '9座一下微小型轿客车',
						label: '9座一下微小型轿客车'
					},
					{
						value: '面包车',
						label: '面包车'
					},
					{
						value: '中大型客车',
						label: '中大型客车'
					},
					{
						value: '货车',
						label: '货车'
					},
					{
						value: '摩托车',
						label: '摩托车'
					},
					{
						value: '挂车',
						label: '挂车'
					},
					{
						value: '校车',
						label: '校车'
					},
					{
						value: '其他',
						label: '其他'
					},
				],
				selectList2: [{
						value: '非营运车',
						label: '非营运车'
					},
					{
						value: '营运车',
						label: '营运车'
					},
				],

			}
		},
		onLoad() {

		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			blur(e) {
				console.log(e);
			},
			async carAdd() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
				// let res = await this.$http.post('/ser/carInfo/addCarInfo', this.form);
				// if (res.code == '200') {
				// 	uni.showToast({
				// 		title: '添加成功',
				// 		duration: 2000,
				// 		icon: "success"
				// 	});
				// 	setTimeout(() => {
				// 		return uni.navigateBack();
				// 	}, 2000);
				// }
			},
			vehicleTypeConfirm(e) {
				this.form.vehicleType = e[0].value;
			},
			natureOfVehicleUseConfirm(e) {
				this.form.natureOfVehicleUse = e[0].value;
			},
			//注册日期
			confirm(e) {
				console.log(e);
				this.form.registerTime = e.year + "-" + e.month + "-" + e.day;
			},
			//年检到期
			confirm1(e) {
				console.log(e);
				this.form.expireTime = e.year + "-" + e.month + "-" + e.day;
			},
			async upload() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				if (chooseImageRes) {
					this.carfrontImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/order/identify/drivingPermit',
						filePath: this.carfrontImg,
						name: "image1",
						header: {
							Authorization: store.state.token,
						},
						success: (uploadFileRes) => {
							let data = JSON.parse(uploadFileRes.data).data;
							let rdate = '';
							if (!!data.carInfo.registerDate) {
								rdate = data.carInfo.registerDate.substr(0,
										4) +
									'-' + data.carInfo
									.registerDate.substr(4, 2) + '-' + data
									.carInfo
									.registerDate
									.substr(6,
										2)
							}
							this.form.engineNo = data.carInfo.engine; //发动机号
							this.form.ownerName = data.carInfo.carOwner; //车主姓名
							this.form.frameNo = data.carInfo.vin; //车架号
							this.form.licenseNo = data.carInfo.plateNo; //车牌号
							this.form.registerTime = rdate; //发动机号
							this.getcarBrand(this.form.frameNo)

						}

					})
				}
			},
			async getcarBrand(vin) {
				let res = await this.$http.get('/order/carModel/vinSearch?frameNo=' + vin);
				this.form.vehicleBrand = res.data[0].series;
			}
		}
	}
</script>

<style>
	.headers {
		width: 100%;
		height: auto;
		text-align: right;
	}

	page {
		padding: 36rpx;
		box-sizing: border-box;
	}

	.shanchu {
		width: 100%;
		text-align: center;
		color: #999;
		cursor: pointer;
	}
</style>