BD-LDBD-UNI/pages/maintenance/maintainOrder/deliveryOfVehicle/index.vue

<template>
	<view class="deliveryOfVehicle">
		<view class="contentView">
			<view class="row">
				<view class="title">
					接车人员
				</view>
				<view class="content">
					{{orderData.getName}}
				</view>
			</view>
			<view class="row">
				<view class="title">
					联系电话
				</view>
				<view class="content">
					{{orderData.getPhone}}
				</view>
			</view>
		</view>
		<view class="videoBody">
			<view class="title">
				全车视频
			</view>
			<image @click="chooseVideo" v-if="videoFilePath==''" :src="require('../../../../static/addVideo.png')"
				alt="">
				<view v-else class="videos">
					<image @click="delvideo()" class="uploadDelete"
						:src="require('../../../../static/uploadDelete.png')" alt="">
						<video class="uploadImg" :src="baseImagePath+videoFilePath"></video>
				</view>
		</view>
		<view class="upuploadImage">
			<view class="imgView" v-for="(item, index) in imgList" :key="index">
				<image @click="upload(index)" v-if="item.url==''" :src="item.imgBg" alt="">
					<view v-else class="imgs">
						<image @click="del(index)" class="uploadDelete"
							:src="require('../../../../static/uploadDelete.png')" alt="">
							<image class="uploadImg" :src="baseImagePath+item.url" alt="">
					</view>
					<view class="unit">
						<span>*</span>{{item.title}}
					</view>
			</view>
		</view>
		<view class="otherImg">
			<view class="imgView" v-for="(item, index) in otherImg" :key="index">
				<image @click="uploadOther(index)" v-if="item.url==''" :src="require('../../../../static/other.png')"
					alt="">
					<view v-else class="imgs">
						<image @click="delOther(index)" class="uploadDelete"
							:src="require('../../../../static/uploadDelete.png')" alt="">
							<image class="uploadImg" :src="baseImagePath+item.url" alt="">
					</view>
					<view class="unit">
						{{item.title}}
					</view>
			</view>
		</view>
		<view style="height: 218rpx;">

		</view>
		<view class="buttom">
			<view class="buttomBtn" @click="delivery">
				确认提车
			</view>
		</view>
	</view>
</template>

