muck_truck_app/pages/addUser/index.vue

<template>
	<view class="container">
		<uni-navbar title="新增司机"></uni-navbar>
		<view class="box">
			<u--form :model="form" ref="uForm" :rules="rules" labelWidth="0"
				class="formStyle addHeight commonBj commonMt">
				<u-form-item prop="truckId" @click="clickCar">
					<view class="redCircle"></view>
					<text class="itemText">车辆选择</text>
					<u-input disabled disabledColor="rgba(0,0,0,0)" class="inputStyle" suffixIcon="arrow-right"
						suffixIconStyle="color: #495B93" v-model="form.carValue" placeholder="请选择车辆" />
				</u-form-item>
				<u-form-item prop="driverName">
					<view class="redCircle"></view>
					<text class="itemText">司机姓名</text>
					<u-input class="inputStyle" v-model="form.driverName" maxlength="10" placeholder="请输入司机姓名" />
				</u-form-item>
				<u-form-item prop="cardNum">
					<view class="redCircle"></view>
					<text class="itemText">身份证号</text>
					<u-input class="inputStyle" v-model="form.cardNum" placeholder="请输入身份证号" />
				</u-form-item>
				<u-form-item prop="phone">
					<view class="redCircle"></view>
					<text class="itemText">联系电话</text>
					<u-input class="inputStyle" v-model="form.phone" placeholder="请输入联系电话" />
				</u-form-item>
				<u-form-item prop="driverType" @click="clickType">
					<view class="redCircleNo circleWH"></view>
					<text class="itemText">驾照类型</text>
					<u-input disabled disabledColor="rgba(0,0,0,0)" class="inputStyle" v-model="form.driverType"
						suffixIcon="arrow-right" suffixIconStyle="color: #495B93" placeholder="请选择驾照类型" />
				</u-form-item>
				<u-form-item>
					<view class="uploadBox">
						<view class="textBox">
							<view class="redCircleNo circleWH"></view>
							<text class="itemText">驾驶证件(<text class="redText">确保证件清晰完整 </text>)</text>
						</view>
						<xfx-image-upload uploadTitle="上传驾驶证主页" uploadType="0" :max="1" :chooseNum="1"
							v-model="fileList1" @uploadSuccess="UploadSuccessTruckCertificate"
							@imgDelete="delTruckCertificate" mediaType="image">
						</xfx-image-upload>
						<xfx-image-upload uploadTitle="上传驾驶证副页" uploadType="0" :max="1" :chooseNum="1"
							v-model="fileList2" @uploadSuccess="UploadSuccessTruckCertificate2"
							@imgDelete="delTruckCertificate2" mediaType="image">
						</xfx-image-upload>
						<!-- <u-upload class="uploadImg" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
							name="1" multiple :maxCount="1" width="599rpx" height="270rpx" delIcon="close-circle-fill"
							delColor="#FC5536">
							<view class="plus-icon">
								<view class="imgAdd"></view>
								<text class="mt">上传驾驶证主页</text>
							</view>
						</u-upload>

						<u-upload class="uploadImg" :fileList="fileList2" @afterRead="afterRead" @delete="deletePic"
							name="2" multiple :maxCount="1" width="599rpx" height="270rpx" delIcon="close-circle-fill"
							delColor="#FC5536">
							<view class="plus-icon">
								<view class="imgAdd"></view>
								<text class="mt">上传驾驶证副页</text>
							</view>
						</u-upload> -->
					</view>
				</u-form-item>

			</u--form>
			<!-- <buttonNew  @click="submit" class="add-button commonMb" text="确认新增"></buttonNew> -->
			<u-button @click="submit" shape="circle" color="linear-gradient(to top, #F59A02, #FFD334 )"
				class="custom-style mt27 buttonLang commonMb">确认新增</u-button>
		</view>
		<selectNew :isShow="isShow" :valueData="form.truckId" :oldList="teuckList" @changSelect="changSelect">
		</selectNew>
		<selectNew :isCar="false" :isShow="isShowType" title="驾照类型" placeholder="搜索驾照类型" :valueData="form.typeValue"
			:oldList="driverTypeData" @changSelect="changSelectType"></selectNew>
	</view>
</template>

