guzijian / garbage-removal · Files

<template>
	<view class="scan-detail-container">
		<view class="scan-detail-box">
			<view class="scan-time">
				<view class="scan-label">
					分发时间：
				</view>
				<view class="scan-time">
					{{ details.garCreateTime }}
				</view>

			</view>
			<view class="scan-time">
				<view class="scan-label">
					司机姓名：
				</view>
				<view class="scan-time">
					{{ details.garOrderHandlerName }}
				</view>
			</view>
			<view class="scan-time">
				<view class="scan-label">
					司机电话：
				</view>
				<view class="scan-time" style="color: #000000">
					{{ details.garOrderHandlerTel }}
				</view>
			</view>
			<view class="scan-time">
				<view class="scan-label">
					所属公司：
				</view>
				<view class="scan-time">
					{{ details.garOrderCompanyName }}
				</view>
			</view>
		</view>
		<view class="scan-submit-info">
			<view class="scan-submit-title-box">
				<up-badge :isDot="true" type="success"></up-badge><text>提交信息</text>
			</view>
			<view class="scan-car-num">
				<view class="scan-car-num-label">
					车牌号
				</view>
				<view class="scan-car-num-content">
					{{ details.garHandlerCarCode }}
				</view>
			</view>
			<view class="scan-car-num">
				<view class="scan-car-num-label">
					车辆载重
				</view>
				<view class="scan-car-num-content">
					<up-input :disabled="!isDeletable" placeholder="请输入数字,单位吨" border="surround"
						v-model="details.garCarryingWeight" @change="handlerInputChange"></up-input>
				</view>
			</view>
			<view class="scan-upload-fill-image-box">
				<view class="scan-upload-fill-image-label">
					<view>
						全景照片
					</view>
					<view v-if="isDeletable">
						{{ fileList.length }}/{{ maxCount }}
					</view>
				</view>
				<view class="scan-upload-fill-image-btn" v-if="maxCount">
					<u-upload width="200" height="150" :deletable="isDeletable" :fileList="fileList"
						@afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="maxCount"
						:previewFullImage="true"></u-upload>
				</view>
			</view>
		</view>
		<view class="scan-submit-button-box" v-if="isNew">
			<view class="scan-submit-button-btn">
				<u-button type="primary" @tap="handlerSubmit" text="确认"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		uploadFilePromise
	} from '@/apis/common.js';
	import {
		askTransport,
		scanDetail
	} from '@/apis/order.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		computed,
		ref,
		onMounted
	} from 'vue';
	const details = ref({});
	const fileList = ref([]);
	const isDeletable = ref(false);
	const maxCount = computed(() => isDeletable.value ? 3 : fileList.value.length);
	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};


	const location = ref({});

	const takeLocalCallBack = (lngLat) => {
		const ll = lngLat.split(",");
		console.log(ll);
		location.value = {
			longitude: ll[0],
			latitude: ll[1]
		};
	}

	// 生命周期处理
	onMounted(() => {
		// 挂载全局回调
		window.takeLocationCallBack = takeLocalCallBack
	})

	const takeLocation = () => {
		console.log("获取定位信息");
		// 获取定位信息
		window.JsInterface.takeLocation();
	}


	const isNew = ref(false)
	// 新增图片
	const afterRead = async (event) => {
		// 获取定位信息
		takeLocation();
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		// 将blob转为file对象的方法
		function blobToFile(blob, fileName) {
			return new File([blob], fileName, {
				type: 'image/png'
			})
		}
		for (let i = 0; i < lists.length; i++) {
			// 获取blob对象
			fetch(lists[i].url)
				.then(response => response.blob())
				.then(blob => {
					// 将blob转换为file
					let fileN = blobToFile(blob, lists[i].name)
					// 上传file对象
					let requestPath = import.meta.env.VITE_BASE_URL + import.meta.env
						.VITE_BASE_FILE_UPLOAD_PREFIX;
					uploadFilePromise(requestPath, fileN).then(result => {
						let item = fileList.value[fileListLen];
						fileList.value.splice(fileListLen, 1, {
							...item,
							status: 'success',
							message: '',
							url: result.data.fileName,
						});
						fileListLen++;
					});

				})
		}
	};
	const handlerInputChange = (val) => {
		console.log(val);
	}
	const handlerSubmit = async () => {
		// 校验参数
		let params = {
			...details.value,
			fillImageList: fileList.value.map((item) => item.url),
			garOrderHandlerCompanyName: details.value.garOrderCompanyName,
			garOrderHandlerCompanyId: details.value.garOrderCompanyId,
			// 添加定位信息
			latitude: location.value.latitude,
			longitude: location.value.longitude
		}
		if (validateParams(params)) {
			await askTransport(params).then((res) => {
				console.log(res);
				if (res.data.code == 200) {
					uni.$u.toast("当前趟次记录完毕！")
				}
			}).catch((err) => {
				uni.$u.toast("当前趟次记录失败")
			})
			// 返回上级
			uni.navigateBack({
				delta: 1
			});
		}

	}

	const validateParams = (params) => {
		if (!params.garOrderHandlerName) {
			uni.$u.toast("请输入处理人姓名");
			return false;
		}
		if (!params.garOrderHandlerTel) {
			uni.$u.toast("请输入处理人电话");
			return false;
		}
		if (!params.garOrderCompanyName) {
			uni.$u.toast("请输入处理人单位");
			return false;
		}
		if (!params.garCarryingWeight) {
			uni.$u.toast("请输入车辆载重");
			return false;
		}
		if (!validateImage(params.fillImageList)) {
			return false;
		}

		if (typeof(location.value.latitude) === 'undefined') {
			console.log('定位获取失败', );
			uni.$u.toast("需要位置权限才能提交");
			return;
		}

		return true;
	}

	const validateImage = (fillImageList) => {
		if (fillImageList instanceof Array && fillImageList.length > 0) {
			for (let index = 0; index < fillImageList.length; index++) {
				const str = fillImageList[index];
				if (!str.includes("/profile/upload")) {
					uni.$u.toast("请等待图片上传~");
					return false;
				}
			}
			return true;
		}
		uni.$u.toast("请上传图片~");
		return false;
	}

	onLoad((options) => {
		if (options.data) {
			details.value = JSON.parse(decodeURIComponent(options.data));
			isDeletable.value = true;
			isNew.value = true;
		}
		if (options.garAskId) {
			// TODO query
			scanDetail(options.garAskId).then((res) => {
				console.log(res);
				details.value = res.data.data;
				details.value.garOrderCompanyName = details.value.garOrderHandlerCompanyName;
				fileList.value = details.value.fillImageList.map((item) => {
					return {
						url: import.meta.env.VITE_BASE_URL + item
					}
				})
			})
		}
	})
