muck_truck_app/pages/driverStartTransportInfo/index.vue

<template>
	<view class="container">
		<uni-navbar title="启动运输"></uni-navbar>

		<view class="box commonMt" style="overflow: hidden;">
			<view class="topMap">
				<mapPreview :startPoint='form.startPoint' :endPoint='form.endPoint' v-show="isMap"
					:mtRoutePointList='form.mtRoutePointList'></mapPreview>
			</view>
			<view class="box3">
				<view class="commonMt 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 " style="padding-bottom: 40rpx;">
						<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.transportName}}</text>
							</view>
						</view>

						<!-- <view class="map">
						<mapImg :startPoint='form.startPoint' :endPoint='form.endPoint'
							:mtRoutePointList='form.mtRoutePointList'></mapImg>
						<mapNew height="339rpx">
							
						</mapNew>
					 </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.startName}}</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.endName}}</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.startDate}} 至 {{form.endDate}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view style="width: 50%;display: flex;margin-right: 10rpx;">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">开始时间:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{ changeTime(form.startTime) }}</text>
								</view>
							</view>
							<view style="width: 50%;display: flex;">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">结束时间:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{ changeTime(form.endTime) }}</text>
								</view>
							</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">{{ changeTime(form.endTime) }}</text>
						</view>
					</view> -->
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view style="width: 50%;display: flex;margin-right: 5rpx;">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">车&nbsp;&nbsp;牌&nbsp;&nbsp;号:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.carNumber}}</text>
								</view>
							</view>
							<view style="width: 50%;display: flex;">
								<view class="flexAlignCenter">
									<view class="greenCircle">
									</view>
									<text class="itemText">车辆司机:</text>
								</view>
								<view class="flexAlignCenter">
									<text class="infoText">{{form.driverName}}</text>
								</view>
							</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.driverName}}</text>
						</view>
					</view> -->
						<!-- <view class="border-style"></view> -->
					</view>
				</view>
				<u-button @click="permission" class="custom-style mt33 commonMb" shape="circle"
					color="linear-gradient(to top, #F59A02, #FFD334)">启动运输</u-button>

			</view>
		</view>

		<u-popup :show="show" mode="center" class="modelBox">
			<view class="model">
				<view class="modelTitle">上传车辆开始运输状态<view class="close" @click="show=false"></view>
				</view>
				<view class="textBox colorStyle2">
					<u--form :model="form" 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>
				<u-button class="custom-style5 widthButton" shape="circle" @click="confirm()"
					color="linear-gradient(to top, #F59A02, #FFD334)">
					确 定
				</u-button>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import {
		transportRunDetail,
		transportProcess
	} from "../../api/company/transport.js"
	import config from '@/config.js'
	const fUN_AmapLocation = uni.requireNativePlugin('FUN-AmapLocation');
	var _this;
	export default {
		data() {
			return {
				form: {
					startTime: "00:00:00",
					endTime: "00:00:00",
					// 结束坐标和开始坐标
					endPoint: '',
					startPoint: '',
					mtRoutePointList: [],

				},
				show: false,
				isMap: true,
				drivingLicense: [],
				carVideo: [],
				imgList: [],
				imgListData: [],
				carVideoData: [],
				// 图片上传地址
				urlConfig: config.baseUrl + '/file/upload',
				pointCoordinate: null,
				// 行驶证数据
				form: {
					truckState: null
				},
				rules: {
					truckState: [{
						validator: (rule, value, callback) => {
							return this.carVideo.length !== 0 && this.imgList.length === 2
						},
						message: '请上传两张照片与一段视频'
					}, ],
				},
				// 点击修改传回来的id
				id: '',
				srcVideo: '',

			}
		},
		methods: {
			//获取当前位置
			getLocation() {
				console.log('我要定位信息了')
				// fUN_AmapLocation.once({}, result => {
				// 	console.log('====fUN_AmapLocation::8秒后单次定位示例====', JSON.stringify(result));
				// 	this.pointCoordinate = result.longitude + ',' + result.latitude;
				// 	// _this.msg = JSON.stringify(result);
				// });
				uni.getLocation({
					// type: 'wgs84',
					type: 'gcj02',
					success: (res) => {
						console.log(res, 'res');
						this.pointCoordinate = res.longitude + ',' + res.latitude;
						console.log(this.pointCoordinate, '我是定位信息')
					}
				});
			},
			// 获取权限
			permission() {
				_this = this;
				console.log('获取权限');
				fUN_AmapLocation.permission({}, result => {
					console.log('====fUN_AmapLocation定位====', JSON.stringify(result));
					if (result.code === 0) {
						//结果code=0时，flag:true代表有定位权限，flag_br:true代表允许后台定位（AndroidQ即sdk_int>=29）
						//sdk_int>28 android Q 有后台定位始终允许（经测 小米6 安卓9 sdk28 也有但无法调请求窗，经测试不影响后台定位[息屏或置于后台]）
						if ((result.flag === true && result.flag_br === true && result.sdk_int >= 29) || (result
								.flag === true && result.sdk_int < 29)) {
							_this.battery()
						} else {
							uni.showModal({
								title: '提醒',
								showCancel: true,
								content: '请在权限-位置信息中选择始终允许',
								success: function(res) {
									if (res.confirm) {
										_this.settingUp();
									} else if (res.cancel) {
										// alert('用户点击取消');
									}

								}
							})
						}
					}
				});

			},
			//打开应用设置页
			settingUp() {
				fUN_AmapLocation.openSetting(function(result) {

				});
			},
			//开启电池优化
			battery() {
				let _that = this;
				//检测是否忽略电池优化（简单解释：开启电池优化，会干掉应用）
				fUN_AmapLocation.isIgnoringBatteryOptimizations(function(result) { //SDK>=23,否则返回不支持
					if (result.code === 0) {
						if (result.flag === true) {
							console.log('====忽略电池优化====')
							_that.submit();
							_that.openWakeLock();
						} else {
							// 申请忽略电池优化（如果已加入电池优化的白名单 则进入系统电池优化页面，若未加入则弹窗申请。）
							fUN_AmapLocation.requestIgnoreBatteryOptimizations(function(result) {
								console.log(result)
								console.log('====申请电池优化====')
							});
						}
					}
				})
			},
			//打开屏幕唤醒
			openWakeLock() {
				//1台华为[鸿蒙]，2台小米（米6[安卓9]、米11Ultra[安卓11]）使用的10分测试的。
				fUN_AmapLocation.openWakeLock({
					time: 5
				}, function(result) {
					console.log('====被唤醒了====', JSON.stringify(result))
					// if(result.code===0)
					// {

					// }
				});
				//参数    time:间隔时间，单位：分，建议5-10。具体看业务
			},
			// 车辆状态图片上传成功
			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.carVideo = [{
						cover: o,
						url: this.srcVideo
					}]
					// this.select();
				}
			},
			// 车辆视频删除回调
			delVideo(del, tempFilePaths) {
				this.carVideo = []
				this.carVideoData = []
			},
			// 视频上传失败的回调
			errorTruckVideo(res) {},
			// 获取运输申请详情
			async getDetail(id) {
				this.isMap = false;
				const res = await transportRunDetail(id)
				this.isMap = true;
				console.log('运输详情', res);
				this.form = res.data
				this.form.startDate = this.form.startDate.replace(/-/g, ' - ')
				this.form.endDate = this.form.endDate.replace(/-/g, ' - ')
				this.getLocation();
			},
			changeTime(time) {
				if (!time) {
					return
				}
				return time.slice(0, 5)
			},
			confirm() {
				this.$refs.uForm.validate().then(async res => {
					// console.log('我通过了', this.form);
					// console.log('imgListData', this.imgListData);
					// console.log('carVideoData', this.carVideoData);
					this.transportProcess({
						applyId: this.form.id,
						pointCoordinate: this.pointCoordinate,
						startVideo: this.carVideoData,
						startImg: this.imgListData
					})
				})
			},
			submit() {
				console.log('开始啦');
				this.show = true;
			},
			transportProcess(data) {
				console.log(data, 'data');
				transportProcess(data).then(res => {
					console.log(res, '我是上传成功之后返回的参数')
					this.$tab.redirectTo(
						`/pages/driverStartTransportDoPath/index?id=${res.data.processId}&startTime=${res.data.StartTime}`
					)
					// this.$tab.navigateTo(`/pages/driverStartTransportDoPath/index?id=${res.data.processId}&startTime=${res.data.StartTime}`)
				})
			}

		},
		onLoad(option) {
			if (option.id) {
				this.getDetail(option.id)
			}
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	success: (res) => {
			// 		// console.log('当前位置的经度：' + res.longitude);
			// 		// console.log('当前位置的纬度：' + res.latitude);
			// 		// this.getLocation = res;
			// 		this.pointCoordinate = res.longitude + ',' + res.latitude;
			// 		console.log(this.pointCoordinate, '我是定位信息')
			// 	}
			// });
		}
	}
