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="">{{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>
				<input class="car-uumber input" v-model='detailData.carrierInfo.carNo' @click.stop="handleShowKeyboard"
					:disabled="true" placeholder="输入车牌号" name="input"></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.carrierInfo.estimatedFreight}} -->
				<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>
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="3"
					:size-type="['compressed']" @on-success="getImgUrl" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :sourceType='sourceType' :before-upload="filterFileType"
					@on-progress="onProgress"></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"></u-calendar>
	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	export default {
		components: {
			upload
		},
		data() {
			return {
				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: '',
			}
		},
		onLoad(options) {
			debugger
			// #ifdef APP-PLUS
			this.getLngLat();
			// #endif
			console.log(options)
			this.id = options.id
			this.getInfo()
			// this.detailData = options;
			// CYHT20220317000001


		},
		methods: {
			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 = 'CYHT20220317000001'
						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
			},
			getImgUrl(res) {
				this.detailData.carrierInfo.loadingImg += res + ','
				console.log(res)
				console.log('------------res-----------')
			},
			// onError(error) {
			// 	alert(error)
			// 	console.log('------------error-----------')
			// 	console.log(error)
			// },
			onRemove(index) {},
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			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.carrierInfo.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.validate()
				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.statusFlag = this.detailData.statusFlag
				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,
									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('====确认装车开启连续定位====', JSON.stringify(res));
									//判断缓存数据条数，超过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>