<script>
	import {
		repairGetCar
	} from "@/api/maintain.js"
	export default {
		components: {},
		data() {
			return {
				baseImagePath: this.baseImagePath,
				otherImg: [{
					url: "",
					title: "其他1"
				}],
				imgList: [{
						title: "左前方",
						imgBg: require("../../../../static/zuoqianfang.png"),
						url: "",
					},
					{
						title: "左后方",
						imgBg: require("../../../../static/zuohoufang.png"),
						url: "",
					},
					{
						title: "右前方",
						imgBg: require("../../../../static/youqian.png"),
						url: "",
					},
					{
						title: "右后方",
						imgBg: require("../../../../static/youhou.png"),
						url: "",
					},
					{
						title: "里程表",
						imgBg: require("../../../../static/lichengbiao.png"),
						url: "",
					},
					{
						title: "交强险保单",
						imgBg: require("../../../../static/jiaoqiangxian.png"),
						url: "",
					},
					{
						title: "行驶证",
						imgBg: require("../../../../static/xingshizheng.png"),
						url: "",
					},
				],
				videoFilePath: "",
				orderData: {},
				carVideo: "",
			}
		},
		onLoad(options) {
			this.orderData = JSON.parse(decodeURIComponent(options.data));
		},
		methods: {
			delivery() {
				if (this.imgList[0].url == "") {
					uni.showModal({
						title: '提示',
						showCancel:false,
						content: '请上传车辆左前方图片',
						success() {},
						complete() {
						}
					});
					return;
				}else if(this.imgList[1].url == ""){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content: '请上传车辆左后方图片',
						success() {},
						complete() {
						}
					});
					return;
				}else if(this.imgList[2].url == ""){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content: '请上传车辆右前方图片',
						success() {},
						complete() {
						}
					});
					return;
				}else if(this.imgList[3].url == ""){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content: '请上传车辆右后方图片',
						success() {},
						complete() {
						}
					});
					return;
				}else if(this.imgList[4].url == ""){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content: '请上传车辆里程表图片',
						success() {},
						complete() {
						}
					});
					return;
				}else if(this.imgList[5].url == ""){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content: '请上传交强险保单图片',
						success() {},
						complete() {
						}
					});
					return;
				}else if(this.imgList[6].url == ""){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content: '请上传车辆行驶证图片',
						success() {},
						complete() {
						}
					});
					return;
				}
				for (let index in this.otherImg) {
					if (this.carVideo == "") {
						this.carVideo = this.otherImg[index].url
					} else {
						this.carVideo = this.carVideo + "," + this.otherImg[index].url
					}
				}
				let data = {
					orderId: this.orderData.id,
					leftAnterior: this.imgList[0].url,
					leftRear: this.imgList[1].url,
					rightAnterior: this.imgList[2].url,
					rightRear: this.imgList[3].url,
					odometer: this.imgList[4].url,
					guaranteeSlip: this.imgList[5].url,
					drivingLicense: this.imgList[6].url,
					carVideo: this.carVideo,
					others: this.videoFilePath
				}
				repairGetCar(data).then((res) => {
					if (res.code == "00000") {
						uni.navigateBack({
							delta: 1
						})
						uni.$emit('deliveryOver', {
							data: "提车成功"
						})
					}
				})
			},
			uploadOther(index) {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					loop: true,
					success: res => {
						console.log(res);
						var tempFilePaths = res.tempFilePaths;
						var tempFiles = res.tempFiles;
						console.log(tempFilePaths);
						console.log(tempFilePaths[0]);
						uni.uploadFile({
							url: 'https://api.biaodianfuhao.net/api/common/sysFileInfo/upload',
							fileType: 'image',
							filePath: tempFilePaths[0],
							file: tempFiles[0],
							name: 'file',
							success: uploadFileRes => {
								console.log('上传图片', JSON.parse(uploadFileRes.data));
								this.otherImg[index].url = JSON.parse(uploadFileRes.data).data;
								if (this.otherImg.length < 4) {
									this.otherImg.push({
										url: "",
										title: "其他" + (parseInt(index) + 2)
									})
								}
							},
							fail(err) {
								console.log(err);
							}
						});
					}
				});
			},
			delOther(index) {
				this.otherImg.splice(index, 1);
				this.otherImg.forEach((res, index) => {
					this.otherImg[index].title = "其他" + (index + 1)
				})
				if (this.otherImg.length < 4) {
					this.otherImg.push({
						url: "",
						title: "其他" + (this.otherImg.length + 1)
					})
				}
			},
			upload(index) {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					loop: true,
					success: res => {
						console.log(res);
						var tempFilePaths = res.tempFilePaths;
						var tempFiles = res.tempFiles;
						console.log(tempFilePaths);
						console.log(tempFilePaths[0]);
						uni.uploadFile({
							url: 'https://api.biaodianfuhao.net/api/common/sysFileInfo/upload',
							fileType: 'image',
							filePath: tempFilePaths[0],
							file: tempFiles[0],
							name: 'file',
							success: uploadFileRes => {
								console.log('上传图片', JSON.parse(uploadFileRes.data));
								this.imgList[index].url = JSON.parse(uploadFileRes.data).data;
							},
							fail(err) {
								console.log(err);
							}
						});
					}
				});
			},
			del(index) {
				this.imgList[index].url = "";
			},
			chooseVideo() {
				// 上传视频
				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					camera: 'back',
					sourceType: ['album', 'camera'],
					success: (responent) => {

						let videoFile = responent.tempFile;
						uni.uploadFile({
							url: 'https://api.biaodianfuhao.net/api/common/sysFileInfo/upload',
							fileType: 'video',
							filePath: responent.tempFilePath,
							file: videoFile,
							name: 'file',
							success: uploadFileRes => {
								console.log('上传图片', JSON.parse(uploadFileRes.data));
								this.videoFilePath = JSON.parse(uploadFileRes.data).data;
							},
							fail(err) {
								console.log(err);
							}
						});
						// this.src = responent.tempFilePath;  //头条
					}
				})
			},
			delvideo() {
				this.videoFilePath = "";
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.buttom {
		width: 100%;
		height: 170rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;

		.buttomBtn {
			width: 690rpx;
			height: 90rpx;
			background: linear-gradient(0deg, #008EFF 0%, #0036FF 100%);
			border-radius: 45rpx;
			margin: 30rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
		}
	}

	.otherImg {
		width: 710rpx;
		height: 254rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx;
		display: flex;
		align-items: center;
		overflow-x: auto;

		.imgView {
			padding-left: 25rpx;

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

			.imgs {
				position: relative;

				.uploadImg {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}

				.uploadDelete {
					width: 26rpx;
					height: 26rpx;
					border-radius: 0 8px 0 0;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 9;
				}


			}

			.unit {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 24rpx;
				text-align: center;
			}
		}
	}

	.upuploadImage {
		width: 710rpx;
		height: 490rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.imgView {
			padding-left: 25rpx;

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

			.imgs {
				position: relative;

				.uploadImg {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}

				.uploadDelete {
					width: 26rpx;
					height: 26rpx;
					border-radius: 0 8px 0 0;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 9;
				}


			}

			.unit {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 24rpx;
				text-align: center;

				span {
					color: #FF5400;
				}
			}
		}

	}

	.contentView {
		width: 710rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx;

		.row {
			height: 100rpx;
			display: flex;
			align-items: center;
			margin: 0 30rpx 0 30rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 55rpx;
			}

			.content {
				padding-left: 74rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 55rpx;
			}
		}
	}

	.videoBody {
		margin: 20rpx;
		width: 710rpx;
		height: 196rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;

		.title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 31rpx;
			padding: 30rpx 0 0 28rpx;
		}

		image {
			width: 150rpx;
			height: 150rpx;
			margin: 23rpx 25rpx 23rpx 0;
		}

		.videos {
			position: relative;

			.uploadDelete {
				width: 26rpx;
				height: 26rpx;
				border-radius: 0 8px 0 0;
				position: absolute;
				top: -18rpx;
				right: -6rpx;
				z-index: 9;
			}

			.uploadImg {
				width: 150rpx;
				height: 150rpx;
				background: #FFFFFF;
				border-radius: 8px;
				margin-right: 17rpx;
				margin-bottom: 21rpx;
			}
		}
	}
</style>