</script>

<style lang="scss" scoped>
	.addLineSuccess-big-box {

		.addLineSuccess-big-box-top {
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
		}

		.addLineSuccess-big-box-bottom {
			padding: 0rpx 30rpx;
			border-radius: 0 0 28rpx 28rpx;

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

			.map {
				// width: 599rpx;
				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;
			// }
		}
	}

	.custom-style5 {
		// box-shadow: 0px 2rpx 13rpx 0rpx rgba(27, 43, 95, 0.25);
		// border-radius: 28rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 27rpx 0 36rpx;
		height: 65rpx;
	}


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


	.mb {
		margin-bottom: 11rpx !important;
	}

	.mt31 {
		margin-top: 31rpx;
	}

	.mb43 {
		margin-bottom: 43rpx;
	}

	.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;
	}

	// 弹框样式
	/deep/ .u-popup__content {
		background-color: rgba(0, 0, 0, 0);
	}

	.model {
		width: 683rpx;
		// height: 441rpx;
		background: rgba(255, 255, 255, 0.64);
		border: 2rpx solid #77A8FF;
		box-shadow: 0px 0px 24rpx 6rpx rgba(109, 160, 251, 0.6);
		border-radius: 34rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.modelTitle {
		width: 683rpx;
		height: 80rpx;
		background: #7FB5FF;
		border-radius: 28rpx 28rpx 0px 0px;
		font-size: 28rpx;
		line-height: 80rpx;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
		position: relative;
	}

	.close {
		width: 30rpx;
		height: 30rpx;
		// border: 1px salmon solid;
		position: absolute;
		right: 25rpx;
		top: 50%;
		transform: translateY(-50%);
		background-image: url('@/static/images/close.png');
		background-size: 100% 100%;
	}

	.widthButton {
		width: 150rpx;
		margin-bottom: 53rpx;
	}

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

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

	// .topMap{
	// height: 513rpx;
	// background: #FFFFFF;
	// border: 2rpx solid #77A8FF;
	// box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25), 0px 0px 24rpx 6rpx rgba(109, 160, 251, 0.6);
	// border-radius: 28rpx;
	// }
	//    .modelBox > .u-transition > .u-popup__content {
	// 	position: absolute;
	// 	top: 700rpx;
	// }
	//处理当前页面弹框
	/deep/ .modelBox .u-transition .u-popup__content {
		position: fixed;
		top: 700rpx;
	}

	//处理当前组件弹框
	/deep/ .boxUplod .u-transition .u-popup__content {
		position: fixed;
		display: flex;
		bottom: 0px;
		left: 0px;
		right: 0px;
		top: auto;
		background: rgba(255, 255, 255, 0.7);
	}

	.itemText {
		margin-right: 14rpx;
	}
</style>