wangluohuoyun-app/pages/order/confirmUnloading.vue

<!-- 确认装车 -->
<template>
	<view class="content">
		<view class="content2">
			<view class="level2-title">基本信息</view>
			<view class='row-between'>
				<view class="row-left-text">订单编号</view>
				<view class="row-right-text">{{detailData.orderNo}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">货主</view>
				<view class="row-right-text">{{detailData.cargoOwner}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">货主单位</view>
				<view class="row-right-text">{{detailData.compName?detailData.compName:'个人货主'}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">发货地</view>
				<view class="row-right-text place">
					{{detailData.sendPrivate}}{{detailData.sendCity}}{{detailData.sendArea}}{{detailData.sendDetailedAddress}}
				</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">卸货地</view>
				<view class="row-right-text place">
					{{detailData.unloadPrivate}}{{detailData.unloadCity}}{{detailData.unloadArea}}{{detailData.unloadDetailedAddress}}
				</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">货名</view>
				<view class="row-right-text">{{detailData.goodsName}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">运费</view>
				<view class="row-right-text">{{detailData.freightInfo.freight}}{{detailData.billingMethod==0?'元/吨':'元/车'}}</view>
			</view>

		</view>
		<view class="content2">
			<view class="level2-title">卸车信息</view>
			<view class='row-between'>
				<view class="row-left-text">车牌号</view>
				<view class="row-right-text">{{detailData.carrierInfo.carNo}}</view>
			</view>
			<!-- 	<view class='row-between'>
				<view class="row-left-text">卸车日期</view>
				<view class="row-right-text">{{detailData.carrierInfo.unloadingDate}}</view>
			</view> -->
			<view class="row-between">
				<view class="left-text">卸车日期</view>
				<view class="" @click="selectUnloadingDate">
					{{detailData.carrierInfo.unloadingDate?detailData.carrierInfo.unloadingDate:'选择卸车日期'}}
				</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">合计应付运费（元）</view>
				
				<input class="totalFreight-input" placeholder="输入合计应付运费" v-model="detailData.freightInfo.freight"
					type="number" v-if="detailData.billingMethod==1"/>
					<input class="totalFreight-input" placeholder="输入合计应付运费" v-model="detailData.carrierInfo.totalFreight"
						type="number" v-if="detailData.billingMethod==0"/>
			</view>
			<view class='row-between'>
				<view class="row-left-text">定位</view>
				<view class="flex align-center">
					{{detailData.carrierInfo.unloadCity}}{{detailData.carrierInfo.unloadArea}}
					<view class="sx-style" @click.stop="getLngLat()">刷新</view>
				</view>

			</view>
			<view class='s-flex'>
				<view class="row-left-text" style="margin:20rpx 0;">上传卸车照片（1-3张）</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>
		<u-picker :show="isShowValidity" ref="uPicker" :columns="validityPeriod" @confirm="confirmValidityPeriod"
			:closeOnClickOverlay='true' @close='isShowValidity=false' @cancel='isShowValidity=false'>
		</u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	let that;
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				imgList: [],
				fileList1: [],
				isShowValidity: false,
				validityPeriod: [],
				sourceType: ['camera'],
				detailData: {
					addressUrl: ''
				},
				action: this.$helper.ossUploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				isAdd: true,
				isShowAlert: false,
				alertContent: '',
				alertTitle: '',
			}
		},
		onLoad(options) {
			console.log('------------')
			console.log(options)
			this.detailData = JSON.parse(options.obj)
			this.detailData.carrierInfo = {
				carNo: '',
				unloadingDate: '',
				estimatedFreight: '',
				unloadingAreaLongitude: '',
				unloadingAreaLatitude: '',
				unloadCity: '',
				unloadArea: '',
				unloadingImg: '',
				totalFreight: '',
				id: this.detailData.carrierId,

			}
			this.validityPeriod = this.$helper.makeValidityPeriod()
			// #ifdef APP-PLUS
			this.getLngLat();
			// #endif
			this.getNowTime()
		},
		methods: {
			getNowTime() {
				let now = new Date();
				let year = now.getFullYear(); //得到年份
				let month = now.getMonth(); //得到月份
				let date = now.getDate(); //得到日期
				month = month + 1;
				month = month.toString().padStart(2, "0");
				date = date.toString().padStart(2, "0");
				let defaultDate = `${year}-${month}-${date}`
				this.detailData.carrierInfo.unloadingDate = defaultDate
				// this.$forceUpdate()
			},
			selectUnloadingDate() {
				this.isShowValidity = true
			},
			getLngLat() {
				uni.showLoading({
					title: '获取定位中',
					mask: true
				})
				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服务页面
											}
										}
									}
								});
							}
						}
					}
				});
			},
			alertBtn() {
				// uni.navigateTo({
				// 	url: '/pages/public/login'
				// })
			},
			cancelClick() {
				this.isShowAlert = false
			},
			getImgUrl(res) {
				this.detailData.carrierInfo.unloadingImg += 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;
				}
			},
			// 新增图片
			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) {
				console.log(type)
				if (type == 1) {
					this.alertContent = '确定暂存卸车信息？'
				} else {
					this.alertContent = '确定提交卸车信息？'
				}
				this.isShowAlert = true
				this.detailData.statusFlag = type
			},
			confirmClick() {
				if (this.detailData.statusFlag == 1) {
					delete this.detailData.carrierInfo.unloadingAreaLongitude;
					delete this.detailData.carrierInfo.unloadingAreaLatitude;
					delete this.detailData.carrierInfo.unloadCity;
					delete this.detailData.carrierInfo.unloadArea;
				}
				this.detailData.carrierInfo.statusFlag = this.detailData.statusFlag
				this.detailData.carrierInfo.unloadingImg = this.imgList.toString()
				if (!this.detailData.carrierInfo.totalFreight) {
					uni.showToast({
						title: '运费不能为空！',
						duration: 2000,
						icon: "none",
					});
					return
				}
				if (
					this.detailData.carrierInfo.totalFreight < 0 || this.detailData.carrierInfo.totalFreight > 100000 || (
						String(this.detailData.carrierInfo.totalFreight).indexOf('.') != -1 && String(this.detailData
							.carrierInfo.totalFreight).length - (String(this.detailData.carrierInfo.totalFreight).indexOf(
							'.') + 1) > 2)
				) {
					uni.showToast({
						title: '运费输入错误！',
						duration: 2000,
						icon: "none",
					});
					return
				}
				if (!this.detailData.carrierInfo.unloadingImg) {
					uni.showToast({
						title: '卸车照片不能为空！',
						icon: "none",
						duration: 2000
					});
					return
				}
				this.isShowAlert = false
				uni.showLoading({
					title:'加载中'
				})
				
				this.$request.baseRequest('post', '/carrierInfo/unLoadingAdd', this.detailData.carrierInfo).then(res => {
						if (res.code == 200) {
							let _title = ''
							if (this.detailData.statusFlag == 1) {
								_title = '暂存成功！'
							} else {
								_title = '提交成功！'
							}
							uni.hideLoading()
							this.$refs.uToast.show({
								type: 'success',
								message: _title,
								complete() {
									uni.hideLoading()
									uni.switchTab({
										url: '/pages/order/index'
									})
								}
							})
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
				console.log('提交')
			},
			confirmValidityPeriod(e) {
				console.log('confirm', e)
				this.detailData.carrierInfo.unloadingDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]

				this.isShowValidity = false
			},
		},
	}
</script>

<style scoped lang="scss">
	.content {
		.row-left-text {
			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;
	}

	.totalFreight-input {
		text-align: right;
	}
</style>