zhywpt-sp/applyCard/car-release.vue

<template>
	<navBar title="行驶证信息上传"></navBar>
	<navBgCar></navBgCar>
	<view class="content">
		<view class="item-tips">
			<view class="title"> 上传后请核对识别信息 </view>
			<view class="tip"> 如有错误请及时手动修改 </view>
		</view>
		<view class="picture-wrapper" @click="cardImageOcr('1')">
			<view class="bg">
				<view class="">
					<view class="name"> 行驶证主页 </view>
					<view class="value"> 上传行驶证的主页 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>

				<image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-zhu.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.vehPosImgUrl)"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="cardImageOcr('2')">
			<view class="bg">
				<view class="">
					<view class="name"> 行驶证副页 </view>
					<view class="value"> 上传行驶证的副页 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-fu.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.vehNegImgUrl)"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="cardFileImageUpdate()">
			<view class="bg">
				<view class="">
					<view class="name"> 车头照 </view>
					<view class="value"> 上传汽车的车头照片 </view>
					<view class="tip">
						<view class="tip-value"> 拍摄规范 </view>
					</view>
				</view>
				<image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}applyCard/chetou.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.vehBodyUrl)"></image>
			</view>
		</view>
		<view class="shibie-wrapper">
			<view class="title"> 识别内容如下 </view>
			<view class="">
				<u-form label-width="200" :model="state.form" ref="uForm">
					<u-form-item label="车牌号">
						<u-input inputAlign="right" placeholder='请输入车牌号' v-model="state.form.vehicleIdNum" />
					</u-form-item>

					<u-form-item label="所有人">
						<u-input inputAlign="right" placeholder='请输入所有人' v-model="state.form.man" />
					</u-form-item>
					<u-form-item label="车辆类型">
						<u-input inputAlign="right" placeholder='请输入车辆类型' v-model="state.form.vehicleType" />
					</u-form-item>
					<u-form-item label="使用性质">
						<u-input inputAlign="right" placeholder='请输入使用性质' v-model="state.form.character" />
					</u-form-item>
					<u-form-item label="车辆识别代号">
						<u-input inputAlign="right" placeholder='请输入车辆识别代号' v-model="state.form.vin" />
					</u-form-item>
					<u-form-item label="发动机号码">
						<u-input inputAlign="right" placeholder='请输入发动机号码' v-model="state.form.engineNum" />
					</u-form-item>

					<u-form-item label="注册日期">
						<u-input inputAlign="right" placeholder='请输入注册日期' v-model="state.form.register" />
					</u-form-item>
					<u-form-item label="发证日期">
						<u-input inputAlign="right" placeholder='请输入发证日期' v-model="state.form.issueDate" />
					</u-form-item>
					<u-form-item label="核定载人数">
						<u-input inputAlign="right" placeholder='请输入核定载人数' v-model="state.form.approvedCount" />
					</u-form-item>
					<u-form-item label="整备质量">
						<u-input inputAlign="right" placeholder='请输入整备质量' v-model="state.form.maintenaceMass" />
					</u-form-item>
					<u-form-item label="外廊尺寸">
						<u-input inputAlign="right" placeholder='请输入外廊尺寸' v-model="state.form.vehicleDimensions" />
					</u-form-item>
					<u-form-item label="总质量">
						<u-input inputAlign="right" placeholder='请输入总质量' v-model="state.form.totalMass" />
					</u-form-item>
					<u-form-item label="车辆用户类型">
						<u-input @click="state.actionSheetShow = true" placeholder='请输入车辆用户类型' inputAlign="right"
							v-model="state.form.useUserTypeName" height='38' type='textarea' :autoHeight='true' />
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="green-tip">
			如识别信息有误，请手动修改，确认无误后，点击下一步！
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">
				下一步
			</button>
		</view>
		<!-- 	<u-select v-model="state.actionSheetShow" :list="state.actionSheetList" @confirm="selectConfirm"></u-select> -->
		<u-action-sheet @click="selectConfirm" :list="state.actionSheetList" v-model="state.actionSheetShow">
		</u-action-sheet>

		<u-popup mode="bottom" v-model="state.show">
			<view v-if="state.data.transferLogs&&state.data.transferLogs.length" class="">
				<view class="bettwen-center">
					<view style="padding: 20rpx;" class="title">
						选择卡签
					</view>
					<view class="goto">
						直接跳过，不使用此套卡签
					</view>
				</view>
				<view @click="guohuAction(item)" class="card" v-for="(item,index) in state.data.transferLogs"
					:key="index" style="margin-top: 30rpx;margin-bottom: 30rpx;">
					<view v-if="item.status==='WAITING'" class="card-left">
						<image :src="`${$imgUrl}card2.png`" mode=""></image>
						<view class="card-center">
							<view class="flex">
								<view class="">
									卡号：
								</view>
								<view class="card-center-head">
									{{item.cardId}}
								</view>
							</view>
							<view style="margin-top: 10rpx;" class="flex">
								<view class="">
									OBU编号：
								</view>
								<view class="card-center-head">
									{{item.obuId}}
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";
	import navBgCar from "./components/nav-bg-car4";
	import navBar from "../components/nav-bar/nav-bar2.vue";
	import {
		pathToBase64
	} from "@/utils/util/imageTool.js";
	import {
		etcCarCardInfoSubmit,
		etcCarOcrCard,
		fileUpload,
		queryGuoHuJianCe,
		queryGuoHuCaoZuo
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";

	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		getObuStatus
	} from "@/datas/obuStatus.js";

	import {
		getEtcCardStatus
	} from "@/datas/etcCardStatus.js";
	import {
		getItem
	} from "@/utils/storage";
	const savaHandle = () => {

		state.form.vehicleId =
			state.form.vehicleIdNum + "_" + state.vehiclePlateColor;
		const options = {
			type: 2,
			data: state.form,
			method: "POST",
			showLoading: true,
		};
		request(etcCarCardInfoSubmit, options)
			.then((res) => {
				const data = stringToJson(res.bizContent);
				queryGuoHuJianCeAction().then(value => {
					if (value.transferLogs && value.transferLogs.length > 0) {
						state.data.transferLogs = value.transferLogs
						state.show = true;
					} else {
						uni.navigateTo({
							// url: `/applyCard/choice-product?orderId=${state.form.orderId}`,
							url: `/applyCard/release-products?orderId=${state.form.orderId}&clientFee=${getItem('clientFee')}&&id=${getItem('productId')}`,
						});
					}
				})

			})
			.catch((res) => {
				console.log(res);
			});
	};

	const selectConfirm = (index: any) => {
		console.log(index)
		state.form.useUserType = state.actionSheetList[index].value
		state.form.useUserTypeName = state.actionSheetList[index].text
	};

	const cardFileImageUpdate = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function(res) {
				pathToBase64(res.tempFilePaths[0])
					.then((path) => {
						var data = {
							fileBase64: path,
						};

						const options = {
							type: 2,
							data: data,
							method: "POST",
							showLoading: true,
						};
						request(fileUpload, options).then((res) => {
							const data = stringToJson(res.bizContent);
							console.log(data);
							state.form.vehBodyUrl = data.data.url;
						});
					})
					.catch((error) => {});
			},
		});
	};

	const state = reactive({
		data: {
			transferLogs: [],
		},
		actionSheetShow: false,
		actionSheetList: [{
				text: "普通车",
				value: 0,
			},
			{
				text: "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱",
				value: 24,
			},
			{
				text: "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车",
				value: 27,
			},
			{
				text: '道路运输证经营范围除“货物专用运输 (集装 箱)"外，还有“普通货运”等其他项目的牵引车办理J2类型集装箱',
				value: 28,
			},
		],
		form: {
			orderId: "", //订单ID
			man: "", //所有人
			character: "", //使用性质
			register: "", //注册日期

			customerId: "", //用户编号
			vehicleId: "",
			vehicleIdNum: "", //车牌编号
			issueDate: "", //发证日期
			vehPosImgUrl: "", //行驶证正面
			vehNegImgUrl: "", //行驶证证反面
			type: "0", //0，客车 1.货车
			useUserType: 0, //车辆用户类型
			useUserTypeName: "普通车",
			vehicleSign: 2, //前/后装标识
			vin: "", //车辆识别代号
			engineNum: "", //发动机号码
			vehicleType: "", //车辆类型
			vehicleModel: "", //行驶证品牌型号
			approvedCount: undefined, //核定人数
			totalMass: undefined, //总质量
			maintenaceMass: undefined, //整备质量
			permittedWeight: "", //核定载质量
			vehicleDimensions: "", //车辆尺寸
			permittedTowWeight: "", //准牵引总质量
			axleCount: "", //车轴数
			ownerName: "", //车主姓名
			ownerIdType: "", //车主证件类型
			ownerIdNum: "", //车主证件号码
			ownPosImgUrl: "", //车主证件正面图片
			ownNegImgUrl: "", //车主证件反面图片
			agreementId: "", //签约编号
			channelId: "5201018892300000001", //编号渠道
			scenePayType: "", //
			transportIdNum: "", //道路运输证编号
			licenseIdNum: "", //经营许可证编号
			vehBodyUrl: "", //车身照片
			proxyUrl: "", //委托书地址
		},
		vehiclePlateColor: undefined,
		orderId: "",
		show: false,
		isMyPeopple: true,
	});
	onLoad((option: any) => {
		state.form.orderId = option.orderId;
		state.vehiclePlateColor = option.vehiclePlateColor;
	});
	//orc接口调用
	const cardImageOcr = (val: any) => {
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function(res) {
				pathToBase64(res.tempFilePaths[0])
					.then((path) => {
						var data = {
							source: "1",
							agencyId: "52010106004",
							imageType: imageType,
							fileName: res.tempFilePaths[0],
							imageBase64: path,
						};

						const options = {
							type: 2,
							data: data,
							method: "POST",
							showLoading: true,
						};
						request(etcCarOcrCard, options).then((res) => {
							const data = stringToJson(res.bizContent);
							console.log(data);
							if (val === "1") {
								state.form.vehicleIdNum = data.plate_a;
								state.form.man = data.man;
								state.form.vehicleType = data.vehicle;
								state.form.character = data.character;
								state.form.vin = data.vin;
								state.form.engineNum = data.engine;
								state.form.register = data.register;
								state.form.issueDate = data.issue;
								state.form.vehPosImgUrl = data.imageUrl;
								state.form.vehicleModel = data.model;
							} else {
								state.form.approvedCount = parseFloat(data.apc);
								state.form.maintenaceMass = parseFloat(data.unladen);
								state.form.vehicleDimensions = data.overall;
								state.form.totalMass = parseFloat(data.gross);
								state.form.vehNegImgUrl = data.imageUrl;
							}
						});
					})
					.catch((error) => {});
			},
		});
	};

	const queryGuoHuJianCeAction = () => {
		var data = {
			orderId: state.form.orderId
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

		return new Promise(async (resolve, reject) => {
			const res = await request(queryGuoHuJianCe, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}

	const guohuAction = (val) => {
		var data = {
			orderId: state.form.orderId,
			serviceType: 'USE',
			obuId: val.obuId,
			cardId: val.cardId

		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

		return new Promise(async (resolve, reject) => {
			const res = await request(queryGuoHuCaoZuo, options);
			const data = stringToJson(res.bizContent);
			state.show = false
			uni.navigateTo({
				url: `/applyCard/choice-product?orderId=${state.form.orderId}`,
			});
		}).catch((error) => {
			reject(error);
		});
	}

	//替换图片地址
	const strReplace = (str: string) => {
		return str.replace('192.168.101.145:9000', '222.85.144.89:19002')
	}
</script>

<style lang="scss" scoped>
	.goto {
		margin-right: 20rpx;
		padding: 10rpx;
		color: #00B38B;
		border: 1rpx solid #00B38B;
		border-radius: 20rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.bettwen-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card {
		margin: 20rpx;
		height: 150rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.card-left {
			display: flex;
			align-items: center;

			image {
				width: 100rpx;
				height: 90rpx;
			}

			.card-center {
				margin-left: 30rpx;

				.card-center-head {
					font-size: 32rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #333333;
				}

				.tips {
					font-size: 26rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #666666;

					.tips-card {
						width: 70rpx;
						height: 40rpx;
						background: #D3F2EF;
						border-radius: 6rpx;
						font-size: 20rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #0A8F8A;
						padding: 5rpx 10rpx;
						margin-left: 20rpx;
					}
				}
			}
		}

		.choose-item {
			margin-right: 20rpx;
			width: 50rpx;
			height: 50rpx;
			border: 1rpx solid #00B38B;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

			.active {
				width: 38rpx;
				height: 38rpx;
				background: #00B38B;
				border-radius: 50%;
			}
		}
	}

	.content {
		position: relative;
		margin-top: -50rpx;
		padding: 0rpx 30rpx;
		position: relative;

		.img-pos {
			position: absolute;
			left: 270rpx;
			top: -38rpx;
			right: 50rpx;

			.img-flex {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.car-img {
					width: 86rpx;
					height: 42rpx;
				}

				.flag-img {
					width: 30rpx;
					height: 35rpx;
				}
			}
		}

		.action {
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-bottom: 30rpx;

			.button {
				height: 80rpx;
				background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 80rpx;
			}
		}

		.item-tips {
			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 24rpx;
			}

			.tip {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
		}

		.picture-wrapper {
			margin-top: 40rpx;

			.bg {
				background: #ffffff;
				box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
				border-radius: 20rpx;
				padding: 40rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;

				.name {
					font-size: 34rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
					line-height: 34rpx;
				}

				.value {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
				}

				.tip {
					margin-top: 20rpx;
					text-align: center;
					width: 110rpx;
					height: 40rpx;
					background: rgba(33, 190, 177, 0.2);
					border-radius: 6rpx;

					.tip-value {
						font-size: 20rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #0a8f8a;
						line-height: 40rpx;
						opacity: 1;
					}
				}
			}

			.icon {
				width: 294rpx;
				height: 188rpx;
			}
		}

		.shibie-wrapper {
			margin-top: 60rpx;

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
			}
		}

		.buchong-wrapper {
			margin-top: 60rpx;

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
			}
		}

		.green-tip {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #00b38b;
			line-height: 24rpx;
			margin-bottom: 60rpx;
		}
	}
</style>