muck_truck_app/pages/addCar/index.vue

<template>
	<view class="container">
		<uni-navbar :title="form.id?'修改车辆':'新增车辆'"></uni-navbar>
		<view class="box">
			<view class="reject-box commonRedBj commonMt" v-if="form.auditType===-1">
				<view class="reject-box-top">
					<image src="../../static/images/car/yunshu.png" mode="widthFix"></image>
					<text class="listTitle">审批状态</text>
				</view>
				<view class="reject-box-bottom">
					<view class="state-icon">
						<view class="flexAlignCenter">
							<view class="redCircle mCircle">
							</view>
							<text class="itemText">审批状态:</text>
						</view>
						<view class="flexAlignCenter">
							<u-icon color="#FB5637" name="close-circle-fill" style="margin-right: 12rpx;"></u-icon>
							<text class="redText">驳回</text>
						</view>
					</view>
					<view class="state-icon">
						<view class="flexAlignCenter">
							<view class="redCircle mCircle">
							</view>
							<text class="itemText">驳回原因:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="redText">{{form.auditContent}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="registerBox commonBj" :class="form.auditType === -1?'':'commonMt'">
				<view class="reject-box-top" v-if="form.id">
					<view class="top-left">
						<image src="../../static/images/car/yunshu.png" mode="widthFix"></image>
						<text class="listTitle">车辆信息</text>
					</view>
				</view>
				<u--form :model="form" ref="uForm" :rules="rules" labelWidth="0" class='formStyle addHeight'>
					<u-form-item prop="companyName">
						<view class="redCircle"></view>
						<text class="itemText">企业名称</text>
						<u-input disabled disabledColor="rgba(73,91,147,0.2)" class="inputStyle"
							suffixIconStyle="color: #495B93" v-model="form.companyName" placeholder="" />
					</u-form-item>
					<u-form-item prop="carNumber">
						<view class="redCircle"></view>
						<text class="itemText">车牌号码</text>
						<u-input class="inputStyle" maxlength="10" v-model="form.carNumber" placeholder="请输入车牌号码" />
					</u-form-item>
					<u-form-item prop="carType">
						<view class="redCircle"></view>
						<text class="itemText">车&emsp;&emsp;型</text>
						<u-input class="inputStyle" maxlength="20" v-model="form.carType" placeholder="请输入品牌" />
					</u-form-item>
					<u-form-item prop="carSeries">
						<view class="redCircle"></view>
						<text class="itemText">车&emsp;&emsp;系</text>
						<u-input class="inputStyle" maxlength="20" v-model="form.carSeries" placeholder="请输入具体型号" />
					</u-form-item>
					<u-form-item prop="carCarry">
						<view class="redCircle"></view>
						<text class="itemText">载重标准</text>
						<u-input class="inputStyle" maxlength="10" v-model="form.carCarry" placeholder="请输入载重量" />
					</u-form-item>
					<u-form-item prop="drivingLicense">
						<view class="uploadBox">
							<view class="textBox ">
								<view class="redCircle"></view>
								<text class="itemText">车辆行驶证件</text>
							</view>
							<xfx-image-upload uploadTitle="车辆行驶证" uploadType="0" :max="1" :chooseNum="1"
								v-model="drivingLicense" @uploadSuccess="UploadSuccessTruckCertificate"
								@uploadFail="errorUploadruckCertificate" @imgDelete="delTruckCertificate"
								mediaType="image" :action="urlConfig">
							</xfx-image-upload>
						</view>
					</u-form-item>
					<u-form-item class="block-box1" prop="truckState">
						<view class="textBox">
							<view class="redCircle"></view>
							<text class="itemText">车辆状态（<text class="redText">拍摄车辆外观图片+视频</text>）</text>
						</view>
						<view class="textBox mt29 flex-start">
							<xfx-image-upload uploadType="1" :max="2" :chooseNum="2" v-model="imgList"
								@uploadSuccess="UploadSuccessStateImg" @uploadFail="errorTruckImg"
								@imgDelete="delTruckImg" mediaType="image" :action="urlConfig">
							</xfx-image-upload>
							<xfx-image-upload class="ml29" uploadType="2" :max="1" :chooseNum="1" v-model="carVideo"
								@uploadSuccess="UploadSuccessVideo" @uploadFail="errorTruckVideo" @imgDelete="delVideo"
								mediaType="video" :action="urlConfig">
							</xfx-image-upload>
						</view>

					</u-form-item>
				</u--form>
			</view>
			<u-button @click="submit" class="custom-style mt27 commonMb" shape="circle"
				color="linear-gradient(to top, #F59A02, #FFD334)">{{form.id?'确认修改车辆信息':'确认新增'}}</u-button>
		</view>
	</view>
</template>

<script>
	import {
		addCar,
		carDetail,
		editCar
	} from "@/api/company/car.js"
	import {
		getInfo
	} from '../../api/login.js'
	import config from '@/config.js'
	import {
		uploadAvatar
	} from '../../api/company/user.js'
	export default {
		data() {
			return {
				drivingLicense: [],
				carVideo: [],
				imgList: [],
				// 图片上传地址
				urlConfig: '',
				// 行驶证数据
				form: {
					companyName: null,
					id: null,
					carNumber: null,
					carType: null,
					carSeries: null,
					carCarry: null,
					drivingLicense: [],
					truckState: {
						imgList: [],
						carVideo: [],
					},
					imgList: [],
					carVideo: [],
					companyId: null,
				},
				rules: {
					companyName: [{
						required: true,
						whitespace:true,
						message: '请输入企业名称',
						trigger: ['blur', 'change']
					}, ],
					carNumber: [{
						required: true,
						whitespace:true,
						message: '请输入车牌号码',
						trigger: ['blur', 'change']
					}, ],
					carType: [{
						required: true,
						whitespace:true,
						message: '请输入车型',
						trigger: ['blur', 'change']
					}, ],
					carSeries: [{
						required: true,
						whitespace:true,
						message: '请输入车系',
						trigger: ['blur', 'change']
					}, ],
					carCarry: [{
						required: true,
						whitespace:true,
						message: '请输入载重标准',
						trigger: ['blur', 'change']
					}, ],
					drivingLicense: [{
							required: true,
							message: '请上传车辆行驶证',
							// trigger: ['blur', 'change'],
						},
						{
							validator: (rule, value, callback) => {
								return value !== []
							},
							message: '请上传车辆行驶证'
						},
					],
					truckState: [{
							required: true,
							// trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return value.carVideo.length !== 0 && value.imgList.length === 2
							},
							message: '请上传两张车辆状态照片与一段视频'
						},
					],
				},
				// 点击修改传回来的id
				id: '',
				srcVideo: '',
			}
		},
		methods: {
			select() {
				uni.requireNativePlugin('TX-VideoTool').getVideoThumbnailImage({
					"videoPath": this.srcVideo,
					"saveImagePath": plus.io.convertLocalFileSystemURL(
						"_doc/TXVideoTool/"),
					"saveImageName": "testLocal" + new Date().getTime() + ".png",
					"second": 0
				}, result => {
					console.log(result, '<---------------我是返回的数据')
					this.carVideo = [{
						cover: result.imagePath,
						url: this.srcVideo
					}]
				});
			},
			// 清空表单方法
			reset() {
				this.form = {
					id: null,
					carNumber: null,
					carType: null,
					carSeries: null,
					carCarry: null,
					drivingLicense: [],
					imgList: [],
					carVideo: [],
					truckState: {
						imgList: [],
						carVideo: [],
					}
				}
				this.drivingLicense = []
				this.imgList = []
				this.carVideo = []
			},
			//行驶证上传成功
			UploadSuccessTruckCertificate(res) {
				/****************
				因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
				  ***************/
				var _res = JSON.parse(res.data);
				console.log(_res);
				if (_res.code == 200) {
					this.form.drivingLicense.push(_res.data);
					this.drivingLicense.push(_res.data.url)
				}
			},
			// 行驶证删除图片行驶证
			delTruckCertificate(del, tempFilePaths) {
				console.log('111',
					del.tempFilePaths);
				this.drivingLicense = []
				this.form.drivingLicense = []
			},
			// 上传失败
			errorUploadruckCertificate(res) {},
			// 车辆状态图片上传成功
			UploadSuccessStateImg(res) {
				var _res = JSON.parse(res.data);
				console.log(_res.data, '_res.data');
				if (_res.code == 200) {
					// let obj = {}
					// obj.name = this.imgListName
					// obj.url = _res.data.url
					this.form.truckState.imgList.push(_res.data);
					this.form.imgList.push(_res.data);
					this.imgList.push(_res.data.url)
				}
			},
			// 车辆状态图片删除
			delTruckImg(del, tempFilePaths) {
				console.log('del', del);
				console.log('tempFilePaths', tempFilePaths);
				let obj = {}
				if (del.tempFilePaths.length !== 0) {
					obj.name = del.tempFilePaths[0].slice(50)
					obj.url = del.tempFilePaths[0]
				}
				this.imgList = del.tempFilePaths;
				this.form.imgList = this.form.imgList.filter(item => {
					return item.url === obj.url
				})
				this.form.truckState.imgList = this.form.truckState.imgList.filter(item => {
					return item.url === obj.url
				})
			},
			// 车辆图片上传失败的回调
			errorTruckImg(res) {},
			// 车辆视频上传成功Vedio
			UploadSuccessVideo(res, cover) {
				console.log(res);
				var _res = JSON.parse(res.data);
				console.log(_res, '_res');
				if (_res.code == 200) {
					this.form.truckState.carVideo.push(_res.data);
					this.form.carVideo.push(_res.data);
					this.srcVideo = _res.data.url;
					this.carVideo = [{
						url: this.srcVideo,
						cover: cover
					}]
				}
			},
			// 车辆视频删除回调
			delVideo(del, tempFilePaths) {
				this.carVideo = []
				this.form.carVideo = []
				this.form.truckState.carVideo = []
			},
			// 视频上传失败的回调
			errorTruckVideo(res) {},
			// 提交
			submit() {
				this.$refs.uForm.validate().then(async res => {
					this.form.auditType = 0
					if (this.form.id) {
						const res = await editCar(this.form)
						console.log(res);
						this.$tab.navigateBack()
					} else {
						let result = await addCar(this.form)
						this.$tab.navigateBack()
					}
				})
			},
			// 获取详情信息
			async getDetail(id) {
				const res = await carDetail(id)
				this.form = res.data
				this.drivingLicense.push(res.data.drivingLicense[0].url)
				this.form.truckState = {}
				this.form.truckState.imgList = []
				this.form.truckState.carVideo = []
				console.log(this.form, '<---------------我是获取到的数据');
				res.data.imgList.forEach(item => {
					this.imgList.push(item.url)
					this.form.truckState.imgList.push(item)
				})
				res.data.carVideo.forEach(item => {
					this.form.truckState.carVideo.push(item)
				})
				this.srcVideo = res.data.carVideo[0].url
				this.carVideo = [{
					url: this.srcVideo
				}]
				this.select()
			}
		},
		onLoad: function(option) {
			this.form.companyName = this.$store.state.user.companyName
			this.form.companyId = this.$store.state.user.companyId;
			if (option.id) {
				this.getDetail(option.id)
			}
			this.urlConfig = config.baseUrl + '/file/upload'
		}
	}
