zhywpt-sp/subpackage/after-sale/account-recharge/open-account.vue

<template>
	<view class='content'>
		<view class='up_img_wrap'>
			<view class='title'>请上传图片</view>
			<view class='tips'>注意事项：1.请上传有效图片；2.图片大小不超过2M</view>
			<view class='item_wrap'>
				<view class='item' @click="cardImageOcrYY()">
					<image v-if="!state.form.url1" class="icon" :src="`${$imgUrl}applyCard/zhizhao.png`">
					</image>
					<image v-else class="icon" :src="state.form.url1"></image>
					<view>公司营业执照</view>
				</view>
				<view class='item' @click="cardDbImageOcr('2')">
					<image v-if="!state.form.url2" class="icon" :src="`${$imgUrl}applyCard/weituoshu.png`">
					</image>
					<image v-else class="icon" :src="state.form.url2"></image>
					<view>单位授权书</view>
				</view>
				<view class='item' @click="cardDbImageOcr('3')">
					<image v-if="!state.form.url3" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
					</image>
					<image v-else class="icon" :src="state.form.url3"></image>
					<view>被委托人身份证正页照</view>
				</view>
				<view class='item' @click="cardDbImageOcr('4')">
					<image v-if="!state.form.url4" class="icon" :src="`${$imgUrl}applyCard/guohui.png`">
					</image>
					<image v-else class="icon" :src="state.form.url4"></image>
					<view>被委托人身份证副页</view>
				</view>
			</view>
		</view>
		<view class='up_img_wrap message'>
			<u-form :model="form" ref="form1" label-width=210 border-bottom=false>
				<u-form-item label="对公用户登录名 " border-bottom=true>
					<u-input placeholder='请输入7-16位字母加数字组成的账号' type="text" v-model="state.form.name" />
				</u-form-item>
				<u-form-item label="对公用户密码">
					<u-input placeholder='请输入对公用户密码' type="text" v-model="state.form.password" />
				</u-form-item>
				<u-form-item label="支付密码">
					<u-input placeholder='请输入支付密码' type="text" v-model="state.form.consumePassword" />
				</u-form-item>
				<!-- <u-form-item label="公司证件类型 ">
					<u-input v-model="state.form.type" type="select" :select-open="state.showType" @click="state.showType = true"  placeholder='请选择'/>
				</u-form-item> -->
				<u-form-item label="公司证件编码 ">
					<u-input placeholder='请输入公司证件编码' type="text" v-model="state.form.code" />
				</u-form-item>
				<u-form-item label="公司名称">
					<u-input placeholder='请输入公司名称' type="text" v-model="state.form.companyName" />
				</u-form-item>
				<u-form-item label="经办人姓名">
					<u-input placeholder='请输入经办人姓名' type="text" v-model="state.form.handlerName" />
				</u-form-item>
				<u-form-item label="经办人手机号">
					<u-input placeholder='请输入经办人手机号' type="text" v-model="state.form.handlerPhone" />
				</u-form-item>
				<u-form-item label="银行卡号">
					<u-input placeholder='请输入银行卡号' type="text" v-model="state.form.bankCardId" />
				</u-form-item>
				<u-form-item label="开户行">
					<u-input placeholder='请输入开户行' type="text" v-model="state.form.bankAddress" />
				</u-form-item>
			</u-form>
			<!-- <view class='pay_msg'>付款银行账户信息</view>
			<view class='company' @click='goBankCard()'>
				<view>
					<view><text>123456</text><text>贵阳银行股份有限公司</text></view>
					<view class='phone'>123****5678</view>
				</view>
				<u-icon name="arrow-right" color='#ccc' size='40'></u-icon>
			</view> -->
		</view>
		<view class='attention'>
			<view>注意事项:</view>
			<view>1.开户成功后，请先设置密码，否则不能进行圈存操作</view>
			<view>2.付款账户:贵单位打款银行卡</view>
			<view>3.开户申请审核结果将于两个工作日发送短信告知</view>
			<view>4.只支持黔通卡充值</view>
		</view>
		<button class='open' type="success" @click='open()'>开户</button>
	</view>
	<u-picker mode="selector" :range="state.typeList" v-model="state.showType" @confirm="regionConfirmType"></u-picker>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import { etcOcrCard, envs, ocrAllQuery, fileUpload, openRecharge } from "@/utils/network/api.js";
	import { pathToBase64 } from "@/utils/image-tools/index.js";
	import { navTo } from "@/utils/utils";
	import { request } from "@/utils/network/request.js";
	import { stringToJson } from "@/utils/network/encryption.js";
	import { msg, checkStr, strReplace } from "@/utils/utils";
	const state = reactive({
		isBusinessLicense: false, //是否上传公司营业执照
		form: {
			url1: '', //公司营业执照
			url2: '', //
			url3: '', //
			url4: '', //
			name: '',//对公用户登录名
			password: '',//对公用户登录密码
			consumePassword: '', //支付密码
			// type:'',//公司证件类型
			code: '',  //公司证件编码
			companyName: '',
			handlerName: '',
			handlerPhone: '',
			bankAddress: "",  //开户行
			bankCardId: "", //充值银行卡号
		},
		showType: false, //公司证件类型下拉
		// typeList:['营业执照','统一社会信用代码证','组织结构代码证'],
	})
	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,
						};
						console.log("cdfdf")
						request(etcOcrCard, options).then((res) => {
							const data = stringToJson(res.bizContent);
							console.log("图片信息", data)
							if (val === "2") {
								state.form.url2 = data.imageUrl;
							} else if (val === "3") {
								state.form.url3 = data.imageUrl;
							} else if (val === "4") {
								state.form.url4 = data.imageUrl;
							}
						});
					})
					.catch((error) => { console.log('输出内容', error) });
			},
		});
	};
	// 选择公司证件类型的回调
	// const regionConfirmType=(e : any)=>{
	// 	state.form.type=state.typeList[e]
	// }
	//替换图片地址
	// const strReplace = (str : string) => {
	// 	return str.replace('192.168.101.145:9000', envs[process.env.NODE_ENV].baseUrl)
	// }
	const goBankCard = () => {
		navTo(`/subpackage/personal-center/setting/bank-card/bank-card`);
	}
	const open = () => {
		for (var i in state.form) {
			if (!state.form[i]) {
				msg('请把信息填写完整！')
				return;
			}
		}
		if (!checkStr(state.form.handlerPhone, 'mobile')) {
			msg('请输入正确手机号');
			return;
		}
		const options = {
			type: 2,
			data: {
				'accountId': state.form.name, //账户编号
				'corporateIdNum': state.form.code, //公司营业执照统一社会信用代码
				'corporateName': state.form.companyName, //对公名称
				'photoUrl': state.form.url1,  //营业执照图片路径
				'authBookUrl': state.form.url2, //授权书图片路径
				'agentName': state.form.handlerName,  //经办人姓名
				'agentTel': state.form.handlerPhone,  //经办人手机号
				'idCardImageUrl': state.form.url3, //经办人身份证正面
				'idCardBackImageUrl': state.form.url4, //经办人身份证反面
				'bankAddress': state.form.bankAddress,  //开户行
				'bankCardId': state.form.bankCardId, //充值银行卡号
				'password': state.form.password,  //密码
				'consumePassword': state.form.consumePassword,//支付密码
			},
			method: "POST",
			showLoading: true,
		};
		request(openRecharge, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				console.log("开户成功", data.status)
				if (data.status == 1) {
					navTo(`/subpackage/after-sale/account-recharge/login`)
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
	//营业执照Orc接口调用
	const cardImageOcrYY = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				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);
							console.log("营业执照", data)
							if (data.result) {
								state.form.url2 = '';
								state.form.companyName = stringToJson(data.result
									.businessLicense)[
									'名称'];
								state.form.code = 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.url1 = data.data.url;
		});
	};
	const shiqu = () => {
		console.log("state.form.handlerPhone", state.form.handlerPhone)
	}
