zhywpt-sp/subpackage/orders/opening-account-unit.vue

<template>
	<navBar title="ETC开户新办申请-单位" :scrollTop="scrollTop"></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="cardImageOcrYY()">
			<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.posImgUrl" class="icon" :src="`${$imgUrl}applyCard/zhizhao.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.posImgUrl)"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="takePhotoMode('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.agentPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.agentPosImgUrl)"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="takePhotoMode('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.agentNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/guohui.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.agentNegImgUrl)"></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.proxyUrl" class="icon" :src="`${$imgUrl}applyCard/weituoshu.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.proxyUrl)"></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 inputAlign="right" class="clearBg" placeholder='请输入公司名称' v-model="state.form.userName" />
				</u-form-item>
				<u-form-item label="部门名称">
					<u-input inputAlign="right" class="clearBg" placeholder='请输入部门名称' v-model="state.form.department" />
				</u-form-item>
				<u-form-item label="社会信用代码">
					<u-input inputAlign="right" class="clearBg" placeholder='请输入社会信用代码'
						v-model="state.form.userIdNum" />
				</u-form-item>
				<u-form-item label="经办人姓名">
					<u-input inputAlign="right" class="clearBg" placeholder='请输入经办人姓名' v-model="state.form.agentName" />
				</u-form-item>
				<u-form-item label="经办人身份证号">
					<u-input inputAlign="right" class="clearBg" placeholder='请输入经办人身份证号'
						v-model="state.form.agentIdNum" />
				</u-form-item>
				<u-form-item label="经办人联系方式">
					<u-input inputAlign="right" class="clearBg" placeholder='请输入经办人联系方式' v-model="state.form.tel" />
				</u-form-item>
			</u-form>
		</view>
		<view class="green-tip">
			如识别信息有误，请手动修改，确认无误后，点击下一步！
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">
				下一步
			</button>
		</view>
		<view class="choice-takePhoto-wrap" v-if="state.isTakePhotoModeShow" @click="cancle">
			<view class="choice-takePhoto">
				<view @click.stop="takePhoto(state.choiceIndex)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
				<view @click.stop="xiangce(state.choiceIndex)">从手机相册选择</view>
				<view @click.stop="cancle">取消</view>
			</view>
		</view>
		<viewfinder v-if="state.phoneType" :phoneType="state.phoneType" :images="state.images"
			:showStartPhoto="state.showImg" @confirmReturn="confirmReturn" @camera="camera"></viewfinder>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive, ref
	} from "vue";
	import navBgCar from "./components/nav-bg-car3";
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	import viewfinder from "../../components/viewfinder.vue"
	import {
		pathToBase64
	} from "@/utils/image-tools/index.js";
	import {
		ocrAllQuery,
		fileUpload,
		envs,
		etcOcrCard,
		etcCompanyCardInfoSubmit,
		register,
	} from "@/utils/network/api.js";

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

	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		onLoad,
		onPageScroll,
	} from "@dcloudio/uni-app";
	import {
		setItem,
		getItem,
	} from "@/utils/storage";
	import {
		msg,
		checkStr,
		strReplace,
		uploadFile
	} from "@/utils/utils";

	const scrollTop = ref(0);//滚动距离

	const state = reactive({
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		images: '',
		showImg: true,
		form: {
			orderId: "", //订单ID
			//营业执照信息
			userName: "", //开户名称/账户名称
			userIdType: "203", //用户证件类型 203//营业执照
			userIdNum: "", //营业执照号码

			posImgUrl: "", //营业执照证明
			department: '本部', //不超过50个字符，若单位仅开一个账户，填写“本部”
			address: "", //单位地址
			//经办人信息
			agentName: "",
			agentIdType: "101",
			agentIdNum: "",
			agentAddress: "",
			agentPhone: "",
			agentIdVld: '',
			tel: '',
			agentGender: '',
			agentPosImgUrl: "",
			agentNegImgUrl: "",
			proxyUrl: "",
			sceneType: "", //用户协议支撑服务场景（发行服务机构和用户签订的协议）
			channelId: "", //渠道id
			opId: '',
			orderSource: 'WECHAT',
		},
		orderId: "",
		vehiclePlateColor: '',
		isSign: ''
	});

	const savaHandle = () => {
		if (state.form.agentGender === '男') {
			state.form.agentGender = 'MAN'
		} else {
			state.form.agentGender = 'WOMAN'
		}
		if (!state.form.posImgUrl) {
			msg('请上传营业执照');
			return;
		}
		if (!state.form.agentPosImgUrl) {
			msg('上传身份证的人像面');
			return;
		}
		if (!state.form.agentNegImgUrl) {
			msg('上传身份证的国徽面');
			return;
		}
		if (!state.form.proxyUrl) {
			msg('上传身份证的委托书');
			return;
		}
		if (!state.form.userName) {
			msg('请输入公司名称');
			return;
		}
		if (!state.form.department) {
			msg('请输入社会信用代码');
			return;
		}
		if (!state.form.agentName) {
			msg('请输入经办人姓名');
			return;
		}
		if (!checkStr(state.form.agentIdNum, 'card')) {
			msg('请输入正确的经办人身份证号');
			return;
		}
		if (!checkStr(state.form.tel, 'mobile')) {
			msg('请输入正确的经办人联系方式');
			return;
		}

		//如果未登录||新用户
		// if (!getItem('openId')) {

		let data = {
			userType: "ENTERPRISE",
			idNum: state.form.userIdNum,
			idType: state.form.userIdType,
			mobile: state.form.tel,
			userName: state.form.userName,
			gender: 'UNKOWN',
			certifyChannel: "BAIDUOCR",
			address: state.form.address,
			agentIdNum: state.form.agentIdNum,
			agentIdType: state.form.agentIdType,
			agentName: state.form.agentName,
			department: state.form.department,
			userIdImgUrl: state.form.posImgUrl,
			userIdImgBase64: "",
		}
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		request(register, options).then((res) => {
			let result = stringToJson(res.bizContent);
			if (result.accessToken && result.openId) {
				setItem('token', result.accessToken)
				setItem('openId', result.openId)
				state.form.opId = result.openId;
				let data = state.form;
				const options = {
					type: 2,
					data: data,
					method: "POST",
					showLoading: true,
				};
				request(etcCompanyCardInfoSubmit, options).then((res) => {
					// let result = stringToJson(res.bizContent);
					console.log(res);
					uni.redirectTo({
						url: `/subpackage/orders/car-release?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}&type=1&isSign=${state.isSign}`,
					});
				});
			}
		})

		// }else{
		// 	var data = state.form;
		// 	const options = {
		// 		type: 2,
		// 		data: data,
		// 		method: "POST",
		// 		showLoading: true,
		// 	};
		// 	request(etcCompanyCardInfoSubmit, options).then((res) => {
		// 		const data = stringToJson(res.bizContent);
		// 		uni.redirectTo({
		// 			url: `/subpackage/orders/car-release?orderId=${state.orderId}&&vehiclePlateColor=${state.vehiclePlateColor}&isSign=${state.isSign}`,
		// 		});
		// 	});
		// }
	};


	onLoad((option : any) => {
		state.form.orderId = option.orderId;
		state.orderId = option.orderId;
		state.vehiclePlateColor = option.vehiclePlateColor;
		state.form.opId = getItem('openId') ? getItem('openId') : '';
		state.isSign = option.isSign;
	});

	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	//营业执照Orc接口调用
	const cardImageOcrYY = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], 1, ocrAllQuery).then((data) => {
					if (data.result) {
						state.form.userName = stringToJson(data.result
							.businessLicense)[
							'名称'];
						state.form.userIdNum = stringToJson(data.result
							.businessLicense)[
							'统一社会信用代码'];
						cardFileImageUpdateyy(path)
					}
				})
				// pathToBase64(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) => {
				// 			const data = stringToJson(res.bizContent);
				// 			if (data.result) {
				// 				state.form.userName = stringToJson(data.result
				// 					.businessLicense)[
				// 					'名称'];
				// 				state.form.userIdNum = stringToJson(data.result
				// 					.businessLicense)[
				// 					'统一社会信用代码'];
				// 				cardFileImageUpdateyy(path)
				// 			}

				// 		});
				// 	})
				// 	.catch((error) => { });
			},
		});
	};
	//委托书获取图片给后端
	const cardFileImageUpdateyy = (val : any) => {
		var data = {
			fileBase64: val,
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		request(fileUpload, options).then((res) => {
			const data = stringToJson(res.bizContent);
			state.form.posImgUrl = data.data.url;
		});
	};
	const camera = () => {
		state.phoneType = 0
	}
	const cardFileImageUpdate = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
					state.form.proxyUrl = data;
				})
			},
		});
	};
	const takePhotoMode = (index) => {
		console.log("index", index)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
	}
	const xiangce = (val) => {
		console.log("val", val)
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["album"], //从相册选择
			success: function (res) {
				state.showImg = false
				state.images = res.tempFilePaths[0]
				state.phoneType = state.choiceIndex
				state.isTakePhotoModeShow = false
				console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))
			},
		})
	}
	const takePhoto = (val) => {
		console.log("拍照", val)
		state.showImg = true
		state.phoneType = val;
	}
	const confirmReturn = (val) => {
		state.phoneType = 0
		state.isTakePhotoModeShow = false
		var imageType = state.choiceIndex;
		console.log("图片地址val", val.tempImagePath)
		uploadFile(val.tempImagePath, imageType, etcOcrCard).then((data) => {
			console.log("身份证上传", data)
			if (state.choiceIndex === "1") {
				state.form.agentName = data.name;
				state.form.agentIdNum = data.idno;
				state.form.agentPosImgUrl = data.imageUrl;
				state.form.address = data.address;
				state.form.agentGender = data.gender;
			} else {
				state.form.agentIdVld = data.enddate;
				state.form.agentNegImgUrl = data.imageUrl;
			}
			state.isTakePhotoModeShow = false
		})
	}
	const cancle = () => {
		state.isTakePhotoModeShow = false
	}
</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;
		}

	}

	::v-deep .u-input__input {
		background: transparent;
	}

	::v-deep .u-form-item--left .u-form-item--left__content {
		padding-right: 0px;
	}

	.choice-takePhoto {
		position: absolute;
		bottom: 0;
		background-color: white;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.choice-takePhoto>view:first-child {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
		background-color: white;
	}

	.choice-takePhoto>view:last-child {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-top: 6rpx solid rgba(127, 127, 127, 0.1);
		background-color: white;
	}

	.choice-takePhoto>view {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background-color: white;
	}

	.choice-takePhoto-wrap {
		width: 100%;
		height: 100vh;
		background-color: rgba(127, 127, 127, 0.2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11111;
	}
</style>