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="cardDbImageOcr('1')">
					<image v-if="!state.isBusinessLicense" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
					</image>
					<image v-else class="icon" :src="strReplace(state.form.url1)"></image>
					<view>公司营业执照</view>
				</view>
				<view class='item' @click="cardDbImageOcr('2')">
					<image v-if="!state.isBusinessLicense" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
					</image>
					<image v-else class="icon" :src="strReplace(state.form.url2)"></image>
					<view>单位授权书</view>
				</view>
				<view class='item' @click="cardDbImageOcr('3')">
					<image v-if="!state.isBusinessLicense" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
					</image>
					<image v-else class="icon" :src="strReplace(state.form.url3)"></image>
					<view>被委托人身份证正页照</view>
				</view>
				<view class='item' @click="cardDbImageOcr('4')">
					<image v-if="!state.isBusinessLicense" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
					</image>
					<image v-else class="icon" :src="strReplace(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='请输入6-12位字母加数字组成的账号' type="text" v-model="state.form.name"/>
				</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>
			<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>
		<u-button class='open' type="success">开户</u-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} from "@/utils/network/api.js";
	import {pathToBase64} from "@/utils/image-tools/index.js";
	import { navTo } from "@/utils/utils";
	const state = reactive({
		isBusinessLicense:false, //是否上传公司营业执照
		form:{
			url1:'', //公司营业执照
			url2:'', //
			url3:'', //
			url4:'', //
			name:'',//对公用户登录名
			type:'',//公司证件类型
			code:'',  //公司证件编码
			companyName:'',
			handlerName:'',
			handlerPhone:'',
		},
		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,
						};
						request(etcOcrCard, options).then((res) => {
							const data = stringToJson(res.bizContent);
							console.log("图片信息",data)
							if (val === "1") {
								state.form.url1 = data.name;
								
							} else if (val === "2"){
								state.form.url1 = data.name;
							}else if (val === "3"){
								state.form.url1 = data.name;
							}else if (val === "4"){
								state.form.url1 = data.name;
							}
						});
					})
					.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`);
	}
</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;
	}
</style>