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/renxiang.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/renxiang.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/renxiang.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 } 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) => { });
			},
		});
	};
	// 选择公司证件类型的回调
	// 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;
			}
		}
		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-aline:center;
		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>