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.carrierInfo.carNo}}
				<!-- <input class="car-uumber input" v-model='detailData.carrierInfo.carNo'
					:disabled="true" placeholder="输入车牌号" name="input" disabled="true"></input> -->
			</view>
			<view class='row-between' @click="selectDate">
				<view class="">装车日期</view>
				<view class="date-style">
					{{detailData.carrierInfo.loadingDate?detailData.carrierInfo.loadingDate:'选择装车日期'}}
				</view>
			</view>
			<view class='row-between'>
				<view class="">运费总额（元）</view>
				{{detailData.freightInfo.freight}}
			<!-- 	<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">{{detailData.carrierInfo.sendCity}} {{detailData.carrierInfo.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 :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="submit(1)">暂存</view>
			<view class="submit" @click="submit(3)">提交</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 {
				imgList: [],
				fileList1: [],
				showDate: false,
				mode: 'single',
				id: '',
				sourceType: ['camera'],
				detailData: {
					carrierInfo: {},

				},
				action: this.$helper.ossUploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				isAdd: true,
				isShowAlert: false,
				alertContent: '',
				alertTitle: '',
				keyShow: false,
				carNumber: '',
				gjList: []
			}
		},
		onLoad(options) {
			that = this
			// debugger
			// #ifdef APP-PLUS
			this.getLngLat();
			// #endif
			console.log(options)
			this.id = JSON.parse(decodeURIComponent(options.obj)).id
			this.getInfo()
			// this.detailData = options;
			// CYHT20220317000001


		},
		methods: {
			toSignContract(){
				uni.$u.route('/pages/order/signContract', {
					obj: JSON.stringify(this.detailData),
				});
			},
			selectDate() {
				this.showDate = true
			},
			confirmDate(e) {
				this.detailData.carrierInfo.loadingDate = e[0]
				this.showDate = false
				console.log(e);
			},
			getInfo() {
				this.$request.baseRequest('get', '/orderInfo/getOrderInfo', {
					id: this.id,
				}).then(res => {
					if (res.code == 200) {
						this.detailData = res.data
						// 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.carrierInfo.carNo == '') {
					this.carNumber = ''
				} else {
					this.carNumber = this.detailData.carrierInfo.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.carrierInfo.carNo = e.value //键盘输入值
			},
			getLngLat() {
				uni.showLoading({
					title: '获取定位中',
					mask: true
				})
				console.log(123)
				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()

						}
						uni.hideLoading()

						this.$helper.fUN_AmapLocation.stop({}, result => {
							console.log('====fUN_AmapLocation定位stop====', JSON.stringify(result));
						});
					}
				);
				// 	uni.getLocation({
				// 		type: 'gcj02',
				// 		geocode: true,
				// 		success: res => {
				// 			console.log('定位地址')
				// 			console.log(res)
				// 			if (res.latitude) {
				// 				this.detailData.carrierInfo.loadingAreaLongitude = res.longitude;
				// 				this.detailData.carrierInfo.loadingAreaLatitude = res.latitude;
				// 				this.detailData.carrierInfo.sendCity = this.$helper.filterUrban(res.address.city)
				// 				this.detailData.carrierInfo.sendArea = this.$helper.filterArea(res.address
				// 					.district);
				// 				console.log(this.detailData.carrierInfo.sendCity)
				// 				console.log(this.detailData.carrierInfo.sendArea)
				// 				this.$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);
				// 					this.bool = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)
				// 				}
				// 				if (this.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服务页面
				// 								}
				// 							}
				// 						}
				// 					});
				// 				}
				// 			}
				// 		},
				// 		fail: res => {
				// 			console.log('定位失败')
				// 			console.log(res)

				// 		}
				// 	});

			},
			alertBtn() {
				// uni.navigateTo({
				// 	url: '/pages/public/login'
				// })
			},
			cancelClick() {
				this.isShowAlert = false
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {debugger
				// 当设置 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) {
				console.log(type)
				if (type == 1) {
					if (!this.detailData.contractNo) {
						this.$refs.uToast.show({
							type: 'error',
							message: "合同未签订不能暂存！"
						})
						return
					}
					this.alertTitle = '确定暂存装车信息？'
				} else {
					this.alertTitle = '确定提交装车信息？'
				}
				this.isShowAlert = true
				this.detailData.statusFlag = type
				// this.$refs.uToast.show({
				// 	...params,
				// 	complete() {
				// 		params.url && uni.navigateTo({
				// 			url: params.url
				// 		})
				// 	}
				// })
			},
			validate() {
				if (uni.$u.test.isEmpty(this.detailData.carrierInfo.carNo)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "车牌号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.detailData.carrierInfo.loadingDate)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "装车日期不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.detailData.freightInfo.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 (uni.$u.test.isEmpty(this.detailData.carrierInfo.loadingImg)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "装车照片不能为空！",
				// 	})
				// 	return true
				// }
			},
			confirmClick() {
				
				this.isShowAlert = false
				 if(this.validate()) return 
				//1暂存
				if (this.detailData.statusFlag == 1) {
					delete this.detailData.carrierInfo.loadingAreaLongitude;
					delete this.detailData.carrierInfo.loadingAreaLatitude;
					delete this.detailData.carrierInfo.sendCity;
					delete this.detailData.carrierInfo.sendArea;
				}
				this.detailData.carrierInfo.statusFlag = this.detailData.statusFlag
				this.detailData.carrierInfo.loadingImg = this.imgList.toString()
				this.$request.baseRequest('post', '/carrierInfo/loadingAdd', this.detailData.carrierInfo).then(res => {
						if (res.code == 200) {
							// debugger
							let _title = ''
							if (this.detailData.statusFlag == 1) {
								_title = '暂存成功！'
							} else {
								_title = '提交成功！'
							}
							this.$helper.fUN_AmapLocation.start({
									// intervalTime: 1000 * 60,
									intervalTime: 5000,
									// isReport: true,
									reportInterval: 5,
									// 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)
									if (uni.getStorageSync('mapGJ').length > 100) {
										console.log(uni.getStorageSync('mapGJ'))
										this.$request.baseRequest('post', '/vehicleTrajectoryInfo/api/addInfo', {
												vehicleTrajectoryInfos: uni.getStorageSync('mapGJ')
											}).then(res => {
												this.$helper.gjList = []
												uni.setStorageSync('mapGJ', []);
											})
											.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>