wangluohuoyun-huozhuapp/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.driverName}}</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.distance?detailData.distance:'暂无'}}公里</view>
			</view>
		</view>
		<view class="content2">
			<view class="level2-title">承运信息</view>
			<view class='row-between'>
				<view class="">合同编号</view>
				<view class="date-style">
					{{detailData.contractNo?detailData.contractNo:'暂无'}}
				</view>
			</view>
			<view class='row-between'>
				<view class="">车牌号</view>
				{{detailData.carNo?detailData.carNo:"来自合同"}}
			</view>

			<view class='row-between'>
				<view class="">装车净重（吨）</view>
				{{detailData.weight ? detailData.weight:"来自合同"}}
			</view>
			<view class='row-between'>
				<view class="">预计运费（元）</view>
				{{detailData.freight ? detailData.freight:"来自合同"}}
			</view>
			<view class='row-between'>
				<view class="">装车日期</view>
				<view class="date-style">
					{{detailData.loadingDate?detailData.loadingDate:'来自合同'}}
				</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>
		<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: {},
					loadingDate: {}
				},
				action: this.$helper.ossUploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				isAdd: true,
				isShowAlert: false,
				alertContent: '',
				alertTitle: '',
				keyShow: false,
				carNumber: '',
				gjList: [],
			}
		},
		onLoad(options) {
			that = this
			// #ifdef APP-PLUS
			// this.getLngLat();
			// #endif
			console.log(options)
			this.id = JSON.parse(decodeURIComponent(options.obj)).id
			this.getInfo()
			// 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() {
				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
			},
			getInfo() {
				this.$request.baseRequest('get', '/orderInfo/getOrderInfo', {
					id: this.id,
				}).then(res => {
					if (res.code == 200) {
						this.detailData = res.data
						this.$request.baseRequest('get', '/carrierInfo/getHyCarrierInfo', {
							orderId: this.detailData.id,
						}).then(res => {
							if (res.data) {
								this.detailData.carNo = res.data.carNo
								this.detailData.loadingDate = res.data.loadingDate
								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.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
			// 	})
			// 	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) {
				// 当设置 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.contractNo) {
						this.$refs.uToast.show({
							type: 'error',
							message: "合同未签订不能暂存！"
						})
						return
					}
					this.alertTitle = '确定暂存装车信息？'
				} else {
					this.alertTitle = '确定提交装车信息？'
				}
				this.isShowAlert = true
				this.detailData.statusFlag = type
			},
			confirmClick() {
				this.isShowAlert = false
				//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 = {}
				uni.showLoading({
					title: '加载中'
				})
				this.$request.baseRequest('post', '/carrierInfo/cargoOwnerLoadingAdd', {
						id: this.id,
						loadingFlag: 1,
						flag: 1
					}).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							let _title = ''
							if (this.detailData.statusFlag == 1) {
								_title = '暂存成功！'
							} else {
								_title = '提交成功！'
							}
							uni.navigateBack({
								delta:1
							})
						}else{
							uni.hideLoading()
							uni.$u.toast(res.message);
						}
					})
					.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>