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="takePhotoMode('1')">
					<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="takePhotoMode('2')">
					<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='请输入8-16位字母加数字组成的账号' type="text" v-model="state.form.name" />
				</u-form-item>
				<u-form-item label="对公用户密码">
					<view class="form-input">
						<input class="input" v-model="state.form.passWord" placeholder="请输入对公用户密码"
							placeholder-class="color: #c0c4cc;" :password="state.isPwdType ? true : false"
							type="text" />
						<image :src="`${$imgUrl}login/${
					  state.isPwdType ? 'icon_eye_close' : 'icon_eye_open'
					}.png`" class="eye" @click="state.isPwdType = !state.isPwdType" mode="aspectFill"></image>
					</view>
				</u-form-item>
				<view class="tips" style="margin-top: -36rpx;font-size: 24rpx;"><text> *
					</text>密码必须包含至少一个数字、一个小写字母、一个大写字母，并且长度至少为8个字符
				</view>
				<u-form-item label="支付密码">
					<view class="form-input">
						<input class="input" v-model="state.form.consumePassword" placeholder="请输入6位数字组成支付密码"
							placeholder-class="color: #c0c4cc;" :password="state.isAffirmPwdType ? true : false"
							type="number" />
						<image :src="`${$imgUrl}login/${
					  state.isAffirmPwdType ? 'icon_eye_close' : 'icon_eye_open'
					}.png`" class="eye" @click="state.isAffirmPwdType = !state.isAffirmPwdType" mode="aspectFill"></image>
					</view>
				</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>
		<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>
	<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>
</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, uploadFile } from "@/utils/utils";
	import viewfinder from "../../../components/viewfinder.vue"
	const state = reactive({
		showImg: true,
		images: '',
		isMy: "",//自己办理  他人办理
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		isBusinessLicense: false, //是否上传公司营业执照
		form: {
			url1: '', //公司营业执照
			url2: '', //
			url3: '', //
			url4: '', //
			name: '',//对公用户登录名
			passWord: '',//对公用户登录密码
			consumePassword: '', //支付密码
			// type:'',//公司证件类型
			code: '',  //公司证件编码
			companyName: '',
			handlerName: '',
			handlerPhone: '',
			bankAddress: "",  //开户行
			bankCardId: "", //充值银行卡号
		},
		showType: false, //公司证件类型下拉
		isPwdType: true,
		isAffirmPwdType: true,
		// typeList:['营业执照','统一社会信用代码证','组织结构代码证'],
	})
	const cardDbImageOcr = (val : any) => {
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
					state.form.url2 = data;
				})
			},
		});
	};
	const takePhotoMode = (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) => {
		state.showImg = true
		console.log("拍照", val)
		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, imageType)
			if (imageType === "1") {
				state.form.url3 = data.imageUrl;
			} else if (imageType === "2") {
				state.form.url4 = data.imageUrl;
			}
			state.isTakePhotoModeShow = false
		})
	}
	const cancle = () => {
		state.isTakePhotoModeShow = false
	}
	const camera = () => {
		state.phoneType = 0
	}
	const goBankCard = () => {
		navTo(`/subpackage/personal-center/setting/bank-card/bank-card`);
	}
	const open = () => {
		if (state.form.name == state.form.passWord) {
			msg('对公用户登录名和对公用户密码不能相同')
			return;
		}
		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)
				uni.showModal({
					content: '申请已受理，请等待审核，请到【查询服务】的【对公账户查询】查看进度',
					showCancel: false,
					success: function (res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 2
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			})
			.catch((err) => {
				console.log(err);
			});
	}
	//营业执照Orc接口调用
	const cardImageOcrYY = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "", ocrAllQuery).then((data) => {
					if (data.result) {
						state.form.url2 = '';
						state.form.companyName = stringToJson(data.result
							.businessLicense)[
							'名称'];
						state.form.code = stringToJson(data.result
							.businessLicense)[
							'统一社会信用代码'];
						uploadFile(res.tempFilePaths[0], "", "").then((data) => {
							state.form.url1 = data;
						})
					}
				})
			},
		});
	};
	const shiqu = () => {
		console.log("state.form.handlerPhone", state.form.handlerPhone)
	}
</script>

<style scoped lang="scss">
	.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;
	}

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

	.form-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 90rpx;

		.input {
			flex: 1;
			padding-right: 48rpx;
			font-size: 26rpx;
		}

		.eye {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>