<script>
	import {
		getDriverType,
		getTeuckList,
		driverAdd
	} from '../../api/company/user.js'
	export default {
		data() {
			return {
				isShow: false,
				isShowType: false,
				form: {
					id: null,
					truckId: null,
					carValue: null,
					driverName: null,
					cardNum: null,
					phone: null,
					driverType: null,
					// companyId: '1023271044427829248',
					companyId: null,
					typeValue: null,
				},
				rules: {
					truckId: [{
						required: true,
						message: '请选择车辆',
						trigger: ['change']
					}, ],
					driverName: [{
						required: true,
						whitespace:true,
						message: '请输入司机姓名',
						trigger: ['blur', 'change']
					}, ],
					cardNum: [{
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					}, {
						// 自定义验证函数
						pattern: /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '身份证号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}],
					phone: [{
						required: true,
						message: '请输入联系电话',
						trigger: ['blur', 'change']
					}, {
						// 自定义验证函数
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}],
					// driverType: [{
					// 	required: true,
					// 	message: '请选择驾照类型',
					// 	trigger: ['change']
					// },
					// ],
				},
				fileList1: [],
				fileList2: [],
				fileListData1: [],
				fileListData2: [],
				teuckList: [{
						name: '吉A.427TH',
						value: '0'
					},
					{
						name: '吉b.423TH',
						value: '1'
					},
					{
						name: '吉d.257TH',
						value: '2'
					},
					{
						name: '吉e.227TH',
						value: '3'
					},
					{
						name: '吉e.228TH',
						value: '4'
					},
					{
						name: '吉e.229TH',
						value: '5'
					},
					{
						name: '吉e.230TH',
						value: '6'
					},
					{
						name: '吉e.231TH',
						value: '7'
					},
					{
						name: '吉e.232TH',
						value: '8'
					}
				],
				driverTypeData: []
			}
		},
		onLoad() {
			this.form.companyId = this.$store.state.user.companyId;
			console.log(this.$store.state.user.companyId, 'this.$store.state.userData.companyId');
			this.getDriverType()
			this.getTeuckList()
		},
		methods: {
			// 删除图片
			delTruckCertificate(del, tempFilePaths) {
				this.fileList1 = [];
				this.fileListData1 = [];
			},
			delTruckCertificate2(del, tempFilePaths) {
				this.fileList2 = [];
				this.fileListData2 = [];
			},
			UploadSuccessTruckCertificate(res) {
				/****************
				因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
				  ***************/
				var _res = JSON.parse(res.data);
				console.log(_res);
				if (_res.code == 200) {
					this.fileListData1.push(_res.data);
					this.fileList1.push(_res.data.url)
				}
			},
			UploadSuccessTruckCertificate2(res) {
				/****************
				因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
				  ***************/
				var _res = JSON.parse(res.data);
				console.log(_res);
				if (_res.code == 200) {
					this.fileListData2.push(_res.data);
					this.fileList2.push(_res.data.url)
				}
			},
			getDriverType() {
				getDriverType().then(res => {
					this.driverTypeData = res.data.map(item => {
						return {
							name: item.dictLabel,
							value: item.dictValue
						}
					})
				})
			},
			getTeuckList() {
				getTeuckList({
					companyId: this.form.companyId
				}).then(res => {
					console.log('res', '我是车辆')
					this.teuckList = res.data.map(item => {
						return {
							name: item.carNumber,
							value: item.id
						}
					})
				})
			},
			clickCar() {
				this.isShow = true
			},
			changSelect(data) {
				this.isShow = false
				if (data && data.value) {
					this.form.truckId = data.value;
					this.form.carValue = data.name;
				}
			},
			clickType() {
				this.isShowType = true
			},
			changSelectType(data) {

				this.isShowType = false
				if (data && data.value) {
					this.form.driverType = data.name;
					this.form.typeValue = data.value;
				}
			},
			// 删除图片
			deletePic(event) {

				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(event, 'event');
				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) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			driverAdd() {
				let imgList = [];
				if (this.fileListData1.length > 0) {
					imgList.push(this.fileListData1[0])
				}
				if (this.fileListData2.length > 0) {
					imgList.push(this.fileListData2[0])
				}
				driverAdd({
					...this.form,
					imgList: imgList
				}).then(res => {
					this.$tab.navigateBack()
				})
			},
			// 提交
			submit() {
				this.$refs.uForm.validate().then(res => {
					console.log(res, '111')
					this.driverAdd();
				}).catch(errors => {
					console.log(errors, '222')
				})
			}
		},

	}
</script>


<style lang="scss" scoped>
	.circleWH {
		width: 12rpx;
		height: 12rpx;
	}

	.formStyle {
		padding: 41rpx 39rpx;
	}

	.uploadImg {
		width: 599rpx !important;
		height: 270rpx !important;
		background: rgba(255, 255, 255, 0.1);
		border: 2rpx solid #495B93;
		border-radius: 15rpx;
		margin-top: 30rpx;

		/deep/ .u-upload__wrap__preview {
			overflow: visible;
		}

		/deep/ .u-upload__deletable {
			width: 30rpx;
			height: 30rpx;
			// background-color: #FC5536;
			background-image: url(../../static/images/user/redClose.png);
			background-color: rgba(0, 0, 0, 0);
			background-size: 100% 100%;
			border-radius: 50%;
			position: absolute;
			top: -20rpx;
			right: -20rpx;

			.u-upload__deletable__icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		/deep/ .u-icon__icon {
			font-size: 0 !important;
		}
	}

	// 上传组件样式
	.uploadBox {
		width: 100%;

		.u-upload__wrap__preview__image {
			width: 598rpx !important;
			height: 250rpx !important;
			border-radius: 13rpx;
		}

		/deep/.xfx-image-upload-list {
			display: block;
			margin-top: 30rpx;
			border: 2rpx solid #495B93;
			border-radius: 15rpx;
			height: 300rpx;

			.xfx-image-upload-Item {
				width: 100%;
				height: 100%;
				margin-right: 0;
				margin-bottom: 0;
				background-color: rgba(255, 255, 255, 0.1);
			}

			.xfx-image-upload-Item-add {
				padding-top: 100rpx;
			}
		}
	}

	.mt27 {
		margin-top: 27rpx;
	}

	.textBox {
		display: flex;
		align-items: center;
	}

	.plus-icon {
		width: 599rpx;
		height: 270rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.mt {
		margin-top: 31rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #495B93;
	}

	.imgAdd {
		width: 51rpx;
		height: 51rpx;
		background-image: url(../../static/images/user/add.png);
		background-size: 100% 100%;
	}


	/deep/ uni-image {
		border-radius: 15rpx;
	}
</style>