wangluohuoyun-app/pages/order/confirmLoading.vue

<!-- 确认装车 -->
<template>
	<view class="content">
		<div class='content1'>
			<view class="level2-title">承运合同</view>
			<view class='row-between'>
				<view class="">合同编号</view>
				<view class="" @click="toSignContract">{{detailData.contractNo?detailData.contractNo:'去签订合同'}}</view>
			</view>
		</div>
		<view class="content2">
			<view class="level2-title">基本信息</view>
			<view class='row-between'>
				<view class="">订单编号</view>
				<view class="">{{detailData.orderNo}}</view>
			</view>
			<view class='row-between'>
				<view class="">货主</view>
				<view class="">{{detailData.cargoOwner}}</view>
			</view>
			<view class='row-between'>
				<view class="">货主单位</view>
				<view class="">{{detailData.compName?detailData.compName:'个人货主'}}</view>
			</view>
			<view class='row-between'>
				<view class="">发货地</view>
				<view class=" place">
					{{detailData.sendPrivate}}{{detailData.sendCity}}{{detailData.sendArea}}{{detailData.sendDetailedAddress}}
				</view>
			</view>
			<view class='row-between'>
				<view class="">卸货地</view>
				<view class=" place">
					{{detailData.unloadPrivate}}{{detailData.unloadCity}}{{detailData.unloadArea}}{{detailData.unloadDetailedAddress}}
				</view>
			</view>
			<view class='row-between'>
				<view class="">货名</view>
				<view class="">{{detailData.goodsName}}</view>
			</view>
			<!-- <view class='row-between'>
				<view class="">运费</view>
				<view class="">{{detailData.freight}}{{detailData.illingMethod==0?'元/吨':'元/车'}}</view>
			</view>-->
		</view>
		<view class="content2">
			<view class="level2-title">装车信息</view>
			<view class='row-between'>
				<view class="">车牌号</view>
				{{detailData.carNo?detailData.carNo:"来自合同"}}
				<!-- <input class="car-uumber input" v-model='detailData.carrierInfo.carNo'
					:disabled="true" placeholder="输入车牌号" name="input" disabled="true"></input> -->
			</view>
			<view class='row-between'>
				<view class="">装车日期</view>
				<view class="date-style">
					{{detailData.loadingDate1?detailData.loadingDate1:'来自合同'}}
				</view>
			</view>
			<view class='row-between'>
				<view class="">装车净重（吨）</view>
				{{detailData.weight ? detailData.weight:"来自合同"}}
			</view>
			<view class='row-between'>
				<view class="">预计运费（元）</view>
				<view class="">{{detailData.driverContract == 1 ? detailData.freight:"来自合同"}}</view>
				<!-- {{detailData.freight ? detailData.freight:"来自合同"}} -->
				<!-- 	<view class=""><input class="input" type="text" value="" v-model="detailData.carrierInfo.freight"
						placeholder="请输入运费"></view> -->
			</view>
			<view class='row-between'>
				<view class="">预付款（元）</view>
				{{detailData.advanceCharge ? detailData.advanceCharge:"来自合同"}}
				<!-- 	<view class=""><input class="input" type="text" value="" v-model="detailData.carrierInfo.freight"
						placeholder="请输入运费"></view> -->
			</view>
			<view class='row-between'>
				<view class="">定位</view>
				<view class="flex align-center">{{localtion.city}}
					{{localtion.sendArea}}
					<view class="sx-style" @click.stop="getLngLat()">刷新</view>
				</view>
			</view>
			<view class='s-flex'>
				<view class="" style="margin:20rpx 0;">上传装车照片</view>
				<u-upload class="uview-upload" :fileList="fileList1" @afterRead="afterRead($event)" @delete="deletePic"
					name="1" multiple='true' :maxCount="3"></u-upload>
			</view>
			<!-- 			<view class='s-flex'>
				<view class="">上传装车磅单</view>
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" @on-progress="onProgress"></upload>
			</view> -->

		</view>
		<view class="bottom-btn">
			<view class="store" @click="$u.throttle(submit(1), 5000)">暂存</view>
			<view class="submit" @click="$u.throttle(submit(3), 5000)">提交</view>
		</view>
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true'
			:showCancelButton='true' confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick"
			@cancel="cancelClick"></u-modal>
		<master-keyboard ref="keyboard" keyboardtype="car" :show="keyShow" :randomNumber="true" :newCar="false"
			:defaultValue="carNumber" @keyboardClick="handleClick"></master-keyboard>
		<u-toast ref="uToast"></u-toast>
		<u-calendar :show="showDate" :mode="mode" @confirm="confirmDate" @close="showDate= false"></u-calendar>
	</view>