</script>

<style scoped>
	.content {
		background-color: rgb(246, 246, 246);
		font-size: 30rpx;
		padding-bottom: 30rpx;
	}

	.up_img_wrap {
		background-color: white;
		padding: 0 20rpx;
	}

	.title {
		margin: 0 0 20rpx 0;
	}

	.tips {
		color: red;
		font-size: 30rpx;
	}

	.item_wrap {
		display: flex;
		flex-shrink: 1;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10rpx 0 20rpx 0;
	}

	.item {
		width: 45%;
		height: 250rpx;
		margin-top: 20rpx;
	}

	.item image {
		width: 100%;
		height: 80%;
	}

	.item view {
		text-align: center;
	}

	.message {
		margin-top: 30rpx;
	}

	.pay_msg {
		border-bottom: 2px dotted rgb(75, 217, 97);
		padding: 30rpx 0;
	}

	.company {
		padding: 20rpx 50rpx 20rpx 6rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.phone {
		margin-top: 20rpx;
	}

	.attention {
		background-color: rgb(246, 246, 246);
		color: red;
		font-size: 30rpx;
		padding: 30rpx 20rpx 20rpx 20rpx;
	}

	.open {
		height: 80rpx;
		background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #ffffff;
		margin: 0 30rpx;
	}
</style>