zhywpt-sp/applyCard/opening-account-unit.vue

<template>
	<navBar title="ETC开户新办申请-单位"></navBar>
	<navBgCar></navBgCar>
	<view class="content-wrap">
		<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 class="icon" src="../../static/image/applyCard/zhizhao.png"></image>
			</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 class="icon" src="../../static/image/applyCard/renxiang.png"></image>
			</view>
		</view>
		<view class="shibie-wrapper">
			<view class="title"> 识别内容如下 </view>
			<view class="">
				<u-field v-model="state.ocrData.conmpany" input-align="right" label="公司名称" disabled="true">
				</u-field>
				<u-field v-model="state.ocrData.type" input-align="right" label="证件类型" disabled="true">
				</u-field>
				<u-field v-model="state.ocrData.card" input-align="right" label="证件号码" disabled="true">
				</u-field>
			</view>
		</view>
		<view class="buchong-wrapper">
			<view class="title"> 需要补充内容如下 </view>
			<view class="">
				<u-field label-width="200" v-model="state.buchongData.conmpany" input-align="right" label="经办人名称">
				</u-field>
				<u-field label-width="200" v-model="state.buchongData.type" input-align="right" label="经办人证件类型">
				</u-field>
				<u-field label-width="200" v-model="state.buchongData.card" input-align="right" label="经办人证件号码">
				</u-field>
				<u-field label-width="200" v-model="state.buchongData.phone" input-align="right" label="经办人手机号"
					placeholder="请手动输入联系方式">
				</u-field>
			</view>
		</view>
		<view class="green-tip">
			如识别信息有误，请手动修改，确认无误后，点击下一步！
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">
				下一步
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";
	import navBgCar from "./components/nav-bg-car2";
	import navBar from "../components/nav-bar/nav-bar2.vue";
	import {
		pathToBase64New
	} from "@/utils/image-tools/index.js";
	import {
		ocrAllQuery
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";

	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const savaHandle = () => {
		console.log("执行点击事件");
		uni.navigateTo({
			url: "/applyCard/car-release",
		});
	};

	const state = reactive({
		ocrData: {
			conmpany: "",
			type: "",
			card: "",
		},
		buchongData: {
			conmpany: "",
			type: "",
			card: "",
			phone: "",
		},
	});
	//orc接口调用
	const cardImageOcr = (val: any) => {
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function(res) {
				console.log(res);
				pathToBase64New(res.tempFilePaths[0])
					.then((path) => {
						var data = {
							type: 'business_license',
							base64: path,
						};
						const options = {
							type: 2,
							data: data,
							method: "POST",
							showLoading: true,
						};
						request(ocrAllQuery, options).then((res) => {
							console.log(res);
							const data = stringToJson(res.bizContent);
						});
					})
					.catch((error) => {});
			},
		});
	};

	onLoad((option: any) => {
		//state.fromOrder = option.fromOrder //是否来自订单-修改资料
	});
</script>

<style lang="scss" scoped>
	.content-wrap {
		position: relative;
		margin-top: -50rpx;
		padding: 0rpx 30rpx;
		position: relative;

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