</template>

<script>
	let that;
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				cyId: '',
				localtion: {
					city: '',
					sendArea: ''
				},
				imgList: [],
				fileList1: [],
				showDate: false,
				mode: 'single',
				id: '',
				sourceType: ['camera'],
				detailData: {
					hyCarrierInfo: {},
					loadingDate: {}
				},
				action: this.$helper.ossUploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				isAdd: true,
				isShowAlert: false,
				alertContent: '',
				alertTitle: '',
				keyShow: false,
				carNumber: '',
				gjList: [],
			}
		},
		onLoad(options) {
			this.id = JSON.parse(decodeURIComponent(options.obj)).id
			this.detailData.hyCarrierInfo.id = JSON.parse(decodeURIComponent(options.obj)).carrierId
			this.cyId = JSON.parse(decodeURIComponent(options.obj)).carrierId
			this.getInfo()
			
			console.log(options)
			
			
			// this.detailData = JSON.parse(options.obj) ;
			// console.log(this.detailData)
			// CYHT20220317000001
		},
		methods: {
			//确认装车提交成功后，开启实时定位，
			// 调接口5分钟一次发送轨迹,[
			// 	{latitude: 39.997761, longitude: 116.478935},
			// 	{latitude: 39.997825, longitude: 116.478939},
			// 	{latitude: 39.998549, longitude: 116.478912},
			// 	{latitude: 39.998555, longitude: 116.478998},
			// 	{latitude: 39.998566, longitude: 116.479282},
			// 	{latitude: 39.998528, longitude: 116.479658},
			// 	{latitude: 39.998453, longitude: 116.480151},
			// 	{latitude: 39.998302, longitude: 116.480784},
			// 	{latitude: 39.998184, longitude: 116.481149},
			// 	{latitude: 39.997997, longitude: 116.481573},
			// 	{latitude: 39.997846, longitude: 116.481863},
			// 	{latitude: 39.997718, longitude: 116.482072},
			// 	{latitude: 39.997718, longitude: 116.482362},
			// 	{latitude: 39.998935, longitude: 116.483633},
			// 	{latitude: 39.998968, longitude: 116.48367},
			// 	{latitude: 39.999861, longitude: 116.484648}
			// ]
			// a(){},
			toSignContract() {
				console.log(this.detailData)
				this.$request.baseRequest('get', '/orderInfo/getOrderInfo', {
					id: this.id,
				}).then(res => {
					uni.$u.route('/pages/order/signContract', {
						obj: JSON.stringify(res.data),
					});
				});
			},
			selectDate() {
				this.showDate = true
			},
			confirmDate(e) {
				this.detailData.hyCarrierInfo.loadingDate = e[0]
				this.showDate = false
			},
			getInfo() {
				this.$request.baseRequest('get', '/orderInfo/getOrderInfo', {
					id: this.id,
				}).then(res => {
					if (res.code == 200) {
						
						this.detailData = res.data
						// #ifdef APP-PLUS
						this.getLngLat();
						// #endif
						this.$request.baseRequest('get', '/carrierInfo/getHyCarrierInfo', {
							orderId: this.detailData.id,
						}).then(res => {
							if (res.data) {
								if(res.data.loadingImg){
									var data=res.data.loadingImg.split(',')
									this.imgList=res.data.loadingImg.split(',')
									for (var i = 0; i < data.length; i++) {
										if(data[i]!=''){
											this.fileList1.push({url:data[i]})
										}
									}
									
								}
								console.log(this.fileList1)
								this.detailData.carNo = res.data.carNo
								this.detailData.loadingDate = res.data.loadingDate
								this.detailData.loadingDate1=res.data.loadingDate.split(' ')[0]
								this.detailData.weight = res.data.loadingWeight
								this.detailData.freight = res.data.estimatedFreight
							}
						})

						// this.detailData.contractNo = ''
						// this.detailData.id = this.detailData.carrierId
						// this.detailData.carrierInfo.loadingDate = ''
						// this.detailData.carrierInfo.carNo = ''
						// this.detailData.carrierInfo.loadingAreaLongitude = ''
						// this.detailData.carrierInfo.loadingAreaLatitude = ''
						// this.detailData.carrierInfo.sendCity = '营口'
						// this.detailData.carrierInfo.sendArea = '鲅鱼圈'
						// this.detailData.carrierInfo.loadingImg = ''
						// this.carrierInfo = res.data.carrierInfo
						// this.freightInfo = res.data.freightInfo
						// this.zcPhoneList = this.carrierInfo.loadingImg.split(',')
						// if(res.data.orderStatus!="待货主确认"&&res.data.orderStatus!="未装车"&&res.data.orderStatus!="已终止"){
						// 	this.status1 = true
						// }
						// if(res.data.orderStatus!="已终止"&&res.data.orderStatus!="平台驳回装车信息"&&res.data.orderStatus!="待平台确认装车"&&res.data.orderStatus!="待货主确认"&&res.data.orderStatus!="未装车"&&res.data.orderStatus!="待货主确认装车"&&res.data.orderStatus!="货主驳回装车信息"){
						// 	this.status2 = true
						// }
					}

				})

			},
			//车牌号弹出键盘
			handleShowKeyboard() {
				if (this.detailData.hyCarrierInfo.carNo == '') {
					this.carNumber = ''
				} else {
					this.carNumber = this.detailData.hyCarrierInfo.carNo
				}
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(false) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(false)
				}
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(true) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(true)
				}
			},
			//车牌号弹出键盘
			handleClick(e) {
				this.carNumber = e.value
				this.detailData.hyCarrierInfo.carNo = e.value //键盘输入值
			},
			getLngLat() {
				var that=this
				uni.showLoading({
					title: '获取定位中',
					mask: true
				})
				// this.$helper.fUN_AmapLocation.start({
				// 		intervalTime: 1000 * 3,
				// 		isReport: false,
				// 	},
				// 	res => {
				// 		//见下方定位返回示例
				// 		console.log('====fUN_AmapLocation定位====', JSON.stringify(res));
				// 		if (res.latitude) {
				// 			this.detailData.carrierInfo.loadingAreaLongitude = res.longitude;
				// 			this.detailData.carrierInfo.loadingAreaLatitude = res.latitude;
				// 			this.detailData.carrierInfo.sendCity = this.$helper.filterUrban(res.city)
				// 			this.detailData.carrierInfo.sendArea = this.$helper.filterArea(res.district);
				// 			console.log(this.detailData.carrierInfo.sendCity)
				// 			console.log(this.detailData.carrierInfo.sendArea)
				// 			this.$forceUpdate()

				// 		}


				// 		this.$helper.fUN_AmapLocation.stop({}, result => {
				// 				uni.hideLoading()
				// 			console.log('====fUN_AmapLocation定位stop====', JSON.stringify(result));
				// 		});
				// 	}
				// );
				console.log(111111)
				// console.log(that.detailData,111111)
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						if (res.latitude) {
							
							that.detailData.hyCarrierInfo.longitudeLatitude=res.longitude+','+res.latitude
							that.detailData.hyCarrierInfo.loadingAreaLongitude = res.longitude;
							that.detailData.hyCarrierInfo.loadingAreaLatitude = res.latitude;
							that.detailData.hyCarrierInfo.sendCity = that.$helper.filterUrban(res.address.city)
							that.localtion.city = that.$helper.filterUrban(res.address.city)
							that.$set(that.detailData,'loadingArea',that.$helper.filterUrban(res.address.district))
							that.$set(that.detailData,'loadingCity',that.$helper.filterUrban(res.address.city))
							that.localtion.sendArea = that.$helper.filterUrban(res.address.district)
							// .loadingCity = that.$helper.filterUrban(res.address.city)
							that.detailData.loadingLongitude = res.longitude;
							that.detailData.loadingLatitude = res.latitude;
							console.log(res,that.detailData,22222)
							that.$forceUpdate()
							uni.hideLoading()
						} else {
							if (uni.getSystemInfoSync().platform == 'android') {
								var context = plus.android.importClass("android.content.Context");
								var locationManager = plus.android.importClass(
									"android.location.LocationManager");
								var main = plus.android.runtimeMainActivity();
								var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
								that.bool = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)
							}
							if (that.bool === false) {
								uni.showModal({
									title: '提示',
									content: '请打开定位服务',
									success: ({
										confirm,
										cancel
									}) => {
										if (confirm) {
											if (uni.getSystemInfoSync().platform == 'android') {
												var Intent = plus.android.importClass(
													'android.content.Intent');
												var Settings = plus.android.importClass(
													'android.provider.Settings');
												var intent = new Intent(Settings
													.ACTION_LOCATION_SOURCE_SETTINGS);
												var main = plus.android.runtimeMainActivity();
												main.startActivity(intent); // 打开系统设置GPS服务页面
											}
										}
									}
								});
								
								uni.hideLoading()
							}
						}
					},
					fail: res => {
						console.log('定位失败')
						console.log(res)
						uni.hideLoading()

					}
				});

			},
			alertBtn() {
				// uni.navigateTo({
				// 	url: '/pages/public/login'
				// })
			},
			cancelClick() {
				this.isShowAlert = false
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				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) {
				uploadImage('image', url, 'appData/',
					result => {
						// 上传成功回调函数
						console.log('图片地址', result)
						this.imgList.push(result)

					}
				)
			},
			onProgress(e) {
				console.log(e)
			},
			submit(type) {
				if (type == 1) {
					if (this.detailData.driverContract != 1) { //合同签订标识
						this.$refs.uToast.show({
							type: 'error',
							message: "合同未签订不能暂存！"
						})
						return
					}
					this.alertTitle = '确定暂存装车信息？'
				} else {
					if (this.detailData.driverContract != 1) {
						this.$refs.uToast.show({
							type: 'error',
							message: "合同未签订不能提交！"
						})
						return
					}
					this.alertTitle = '确定提交装车信息？'
				}
				if (this.validate()) return
				this.isShowAlert = true
				this.detailData.statusFlag = type
				// this.$refs.uToast.show({
				// 	...params,
				// 	complete() {
				// 		params.url && uni.navigateTo({
				// 			url: params.url
				// 		})
				// 	}
				// })
			},
			validate() {
				// uni.$u.test.isEmpty(this.detailData.carrierInfo.carNo
				if (uni.$u.test.isEmpty(this.detailData.carNo)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "车牌号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.detailData.loadingDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "装车日期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.detailData.freight)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "预计运费不能为空！",
					})
					return true
				}
				// if (uni.$u.test.isEmpty(this.detailData.carrierInfo.sendCity)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "定位不能为空！",
				// 	})
				// 	return true
				// }
				// if (uni.$u.test.isEmpty(this.detailData.carrierInfo.sendArea)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "定位不能为空！",
				// 	})
				// 	return true
				// }
			
				if(this.imgList.length == 0){
					this.$refs.uToast.show({
						type: 'error',
						message: "装车照片不能为空！",
					})
					return true
				}
			},
			confirmClick() {
				var that=this
				this.isShowAlert = false
				//1暂存
				if (this.detailData.statusFlag == 1) {
					delete this.detailData.hyCarrierInfo.loadingAreaLongitude;
					delete this.detailData.hyCarrierInfo.loadingAreaLatitude;
					delete this.detailData.hyCarrierInfo.sendCity;
					delete this.detailData.hyCarrierInfo.sendArea;
				}
				uni.showLoading({
					title: '加载中'
				})
				let time = new Date() //装车时间   去当前时间的时分秒
				let h = time.getHours();
				if (h < 10) {
					h = "0" + h
				}
				let f = time.getMinutes();
				if (f < 10) {
					f = "0" + f
				}
				let m = time.getSeconds();
				if (m < 10) {
					m = "0" + m
				}
				var data={
					loadingImg:this.imgList.toString(),
					statusFlag:this.detailData.statusFlag,
					loadingDate:this.detailData.hyCarrierInfo.loadingDate.split(" ")[0] + " " + h + ":" + f + ":" + m,
					loadingArea:this.detailData.loadingArea,
					loadingCity:this.detailData.loadingCity,
					loadingLongitude:this.detailData.loadingLongitude,
					loadingLatitude:this.detailData.loadingLatitude,
					id:this.detailData.hyCarrierInfo.id
				}
				
				console.log("查看id--------",this.detailData.hyCarrierInfo.id)
				this.$request.baseRequest('post', '/carrierInfo/loadingAdd', data).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							let _title = ''
							if (this.detailData.statusFlag == 1) {
								_title = '暂存成功！'
							} else {
								_title = '提交成功！'
							}
							that.$helper.fUN_AmapLocation.start({
									// intervalTime: 1000 * 60,
									intervalTime: 5000,
									// locationCacheEnable:true,
									isReport: false
									// url: 'http://192.168.0.66/fun/open/test_json.do',
									// params: {
									// 	a: 1,
									// 	B: '测试',
									// 	c: true
									// },
									// headers: {
									// 	a: '123',
									// 	B: 'abcd'
									// }
								},
								res => {
									console.log('====确认装车开启连续定位====');
									console.log(res)
									let _data = {
										orderId: that.id,
										longitude: res.longitude,
										latitude: res.latitude,
										province: res.province,
										city: res.city,
										area: res.district
									}
									this.$helper.gjList.push(_data)
									uni.setStorageSync('mapGJ', this.$helper.gjList);
									console.log('this.$helper.gjList')
									console.log(this.$helper.gjList)
									console.log("条数", uni.getStorageSync('mapGJ').length)
									if (uni.getStorageSync('mapGJ').length > 100) {
										console.log(JSON.stringify(uni.getStorageSync('mapGJ')) )
										this.$request.baseRequest('post', '/hyOrderTravelPath/api/addInfo',  {
													orderId:that.id,
													longitudeLatitude:JSON.stringify(uni.getStorageSync('mapGJ'))   
											}).then(res => {
												uni.removeStorageSync('mapGJ');
												this.$helper.gjList = []
											})
											.catch(res => {
												uni.$u.toast(res.message);
											});
									}
									//判断缓存数据条数，超过reportInterval时清空缓存，重新存入缓存
								}
							);
							this.$refs.uToast.show({
								type: 'success',
								message: _title,
								complete() {
									uni.switchTab({
										url: '/pages/order/index'
									})
								}
							})
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		// . {
		// 	color: #333333;
		// }
	}

	.level2-title {
		margin: 0 0 20rpx 0;
	}

	.content1,
	.content2 {
		background: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;

		.place {
			width: 80%;
			text-align: right;
		}
	}

	.upload {}

	.bottom-btn {
		display: flex;
		justify-content: space-around;
		margin-bottom: 50rpx;
		background: #FFFFFF;
		padding: 40rpx 0;
	}

	.store {
		padding: 20rpx 30rpx;
		color: #2772FB;
		width: 40%;
		background: #EEF4FF;
		border-radius: 40rpx;
		font-size: 36rpx;
		text-align: center;
	}

	.submit {
		font-size: 36rpx;
		padding: 20rpx 30rpx;
		color: white;
		width: 40%;
		background: #2772FB;
		border-radius: 40rpx;
		text-align: center;
	}

	.row-between {
		margin: 20rpx 0;
	}

	.sx-style {
		background: #2772FB;
		color: white;
		padding: 2rpx 16rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-left: 20rpx;
	}

	.input {
		text-align: right;
	}

	.date-style {}
</style>