new-cashier/jeepay-ui-uapp-agent/pageApply/channel/fuiou/fuioupay.vue

585 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- 该页面为填写信息的组件 -->
<!-- 只读文件 -->
<readOnlyInfo v-if="isDisable" ref="applyInfoRef" applyName="fuioupay" />
<view v-if="!isDisable">
<uni-collapse ref="collapse">
<uni-collapse-item title="基础信息" class="coll-title" :open="true">
<view class="content">
<JeePayForm text="选择商户类型">
<uni-data-checkbox
v-model="applyDetailInfo.merchantType"
:localdata="merchantTypeList"
@change="mchTypeInfo"
></uni-data-checkbox>
</JeePayForm>
<JeePayForm text="是否开通微信">
<uni-data-checkbox
v-model="applyDetailInfo.wxFlag"
:localdata="whetherList"
></uni-data-checkbox>
</JeePayForm>
<JeePayForm text="是否开通支付宝">
<uni-data-checkbox
v-model="applyDetailInfo.aliFlag"
:localdata="whetherList"
></uni-data-checkbox>
</JeePayForm>
<JeePayForm text="选择证件类型">
<radio-group
class="radio-group"
@change="publicSelect($event, 'licenseType')"
>
<label
class="radio"
v-for="(item, index) in licenseList"
:key="index"
><radio
:value="item.value"
:checked="applyDetailInfo.licenseType == item.value"
/>{{ item.name }}</label
>
</radio-group>
</JeePayForm>
<JeePayForm
text="营业执照图片"
v-if="['0', '1', 'B'].includes(applyDetailInfo.licenseType)"
>
<JeepayUpLoad
ocrFlag="license"
:imgUrl="applyDetailInfo.licenseImg"
@uploadSuccess="uploadSuccess($event, 'licenseImg')"
@clear="clear('licenseImg')"
/>
</JeePayForm>
<JeePayForm
text="商户名称全称"
v-model:value="applyDetailInfo.mchFullName"
tipText="小微商户,请命名为个体户xxx"
/>
<JeePayForm
:text="
applyDetailInfo.licenseType == 'A' ? '身份证号码' : '营业执照号'
"
v-model:value="applyDetailInfo.licenseNo"
tipText="请输入编号"
/>
<JeePayForm
v-if="['0', '1', 'B'].includes(applyDetailInfo.licenseType)"
text="营业执照注册地址"
v-model:value="applyDetailInfo.licRegisAddr"
/>
<JeePayForm text="证件有效期开始时间">
<termOfValidity
:defaultDate="applyDetailInfo.licenseEffectBegin"
@publicSelect="publicSelect($event, 'licenseEffectBegin')"
:isEnd="false"
/>
</JeePayForm>
<JeePayForm text="证件有效期截止">
<termOfValidity
:defaultDate="applyDetailInfo.licenseEffectEnd"
@publicSelect="publicSelect($event, 'licenseEffectEnd')"
/>
</JeePayForm>
<JeePayForm text="法人身份证人像面照片">
<JeepayUpLoad
ocrFlag="idCard"
:imgUrl="applyDetailInfo.idcard1Img"
@uploadSuccess="uploadSuccess($event, 'idcard1Img')"
@clear="clear('idcard1Img')"
/>
</JeePayForm>
<JeePayForm
text="法人身份证姓名"
v-model:value="applyDetailInfo.idcardName"
/>
<JeePayForm
text="法人身份证号"
v-model:value="applyDetailInfo.idcardNo"
/>
<JeePayForm text="法人身份证国徽面照片">
<JeepayUpLoad
ocrFlag="idCard"
:imgUrl="applyDetailInfo.idcard2Img"
@uploadSuccess="uploadSuccess($event, 'idcard2Img')"
@clear="clear('idcard2Img')"
/>
</JeePayForm>
<JeePayForm text="法人身份证起始有效期">
<termOfValidity
:defaultDate="applyDetailInfo.idcardEffectBegin"
@publicSelect="publicSelect($event, 'idcardEffectBegin')"
:isEnd="false"
/>
</JeePayForm>
<JeePayForm text="法人身份证结束有效期">
<termOfValidity
:defaultDate="applyDetailInfo.idcardEffectEnd"
@publicSelect="publicSelect($event, 'idcardEffectEnd')"
@endHandle="endHandle"
/>
</JeePayForm>
</view>
</uni-collapse-item>
<uni-collapse-item title="经营信息" class="coll-title">
<view class="content">
<JeePayForm text="选择行业MCC">
<jeeDataPicker
:code="codeBack.mccCode"
:localdata="mccFuiouList"
@change="publicSelect($event, 'mccCode')"
paramType="last"
/>
</JeePayForm>
<JeePayForm
text="商户简称"
v-model:value="applyDetailInfo.mchShortName"
tipText="建议和商户门头名称保持一致"
/>
<JeePayForm
text="客服电话"
v-model:value="applyDetailInfo.servicePhone"
/>
<JeePayForm text="商户经营地区县代码">
<jeeDataPicker
:code="codeBack.areaCode"
:localdata="address"
@change="publicSelect($event, 'areaCode')"
paramType="arr"
/>
</JeePayForm>
<JeePayForm
text="商户详细地址"
v-model:value="applyDetailInfo.address"
/>
<JeePayForm text="门头照">
<JeepayUpLoad
:imgUrl="applyDetailInfo.storeOuterImg"
@uploadSuccess="uploadSuccess($event, 'storeOuterImg')"
@clear="clear('storeOuterImg')"
/>
</JeePayForm>
<JeePayForm text="店内环境照">
<JeepayUpLoad
:imgUrl="applyDetailInfo.storeInnerImg"
@uploadSuccess="uploadSuccess($event, 'storeInnerImg')"
@clear="clear('storeInnerImg')"
/>
</JeePayForm>
<JeePayForm
text="商户联系人姓名"
v-model:value="applyDetailInfo.contactName"
/>
<JeePayForm
text="商户联系人身份证号"
v-model:value="applyDetailInfo.contactCertNo"
/>
<JeePayForm
text="商户联系人电话"
v-model:value="applyDetailInfo.contactPhone"
/>
<JeePayForm
text="商户联系人邮箱"
v-model:value="applyDetailInfo.contactEmail"
/>
</view>
</uni-collapse-item>
<uni-collapse-item title="结算账户" class="coll-title">
<view class="content">
<JeePayForm text="账户类型">
<uni-data-checkbox
v-model="applyDetailInfo.settAccountType"
:localdata="settlementTypeList"
></uni-data-checkbox>
</JeePayForm>
<JeePayForm
text="结算银行卡照片"
v-if="applyDetailInfo.settAccountType == 'C'"
>
<JeepayUpLoad
ocrFlag="bankCard"
:imgUrl="applyDetailInfo.settAccountLicenseImg"
@uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')"
@clear="clear('settAccountLicenseImg')"
/>
</JeePayForm>
<JeePayForm
text="开户许可证照片"
v-if="
applyDetailInfo.settAccountType == 'B' ||
applyDetailInfo.licenseType == '0' ||
applyDetailInfo.licenseType == '1'
"
>
<JeepayUpLoad
:imgUrl="applyDetailInfo.companyAccountLicenseImg"
@uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')"
@clear="clear('companyAccountLicenseImg')"
/>
</JeePayForm>
<JeePayForm
text="开户名称"
v-model:value="applyDetailInfo.settAccountName"
/>
<JeePayForm
text="银行账号"
v-model:value="applyDetailInfo.settAccountNo"
/>
<JeePayForm text="开户行">
<jeeDataPicker
:code="codeBack.settAccountBankName"
:localdata="bankFuiou"
@change="publicSelect($event, 'settAccountBankName')"
paramType="oneLevel"
/>
</JeePayForm>
<JeePayForm
text="联行号"
v-model:value="applyDetailInfo.interBankNo"
/>
<JeePayForm
text="开户支行名称"
v-model:value="applyDetailInfo.settAccountBankBranchName"
/>
<JeePayForm text="法人入账标识">
<uni-data-checkbox
v-model="applyDetailInfo.acntArtifFlag"
:localdata="acntArtifFlagList"
></uni-data-checkbox>
</JeePayForm>
<template v-if="applyDetailInfo.acntArtifFlag == 0">
<JeePayForm text="入账账户身份证人像面照片">
<JeepayUpLoad
:imgUrl="applyDetailInfo.settAccountIdcard1Img"
@uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')"
@clear="clear('settAccountIdcard1Img')"
/>
</JeePayForm>
<JeePayForm text="入账账户身份证国徽面照片">
<JeepayUpLoad
:imgUrl="applyDetailInfo.settAccountIdcard2Img"
@uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')"
@clear="clear('settAccountIdcard2Img')"
ocrFlag="idCard"
/>
</JeePayForm>
<JeePayForm text="入账非法人证明照片">
<JeepayUpLoad
:imgUrl="applyDetailInfo.acntArtifImg"
@uploadSuccess="uploadSuccess($event, 'acntArtifImg')"
@clear="clear('acntArtifImg')"
/>
</JeePayForm>
</template>
<JeePayForm
text="入账证件号"
v-model:value="applyDetailInfo.acntCertifId"
:start="false"
/>
<JeePayForm text="入账证件到期日" :start="false">
<termOfValidity
:defaultDate="applyDetailInfo.acntCertifExpireDt"
@publicSelect="publicSelect($event, 'acntCertifExpireDt')"
/>
</JeePayForm>
<JeePayForm text="清算类型">
<uni-data-checkbox
v-model="applyDetailInfo.settleTp"
:localdata="settleTpList"
></uni-data-checkbox>
</JeePayForm>
<JeePayForm
text="选择清算类型扣率"
v-if="
applyDetailInfo.settleTp == 3 || applyDetailInfo.settleTp == 4
"
>
<jeeDataPicker
:code="codeBack.settleTpCd"
:localdata="settleTpCdArr"
@change="publicSelect($event, 'settleTpCd')"
paramType="oneLevel"
:mapText="{ text: 'rate', value: 'settleTpCd' }"
/>
</JeePayForm>
<JeePayForm
text="清算时间"
v-model:value="applyDetailInfo.settleTs"
tipText="24小时制,如上午8点输入08"
v-if="applyDetailInfo.settleTp == 4"
/>
<!-- <view style="height: 800px">成高度</view> -->
</view>
</uni-collapse-item>
<uni-collapse-item title="补充资料" class="coll-title">
<view class="content">
<JeePayForm
text="组织机构代码证照片"
v-if="applyDetailInfo.licenseType == '0'"
>
<JeepayUpLoad
:imgUrl="applyDetailInfo.organizationImg"
@uploadSuccess="uploadSuccess($event, 'organizationImg')"
@clear="clear('organizationImg')"
/>
</JeePayForm>
<JeePayForm
text="税务登记证照片"
v-if="applyDetailInfo.licenseType == '0'"
>
<JeepayUpLoad
:imgUrl="applyDetailInfo.taxRegistrationImg"
@uploadSuccess="uploadSuccess($event, 'taxRegistrationImg')"
@clear="clear('taxRegistrationImg')"
/>
</JeePayForm>
<JeePayForm
text="手持证件照片"
v-if="applyDetailInfo.licenseType == 'A'"
>
<JeepayUpLoad
:imgUrl="applyDetailInfo.handCertificateImg"
@uploadSuccess="uploadSuccess($event, 'handCertificateImg')"
@clear="clear('handCertificateImg')"
/>
</JeePayForm>
<JeePayForm text="补充资料照片" :start="false">
<JeepayUpLoad
:imgUrl="applyDetailInfo.additionImg"
@uploadSuccess="uploadSuccess($event, 'additionImg')"
@clear="clear('additionImg')"
/>
</JeePayForm>
</view>
</uni-collapse-item>
<!-- 费率组件-->
<defaultRate
ref="defaultRateRef"
isCheck="separate"
/>
</uni-collapse>
</view>
<!-- 富有进价后操作 -->
<fuiouEvent />
</template>
<script setup>
import { ref, reactive, inject } from "vue";
import address from "@/components/applyJson/addressFuiou.json"; // 地址
import mccFuiou from "@/components/applyJson/mccFuiou.json"; // 行业
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
import defaultRate from "../../components/defaultRate.vue"; // 默认费率
import readOnlyInfo from "../../components/readOnlyInfo.vue"; // 只读文件
import tool from "@/util/tool.js"; // 工具类函数
import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
import termOfValidity from "@/components/applyComponents/termOfValidity.vue"; // 选择证件有效期
import jeeDataPicker from "@/components/applyComponents/dataPicker.vue"; // 通用级联选择
import bankFuiou from "@/components/applyJson/bankFuiou.json"; // 选择银行
import settleTpCdArr from "@/components/applyJson/settleTpCd.json"; // 选择清算折扣率
import { filterDcit } from "@/hooks/dict"; // 字典
import fuiouEvent from './fuiouEvent.vue' // 富有进件后的操作
const merchantTypeList = reactive(filterDcit(["A1", "A3", "A2"])); //商户类型
const whetherList = reactive(filterDcit(["C0", "C1"])); // 开通or不开通
const settlementTypeList = reactive(filterDcit(["B0", "B1"])); // 结算类型
const settleTpList = reactive(filterDcit(["D2", "D1", "D0", "D3"])); // 清算类型
const acntArtifFlagList = reactive(filterDcit(["K0", "K1"])); // 法人入账标识
const channelInfo = inject("channelInfo");
const emit = defineEmits(["paramsHandle", "applyHandle"]);
// 商户进件详细信息JSON类型字符串
const applyDetailInfo = reactive({
licenseType: "A", // 证件类型
settleTp: "1", // 结算类型默认1
});
// 状态分类: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
// 当状态为 1 2 4 5 时要开启只读模式0 3 不开启
let isDisable = ref(false);
if (!["0", "3", "8"].includes(channelInfo.state)) isDisable.value = true;
// 上传图片成功 以及OCR识别信息回显
const uploadSuccess = (res, name) => {
applyDetailInfo[name] = res.data;
if (res.ocrInfo && Object.keys(res.ocrInfo).length < 1) return false;
// OCR图片识别 idCard-身份证 idcard1Imgidcard2Img license-营业执照 licenseImg
if (name == "idcard1Img") {
applyDetailInfo.idcardName = res.ocrInfo.idcardName; // 法人身份证姓名
applyDetailInfo.idcardNo = res.ocrInfo.idcardNo; // 法人身份证号
} else if (name == "idcard2Img") {
applyDetailInfo.idcardEffectBegin = res.ocrInfo.idcardEffectBegin; // 有效期
applyDetailInfo.idcardEffectEnd = res.ocrInfo.idcardEffectEnd; // 有效期end
} else if (name == "licenseImg") {
applyDetailInfo.licenseEffectBegin = res.ocrInfo.licenseEffectBegin; // 执照有效期
applyDetailInfo.licenseEffectEnd = res.ocrInfo.licenseEffectEnd; // 有效期end
applyDetailInfo.mchFullName = res.ocrInfo.mchFullName; // 全称
applyDetailInfo.licenseNo = res.ocrInfo.licenseNo; // 编号
applyDetailInfo.address = applyDetailInfo.licRegisAddr =
res.ocrInfo.address;
} else if (name == "settAccountLicenseImg") {
applyDetailInfo.settAccountNo = res.ocrInfo.settAccountNo; // 银行卡号
} else if (name == "settAccountIdcard2Img") {
applyDetailInfo.acntCertifExpireDt = res.ocrInfo.idcardEffectEnd; // 持卡人有效期end
}
};
// 清除图片 仅前端
const clear = (key) => (applyDetailInfo[key] = "");
let mccFuiouList = ref(); // 富有具体的行业类型
// 通用选择事件 回调函数
const publicSelect = (e, key) => {
applyDetailInfo[key] = e.detail.value;
// 根据不同的主体类型 走不同的json
applyDetailInfo.merchantType == 3
? (mccFuiouList.value = mccFuiou.corporationList)
: (mccFuiouList.value = mccFuiou.personalList);
if (key == "merchantType") {
mchTypeInfo(e.detail.value);
}
};
// 证件类型,随主体类型变更
const licenseList = ref([]);
// 证件类型具体内容
const mchTypeInfo = (val) => {
const value = typeof val == "object" ? val.detail.value : val;
if (value == 1) {
licenseList.value = [{ value: "A", name: "身份证" }];
applyDetailInfo.licenseType = "A";
} else if (value == 2) {
licenseList.value = [{ value: "B", name: "营业执照" }];
} else if (value == 3) {
licenseList.value = [
{ value: "0", name: "营业执照" },
{ value: "1", name: "三证合一" },
];
}
};
// 发起进件
const launchApply = (isTempData) => {
// 拿费率组件的值
applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)
// 判断类型,对象类型是费率正常提交 Sting 是错误信息
if (typeof applyDetailInfo.paywayFeeList === "string")
return uni.showToast({
title: applyDetailInfo.paywayFeeList,
icon: "none",
});
emit("applyHandle", {
name: "fuioupay",
isTempData,
applyDetailInfo,
formCheck: [
applyDetailInfo.settAccountType,
applyDetailInfo.licenseType,
applyDetailInfo.acntArtifFlag,
applyDetailInfo.settleTp,
],
});
};
let codeBack = reactive({}); // 用于级联选择器 文字回显
let applyInfoRef = ref(null); // 只读组件信息
// 合并信息方法, 智能读取,和信息回显,通过此方法合并
const assignObj = (obj) => {
obj.merchantType == 3
? (mccFuiouList.value = mccFuiou.corporationList)
: (mccFuiouList.value = mccFuiou.personalList);
mchTypeInfo(obj.merchantType);
// 开启只读模式
if (isDisable.value) {
// 证件码转文字
let mchType = obj.merchantType;
if (mchType == "A") {
obj.licenseText = "身份证";
} else if (mchType == "B") {
obj.licenseText = "营业执照";
} else if (mchType == "0") {
obj.licenseText = "营业执照";
} else if (mchType == "1") {
obj.licenseText = "三证合一";
}
obj.mccText = tool.mccBack(obj.mccCode, mccFuiouList.value, "last"); // 行业码转文字
obj.areaText = tool.addressBack(obj.areaCode, address); // 地址码转文字
obj.settAccountText = obj.settAccountType == "C" ? "对私" : "对公"; // 账户类型
obj.acntArtifText = obj.acntArtifFlag == "0" ? "非法人入账" : "法人入账";
if (applyDetailInfo.settleTp == "1") {
// 清算类型
obj.acntArtifText = "自动结算T1";
} else if (applyDetailInfo.settleTp == "2") {
obj.acntArtifText = "手动结算";
}
applyInfoRef.value.getApplyInof(obj);
}
// 用于级联选择器 文字回显
Object.assign(applyDetailInfo, obj);
codeBack.mccCode = obj.mccCode;
codeBack.areaCode = obj.areaCode;
codeBack.settAccountBankName = obj.settAccountBankName;
codeBack.settleTpCd = obj.settleTpCd; // 清算类型扣率
};
const defaultRateRef = ref(); // 费率组件
defineExpose({ launchApply, assignObj });
</script>
<style scoped lang="scss">
@import "../../static/information.scss";
</style>