</script>

<style lang="scss" scoped>
	$l-h-8: 80rpx;

	.scan-detail-container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 20rpx;

		.scan-detail-box {
			background-color: white;
			margin-bottom: 40rpx;
			color: $u-main-color;

			.scan-time {
				display: flex;
				width: 100%;
				// 底部阴影 向内发散
				border-bottom: 1rpx solid #f5f5f5;
				line-height: 100rpx;
				align-items: center;

				.scan-label {
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.scan-time {
					width: 60%;
				}

				.scan-icon {
					width: 10%;
					display: flex;
				}
			}

		}

		.scan-submit-info {
			width: 100%;
			background-color: white;
			box-sizing: border-box;
			padding: 20rpx;
			color: $u-content-color;

			.scan-submit-title-box {
				display: flex;
				align-items: center;

				text {
					margin-left: 15rpx;
				}
			}

			.scan-car-num {
				display: flex;
				line-height: $l-h-8;
				align-items: center;

				.scan-car-num-label {
					width: 20%;
					// 文字不换行
					white-space: nowrap;
				}

				.scan-car-num-content {
					width: auto;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.scan-upload-fill-image-box {
				line-height: $l-h-8;
				width: 100%;

				.scan-upload-fill-image-label {
					display: flex;
					justify-content: space-between;
				}

				.scan-upload-fill-image-btn {}
			}
		}

		.scan-submit-button-box {
			margin-top: 40rpx;
			background-color: white;
			padding: 20rpx;
		}
	}
</style>