muck_truck_app/pages/driverLookTransportDetail/index.vue

<template>
	<view class="container">
		<uni-navbar title="运输记录"></uni-navbar>
		<view class="box commonMt" style="overflow: hidden;">
			<view class="topMap">
				<mapPreview :pathDataId='pathData' :startPoint='form.startPoint' :endPoint='form.endPoint'
					v-show="isMap" :mtRoutePointList='form.mtRoutePointList'></mapPreview>
			</view>
			<view class="box3">
				<view class="commonMb commonMt">
					<view class="addLineSuccess-big-box commonBj">
						<view class="addLineSuccess-big-box-top">
							<image style="width: 45rpx;height: 45rpx; margin-left: 30rpx;"
								src="../../static/images/transport/dingwei.png" mode="widthFix">
							</image>
							<text class="listTitle">记录信息</text>
						</view>
						<view class="addLineSuccess-big-box-bottom">
							<view class="addLineSuccess-big-box-bottom-item">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">运&nbsp;&nbsp;&nbsp;输&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;称:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.transportName}}</text>
								</view>
							</view>
							<!-- <view class="map">
							<mapImg :pathData='pathData' :startPoint='form.startPoint' :endPoint='form.endPoint'
								:mtRoutePointList='form.mtRoutePointList'>
							</mapImg>
						</view> -->
							<view class="addLineSuccess-big-box-bottom-item ">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">运输开始时间:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.startTime}}</text>
								</view>
							</view>
							<!-- <view class="border-style"></view> -->
							<view class="addLineSuccess-big-box-bottom-item ">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">运输结束时间:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.endTime}}</text>
								</view>
							</view>
							<!-- <view class="border-style"></view> -->
							<view class="addLineSuccess-big-box-bottom-item">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text
										class="itemText">车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.carNumber}}</text>
								</view>
							</view>
							<view class="addLineSuccess-big-box-bottom-item">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">车&nbsp;&nbsp;&nbsp;辆&nbsp;&nbsp;司&nbsp;&nbsp;&nbsp;机:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.driverName}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 车辆状态 -->
					<view class="addLineSuccess-big-box mt33 commonBj">
						<view class="addLineSuccess-big-box-top">
							<image style="width: 45rpx;height: 45rpx; margin-left: 30rpx;"
								src="../../static/images/car/yunshu.png" mode="widthFix">
							</image>
							<text class="listTitle">车辆状态</text>
						</view>
						<view class="addLineSuccess-big-box-bottom">
							<view class="addLineSuccess-big-box-bottom-item block">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">开始车辆状态:</text>
								</view>
								<view class="space-between state-icon-right mt30">
									<view class="state-box-size border radius15">
										<!-- <video controls object-fit="fill" @play="playvideo" @fullscreenchange="fullscreenchange"
									class="state-box-size border radius15" id="truckVideo" ref="truckVideo"
									src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/360e4b20-4f4b-11eb-8a36-ebb87efcf8c0.mp4"></video> -->
										<xfx-image-upload :remove="false" :add="false" v-model="startStateVideo"
											mediaType="video"></xfx-image-upload>
									</view>
									<u--image class=" border radius15" radius="15rpx" :key="index"
										v-for="(item,index) in startImgList" :showLoading="true" :src="item"
										width="180rpx" height="180rpx" @tap="previewStartImg(index)">
									</u--image>
								</view>
							</view>
						</view>
					</view>
					<view class="addLineSuccess-big-box mt33 commonBj">
						<view class="addLineSuccess-big-box-top">
							<image style="width: 45rpx;height: 45rpx; margin-left: 30rpx;"
								src="../../static/images/car/yunshu.png" mode="widthFix">
							</image>
							<text class="listTitle">上传车辆结束运输状态</text>
						</view>
						<view class="addLineSuccess-big-box-bottom">
							<view class="topBox">
								<text style="margin-left: 41rpx;">异常情况</text>
								<view style="margin-right: 41rpx;" class="rightIcon">

								</view>
							</view>
							<view class="bottomBox">
								车辆因长时间停滞未结束最终运输，定位系
								统已自动执行结束运输
							</view>
							<view class="textBox" style="margin-bottom: 10rpx;">
								<u--form :model="form2" ref="uForm" :rules="rules" labelWidth="0">
									<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>
						</view>
					</view>
					<u-button @click="confirm" class="custom-style mt33 commonMb" shape="circle"
						color="linear-gradient(to top, #FF2D04, #FFA53E)">关闭运输</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		recordDetail
	} from "@/api/company/record.js"
	import {
		pointData
	} from "@/api/company/path.js"
	import {
		errorState
	} from "@/api/city/record.js"
	import {
		editProcess
	} from "../../api/company/transport.js"
	import config from '@/config.js'
	export default {
		data() {
			return {
				// 结束状态的视频
				endStateVideo: [],
				// 开始状态的视频
				startStateVideo: [],
				form: {
					startPoint: '',
					endPoint: '',
					mtRoutePointList: []
				},
				isMap: true,
				endImgList: [],
				startImgList: [],
				startSrcVideo: '',
				endSrcVideo: '',
				pathData: '',
				isInterruptContentObj: {},
				isInterruptContent: null,
				carVideo: [],
				imgList: [],
				imgListData: [],
				carVideoData: [],
				// 图片上传地址
				urlConfig: config.baseUrl + '/file/upload',
				form2: {
					truckState: null,
					id: null,
				},
				rules: {
					truckState: [{
						validator: (rule, value, callback) => {
							return this.carVideo.length === 1 && this.imgList.length === 2
						},
						message: '请上传二张照片与一段视频'
					}, ],
				},

			}
		},
		methods: {
			// 车辆状态图片上传成功
			UploadSuccessStateImg(res) {
				var _res = JSON.parse(res.data);
				if (_res.code == 200) {
					// let obj = {}
					// obj.name = this.imgListName
					// obj.url = _res.data.url
					this.imgListData.push(_res.data);
					this.imgList.push(_res.data.url)
				}
			},
			// 车辆状态图片删除
			delTruckImg(del, 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.imgListData = this.imgListData.filter(item => {
					return item.url === obj.url
				})

			},
			// 车辆图片上传失败的回调
			errorTruckImg(res) {},
			// 车辆视频上传成功Vedio
			UploadSuccessVideo(res, o) {
				var _res = JSON.parse(res.data);
				if (_res.code == 200) {

					this.carVideoData.push(_res.data);
					this.srcVideo = _res.data.url;
					// this.select();
					this.carVideo = [{
						cover: o,
						url: this.srcVideo
					}]
				}
			},
			// 车辆视频删除回调
			delVideo(del, tempFilePaths) {
				this.carVideo = []
				this.carVideoData = []
			},
			// 视频上传失败的回调
			errorTruckVideo(res) {},
			editProcess(data) {
				console.log(data, 'data');
				editProcess(data).then(res => {
					console.log(res, 'res');
					this.$tab.navigateBack()
					// this.$tab.redirectTo('/pages/driverFinishTransport/index')
				})
			},
			confirm() {
				this.$refs.uForm.validate().then(res => {
					console.log('我通过了', this.form);
					// console.log('imgListData', this.imgListData);
					// console.log('carVideoData', this.carVideoData);
					this.editProcess({
						id: this.form2.id,
						endVideo: this.carVideoData,
						endImg: this.imgListData
					})
				})
			},
			select() {
				uni.requireNativePlugin('TX-VideoTool').getVideoThumbnailImage({
					"videoPath": this.startSrcVideo,
					"saveImagePath": plus.io.convertLocalFileSystemURL(
						"_doc/TXVideoTool/"),
					"saveImageName": "testLocal" + new Date().getTime() + ".png",
					"second": 0
				}, result => {
					this.startStateVideo = [{
						cover: result.imagePath,
						url: this.startSrcVideo
					}]
				});
			},
			// 开始状态图片预览
			previewStartImg(current) {
				// const urls = this.startImgList.map(item => {
				// 	return item
				// })
				const urls = []
				urls.push(this.startImgList[current])
				console.log(urls);
				uni.previewImage({
					urls
				})
			},
			// 结束图片状态预览
			previewEndImg(current) {
				// const urls = this.endImgList.map(item => {
				// 	return item
				// })
				const urls = []
				urls.push(this.endImgList[current])
				console.log('urls', urls);
				uni.previewImage({
					urls
				})
			},
			// 字典翻译
			translate(obj) {
				for (let key in obj) {
					console.log(key);
					if (this.form.isInterrupt == key) {
						this.isInterruptContent = this.isInterruptContentObj[key]
						console.log(this.isInterruptContent);
					}
				}
			},
			// 获得车辆异常状态字典
			async getErrorState() {
				const res = await errorState()
				console.log('车辆状态', res);
				let obj = {}

				res.data.forEach((item, index) => {
					obj[index + 1] = item.dictLabel
				})
				console.log('obj', obj);
				this.isInterruptContentObj = obj
				this.translate(obj)
			},
			// 获取详情
			async getRecordDetail(id) {
				this.isMap = false;
				const res = await recordDetail(id)
				console.log(res);
				this.pathData = res.data.id;
				this.form = res.data;
				this.isMap = true;
				this.form.startTime = this.form.startTime.replace(/-/g, '/')
				this.form.endTime = this.form.endTime.replace(/-/g, '/')
				res.data.startImg.forEach(item => {
					this.startImgList.push(item.url)
				})
				this.startSrcVideo = this.form.startVideo[0].url
				this.startStateVideo = [{
					url: this.startSrcVideo
				}]
				this.select();
				// pointData(res.data.id).then(resData => {
				// 	console.log('详情', res);
				// 	if (resData.data.runPoints && resData.data.runPoints.length > 0) {
				// 		this.pathData = resData.data.runPoints
				// 	}
				// })
			}
		},
		// watch: {
		// 	form: {
		// 		handler(newVal) {
		// 			this.getErrorState()
		// 		},
		// 		deep: true
		// 	},
		// },
		onLoad(option) {
			// console.log(option);
			if (option.id) {
				this.form2.id = option.id;
				this.getRecordDetail(option.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-button {
		height: 85rpx;
		// background: linear-gradient(0deg, #FFD334 0%, #F59A02 100%);
		// box-shadow: 0rpx 2rpx 13rpx 0rpx rgba(27, 43, 95, 0.25);
		// border-radius: 28rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		border: 0;
		margin-top: 27rpx;
	}

	.fontGreen {
		color: #007C3C !important;
	}

	.bg-color-green {
		background: #36C372 !important;
	}

	.fontColor {
		color: #FC5536 !important;
	}

	.fontWeight {
		font-weight: bold !important;
	}

	.bg-color-red {
		background: #FB5637 !important;
	}

	.block {
		display: block !important;
	}

	.radius15 {
		border-radius: 15rpx;
	}

	.border {
		border: 1rpx solid #495B93;
	}

	.state-box-size {
		width: 180rpx;
		height: 180rpx;
	}

	.mt30 {
		margin-top: 30rpx;
	}

	.space-between {
		justify-content: space-between;
	}

	.mt33 {
		margin-top: 33rpx;
	}

	.addLineSuccess-big-box {

		.addLineSuccess-big-box-top {
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.addLineSuccess-big-box-bottom {
			padding: 0rpx 39rpx;

			.addLineSuccess-big-box-bottom-item {
				display: flex;
				margin: 36rpx auto;

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

					.green-circle {
						width: 15rpx;
						height: 15rpx;
						background: #36C372;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					uni-text {
						font-size: 26rpx;
						font-weight: bold;
						color: #495B93;

					}

				}

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

					uni-text {
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						margin-left: 14rpx;
					}
				}
			}

			.map {
				height: 339rpx;
				background: #FFFFFF;
				border: 2rpx solid #495B93;
				border-radius: 15rpx;
				margin: 25rpx auto 40rpx;
			}

			// .border-style {
			// 	border-top: 1rpx dashed #F98803;
			// 	margin: 0 auto;
			// }
		}
	}

	/deep/.xfx-image-upload-Item {
		margin-right: 0;
		margin-bottom: 0;
		width: 180rpx;
		height: 180rpx;
	}

	.topBox {
		// width: 599rpx;
		height: 78rpx;
		background: linear-gradient(0deg, #FF2D04 0%, #FF7D1D 100%);
		border-radius: 28rpx 28rpx 0px 0px;
		margin-top: 33rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.rightIcon {
		height: 48rpx;
		width: 48rpx;
		// border: #F59A02 solid 1px;
		background: url('../../static/images/transport/3.png') no-repeat;
		background-size: 100% 100%;
	}

	.bottomBox {
		// width: 517rpx;
		background: rgba(255, 255, 255, 0.4);
		border: 2rpx solid #FB5637;
		border-radius: 0px 0px 28rpx 28rpx;
		padding: 36rpx 41rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #FB5637;
	}

	// 车辆状态上传图片
	.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;
				}
			}
		}
	}

	.textBox {
		display: flex;
		align-items: center;
		// margin-left: 10px;
		width: 100%;
	}

	.mt29 {
		margin-top: 29rpx;
	}

	.ml29 {
		margin-left: 20rpx;
	}


	/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;
						}
					}
				}
			}
		}
	}
</style>