wangluohuoyun-app/pages/mine/manageVehicles/addVehicle.vue

<!-- 管理车辆 -->
<template>
	<view class="content">
		<view class="flex s-row container">
			<view class="flex row">
				<view class="left left-text">车牌号</view>
				<view class="right flex">
					<input class="car-uumber" v-model='dataDetails.carNumber' @click.stop="handleShowKeyboard(index)"
						:disabled="true" placeholder="输入车牌号" name="input"></input>

				</view>
			</view>
			<view class="flex row">
				<view class="left-text">车牌颜色</view>
				<view class="color" @click="selectNoColor">{{dataDetails.carNumberColour}}</view>
				<view>></view>
				<u-picker :show="carColor" :columns="colorColumns" :closeOnClickOverlay='true' @close='colorClose'
					@cancel='colorClose' @confirm='confirmColor' @change="changeCarModel"></u-picker>
			</view>
			<view class="flex row">
				<view class="left-text">车型</view>
				<view class="color" @click="selectCarModel">{{dataDetails.carType}}</view>
				<view>></view>
				<u-picker :show="carModel" :columns="carModelColumns" :closeOnClickOverlay='true' @close='carModelClose'
					@cancel='carModelClose' @confirm='confirmCarModel'  @change="changeCarModel"></u-picker>
			</view>
			<view class="flex row">
				<view class="left-text">车辆所属车主</view>
				<u--input placeholder="输入车主姓名" inputAlign='left' border="none" v-model="dataDetails.owner">
				</u--input>
			</view>
			<view class="flex row">
				<view class="left-text">总质量（千克）</view>
				<u--input placeholder="输入总质量" inputAlign='left' border="none" v-model="dataDetails.carTotalWeight">
				</u--input>
			</view>
			<view class="flex row">
				<view class="left-text">核定载质量（千克）</view>
				<u--input placeholder="输入核定载质量" inputAlign='left' border="none" v-model="dataDetails.carApprovedWeight">
				</u--input>
			</view>
			<view class="flex row noborder">
				<view class="left-text">外廓尺寸</view>
			</view>
			<view class="flex row noborder input-ckg">
				<view class="input-positon">
					<u--input class="input" placeholder="长" inputAlign='left' border="none"
						v-model="dataDetails.carLong">
					</u--input>
					<view class="position-right">
						mm
					</view>
				</view>
				<view class="star">*</view>
				<view class="input-positon">
					<u--input placeholder="宽" inputAlign='left' border="none" v-model="dataDetails.carWidth">
					</u--input>
					<view class="position-right">
						mm
					</view>
				</view>
				<view class="star">*</view>
				<view class="input-positon">
					<u--input placeholder="高" inputAlign='left' border="none" v-model="dataDetails.carHeight">
					</u--input>
					<view class="position-right">
						mm
					</view>
				</view>
			</view>
			
			<view class="flex row noborder s-row">
				<view class="left-text" style="width: 100%;">人车合影（车头车牌号可见）</view>
				<u-upload class="uview-upload" :fileList="fileList1" @afterRead="afterRead($event)" @delete="deletePic"
					name="1" multiple :maxCount="1"></u-upload>
			</view>
		</view>
		<view class="submit-btn" @click="submit">提交</view>
		<master-keyboard ref="keyboard" keyboardtype="car" :show="keyShow" :randomNumber="true" :newCar="false"
			:defaultValue="carNumber" @keyboardClick="handleClick"></master-keyboard>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import keyboard from "@/components/master-keyboard/master-keyboard.vue";
	var _this;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				index: '',
				keyShow: false,
				carNumber: '',
				dataDetails: {
					driverId:'',
					carNumber: '',
					carNumberColour: '黄色',
					carType: '挂车 高栏',
					carTotalWeight: '',
					carApprovedWeight: '',
					carLong: '',
					carWidth: '',
					carHeight: '',
					addressUrl:''

				},
				carModelColumns: [
					['挂车', '非挂车'],
					['高栏', '集装箱', '自卸车']
				],
				carModelColumnData: [
					['高栏', '集装箱', '自卸车'],
					['重型仓栏']
				],
				colorColumns: [
					['黄色', '蓝色']
				],
				carColor: false,
				carModel: false,
				fileList1: []
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo','firstAuthentication']),
		},
		onLoad(options) {
			_this = this;
			this.dataDetails.driverId = this.userInfo.driverId
		},
		methods: {
			// 车型切换
			changeCarModel(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.carTypePicker
				} = e
				if (columnIndex === 0) {
					// 模拟网络请求
					picker.setColumnValues(1, this.carModelColumnData[index])
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				uploadImage('image',url, 'appData/',
					result => {
						// 上传成功回调函数
						console.log('图片地址', result)
						if(!this.dataDetails.addressUrl){
								this.dataDetails.addressUrl = result
						}else{
							this.dataDetails.addressUrl = this.dataDetails.addressUrl+','+ result
						}
						

					}
				)
			},
			//车牌号弹出键盘
			handleShowKeyboard(index) {
				if (this.dataDetails.carNumber == '') {
					this.carNumber = ''
				} else {
					this.carNumber = this.dataDetails.carNumber
				}
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(false) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(false)
				}
				this.index = index
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(true) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(true)
				}
			},
			//车牌号弹出键盘
			handleClick(e) {
				this.carNumber = e.value
				this.dataDetails.carNumber = e.value //键盘输入值
			},
			confirmColor(val) {
				this.dataDetails.carNumberColour = val.value[0]
				this.carColor = false
			},
			colorClose() {
				this.carColor = false
			},
			selectNoColor() {
				this.carColor = true
			},
			confirmCarModel(val) {
				this.dataDetails.carType = val.value[0] + ' ' + val.value[1]
				this.carModel = false
			},
			carModelClose() {
				this.carModel = false
			},
			selectCarModel() {
				this.carModel = true
			},
			selectNoColor() {
				this.carColor = true
			},
			unloadGroupPhoto() {
				uni.chooseImage({
					count: 1,
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uploadImage('image',res.tempFilePaths[0], 'appData/',
							result => {
								// 上传成功
								console.log('图片地址', result)
							}
						)
					}
				});
			},
			validate() {
				// true 为校验不通过
				if (uni.$u.test.isEmpty(this.dataDetails.carNumber)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "车牌号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.carTotalWeight)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "总质量不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.carApprovedWeight)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "核定载质量不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.carLong)&&uni.$u.test.isEmpty(this.dataDetails.caWidth)&&uni.$u.test.isEmpty(this.dataDetails.carHeight)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "外廓尺寸不能为空！",
					})
					return true
				}
				// if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseBackPage)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "行驶证副页不能为空！",
				// 	})
				// 	return true
				// }
			
				return false
			},
			submit() {
				// 校验
				if (this.validate()) return
				this.$request.baseRequest('post', '/driverCarInfo/api/addInfo', this.dataDetails).then(res => {
						if (res.code == '200') {
							let params = {
								type: 'success',
								message: "提交成功",
							}
							this.$refs.uToast.show({
								...params
							})
							uni.$u.route('/pages/mine/manageVehicles/index');

						} else {
							uni.$u.toast(res.message);
						}

					})
					.catch(res => {
						uni.$u.toast(res.message);
					});

			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		margin: 20rpx;
		background: white;
		padding: 0 20rpx;
		border-radius: 20rpx;

		.left-text {
			// background: red;
			width: 290rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}

		.row {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 28rpx;
			margin-top: 26rpx;

			.ch-style {}
		}

		.row-ch {
			padding-right: 250rpx;
			box-sizing: border-box;
		}
	}

	.input-ckg {
		height: 86rpx;
		margin-top: 0 !important;
		padding-bottom: 0 !important;

		.u-input {
			height: 100%;
			background: #F7F8FA;
			padding-left: 10rpx !important;
			padding-right: 85rpx !important;
		}

		.star {
			display: flex;
			align-items: center;
			margin: 0 10rpx;
		}

		.input-positon {
			position: relative;
		}

		.position-right {
			position: absolute;
			right: 20rpx;
			top: 0;
			width: 60rpx;
			height: 50rpx;
			bottom: 0;
			margin: auto;

		}

	}

	.picture {
		margin-top: 20rpx;
		background: #F5F6FA;
		width: 212rpx;
		height: 212rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #6A7282;
	}

	.submit-btn {
		position: fixed;
		bottom: 40rpx;
		width: 90%;
		background: #2772FB;
		color: white;
		text-align: center;
		margin-left: 5%;
		padding: 30rpx 0;
		border-radius: 50rpx;
	}
</style>