429 lines
15 KiB
Vue
429 lines
15 KiB
Vue
<template>
|
||
<!-- 只读文件 -->
|
||
<readOnlyInfo
|
||
v-if="isDisable"
|
||
ref="applyInfoRef"
|
||
applyName="ysfpay"
|
||
></readOnlyInfo>
|
||
<!-- 盛付通进件模板 -->
|
||
<view v-if="!isDisable">
|
||
<uni-collapse ref="collapse">
|
||
<uni-collapse-item
|
||
:show-animation="false"
|
||
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.acqOrgType"
|
||
:localdata="acqOrgTypeList"
|
||
@change="mchTypeInfo"
|
||
></uni-data-checkbox>
|
||
</JeePayForm>
|
||
|
||
<template v-if="applyDetailInfo.merchantType != 1">
|
||
<JeePayForm text="营业执照照片">
|
||
<JeepayUpLoad
|
||
ocrFlag="license"
|
||
:imgUrl="applyDetailInfo.licenseImg"
|
||
@uploadSuccess="uploadSuccess($event, 'licenseImg')"
|
||
@clear="clear('licenseImg')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm
|
||
text="营业执照编号"
|
||
v-model:value="applyDetailInfo.licenseNo"
|
||
/>
|
||
|
||
<JeePayForm text="营业执照有效期截止">
|
||
<termOfValidity
|
||
:defaultDate="applyDetailInfo.licenseEffectEnd"
|
||
@publicSelect="publicSelect($event, 'licenseEffectEnd')"
|
||
@endHandle="endHandle"
|
||
/>
|
||
</JeePayForm>
|
||
</template>
|
||
|
||
<JeePayForm
|
||
text="用户名称"
|
||
v-model:value="applyDetailInfo.mchFullName"
|
||
/>
|
||
|
||
<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
|
||
:imgUrl="applyDetailInfo.idcard2Img"
|
||
@uploadSuccess="uploadSuccess($event, 'idcard2Img')"
|
||
@clear="clear('idcard2Img')"
|
||
/>
|
||
</JeePayForm>
|
||
</view>
|
||
</uni-collapse-item>
|
||
<uni-collapse-item
|
||
:show-animation="false"
|
||
title="经营信息"
|
||
class="coll-title"
|
||
>
|
||
<view class="content">
|
||
<JeePayForm text="经营类目">
|
||
<jeeDataPicker
|
||
:code="applyDetailInfo.mccCode"
|
||
:localdata="mcc"
|
||
@change="publicSelect($event, 'mccCode')"
|
||
paramType="oneLevel"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm
|
||
text="商户联系人姓名"
|
||
v-model:value="applyDetailInfo.contactName"
|
||
/>
|
||
<JeePayForm
|
||
text="商户联系人手机号"
|
||
v-model:value="applyDetailInfo.contactPhone"
|
||
/>
|
||
<JeePayForm
|
||
text="客服电话"
|
||
v-model:value="applyDetailInfo.serviceTel"
|
||
/>
|
||
|
||
<JeePayForm
|
||
text="邮箱地址"
|
||
v-model:value="applyDetailInfo.contactEmail"
|
||
/>
|
||
<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.storeOuter2Img"
|
||
@uploadSuccess="uploadSuccess($event, 'storeOuter2Img')"
|
||
@clear="clear('storeOuter2Img')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="店内环境照">
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.storeInnerImg"
|
||
@uploadSuccess="uploadSuccess($event, 'storeInnerImg')"
|
||
@clear="clear('storeInnerImg')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="收银台照">
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.storeCashierImg"
|
||
@uploadSuccess="uploadSuccess($event, 'storeCashierImg')"
|
||
@clear="clear('storeCashierImg')"
|
||
/>
|
||
</JeePayForm>
|
||
</view>
|
||
</uni-collapse-item>
|
||
<uni-collapse-item
|
||
:show-animation="false"
|
||
title="结算账户"
|
||
class="coll-title"
|
||
>
|
||
<view class="content">
|
||
<JeePayForm text="账户类型">
|
||
<uni-data-checkbox
|
||
v-model="applyDetailInfo.settAccountType"
|
||
:localdata="settlementTypeList"
|
||
></uni-data-checkbox>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="结算周期">
|
||
<uni-data-picker
|
||
:localdata="settleArray"
|
||
@change="publicSelect($event, 'settlePeriod')"
|
||
v-slot:default="{ data }"
|
||
>{{ settleText ? settleText : "请选择" }}</uni-data-picker
|
||
>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="银行卡正面照">
|
||
<JeepayUpLoad
|
||
ocrFlag="bankCard"
|
||
:imgUrl="applyDetailInfo.settAccountLicenseImg"
|
||
@uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')"
|
||
@clear="clear('settAccountLicenseImg')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm
|
||
text="银行开户名"
|
||
v-model:value="applyDetailInfo.settAccountName"
|
||
/>
|
||
<JeePayForm
|
||
text="银行预留手机号"
|
||
v-model:value="applyDetailInfo.openBankReservePhone"
|
||
/>
|
||
<JeePayForm
|
||
text="银行账号"
|
||
v-model:value="applyDetailInfo.settAccountNo"
|
||
/>
|
||
<JeePayForm
|
||
text="银行名称"
|
||
v-model:value="applyDetailInfo.settAccountBankName"
|
||
/>
|
||
<JeePayForm
|
||
text="开户支行名称"
|
||
v-model:value="applyDetailInfo.settAccountBankBranchName"
|
||
/>
|
||
<JeePayForm
|
||
text="联行行号"
|
||
v-model:value="applyDetailInfo.openBankCode"
|
||
/>
|
||
<template v-if="applyDetailInfo.settleAccountType == 3">
|
||
<JeePayForm text="被授权人证件人像照">
|
||
<JeepayUpLoad
|
||
ocrFlag="idCard"
|
||
:imgUrl="applyDetailInfo.settAccountIdcard1Img"
|
||
@uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')"
|
||
@clear="clear('settAccountIdcard1Img')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="被授权人证件国徽照">
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.settAccountIdcard2Img"
|
||
@uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')"
|
||
@clear="clear('settAccountIdcard2Img')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm
|
||
text="被授权人身份证号"
|
||
v-model:value="applyDetailInfo.settAccountIdcardNo"
|
||
/>
|
||
|
||
<JeePayForm text="结算授权证书">
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.applymentDetailInfo"
|
||
@uploadSuccess="uploadSuccess($event, 'applymentDetailInfo')"
|
||
@clear="clear('applymentDetailInfo')"
|
||
/>
|
||
</JeePayForm>
|
||
</template>
|
||
|
||
<JeePayForm
|
||
text="开户许可证"
|
||
v-if="applyDetailInfo.settleAccountType == 1"
|
||
>
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.companyAccountLicenseImg"
|
||
@uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')"
|
||
@clear="clear('companyAccountLicenseImg')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="商户收单协议">
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.acquiringAgreementPhoto"
|
||
@uploadSuccess="uploadSuccess($event, 'acquiringAgreementPhoto')"
|
||
@clear="clear('acquiringAgreementPhoto')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="拓展资料" :start="false">
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.reserve1"
|
||
@uploadSuccess="uploadSuccess($event, 'reserve1')"
|
||
@clear="clear('reserve1')"
|
||
/>
|
||
</JeePayForm>
|
||
</view>
|
||
</uni-collapse-item>
|
||
|
||
<!-- 盛付通费率组件 -->
|
||
<defaultRate ref="defaultRateRef" />
|
||
</uni-collapse>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, inject } from "vue";
|
||
import address from "@/components/applyJson/ysfAddress.json"; // 地址
|
||
import mcc from "@/components/applyJson/mccYsf.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 { filterDcit } from "@/hooks/dict"; // 字典
|
||
const merchantTypeList = reactive(filterDcit(["A0", "A1", "A2"])); // 商户类型
|
||
const acqOrgTypeList = reactive(filterDcit(["E0", "E1", "E2"])); // 机构类型
|
||
const settlementTypeList = reactive(filterDcit(["B3", "B4", "B5"])); // 结算类型
|
||
|
||
const channelInfo = inject('channelInfo')
|
||
|
||
const emit = defineEmits(["applyHandle"]);
|
||
|
||
// 状态分类: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
|
||
// 当状态为 1 2 4 5 时要开启只读模式，1 3 不开启
|
||
let isDisable = ref(false);
|
||
if (!["0", "3", "8"].includes(channelInfo.state)) isDisable.value = true;
|
||
|
||
// 商户进件详细信息（JSON类型字符串）
|
||
let applyDetailInfo = reactive({
|
||
merchantType: 3, // 商户类型 默认为3 代表企业
|
||
settleAccountType: "", // 结算账号类型 默认为B 对公
|
||
});
|
||
|
||
// 结算周期
|
||
let settleText = ref("");
|
||
const settleArray = [
|
||
{ value: "1", text: "T+1" },
|
||
{ value: "2", text: "D+0" },
|
||
{ value: "3", text: "T+0" },
|
||
{ value: "4", text: "D+1" },
|
||
];
|
||
|
||
/*
|
||
|
||
云闪付的地址JSON不是国标码, 直辖市的一级和二级是一样的value, 在uni的级联选择器中存在bug,可以做到无限分级, 所以要手动改一下json, 把其中一个字符串类型,改为数字类型即可
|
||
|
||
*/
|
||
// 通用选择函数
|
||
const publicSelect = (e, key) => {
|
||
applyDetailInfo[key] = e.detail.value;
|
||
|
||
if (key == "settlePeriod") {
|
||
// 结算周期文字回显
|
||
applyDetailInfo.settlePeriod = e.detail.value[0].value;
|
||
settleText.value = settleArray.find(
|
||
(item) => item.value == e.detail.value[0].value
|
||
).text;
|
||
}
|
||
};
|
||
|
||
// 上传图片成功
|
||
const uploadSuccess = (res, name) => {
|
||
applyDetailInfo[name] = res.data;
|
||
if (res.ocrInfo && Object.keys(res.ocrInfo).length < 1) return false;
|
||
// OCR图片识别 idCard-身份证 idcard1Img，idcard2Img license-营业执照 licenseImg
|
||
if (name == "idcard1Img") {
|
||
applyDetailInfo.idcardName = res.ocrInfo.idcardName; // 法人身份证姓名
|
||
applyDetailInfo.idcardNo = res.ocrInfo.idcardNo; // 法人身份证号
|
||
} else if (name == "licenseImg") {
|
||
applyDetailInfo.licenseEffectEnd = res.ocrInfo.licenseEffectEnd; // 有效期end
|
||
applyDetailInfo.mchFullName = res.ocrInfo.mchFullName; // 全称
|
||
applyDetailInfo.licenseNo = res.ocrInfo.licenseNo; // 编号
|
||
applyDetailInfo.address = res.ocrInfo.address;
|
||
} else if (name == "settAccountLicenseImg") {
|
||
applyDetailInfo.settAccountNo = res.ocrInfo.settAccountNo; // 银行卡号
|
||
} else if (name == "settAccountIdcard1Img") {
|
||
applyDetailInfo.settAccountIdcardNo = res.ocrInfo.idcardNo; // 被授权人身份证号
|
||
}
|
||
};
|
||
// 清除图片 仅前端
|
||
const clear = (name, url) => (applyDetailInfo[name] = "");
|
||
|
||
const defaultRateRef = ref(); // 获取费率组件
|
||
// 发起进件 注意后面的formCheck参数，表单校验要用
|
||
const launchApply = (isTempData) => {
|
||
// 有费率的进件渠道，要在发起进件之前，获取所选择的费率信息
|
||
applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)
|
||
emit("applyHandle", {
|
||
name: "ysfpay",
|
||
isTempData,
|
||
applyDetailInfo,
|
||
formCheck: [
|
||
applyDetailInfo.merchantType,
|
||
applyDetailInfo.settleAccountType,
|
||
],
|
||
});
|
||
};
|
||
|
||
// 只读组件信息
|
||
let applyInfoRef = ref(null);
|
||
|
||
// 行业类型，地理位置回显
|
||
let codeBack = reactive({
|
||
areaCode: "", // 商户地理位置回显
|
||
});
|
||
|
||
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
|
||
const assignObj = (obj) => {
|
||
Object.assign(applyDetailInfo, obj);
|
||
|
||
if (!isDisable.value) {
|
||
codeBack.areaCode = obj.areaCode ? obj.areaCode[2] : obj.areaCode; // 地址码，取最后一个
|
||
// 各类文字回显 结算周期
|
||
if (obj.settlePeriod)
|
||
settleText.value = settleArray.find(
|
||
(item) => item.value == obj.settlePeriod
|
||
).text;
|
||
} else {
|
||
// 以下用于只读信息页
|
||
obj.mccText = obj.mccCode.split("_")[0]; // 行业码转文字
|
||
obj.areaText = tool.addressBack(obj.areaCode, address); // 地址码转文字
|
||
obj.settAccountText = obj.settAccountType == "C" ? "对私" : "对公";
|
||
obj.merchantText =
|
||
obj.merchantType == 1
|
||
? "个人"
|
||
: obj.merchantType == 2
|
||
? "个体工商户"
|
||
: "企业";
|
||
|
||
// 传值给只读组件
|
||
if (applyInfoRef.value) applyInfoRef.value.getApplyInof(obj);
|
||
}
|
||
};
|
||
|
||
defineExpose({ launchApply, assignObj });
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "../static/information.scss";
|
||
</style>
|