zhywpt-sp/after-sale/rescind-carId/rescind-carId-select.vue

<template>
	<view class="content-wrap">
		<!-- 		<view @click="tabChange(true)">
			<view :class="state.isMyPeopple ? 'big' : 'nomal'"> 本人车辆 </view>
			<view :class="state.isMyPeopple ? 'tip' : ''"> </view>
		</view>
		<view @click="tabChange(false)" style="margin-left: 60rpx" class="">
			<view :class="state.isMyPeopple ? 'nomal' : 'big'"> 他人车辆 </view>
			<view :class="state.isMyPeopple ? '' : 'tip'"> </view>
		</view> -->
	</view>
	<!-- 	<view v-if="state.isMyPeopple" class="content">
		<view class="item" v-for="(item, i) in list" :key="i">
			<view class="iten-left">
				<image :src="`${$imgUrl}che.png`" mode=""></image>
				<text>{{ item.name }}</text>
			</view>
			<view class="choose-item" @click="choose(i, item)">
				<view class="active" v-if="flag == i"> </view>
			</view>
		</view>
	</view> -->

	<view class="content">
		<view class="title"> 车主信息 </view>
		<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.userPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
				</image>
				<image v-else class="icon" :src="state.form.userPosImgUrl"></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.userNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/guohui.png`">
				</image>
				<image v-else class="icon" :src="state.form.userNegImgUrl"></image>
			</view>
		</view>

		<view class="shibie-wrapper">
			<!-- 			<view class="title"> 识别内容如下 </view>
			<u-form label-width="200" :model="state.form" ref="uForm">
				<u-form-item label="姓名">
					<u-input v-model="state.form.userName" />
				</u-form-item>

				<u-form-item label="性别">
					<u-input v-model="state.form.gender" type="select" />
				</u-form-item>
				<u-form-item label="身份证号">
					<u-input v-model="state.form.userIdNum" />
				</u-form-item>
				<u-form-item label="证件有效期">
					<u-input v-model="state.form.tmerValidity" type="select" />
				</u-form-item>
				<u-form-item label="地址">
					<u-input v-model="state.form.address" />
				</u-form-item>
			</u-form> -->
		</view>
		<view style="margin-top: 30rpx" class="title"> 行驶证信息 </view>
		<view class="item-tips">
			<view class="title"> 上传后请核对识别信息 </view>
			<view class="tip"> 如有错误请及时手动修改 </view>
		</view>
		<view class="picture-wrapper" @click="cardDbImageOcr('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="state.form.vehPosImgUrl"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="cardDbImageOcr('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="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.FormData.peopleVehicleImgUrl" class="icon" :src="`${$imgUrl}applyCard/chetou.png`">
				</image>
				<image v-else class="icon" :src="state.FormData.peopleVehicleImgUrl"></image>
			</view>
		</view>
		<view class="shibie-wrapper">
			<view class="title"> 识别内容如下 </view>
			<u-form label-width="200" :model="state.form" ref="uForm">
				<u-form-item label="车牌号">
					<u-input v-model="state.form.vehicleId" />
				</u-form-item>
				<u-form-item label="车牌颜色">
					<u-input v-model="state.form.caridCorlor" type="select" @click="show1 = true" />
				</u-form-item>
				<!-- 				<u-form-item label="所有人">
					<u-input v-model="state.form.man" />
				</u-form-item>
				<u-form-item label="车辆类型">
					<u-input v-model="state.form.vehicleType" />
				</u-form-item>
				<u-form-item label="使用性质">
					<u-input v-model="state.form.character" />
				</u-form-item>
				<u-form-item label="车辆识别代码">
					<u-input v-model="state.form.vin" />
				</u-form-item>
				<u-form-item label="发动机号码">
					<u-input v-model="state.form.engineNum" />
				</u-form-item>

				<u-form-item label="注册日期">
					<u-input v-model="state.form.register" />
				</u-form-item>
				<u-form-item label="发证日期">
					<u-input v-model="state.form.issueDate" />
				</u-form-item>
				<u-form-item label="核定载人数">
					<u-input v-model="state.form.approvedCount" />
				</u-form-item>
				<u-form-item label="整备质量">
					<u-input v-model="state.form.maintenaceMass" />
				</u-form-item>
				<u-form-item label="外廓尺寸">
					<u-input v-model="state.form.vehicleDimensions" />
				</u-form-item>
				<u-form-item label="总质量">
					<u-input v-model="state.form.totalMass" />
				</u-form-item> -->
			</u-form>
		</view>

		<view class="green-tip">
			如识别信息有误，请手动修改，确认无误后，点击下一步！
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">
				下一步
			</button>
		</view>
		<!-- 选择车牌颜色 -->
		<u-select v-model="show1" :list="state.actionSheetList" @confirm="selectConfirm"></u-select>
	</view>
</template>

<script setup lang="ts">
	import selectCar from "./select-car.vue";
	import {
		pathToBase64
	} from "@/utils/image-tools/index.js";
	import {
		reactive
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		etcOcrCard,
		etcUserCardInfoSubmit,
		fileUpload,
		etcCarOcrCard,
		relieveCarId,
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		getItem
	} from "@/utils/storage.ts"
	import {
		stringToJson
	} from "@/utils/network/encryption";
	import navBar from "../../components/nav-bar/nav-bar2.vue";

	// ##################

	import {
		ref
	} from "vue";
	import {
		navTo
	} from "../../utils/utils";
	// const list = reactive([{
	// 		name: "A12345",
	// 	},
	// 	{
	// 		name: "B12345",
	// 	},
	// 	{
	// 		name: "C12345",
	// 	},
	// ]);
	// const flag = ref("0");

	// const choose = (i, item) => {
	// 	flag.value = i;
	// 	console.log("选择得数据", item);
	// 	navTo("/after-sale/rescind-carId/base-change-people");
	// };

	// ######################


	const show1 = ref(false)
	const state = reactive({
		ocrData: {
			name: "",
			gender: "",
			idno: "",
			address: "",
			begindate: "",
			enddate: "",
			tel: "",
			tmerValidity: "",
		},
		form: {
			caridCorlor: "", //车牌颜色
			userName: "", //开户人姓名
			userIdNum: "", //用户证件号码
			userPosImgUrl: "", //身份证正面
			userNegImgUrl: "", //身份证反面
			address: "", //开户人地址
			gender: "",
			tmerValidity: "",
			man: "", //所有人
			character: "", //使用性质
			register: "", //注册日期
			vehBodyUrl: '', //人车合照
			customerId: "", //用户编号
			vehicleId: "", //车牌编号
			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",
		},
		orderId: "",
		isMyPeopple: true,
		buchongData: {
			conmpany: "李某一",
			type: "居民身份证",
			card: "23728347626342332",
			phone: "",
		},
		actionSheetList: [{
				label: "蓝色",
				value: 0,
			}, {
				label: "黄色",
				value: 1,
			},
			{
				label: "黑色",
				value: 2,
			},
			{
				label: "白色",
				value: 3,
			},
			{
				label: "渐变绿色",
				value: 4,
			},
			{
				label: "黄绿双拼色",
				value: 5,
			},
			{
				label: "蓝白渐变色",
				value: 6,
			},
			{
				label: "未确定",
				value: 9,
			},
			{
				label: "绿色",
				value: 11,
			},
			{
				label: "红色",
				value: 12,
			},
		],
		FormData: {
			vehiclePlate: '',
			vehiclePlatecolor: '',
			openid: getItem('openId'),
			idcardFrontImgUrl: '',
			idcardBacktImgUrl: '',
			vehPosImgUrl: '',
			vehNegImgUrl: '',
			peopleVehicleImgUrl: '',
			commitmentUrl: '',
			mobile: '',
			code: ''
		}
	});
	const savaHandle = () => {
		let data = JSON.stringify(state.FormData)
		navTo(`/after-sale/rescind-carId/verification?fromData=${data}`);


		console.log(JSON.stringify(state.FormData));
		// var data = state.form
		// const options = {
		// 	type: 2,
		// 	data: data,
		// 	method: 'POST',
		// 	showLoading: true,
		// }
		// request(relieveCarId, options).then((res) => {
		// 	const data = stringToJson(res.bizContent);

		// })
	};

	const selectConfirm = (item: any) => {
		console.log(item);
		state.FormData.vehiclePlatecolor = item[0].value
		state.form.caridCorlor = item[0].label
	};

	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, "didid");
							state.FormData.peopleVehicleImgUrl = data.data.url;
						});
					})
					.catch((error) => {});
			},
		});
	};

	// //tab切换
	// const tabChange = (val: any) => {
	// 	if (val) {
	// 		state.isMyPeopple = true;
	// 	} else {
	// 		state.isMyPeopple = false;
	// 	}
	// 	state.form = {
	// 		orderId: state.orderId, //订单ID
	// 		userName: "", //开户人姓名
	// 		userIdType: "101", //用户证件类型 101//身份证
	// 		userIdNum: "", //用户证件号码
	// 		userPosImgUrl: "", //身份证正面
	// 		userNegImgUrl: "", //身份证反面
	// 		tel: "", //开户人手机号
	// 		address: "", //开户人地址
	// 		sceneType: "", //用户协议支撑服务场景（发行服务机构和用户签订的协议）
	// 		channelId: "", //渠道id
	// 		gender: "",
	// 		customerIdVld: "",
	// 		agentName: "",
	// 		agentgender: "",
	// 		agentIdType: "101",
	// 		agentIdNum: "",
	// 		agentPosImgUrl: "",
	// 		agentNegImgUrl: "",
	// 		proxyUrl: "",
	// 		agentAddress: "",
	// 		tmerValidity: "",
	// 	};
	// };
	onLoad((option: any) => {
		state.form.orderId = option.orderId;
		state.orderId = option.orderId;
	});

	const cardDbImageOcr = (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, "didi");
							if (val === "1") {
								state.form.vehicleId = 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;

								state.FormData.vehiclePlate = data.plate_a
								state.FormData.vehPosImgUrl = data.imageUrl
							} 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;

								state.FormData.vehNegImgUrl = data.imageUrl
							}
						});
					})
					.catch((error) => {});
			},
		});
	};
	//orc接口调用
	const cardImageOcr = (val: any) => {
		console.log("点击了");
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function(res) {
				console.log(res);
				pathToBase64(res.tempFilePaths[0])
					.then((path) => {
						console.log(path);
						console.log("哈哈哈");
						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(etcOcrCard, options).then((res) => {

							const data = stringToJson(res.bizContent);
							console.log(data, "didi");
							if (val === "1") {
								state.form.userName = data.name;
								state.form.gender = data.gender;
								state.form.userIdNum = data.idno;
								state.form.userPosImgUrl = data.imageUrl;
								state.form.address = data.address;

								state.FormData.idcardFrontImgUrl = data.imageUrl
							} else {
								state.form.tmerValidity = data.begindate + "-" + data.enddate;
								state.form.userNegImgUrl = data.imageUrl;

								state.FormData.idcardBacktImgUrl = data.imageUrl
							}
						});
					})
					.catch((error) => {});
			},
		});
	};
</script>

<style lang="scss" scoped>
	.title {
		font-size: 35rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #000000;
		line-height: 80rpx;
		margin-bottom: 10rpx;
	}

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

		.big {
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			line-height: 24rpx;
		}

		.nomal {
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
			line-height: 24rpx;
		}

		.tip {
			margin-top: -5px;
			width: 117rpx;
			height: 16rpx;
			background: #00b38b;
			opacity: 0.3;
		}
	}

	.content {
		padding: 50rpx 30rpx 50rpx 30rpx;

		.item {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 130rpx;
			background: #ffffff;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			margin-bottom: 30rpx;

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

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

				text {
					margin-left: 20rpx;
					font-size: 32rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #333333;
				}
			}

			.choose-item {
				width: 44rpx;
				height: 44rpx;
				background: #ffffff;
				border: 2rpx solid #00b38b;
				border-radius: 50%;
				margin-right: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: content-box;
			}

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

		.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;
			}

			::v-deep .u-form-item {
				border-bottom: 1rpx solid #DCDCDC;
				padding: 10rpx 0;
			}
		}

		.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>