</script>

<style lang="scss" scoped>
	.uploadBox {
		/deep/.xfx-image-upload-list {
			height: 300rpx !important;

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

	// 车辆状态上传图片
	.flex-start {
		justify-content: start;

		/deep/.xfx-image-upload-list {
			// border: 2rpx solid #495B93;
			// border-radius: 15rpx;
			// // width: 160rpx;
			// height: 160rpx;

			.xfx-image-upload-Item {
				width: 180rpx;
				height: 180rpx;
				margin-right: 0;
				margin-bottom: 0;
				border: 2rpx solid #495B93;
				border-radius: 15rpx;
				// background-color: rgba(255, 255, 255, 0.1);

				&:not(:first-child) {
					margin-left: 20rpx;
				}

				&:nth-child(1) {
					background-color: rgba(255, 255, 255, 0.1);
				}
			}

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

				.text-upload {
					margin-top: 0;
				}
			}
		}
	}

	// 上传组件样式
	.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: 250rpx;

			.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: 84rpx;
			}
		}
	}

	.formStyle {
		padding: 41rpx 39rpx;
	}

	.registerBox {
		.reject-box-top {
			width: 100%;
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0px 0px;
			display: flex;
			justify-content: space-between;

			uni-image {
				width: 50rpx;
				margin-left: 32rpx;
				vertical-align: middle;
			}

			// .state-text {
			// 	font-size: 28rpx;
			// 	font-weight: bold;
			// 	color: #FFFFFF;
			// 	margin-left: 23rpx;
			// 	line-height: 69rpx;
			// }
		}

	}

	/deep/ .block-box1 .u-form-item__body__right__content__slot {
		display: block;
	}

	/deep/ .block-box1 .u-form-item__body {
		display: block;

		.u-form-item__body__right {
			// margin-top: 29rpx;

			.u-form-item__body__right__content__slot {
				align-items: start;

				.u-upload {
					display: block;
					flex: 0;
					// margin-right: 8rpx;

					.u-upload__wrap {
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						// width: 400rpx;

						.u-upload__wrap__preview {
							border-radius: 15rpx;
							overflow: visible;
							margin: 0 52rpx 0 0;

							&:nth-child(2) {
								margin-right: 26rpx !important;
							}

							.u-upload__wrap__preview__image {
								// border-radius: 15rpx !important;
								width: 167rpx !important;
								height: 167rpx !important;
								// border: 2rpx solid #495B93;

							}
						}

						.u-upload__button {
							background: rgba(255, 255, 255, 0.1);
							border: 1px solid #495B93;
							border-radius: 15px;
						}
					}
				}
			}
		}
	}

	.mt27 {
		margin-top: 27rpx;
	}

	.ml29 {
		margin-left: 20rpx;
	}

	.reject-box {
		// width: 88%;
		// height: 290rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 28rpx;
	}

	.reject-box-top {
		width: 100%;
		height: 69rpx;
		background: #FB5637;
		border-radius: 26rpx 26rpx 0px 0px;

		uni-image {
			width: 50rpx;
			margin-left: 32rpx;
			vertical-align: middle;
		}

		// .state-text {
		// 	font-size: 28rpx;
		// 	font-weight: bold;
		// 	color: #FFFFFF;
		// 	margin-left: 23rpx;
		// 	line-height: 69rpx;
		// }
	}

	.reject-box-bottom {
		.state-icon {
			display: flex;
			margin: 40rpx;

			&:nth-child(2) {
				margin-bottom: 40rpx !important;
			}

			.state-icon-left {
				display: flex;
				// align-items: center;
			}

			.state-icon-right {
				display: flex;
				// align-items: center;
			}
		}
	}

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

	.mt29 {
		margin-top: 29rpx;
	}

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