zhywpt-sp/subpackage/after-sale/transfer-ownership/transfer.vue

<template>
	<view class="container">
		<view class="form-data">
			<form @submit="formSubmit">
				<view class="form-item">
					<view class="item-container">
						<view class="item-title">
							新办单号:
						</view>
						<input class="item-content" type="text">
					</view>
				</view>
				<view class="form-item">
					<view class="item-container">
						<view class="item-title">
							原车牌号:
						</view>
						<input class="item-content" type="text">
					</view>
				</view>
				<view class="form-item">
					<view class="item-container">
						<view class="item-title">
							卡号：
						</view>
						<input class="item-content" v-model="formData.cardId" type="text">
					</view>
				</view>
				<view class="form-item">
					<view class="item-container">
						<view class="item-title">
							卡状态:
						</view>
						<input class="item-content" type="text">
					</view>
				</view>
				<view class="form-item">
					<view class="item-container">
						<view class="item-title">
							OBU编号:
						</view>
						<input class="item-content" type="text">
					</view>
				</view>
				<view class="form-item">
					<view class="item-container">
						<view class="item-title">
							OBU状态:
						</view>
						<input class="item-content" type="text">
					</view>
				</view>
				<view class="form-item nob">
					<view class="item-container">
						<view class="item-title required">
							过户类型:
						</view>
						<radio-group name="radio" class="radio-group">
							<view class="radio-item" v-for="(item, index) in radioList" :key="item.value">
								<label>
									<radio style="transform: scale(0.8);" :value="item.value" />
									<text>{{ item.label }}</text>
								</label>
							</view>
						</radio-group>
					</view>
				</view>
				<button type="default" class="submit" form-type="submit">确认过户</button>
			</form>
		</view>
		<uni-popup ref="popup1" type="bottom">
			<view class="pop-container">
				<view class="upload-card" @click="cardImageOcr('1')">
					<view class="title-box">
						<view class="main-title">行驶证主页</view>
						<view class="sub-title">上传行驶证的主页</view>
						<view class="standard">拍摄规范</view>
					</view>
					<image style="position: absolute;width: 300rpx;height: 200rpx;right: 1.125rem;border-radius: 12rpx;"
						:src="`${$imgUrl}applyCard/car-zhu.png`" mode="aspectFill" v-if="!form.vehPosImgUrl"></image>
					<image style="position: absolute;width: 300rpx;height: 200rpx;right: 1.125rem;border-radius: 12rpx;"
						:src="form.vehPosImgUrl" mode="aspectFill" v-else></image>
				</view>

				<view class="upload-card" @click="cardImageOcr('2')">
					<view class="title-box">
						<view class="main-title">行驶证副页</view>
						<view class="sub-title">上传行驶证的副页</view>
						<view class="standard">拍摄规范</view>
					</view>
					<image style="position: absolute;width: 300rpx;height: 200rpx;right: 1.125rem;border-radius: 12rpx;"
						:src="`${$imgUrl}applyCard/car-fu.png`" mode="aspectFill" v-if="!form.vehNegImgUrl"></image>
					<image style="position: absolute;width: 300rpx;height: 200rpx;right: 1.125rem;border-radius: 12rpx;"
						:src="form.vehNegImgUrl" mode="aspectFill" v-else></image>
				</view>

				<view class="upload-card">
					<view class="title-box">
						<view class="main-title">车头照</view>
						<view class="sub-title">上传汽车的车头照片</view>
						<view class="standard">拍摄示例</view>
					</view>
					<image style="position: absolute;width: 300rpx;height: 200rpx;right: 1.125rem;border-radius: 12rpx;"
						:src="`${$imgUrl}applyCard/chetou.png`" mode="aspectFill"></image>

				</view>

				<view class="image-content">
					<view class="title">
						识别内容如下
					</view>
					<view class="form-data" style="box-shadow: none;">
						<form @submit="carInfoSubmit">
							<view class="form-item form-item2">
								<view class="item-title">
									车牌号:
								</view>
								<input class="item-content" type="text" v-model="form.vehicleId">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									所有人:
								</view>
								<input class="item-content" type="text" v-model="form.man">
							</view>
							<view class="form-item form-item2">
								<view class="item-title">
									车辆类型:
								</view>
								<input class="item-content" type="text" v-model="form.vehicleType">
							</view>
							<view class="form-item form-item2">
								<view class="item-title">
									使用性质:
								</view>
								<input class="item-content" type="text" v-model="form.character">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									车辆识别代号:
								</view>
								<input class="item-content" type="text" v-model="form.vin">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									发动机号码:
								</view>
								<input class="item-content" type="text" v-model="form.engineNum">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									注册日期:
								</view>
								<input class="item-content" type="text" v-model="form.register">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									发证日期:
								</view>
								<input class="item-content" type="text" v-model="form.issueDate">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									核定载人数:
								</view>
								<input class="item-content" type="text" v-model="form.approvedCount">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									整备质量:
								</view>
								<input class="item-content" type="text" v-model="form.maintenaceMass">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									外廓尺寸:
								</view>
								<view style="color: #000;flex: 1;text-align: end;">
									<text class="size" style="color: #000;">1234</text>
									x <text class="size">1234</text> x
									<text class="size">1234</text>
								</view>
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									总质量:
								</view>
								<input class="item-content" type="text" v-model="form.totalMass">
							</view>

							<view style="margin-top: 36rpx;color: #00b38b;font-size: 24rpx;">如识别信息有误，请手动修改，确认无误后，点击下一步！
							</view>

							<button type="default" class="pop-submit" form-type="submit"
								style="color: #fff;">确认过户</button>
						</form>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup2" type="bottom">
			<view class="pop-container">
				<view class="fromtop">
					<text>填写信息与照片上传</text>
					<view class="form-item nob fromitem">
						<view class="item-title required">
							用户名称:
						</view>
						<input class="item-content" type="text" value="" placeholder="请输入">
					</view>
					<view class="form-item nob fromitem">
						<view class="item-title required">
							用户证件类型:
						</view>
						<input class="item-content" type="text" value="" placeholder="请输入">
					</view>
					<view class="form-item nob fromitem">
						<view class="item-title required">
							用户证件号:
						</view>
						<input class="item-content" type="text" value="" placeholder="请输入">
					</view>
				</view>

				<view class="upload-card">
					<view class="title-box">
						<view class="main-title">行驶证主页</view>
						<view class="sub-title">上传行驶证的主页</view>
						<view class="standard">拍摄规范</view>
					</view>
					<image style="position: absolute;width: 300rpx;height: 200rpx;right: 1.125rem;border-radius: 12rpx;"
						:src="`${$imgUrl}applyCard/car-zhu.png`" mode="aspectFill"></image>
					<uni-file-picker fileMediatype="image" mode="grid" :limit="1" @success="success" @fail="fail" />
				</view>

				<view class="upload-card">
					<view class="title-box">
						<view class="main-title">行驶证副页</view>
						<view class="sub-title">上传行驶证的副页</view>
						<view class="standard">拍摄规范</view>
					</view>
					<image style="position: absolute;width: 300rpx;height: 200rpx;right: 1.125rem;border-radius: 12rpx;"
						:src="`${$imgUrl}applyCard/car-fu.png`" mode="aspectFill"></image>
					<uni-file-picker fileMediatype="image" mode="grid" :limit="1" @success="success" @fail="fail" />
				</view>

				<view class="upload-card">
					<view class="title-box">
						<view class="main-title">车头照</view>
						<view class="sub-title">上传汽车的车头照片</view>
						<view class="standard">拍摄示例</view>
					</view>
					<image style="position: absolute;width: 300rpx;height: 200rpx;right: 1.125rem;border-radius: 12rpx;"
						:src="`${$imgUrl}applyCard/chetou.png`" mode="aspectFill"></image>
					<uni-file-picker fileMediatype="image" mode="grid" :limit="1" @success="success" @fail="fail" />
				</view>

				<view class="image-content">
					<view class="title">
						识别内容如下
					</view>
					<view class="form-data" style="box-shadow: none;">
						<form @submit="carInfoSubmit">
							<view class="form-item form-item2">
								<view class="item-title">
									车牌号:
								</view>
								<input class="item-content" type="text" v-model="form.vehicleId">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									所有人:
								</view>
								<input class="item-content" type="text" v-model="form.man">
							</view>
							<view class="form-item form-item2">
								<view class="item-title">
									车辆类型:
								</view>
								<input class="item-content" type="text" v-model="form.vehicleType">
							</view>
							<view class="form-item form-item2">
								<view class="item-title">
									使用性质:
								</view>
								<input class="item-content" type="text" v-model="form.character">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									车辆识别代号:
								</view>
								<input class="item-content" type="text" v-model="form.vin">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									发动机号码:
								</view>
								<input class="item-content" type="text" v-model="form.engineNum">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									注册日期:
								</view>
								<input class="item-content" type="text" v-model="form.register">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									发证日期:
								</view>
								<input class="item-content" type="text" v-model="form.issueDate">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									核定载人数:
								</view>
								<input class="item-content" type="text" v-model="form.approvedCount">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									整备质量:
								</view>
								<input class="item-content" type="text" v-model="form.maintenaceMass">
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									外廓尺寸:
								</view>
								<view style="color: #000;flex: 1;text-align: end;">
									<text class="size" style="color: #000;">1234</text>
									x <text class="size">1234</text> x
									<text class="size">1234</text>
								</view>
							</view>
							<view class="form-item nob">
								<view class="item-title required">
									总质量:
								</view>
								<input class="item-content" type="text" v-model="form.totalMass">
							</view>
							<view style="margin-top: 36rpx;color: #00b38b;font-size: 24rpx;">如识别信息有误，请手动修改，确认无误后，点击下一步！
							</view>

							<button type="default" class="pop-submit" form-type="submit"
								style="color: #fff;">确认过户</button>
						</form>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup3" type="bottom">
			<view class="car-list">
				<radio-group class="car-group">
					<view class="car-item" v-for="(item, index) in 2" :key="item.value">
						<image class="car-img" :src="`${$imgUrl}service/car.png`" mode=""></image>
						<text>贵A12345</text>
						<label>
							<radio class="car-radio" :value="item.value" />
						</label>
					</view>
				</radio-group>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		request
	} from "@/utils/network/request.js";

	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		etcCarOcrCard,
		fileUpload,
	} from "@/utils/network/api.js";
	import {
		pathToBase64
	} from "@/utils/util/imageTool.js";
	export default {
		data() {
			return {
				driverLicenseFront: '',
				formData: {},
				radioList: [{
						label: '过户已有车辆（过户到账户下已有）',
						value: '1'
					},
					{
						label: '过户新车（账户中还未有的车辆）',
						value: '2'
					},
					{
						label: '过户他人车辆',
						value: '3'
					}
				],
				form: {
					orderId: "", //订单ID
					man: "", //所有人
					character: "", //使用性质
					register: "", //注册日期

					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", //编号渠道
					scenePayType: "", //
					transportIdNum: "", //道路运输证编号
					licenseIdNum: "", //经营许可证编号
					vehBodyUrl: "", //车身照片
					proxyUrl: "", //委托书地址
				},
			};
		},
		methods: {
			formSubmit(e) {
				if (!e.detail.value.radio) return uni.showToast({
					icon: 'none',
					title: '请选择过户类型'
				})
				let key = e.detail.value.radio
				switch (key) {
					case '1':
						this.$refs.popup1.open()
						break;
					case '2':
						this.$refs.popup2.open()
						break;
					case '3':
						this.$refs.popup3.open()
						break;
				}
			},
			carInfoSubmit(e) {},
			success() {},
			fail() {},
			//orc接口调用
			cardImageOcr(val) {
				var imageType = val;
				const that = this
				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(that.form);
									if (val === "1") {
										console.log(that.form, "这里");
										that.form.vehicleId = data.plate_a;
										that.form.man = data.man;
										that.form.vehicleType = data.vehicle;
										that.form.character = data.character;
										that.form.vin = data.vin;
										that.form.engineNum = data.engine;
										that.form.register = data.register;
										that.form.issueDate = data.issue;
										that.form.vehPosImgUrl = data.imageUrl;
										that.form.vehicleModel = data.model;
									} else {
										that.form.approvedCount = parseFloat(data.apc);
										that.form.maintenaceMass = parseFloat(data.unladen);
										that.form.vehicleDimensions = data.overall;
										that.form.totalMass = parseFloat(data.gross);
										that.form.vehNegImgUrl = data.imageUrl;
									}
								});
							})
							.catch((error) => {});
					},
				});
			}
		},
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		padding-top: 30rpx;
		background-color: #f3f3f3;

		.form-data {
			box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
			background-color: #fff;
			position: relative;

			.submit {
				width: 670rpx;
				height: 80rpx;
				background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
				box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
				border-radius: 40rpx;
				position: fixed;
				left: 50%;
				transform: translate(-50%);
				bottom: 60rpx;
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
			}
		}

		.car-list {
			height: 60vh;
			background-color: #fff;
			padding: 50rpx;

			.car-item {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				margin-bottom: 70rpx;
				position: relative;

				.car-img {
					width: 150rpx;
					height: 90rpx;
					margin-right: 30rpx;
				}

				.car-radio {
					position: absolute;
					right: 0rpx;
					transform: translateY(50%);
					bottom: 50%;
				}
			}
		}
	}

	.form-item {
		padding: 0 24rpx;
		font-size: 14px;
		color: #333;

		.item-container {
			padding: 30rpx 0;
			display: flex;
			border-bottom: 1px solid #dcdcdc;
			font-size: 28rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
		}

		.item-title {
			width: 145rpx;
			font-size: 28rpx;
			font-family: Microsoft YaHei;
			white-space: nowrap;
			font-weight: 400;
			color: #333333;
		}

		.item-content {
			width: calc(100% - 144rpx);
			text-align: end;
			font-size: 28rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
		}

		.radio-group {
			padding-left: 20rpx;
			width: calc(100% - 144rpx);
			display: block;

			.radio-item {
				margin-bottom: 30rpx;
			}
		}

		.required::before {
			content: '*';
			color: #ff0000;
		}
	}

	.nob {
		border: none;
	}

	.pop-container {
		max-height: 90vh;
		overflow: scroll;
		background-color: #fff;
		padding: 30rpx;

		.fromtop {
			margin-bottom: 20rpx;

			.fromitem {
				padding: 0;
				display: flex;
				height: 80rpx;
				justify-content: center;
				align-items: center;
				border-bottom: 1px solid #ccc;
				background-color: #fff;

			}
		}

		.upload-card {
			position: relative;
			// width: 100%;
			height: 260rpx;
			border-radius: 40rpx;
			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
			display: flex;
			justify-content: space-between;
			padding: 32rpx 36rpx 0;
			margin-bottom: 30rpx;

			.title-box {
				margin-top: 8rpx;
				margin-right: 122rpx;

				.main-title {
					color: #000;
					font-size: 34rpx;
					margin-bottom: 20rpx;
				}

				.sub-title {
					color: #999;
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}

				.standard {
					width: 110rpx;
					padding: 15rpx 0;
					text-align: center;
					background-color: #d3f2ef;
					border-radius: 6rpx;
					color: #0A8F8A;
					font-size: 20rpx;
					line-height: 20rpx;
				}
			}
		}

		.image-content {
			margin-top: 60rpx;

			// padding: 0 30rpx;
			.form-item {
				padding: 0;
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				height: 80rpx;
				border-bottom: 1px solid #DCDCDC;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}

			.form-item2 {
				padding: 0;
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				height: 80rpx;
				border-bottom: 1px solid #DCDCDC;
				background-color: #F8F8F8;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}

			.title {
				font-size: 30rpx;
				font-weight: 400;
				color: #000000;
				line-height: 24rpx;
				margin-bottom: 20rpx;
			}

			.size {
				display: inline-block;
				border: 1px solid #DCDCDC;
				border-radius: 30rpx;
				padding: 8rpx 24rpx;
				color: #999;
			}
		}
	}

	.pop-submit {
		width: 670rpx;
		height: 80rpx;
		background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
		box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
		border-radius: 40rpx;
		margin-top: 85rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
	}

	::v-deep {
		.file-picker__box {
			width: 320rpx !important;
			padding-top: 220rpx;
		}

		.file-picker__box-content {
			border: none !important;
		}

		.icon-add {
			width: 240rpx;
			display: none;
		}
	}
</style>