源文件
This commit is contained in:
278
jeepay-ui-uapp-agent/pageApply/channel/dgpay/dgEvent.vue
Normal file
278
jeepay-ui-uapp-agent/pageApply/channel/dgpay/dgEvent.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
|
||||
<!-- 开通业务 -->
|
||||
<view class="title-center"> 开通业务 </view>
|
||||
|
||||
<view style="margin-bottom: 20px">
|
||||
|
||||
<JeePayForm text="商户类型">
|
||||
{{ openService.merchantType == '1' ? '个人' : '企业' }}
|
||||
</JeePayForm>
|
||||
|
||||
<template v-if="openService.merchantType != '1'">
|
||||
|
||||
<JeePayForm text="法人身份证人像面照片">
|
||||
<JeepayUpLoad :imgUrl="openService.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')" @clear="clear('idcard1Img')" />
|
||||
</JeePayForm>
|
||||
<JeePayForm text="法人身份证国徽面照片">
|
||||
<JeepayUpLoad :imgUrl="openService.idcard2Img" @uploadSuccess="uploadSuccess($event, 'idcard2Img')" @clear="clear('idcard2Img')" />
|
||||
</JeePayForm>
|
||||
<JeePayForm text="营业执照照片">
|
||||
<JeepayUpLoad :imgUrl="openService.licenseImg" @uploadSuccess="uploadSuccess($event, 'licenseImg')" @clear="clear('licenseImg')" />
|
||||
</JeePayForm>
|
||||
<JeePayForm text="门头照">
|
||||
<JeepayUpLoad :imgUrl="openService.storeOuterImg" @uploadSuccess="uploadSuccess($event, 'storeOuterImg')" @clear="clear('storeOuterImg')" />
|
||||
</JeePayForm>
|
||||
<JeePayForm text="店内环境照">
|
||||
<JeepayUpLoad :imgUrl="openService.storeInnerImg" @uploadSuccess="uploadSuccess($event, 'storeInnerImg')" @clear="clear('storeInnerImg')" />
|
||||
</JeePayForm>
|
||||
<JeePayForm text="收银台照">
|
||||
<JeepayUpLoad :imgUrl="openService.storeCashierImg" @uploadSuccess="uploadSuccess($event, 'storeCashierImg')" @clear="clear('storeCashierImg')" />
|
||||
</JeePayForm>
|
||||
<JeePayForm text="开户许可证照片">
|
||||
<JeepayUpLoad :imgUrl="openService.companyAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')" @clear="clear('companyAccountLicenseImg')" />
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<template v-if="openService.settAccountType == 'C'">
|
||||
<JeePayForm text="结算卡正面照片">
|
||||
<JeepayUpLoad :imgUrl="openService.settAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')" @clear="clear('settAccountLicenseImg')" />
|
||||
</JeePayForm>
|
||||
<JeePayForm text="结算卡反面照片">
|
||||
<JeepayUpLoad :imgUrl="openService.settBankCardBackImg" @uploadSuccess="uploadSuccess($event, 'settBankCardBackImg')" @clear="clear('settBankCardBackImg')" />
|
||||
</JeePayForm>
|
||||
<JeePayForm text="结算人身份证人像照片">
|
||||
<JeepayUpLoad :imgUrl="openService.settAccountIdcard1Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')" @clear="clear('settAccountIdcard1Img')" />
|
||||
</JeePayForm>
|
||||
<JeePayForm text="结算人身份证国徽面照片">
|
||||
<JeepayUpLoad :imgUrl="openService.settAccountIdcard2Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')" @clear="clear('settAccountIdcard2Img')" />
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<JeePayForm text="授权委托书" v-if="openService.settAccountType == 'D'">
|
||||
<JeepayUpLoad :imgUrl="openService.authEnturstPic" @uploadSuccess="uploadSuccess($event, 'authEnturstPic')" @clear="clear('authEnturstPic')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商务协议" v-if="openService.settAccountType == '3'" :start="false">
|
||||
<JeepayUpLoad :imgUrl="openService.bankPic" @uploadSuccess="uploadSuccess($event, 'bankPic')" @clear="clear('bankPic')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="支付宝商户经营类目">
|
||||
<jeeDataPicker :localdata="aliMcc" :code="openService.aliFeeMcc" @change="publicSelect($event, 'aliFeeMcc')" paramType="oneLevel" />
|
||||
</JeePayForm>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 费率组件 -->
|
||||
<defaultRate ref="defaultRateRef" @autoPos="autoPosHandle" />
|
||||
|
||||
<view class="authentication-btn" @click="onSubmitWxRealName">发起认证</view>
|
||||
|
||||
<!-- 商户实名认证 -->
|
||||
<view class="authentication">
|
||||
<view class="title">
|
||||
<text>商户实名认证</text>
|
||||
<view v-if="vdata.wxOpenInfo.signUrl" @click="refreshWxOpenInfo" class="btn">刷新</view>
|
||||
</view>
|
||||
<view>{{vdata.wxOpenInfo.state || "异常[" + vdata.wxOpenInfo.errInfo + "]"}}</view>
|
||||
</view>
|
||||
|
||||
<view class="reject" v-if="vdata.wxOpenInfo.errInfo">
|
||||
<text class="title">驳回原因</text>
|
||||
<view style="color: #fd2821">{{ vdata.wxOpenInfo.errInfo }}</view>
|
||||
</view>
|
||||
|
||||
<view class="code-box" v-if="vdata.wxOpenInfo.signUrl">
|
||||
<view>商户联系人使用已绑定银行卡的微信扫下面的二维码:</view>
|
||||
<image :src="tool.drawQRcode(vdata.wxOpenInfo.signUrl)" />
|
||||
<view class="jeepay-tip-text">(温馨提示:自助认证不限制谁来操作认证,但建议是商户联系人进行认证,以免后期需要扫码找不到微信认证管理员)</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
|
||||
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
|
||||
import { ref, reactive, inject, toRaw } from 'vue'
|
||||
import { $mchApplymentsInfo, $getMchApplymentWxOpenInfo, $dgpayWxRealName, } from "@/http/apiManager.js";
|
||||
import tool from "@/util/tool.js"; // 工具类函数
|
||||
import jeeDataPicker from "@/components/applyComponents/dataPicker.vue"; // 通用级联选择
|
||||
import wxMcc from "@/components/applyJson/jeepayMcc.json"; // 微信mcc
|
||||
import defaultRate from "../../components/defaultRate.vue"; // 默认费率
|
||||
|
||||
/*
|
||||
开通业务板块 只在进件成功后开启 state:2
|
||||
*/
|
||||
let vdata = reactive({
|
||||
wxOpenInfo: {}, // 微信开户意愿信息
|
||||
});
|
||||
let openService = reactive({ // 进件信息
|
||||
// aliConfList:[], // 支付宝业务
|
||||
// wxConfList: [], // 微信业务
|
||||
})
|
||||
|
||||
let defaultRateRef = ref(null); // 费率组件
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
// 支付宝经营类目
|
||||
const aliMcc = reactive([
|
||||
{ value: '2015050700000000', text: '美食' },
|
||||
{ value: '2015091000052157', text: '超市便利店' },
|
||||
{ value: '2015062600004525', text: '休闲娱乐' },
|
||||
{ value: '2015062600002758', text: '购物' },
|
||||
{ value: '2016062900190124', text: '爱车' },
|
||||
{ value: '2015063000020189', text: '生活服务' },
|
||||
{ value: '2016042200000148', text: '教育培训' },
|
||||
{ value: '2016062900190296', text: '医疗健康' },
|
||||
{ value: '2015080600000001', text: '航旅' },
|
||||
{ value: '2016062900190337', text: '专业销售/批发' },
|
||||
{ value: '2016062900190371', text: '政府/社会组织' },
|
||||
])
|
||||
|
||||
// 通用选择器回调
|
||||
const publicSelect = (e, name) => {
|
||||
openService[name] = e.detail.value
|
||||
}
|
||||
|
||||
// 请求微信实名认证查询
|
||||
const getWxOpenInfo = () => {
|
||||
$getMchApplymentWxOpenInfo(channelInfo.applyId)
|
||||
.then((res) => {
|
||||
if (vdata.isRefresh) {
|
||||
uni.showToast({ title: "已刷新", icon: "none" });
|
||||
vdata.isRefresh = false;
|
||||
}
|
||||
vdata.wxOpenInfo = res.bizData;
|
||||
})
|
||||
};
|
||||
|
||||
// 刷新微信实名认证
|
||||
const refreshWxOpenInfo = () => {
|
||||
vdata.isRefresh = true;
|
||||
getWxOpenInfo();
|
||||
};
|
||||
|
||||
if (channelInfo.state == 2) {
|
||||
// 请求非加密的进件信息
|
||||
let originData = 1
|
||||
$mchApplymentsInfo(channelInfo.applyId, originData)
|
||||
.then(({ bizData }) => {
|
||||
Object.assign(openService, JSON.parse(bizData.applyDetailInfo));
|
||||
}).catch((err) => console.log(err));
|
||||
|
||||
// 请求微信实名认证查询
|
||||
getWxOpenInfo();
|
||||
}
|
||||
|
||||
// 上传图片成功 及OCR识别回显
|
||||
const uploadSuccessOS = (res, name) => {
|
||||
openService[name] = res.data;
|
||||
if (res.ocrInfo && Object.keys(res.ocrInfo).length < 1) return false;
|
||||
// OCR图片识别 idCard-身份证 idcard1Img，idcard2Img license-营业执照 licenseImg
|
||||
if (name == "idcard1Img") {
|
||||
openService.idcardName = res.ocrInfo.idcardName; // 法人身份证姓名
|
||||
openService.idcardNo = res.ocrInfo.idcardNo; // 法人身份证号
|
||||
}
|
||||
};
|
||||
|
||||
// 清除图片 仅前端
|
||||
const clear = (name, url) => openService[name] = ""
|
||||
|
||||
// 发起认证
|
||||
const onSubmitWxRealName = () => {
|
||||
// 有费率的进件渠道，要在发起进件之前，获取所选择的费率信息
|
||||
openService.paywayFeeList = defaultRateRef.value.getList(false)
|
||||
uni.showLoading({ title: "提交中..." });
|
||||
$dgpayWxRealName(channelInfo.applyId, toRaw(openService)).then((res) => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "提交成功", icon: "none" })
|
||||
uni.navigateBack()
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../static/information.scss";
|
||||
// 微信实名认证
|
||||
.authentication {
|
||||
padding: 35rpx 30rpx 35rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1rpx solid #e8e8e8;
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 驳回原因
|
||||
.reject {
|
||||
padding: 35rpx 30rpx 35rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1rpx solid #e8e8e8;
|
||||
.title {
|
||||
margin-right: 30rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 发起认证
|
||||
.authentication-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30rpx auto;
|
||||
width: 380rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #0041c4;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// 图片
|
||||
.code-box {
|
||||
box-sizing: border-box;
|
||||
padding: 35rpx 30rpx 35rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
image {
|
||||
margin: 40rpx auto;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border-radius: 10rpx;
|
||||
background: #3981FF;
|
||||
color: #fff;
|
||||
padding: 5rpx 15rpx;
|
||||
}
|
||||
.title-center {
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
background-color: #fafbfc;
|
||||
border-top: 1rpx solid #e8e8e8;
|
||||
}
|
||||
.business-title {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.business-content {
|
||||
margin: 0 30rpx 30rpx ;
|
||||
border: 1rpx solid #e8e8e8;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
</style>
|
||||
727
jeepay-ui-uapp-agent/pageApply/channel/dgpay/dgpay.vue
Normal file
727
jeepay-ui-uapp-agent/pageApply/channel/dgpay/dgpay.vue
Normal file
@@ -0,0 +1,727 @@
|
||||
<template>
|
||||
<!-- 该页面为填写信息的组件 -->
|
||||
<!-- 只读文件 -->
|
||||
<readOnlyInfo
|
||||
v-if="isDisable"
|
||||
ref="dgpayRef"
|
||||
applyName="dgpay"
|
||||
:applyId="channelInfo.applyId"
|
||||
/>
|
||||
|
||||
<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"
|
||||
></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.mchShortName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="营业执照编号"
|
||||
v-model:value="applyDetailInfo.licenseNo"
|
||||
/>
|
||||
|
||||
<JeePayForm text="营业执照起始有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.licenseEffectBegin"
|
||||
@publicSelect="publicSelect($event, 'licenseEffectBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="营业执照有效期截止">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.licenseEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'licenseEffectEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<JeePayForm
|
||||
text="用户名称"
|
||||
v-model:value="applyDetailInfo.mchFullName"
|
||||
/>
|
||||
|
||||
<JeePayForm text="管理员账号" v-model:value="applyDetailInfo.loginUserName" tipText="斗拱商户登录名,用于商户平台登录。全局唯一。支持英文、数字、下划线，区分大小写" />
|
||||
|
||||
<template v-if="applyDetailInfo.merchantType != 1">
|
||||
<JeePayForm text="法人身份证人像面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.idcard1Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'idcard1Img')"
|
||||
@clear="clear('idcard1Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证国徽面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.idcard2Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'idcard2Img')"
|
||||
@clear="clear('idcard2Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="法人身份证姓名"
|
||||
v-model:value="applyDetailInfo.idcardName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="法人身份证号"
|
||||
v-model:value="applyDetailInfo.idcardNo"
|
||||
/>
|
||||
|
||||
<JeePayForm text="法人身份证起始有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.idcardEffectBegin"
|
||||
@publicSelect="publicSelect($event, 'idcardEffectBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证结束有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.idcardEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'idcardEffectEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="经营信息" class="coll-title">
|
||||
<view class="content">
|
||||
<JeePayForm text="经营类目">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.mccCode"
|
||||
:localdata="mcc"
|
||||
@change="publicSelect($event, 'mccCode')"
|
||||
paramType="last"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<template v-if="applyDetailInfo.merchantType != 1">
|
||||
<JeePayForm text="经营类型">
|
||||
<uni-data-checkbox
|
||||
v-model="applyDetailInfo.busiType"
|
||||
:localdata="busiTypeList"
|
||||
></uni-data-checkbox>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="小票名称"
|
||||
v-model:value="applyDetailInfo.receiptName"
|
||||
/>
|
||||
|
||||
<JeePayForm text="公司类型">
|
||||
<uni-data-picker
|
||||
:localdata="entArray"
|
||||
@change="publicSelect($event, 'entType')"
|
||||
v-slot:default="{ data }"
|
||||
>{{ entText ? entText : "请选择" }}</uni-data-picker
|
||||
>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<JeePayForm
|
||||
text="联系人姓名"
|
||||
v-model:value="applyDetailInfo.contactName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="联系人手机号"
|
||||
v-model:value="applyDetailInfo.contactPhone"
|
||||
/>
|
||||
<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="客服电话"
|
||||
v-model:value="applyDetailInfo.servicePhone"
|
||||
/>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="结算账户" class="coll-title">
|
||||
<view class="content">
|
||||
<JeePayForm text="账户类型">
|
||||
<uni-data-checkbox
|
||||
v-model="applyDetailInfo.settAccountType"
|
||||
:localdata="settAccountTypeList"
|
||||
></uni-data-checkbox>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="银行卡开户名"
|
||||
v-model:value="applyDetailInfo.settAccountName"
|
||||
/>
|
||||
|
||||
<template v-if="applyDetailInfo.settAccountType == 'C'">
|
||||
<JeePayForm text="结算卡正面照">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.settAccountLicenseImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')"
|
||||
@clear="clear('settAccountLicenseImg')"
|
||||
ocrFlag="bankCard"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算卡反面照">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.settBankCardBackImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'settBankCardBackImg')"
|
||||
@clear="clear('settBankCardBackImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<JeePayForm
|
||||
text="银行卡号"
|
||||
v-model:value="applyDetailInfo.settAccountNo"
|
||||
/>
|
||||
|
||||
<JeePayForm text="银行卡开户地">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.settAccountBankBranchAreaCode"
|
||||
:localdata="address"
|
||||
@change="publicSelect($event, 'settAccountBankBranchAreaCode')"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<template v-if="applyDetailInfo.settAccountType == 'B'">
|
||||
<JeePayForm
|
||||
text="银行编码"
|
||||
v-model:value="applyDetailInfo.bankCode"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="联行行号"
|
||||
v-model:value="applyDetailInfo.branchCode"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<JeePayForm text="是否为法人信息" :start="false">
|
||||
<uni-data-checkbox :localdata="[{'value':1,'text':'是'},{'value':0,'text':'否'}]" @change="publicSelect($event, 'isLegal')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算人身份证人像面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.settAccountIdcard1Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')"
|
||||
@clear="clear('settAccountIdcard1Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算人身份证国徽面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.settAccountIdcard2Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')"
|
||||
@clear="clear('settAccountIdcard2Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="[持卡人]人身份证号"
|
||||
v-model:value="applyDetailInfo.settAccountIdcardNo"
|
||||
/>
|
||||
|
||||
<JeePayForm text="[持卡人]身份证起始有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.settAccountIdcardEffectBegin"
|
||||
@publicSelect="
|
||||
publicSelect($event, 'settAccountIdcardEffectBegin')
|
||||
"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="[持卡人]身份证结束有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.settAccountIdcardEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'settAccountIdcardEffectEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="[持卡人]手机号"
|
||||
v-model:value="applyDetailInfo.settAccountBindPhone"
|
||||
/>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
<uni-collapse-item
|
||||
:show-animation="false"
|
||||
title="材料信息"
|
||||
class="coll-title"
|
||||
>
|
||||
<view class="content">
|
||||
<!-- <JeePayForm text="业务类型" :start="false">
|
||||
<uni-data-picker
|
||||
:localdata="cashArray"
|
||||
@change="publicSelect($event, 'cashType')"
|
||||
v-slot:default="{ data }"
|
||||
>{{ cashText ? cashText : "不设置" }}</uni-data-picker
|
||||
>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="手续费类型" :start="false">
|
||||
<uni-data-picker
|
||||
:localdata="selectFeeArray"
|
||||
@change="publicSelect($event, 'selectFeeType')"
|
||||
v-slot:default="{ data }"
|
||||
>{{ selectFeeText ? selectFeeText : "不设置" }}</uni-data-picker
|
||||
>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="提现手续费（固定/元）"
|
||||
v-model:value="applyDetailInfo.fixAmt"
|
||||
:start="false"
|
||||
tipText="请输入提现手续费"
|
||||
v-if="applyDetailInfo.selectFeeType == '1'"
|
||||
/>
|
||||
|
||||
<JeePayForm
|
||||
text="费率（百分比/%）"
|
||||
v-model:value="applyDetailInfo.feeRate"
|
||||
:start="false"
|
||||
v-if="applyDetailInfo.selectFeeType == '2'"
|
||||
/>
|
||||
|
||||
<JeePayForm text="结算周期" :start="false">
|
||||
<uni-data-picker
|
||||
:localdata="settleCycleArray"
|
||||
@change="publicSelect($event, 'settleCycle')"
|
||||
v-slot:default="{ data }"
|
||||
>{{
|
||||
settleCycleText ? settleCycleText : "不设置"
|
||||
}}</uni-data-picker
|
||||
>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="起结金额（元）"
|
||||
v-model:value="applyDetailInfo.minAmt"
|
||||
:start="false"
|
||||
/>
|
||||
|
||||
<JeePayForm
|
||||
text="留存金额（元）"
|
||||
v-model:value="applyDetailInfo.remainedAmt"
|
||||
:start="false"
|
||||
/>
|
||||
-->
|
||||
<template v-if="applyDetailInfo.merchantType != 1">
|
||||
<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="收银台照">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.storeCashierImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'storeCashierImg')"
|
||||
@clear="clear('storeCashierImg')"
|
||||
:start="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<!-- <JeePayForm text="组织机构代码证照片">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.orgCodePic"
|
||||
@uploadSuccess="uploadSuccess($event, 'orgCodePic')"
|
||||
@clear="clear('orgCodePic')"
|
||||
:start="false"
|
||||
/>
|
||||
</JeePayForm> -->
|
||||
|
||||
<JeePayForm text="开户许可证照片">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.companyAccountLicenseImg"
|
||||
@uploadSuccess="
|
||||
uploadSuccess($event, 'companyAccountLicenseImg')
|
||||
"
|
||||
@clear="clear('companyAccountLicenseImg')"
|
||||
:start="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<!-- <JeePayForm text="税务登记证照片">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.taxRegPic"
|
||||
@uploadSuccess="uploadSuccess($event, 'taxRegPic')"
|
||||
@clear="clear('taxRegPic')"
|
||||
:start="false"
|
||||
/>
|
||||
</JeePayForm> -->
|
||||
</template>
|
||||
|
||||
<JeePayForm
|
||||
text="D1结算协议图片"
|
||||
v-if="applyDetailInfo.merchantType == 1"
|
||||
:start="false"
|
||||
>
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.settleAgreePic"
|
||||
@uploadSuccess="uploadSuccess($event, 'settleAgreePic')"
|
||||
@clear="clear('settleAgreePic')"
|
||||
:start="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="授权委托书"
|
||||
v-if="applyDetailInfo.settAccountType == 'D'"
|
||||
>
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.authEnturstPic"
|
||||
@uploadSuccess="uploadSuccess($event, 'authEnturstPic')"
|
||||
@clear="clear('authEnturstPic')"
|
||||
:start="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商务协议" v-if="applyDetailInfo.settAccountType == '3'" :start="false">
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.bankPic" @uploadSuccess="uploadSuccess($event, 'bankPic')" @clear="clear('bankPic')" :start="false"/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="支付宝商户经营类目">
|
||||
<jeeDataPicker :code="applyDetailInfo.aliFeeMcc" :localdata="aliMcc" @change="publicSelect($event, 'aliFeeMcc')" paramType="oneLevel" />
|
||||
</JeePayForm>
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
|
||||
<!-- 费率组件 -->
|
||||
<defaultRate ref="defaultRateRef" @autoPos="autoPosHandle" />
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 进件完毕后的操作 -->
|
||||
<dgEvent v-if="channelInfo.state == 2" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, inject } from "vue";
|
||||
import address from "@/components/applyJson/address.json"; // 地址
|
||||
import mcc from "@/components/applyJson/jeePayMcc.json"; // 行业
|
||||
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.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 dgEvent from "./dgEvent.vue"; // 进件完成后的操作
|
||||
import { filterDcit } from "@/hooks/dict";
|
||||
import defaultRate from "../../components/defaultRate.vue"; // 默认费率
|
||||
|
||||
|
||||
const merchantTypeList = reactive(filterDcit(["A0", "A2"])); //商户类型
|
||||
const settAccountTypeList = reactive(filterDcit(["B0", "B1", "B2"])); //账户类型
|
||||
const busiTypeList = reactive(filterDcit(["G0", "G1"])); // 经营类型
|
||||
const agreementTypeList = reactive(filterDcit(["M0", "M1"])); // 协议类型
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const emit = defineEmits(["applyHandle"]);
|
||||
let defaultRateRef = ref(null); // 费率组件
|
||||
|
||||
// 状态分类: 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 代表企业
|
||||
settAccountType: "B", // 结算账号类型 默认为B 对公
|
||||
});
|
||||
|
||||
// 支付宝经营类目
|
||||
const aliMcc = reactive([
|
||||
{ value: '2015050700000000', text: '美食' },
|
||||
{ value: '2015091000052157', text: '超市便利店' },
|
||||
{ value: '2015062600004525', text: '休闲娱乐' },
|
||||
{ value: '2015062600002758', text: '购物' },
|
||||
{ value: '2016062900190124', text: '爱车' },
|
||||
{ value: '2015063000020189', text: '生活服务' },
|
||||
{ value: '2016042200000148', text: '教育培训' },
|
||||
{ value: '2016062900190296', text: '医疗健康' },
|
||||
{ value: '2015080600000001', text: '航旅' },
|
||||
{ value: '2016062900190337', text: '专业销售/批发' },
|
||||
{ value: '2016062900190371', text: '政府/社会组织' },
|
||||
])
|
||||
|
||||
// 公司类型文字回显
|
||||
let entText = ref("");
|
||||
// 公司类型列表
|
||||
const entArray = [
|
||||
{ value: "1", text: "政府机构" },
|
||||
{ value: "2", text: "国营企业" },
|
||||
{ value: "3", text: "私营企业" },
|
||||
{ value: "4", text: "外资企业" },
|
||||
{ value: "5", text: "个体工商户" },
|
||||
{ value: "6", text: "其它组织" },
|
||||
{ value: "7", text: "事业单位" },
|
||||
];
|
||||
|
||||
// 业务类型文字回显
|
||||
let cashText = ref("");
|
||||
// 业务类型列表
|
||||
const cashArray = [
|
||||
{ value: "", text: "不设置" },
|
||||
{ value: "D0", text: "当日到账" },
|
||||
{ value: "T1", text: "下个工作日到账" },
|
||||
{ value: "D1", text: "下个自然日到账" },
|
||||
];
|
||||
|
||||
// 手续费类型
|
||||
let selectFeeText = ref("");
|
||||
const selectFeeArray = [
|
||||
{ value: "", text: "不设置" },
|
||||
{ value: "1", text: "固定费用" },
|
||||
{ value: "2", text: "费率设置" },
|
||||
];
|
||||
|
||||
// 结算周期
|
||||
let settleCycleText = ref("");
|
||||
const settleCycleArray = [
|
||||
{ value: "", text: "不设置" },
|
||||
{ value: "T1", text: "下个工作日到账" },
|
||||
{ value: "D1", text: "下个自然日到账" },
|
||||
];
|
||||
|
||||
// 小微经营类型
|
||||
let microBizText = ref("");
|
||||
const microBizArray = [
|
||||
{ value: "", text: "不设置" },
|
||||
{ value: "MICRO_TYPE_STORE", text: "门店场所" },
|
||||
{ value: "MICRO_TYPE_MOBILE", text: "流动经营/便民服务" },
|
||||
{ value: "MICRO_TYPE_ONLINE", text: "线上商品/服务交易" },
|
||||
];
|
||||
|
||||
// 通用选择函数
|
||||
const publicSelect = (e, key) => {
|
||||
// 是否为法人信息，该字段不提交
|
||||
if (key === 'isLegal') {
|
||||
if (e.detail.value) {
|
||||
applyDetailInfo.settAccountIdcard1Img = applyDetailInfo.idcard1Img
|
||||
applyDetailInfo.settAccountIdcard2Img = applyDetailInfo.idcard2Img
|
||||
applyDetailInfo.settAccountIdcardNo = applyDetailInfo.idcardNo
|
||||
applyDetailInfo.settAccountIdcardEffectBegin = applyDetailInfo.idcardEffectBegin
|
||||
applyDetailInfo.settAccountIdcardEffectEnd = applyDetailInfo.idcardEffectEnd
|
||||
applyDetailInfo.settAccountBindPhone = applyDetailInfo.contactPhone
|
||||
} else {
|
||||
applyDetailInfo.settAccountIdcard1Img = ''
|
||||
applyDetailInfo.settAccountIdcard2Img = ''
|
||||
applyDetailInfo.settAccountIdcardNo = ''
|
||||
applyDetailInfo.settAccountIdcardEffectBegin = ''
|
||||
applyDetailInfo.settAccountIdcardEffectEnd = ''
|
||||
applyDetailInfo.settAccountBindPhone = ''
|
||||
}
|
||||
return
|
||||
}
|
||||
applyDetailInfo[key] = e.detail.value;
|
||||
|
||||
if (key === "merchantType") {
|
||||
applyDetailInfo.merchantType = Number(e.detail.value);
|
||||
} else if (key === "entType") {
|
||||
applyDetailInfo.entType = e.detail.value[0].value;
|
||||
entText.value = entArray.find(
|
||||
(item) => item.value == e.detail.value[0].value
|
||||
).text;
|
||||
} else if (key === "cashType") {
|
||||
applyDetailInfo.cashType = e.detail.value[0].value;
|
||||
cashText.value = cashArray.find(
|
||||
(item) => item.value == e.detail.value[0].value
|
||||
).text;
|
||||
} else if (key === "selectFeeType") {
|
||||
applyDetailInfo.selectFeeType = e.detail.value[0].value;
|
||||
selectFeeText.value = selectFeeArray.find(
|
||||
(item) => item.value == e.detail.value[0].value
|
||||
).text;
|
||||
} else if (key === "settleCycle") {
|
||||
applyDetailInfo.settleCycle = e.detail.value[0].value;
|
||||
settleCycleText.value = settleCycleArray.find(
|
||||
(item) => item.value == e.detail.value[0].value
|
||||
).text;
|
||||
} else if (key === "microBizType") {
|
||||
applyDetailInfo.microBizType = e.detail.value[0].value;
|
||||
microBizText.value = microBizArray.find(
|
||||
(item) => item.value == e.detail.value[0].value
|
||||
).text;
|
||||
}
|
||||
};
|
||||
|
||||
// 上传图片成功 及OCR识别回显
|
||||
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 == "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 = res.ocrInfo.address;
|
||||
} else if (name == "settAccountLicenseImg") {
|
||||
applyDetailInfo.settAccountNo = res.ocrInfo.settAccountNo; // 银行卡号
|
||||
} else if (name == "settAccountIdcard2Img") {
|
||||
applyDetailInfo.settAccountIdcardEffectBegin =
|
||||
res.ocrInfo.idcardEffectBegin; // 持卡人有效期
|
||||
applyDetailInfo.settAccountIdcardEffectEnd = res.ocrInfo.idcardEffectEnd; // 持卡人有效期end
|
||||
} else if (name == "settAccountIdcard1Img") {
|
||||
applyDetailInfo.settAccountIdcardNo = res.ocrInfo.idcardNo; // 持卡人身份证号
|
||||
} else if (name == "settAccountIdcard2Img") {
|
||||
applyDetailInfo.settAccountIdcardEffectBegin =
|
||||
res.ocrInfo.idcardEffectBegin; // 持卡人身份证有效期
|
||||
applyDetailInfo.settAccountIdcardEffectEnd = res.ocrInfo.idcardEffectEnd; // 持卡人身份证有效期end
|
||||
}
|
||||
};
|
||||
// 清除图片 仅前端
|
||||
const clear = (name, url) => (applyDetailInfo[name] = "");
|
||||
|
||||
// 发起进件 注意后面的formCheck参数，表单校验要用
|
||||
const launchApply = (isTempData) =>
|
||||
emit("applyHandle", {
|
||||
name: "dgpay",
|
||||
isTempData,
|
||||
applyDetailInfo,
|
||||
formCheck: [applyDetailInfo.merchantType, applyDetailInfo.settAccountType],
|
||||
});
|
||||
|
||||
// 只读组件信息
|
||||
let dgpayRef = ref(null);
|
||||
|
||||
// 行业类型，地理位置回显
|
||||
let codeBack = reactive({
|
||||
areaCode: "", // 商户地理位置回显
|
||||
mccCode: "", // 行业回显
|
||||
settAccountBankBranchAreaCode: "", // 银行开户地
|
||||
});
|
||||
|
||||
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
|
||||
const assignObj = (obj) => {
|
||||
Object.assign(applyDetailInfo, obj);
|
||||
// 行业类型，地理位置回显
|
||||
codeBack.areaCode = obj.areaCode ? obj.areaCode[2] : null; // 省市区
|
||||
codeBack.mccCode = obj.mccCode; // mcc
|
||||
codeBack.settAccountBankBranchAreaCode = obj.settAccountBankBranchAreaCode
|
||||
? obj.settAccountBankBranchAreaCode[2]
|
||||
: null; // 银行开户地
|
||||
|
||||
// 公司类型 obj.xxx 用于只读信息页
|
||||
if (obj.entType)
|
||||
entText.value = ob.entText = entArray.find(
|
||||
(item) => item.value == obj.entType
|
||||
).text;
|
||||
// 业务类型
|
||||
if (obj.cashType)
|
||||
cashText.value =
|
||||
obj.cashText =
|
||||
obj.cashText =
|
||||
cashArray.find((item) =>
|
||||
item.value == obj.cashType ? obj.cashType : ""
|
||||
).text;
|
||||
// 手续费类型
|
||||
if (obj.selectFeeType)
|
||||
selectFeeText.value = obj.selectFeeText = selectFeeArray.find((item) =>
|
||||
item.value == obj.selectFeeType ? obj.selectFeeType : ""
|
||||
).text;
|
||||
// 结算周期
|
||||
if (obj.settleCycle)
|
||||
settleCycleText.value = obj.settleCycleText = settleCycleArray.find(
|
||||
(item) => (item.value == obj.settleCycle ? obj.settleCycle : "")
|
||||
).text;
|
||||
// 小微经营类型
|
||||
if (obj.microBizType)
|
||||
microBizText.value = obj.microBizText = microBizArray.find((item) =>
|
||||
item.value == obj.microBizType ? obj.microBizType : ""
|
||||
).text;
|
||||
|
||||
// 以下用于只读信息页
|
||||
if (isDisable.value) {
|
||||
for (var i = 0; i < mcc.length; i++) {
|
||||
// mcc码转文字
|
||||
let info = mcc[i].children.find((val) => val.value == obj.mccCode);
|
||||
info ? obj.mccText = info.text : ''
|
||||
}
|
||||
if (obj.aliFeeMcc) {
|
||||
// 支付宝商户经营类目码转文字
|
||||
obj.aliMccText = aliMcc.find(val => val.value == obj.aliFeeMcc).text
|
||||
}
|
||||
if (obj.cashType) {
|
||||
obj.cashText ? obj.cashText : (obj.cashText = "不设置");
|
||||
}
|
||||
if (obj.selectFeeType) {
|
||||
obj.selectFeeText ? obj.selectFeeText : (obj.selectFeeText = "不设置");
|
||||
}
|
||||
if (obj.settleCycle) {
|
||||
obj.settleCycleText ? obj.settleCycleText: (obj.settleCycleText = "不设置");
|
||||
}
|
||||
obj.areaText = tool.addressBack(obj.areaCode, address); // 地址码转文字
|
||||
obj.settAccountBankBranchAreaText = tool.addressBack(
|
||||
obj.settAccountBankBranchAreaCode,
|
||||
address
|
||||
); // 开户银行所在地码转字
|
||||
if (obj.busiType) obj.busiTypeText = (obj.busiType == 1 ? "实体" : "虚拟")
|
||||
|
||||
// 传值给只读组件
|
||||
if (dgpayRef.value) dgpayRef.value.getApplyInof(obj);
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ launchApply, assignObj });
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../static/information.scss";
|
||||
</style>
|
||||
197
jeepay-ui-uapp-agent/pageApply/channel/dgpay/notes.vue
Normal file
197
jeepay-ui-uapp-agent/pageApply/channel/dgpay/notes.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
|
||||
<!-- 支付宝开通参数，微信开通参数暂不需要 -->
|
||||
<!-- <view class="business-title">
|
||||
<text>支付宝开通参数</text>
|
||||
<view class="btn" @click="addZfb">添加支付场景</view>
|
||||
</view>
|
||||
<view class="business-content zfb" v-for="(item, index) in openService.aliConfList" :key="index">
|
||||
<view class="business-title">
|
||||
<text>支付场景{{ index + 1 }}</text>
|
||||
<view class="btn" @click="delZfb(index)">删除</view>
|
||||
</view>
|
||||
<JeePayForm text="支付场景" :start='false'>
|
||||
<jeeDataPicker :code="openService.aliConfList[index].pay_scene" :localdata="zfbArray" paramType="oneLevel" @change="publicSelect($event, 'pay_scene', 'aliConfList', index)"/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="手续费率" :start='false' v-model:value="openService.aliConfList[index].fee_rate" />
|
||||
|
||||
<JeePayForm text="商户经营类目" :start='false'>
|
||||
<jeeDataPicker :code="openService.aliConfList[index].mcc" :localdata="zfbMccArray" paramType="oneLevel" @change="publicSelect($event, 'mcc', 'aliConfList', index)"/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="子渠道号" :start='false' v-model:value="openService.aliConfList[index].pay_channel_id" />
|
||||
|
||||
<JeePayForm text="间联商户等级" :start='false'>
|
||||
<jeeDataPicker :code="openService.aliConfList[index].indirect_level" :localdata="zfbLevelArray" paramType="oneLevel" @change="publicSelect($event, 'indirect_level', 'aliConfList', index)"/>
|
||||
</JeePayForm>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="business-title">
|
||||
<text>微信开通参数</text>
|
||||
<view class="btn" @click="addWx">添加支付场景</view>
|
||||
</view>
|
||||
<view class="business-content " v-for="(item, index) in openService.wxConfList" :key="index">
|
||||
<view class="business-title">
|
||||
<text>支付场景{{ index + 1 }}</text>
|
||||
<view class="btn" @click="delWx(index)">删除</view>
|
||||
</view>
|
||||
|
||||
<JeePayForm text="支付场景" :start='false'>
|
||||
<jeeDataPicker :code="openService.wxConfList[index].pay_scene" :localdata="wxArray" paramType="oneLevel" @change="publicSelect($event, 'pay_scene', 'wxConfList', index)"/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="手续费率" :start='false' v-model:value="openService.wxConfList[index].fee_rate" />
|
||||
|
||||
<JeePayForm text="费率规则" :start='false'>
|
||||
<jeeDataPicker :code="openService.wxConfList[index].fee_rule_id" :localdata="wxRateList[index]" paramType="oneLevel" @change="publicSelect($event, 'fee_rule_id', 'wxConfList', index)"/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商户经营类目" :start='false'>
|
||||
<jeeDataPicker :code="openService.wxConfList[index].mcc" :localdata="wxMcc" paramType="oneLevel" @change="publicSelect($event, 'mcc', 'wxConfList', index)"/>
|
||||
</JeePayForm>
|
||||
|
||||
</view>
|
||||
-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// // 新增支付宝支付场景
|
||||
// const addZfb = () => openService.aliConfList.push({
|
||||
// pay_scene: '',
|
||||
// fee_rate: '',
|
||||
// mcc: '',
|
||||
// pay_channel_id: '',
|
||||
// indirect_level: ''
|
||||
// })
|
||||
|
||||
// // 删除支付宝支付场景
|
||||
// const delZfb = index => openService.aliConfList.splice(index, 1)
|
||||
|
||||
// // 微信费率规则 大数组 集合, 内容不确定根据选择的支付场景来
|
||||
// const wxRateList = reactive([])
|
||||
|
||||
// // 新增微信支付场景
|
||||
// const addWx = () => {
|
||||
// openService.wxConfList.push({
|
||||
// pay_scene: '',
|
||||
// fee_rate: '',
|
||||
// fee_rule_id: '',
|
||||
// mcc: '',
|
||||
// })
|
||||
// wxRateList.push([])
|
||||
// }
|
||||
|
||||
// // 删除微信支付场景
|
||||
// const delWx = index => {
|
||||
// openService.wxConfList.splice(index, 1)
|
||||
// wxRateList.splice(index, 1)
|
||||
// }
|
||||
|
||||
|
||||
// 开通业务通用选择函数
|
||||
/* const publicSelect = (e, key, list, index) => {
|
||||
openService[list][index][key] = e.detail.value
|
||||
// 微信费率规则,根据支付场景进行切换
|
||||
if ((key == 'pay_scene') && (list == 'wxConfList')) {
|
||||
wxRateList[index] = wxRateArray(e.detail.value)
|
||||
console.log(e.detail.value, wxRateArray(e.detail.value))
|
||||
}
|
||||
} */
|
||||
|
||||
// // 支付宝支付场景种类
|
||||
// const zfbArray = [
|
||||
// { value: "1", text: "线下扫码" },
|
||||
// ];
|
||||
|
||||
// // 支付宝mcc种类
|
||||
// const zfbMccArray = [
|
||||
// { value: "2015050700000000", text: "美食" },
|
||||
// { value: "2015091000052157", text: "超市便利店" },
|
||||
// { value: "2015062600004525", text: "休闲娱乐" },
|
||||
// { value: "2015062600002758", text: "购物" },
|
||||
// { value: "2016062900190124", text: "爱车" },
|
||||
// { value: "2015063000020189", text: "生活服务" },
|
||||
// { value: "2016042200000148", text: "教育培训" },
|
||||
// { value: "2016062900190296", text: "医疗健康" },
|
||||
// { value: "2015080600000001", text: "航旅" },
|
||||
// { value: "2016062900190337", text: "专业销售/批发" },
|
||||
// { value: "2016062900190371", text: "政府/社会组织" },
|
||||
// ];
|
||||
|
||||
// // 支付宝连商户等级种类
|
||||
// const zfbLevelArray = [
|
||||
// { value: "INDIRECT_LEVEL_M1", text: "M1" },
|
||||
// { value: "INDIRECT_LEVEL_M2", text: "M2" },
|
||||
// { value: "INDIRECT_LEVEL_M3", text: "M3" },
|
||||
// { value: "INDIRECT_LEVEL_M4", text: "M4" },
|
||||
// ];
|
||||
|
||||
// // 微信支付场景
|
||||
// const wxArray = [
|
||||
// { value: "1", text: "线下反扫" },
|
||||
// { value: "2", text: "线下公众号" },
|
||||
// { value: "3", text: "线下小程序" },
|
||||
// { value: "4", text: "线上公众号" },
|
||||
// { value: "5", text: "线上小程序" },
|
||||
// { value: "6", text: "缴费行业" },
|
||||
// { value: "7", text: "校园餐饮" },
|
||||
// { value: "8", text: "教育K12" },
|
||||
// { value: "9", text: "非在线教培" },
|
||||
// { value: "10", text: "非盈利费率" },
|
||||
// { value: "11", text: "保险费率" },
|
||||
// ];
|
||||
|
||||
// 文字回显函数
|
||||
// let arrFindBack = (arr, e) => arr.find((item) => item.value == e.detail.value[0].value).text
|
||||
|
||||
/* // 微信费率规则（函数）
|
||||
const wxRateArray = val => {
|
||||
val = Number(val)
|
||||
let arr = null
|
||||
if ([4, 5].includes(val)) {
|
||||
arr = [
|
||||
{ value: "756", text: "企业" },
|
||||
{ value: "761", text: "个体户" },
|
||||
]
|
||||
} else if ([1, 2, 3].includes(val)) {
|
||||
arr = [
|
||||
{ value: "758", text: "企业" },
|
||||
{ value: "762", text: "个体户" },
|
||||
{ value: "763", text: "政府事业单位" },
|
||||
{ value: "766", text: "其他组织" },
|
||||
{ value: "770", text: "小微商户" },
|
||||
]
|
||||
} else if ([6].includes(val)) {
|
||||
arr = [
|
||||
{ value: "760", text: "企业" },
|
||||
{ value: "764", text: "政府事业单位" },
|
||||
{ value: "768", text: "其他组织" },
|
||||
]
|
||||
} else if ([7].includes(val)) {
|
||||
arr = [
|
||||
{ value: "758", text: "企业" },
|
||||
{ value: "762", text: "个体户" },
|
||||
{ value: "766", text: "其他组织" },
|
||||
{ value: "770", text: "小微商户" },
|
||||
]
|
||||
} else if ([8].includes(val)) {
|
||||
arr = [
|
||||
{ value: "759", text: "企业" },
|
||||
{ value: "767", text: "其他组织" },
|
||||
]
|
||||
} else if ([9].includes(val)) {
|
||||
arr = [
|
||||
{ value: "756", text: "企业" },
|
||||
]
|
||||
}
|
||||
return arr
|
||||
} */
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
213
jeepay-ui-uapp-agent/pageApply/channel/fuiou/fuiouEvent.vue
Normal file
213
jeepay-ui-uapp-agent/pageApply/channel/fuiou/fuiouEvent.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<!-- 富有待签约
|
||||
富有签约分为两部分
|
||||
1. 如果状态为5 ，则展示签约地址 二维码 与失效时间等信息，签约后，在调用进件详细信息接口更新状态
|
||||
2. 若状态为6 ，则展示图片上传列表。
|
||||
-->
|
||||
<view class="box wx-open" v-if="(channelInfo.state == 5 || channelInfo.state == 6) && channelInfo.code == 'fuioupay'">
|
||||
|
||||
<template v-if="(channelInfo.state == 5) && (vdata.fuiouState != 6)">
|
||||
<view class="flex" style="margin-bottom: 20rpx">
|
||||
<view>协议编号</view>
|
||||
<view>{{ vdata.storeSuccResParameter.contractNo }}</view>
|
||||
</view>
|
||||
|
||||
<view class="flex" style="margin-bottom: 20rpx">
|
||||
<view>过期时间</view>
|
||||
<view>{{ vdata.storeSuccResParameter.expireTs }}</view>
|
||||
</view>
|
||||
|
||||
<view class="down-img">
|
||||
<image :src="vdata.contractImg" mode="aspectFit"></image>
|
||||
<view style="margin-top: 30rpx">请用微信扫描二维码，根据页面指引完成签约</view>
|
||||
<view class="down" @click="down(vdata.contractImg)">保存至相册</view>
|
||||
</view>
|
||||
|
||||
<view class="second-title">电子合同签约地址和二维码：</view>
|
||||
<view style="margin-top: 20rpx;white-space: pre-wrap; word-wrap: break-word; color: #3981ff" @click="toContract('fuioupay')">
|
||||
{{ vdata.storeSuccResParameter.signUrl }}
|
||||
</view>
|
||||
|
||||
<view class="down-img">
|
||||
<view class="down" @click="fuiouhandle()">确认签署</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 当点击上面的确认签署后，则展示图片上传列表 -->
|
||||
<template v-if="(channelInfo.state == 6) || (vdata.fuiouState == 6)">
|
||||
<JeePayForm text="营业执照照片" :start="false" v-if="vdata.applyDetailInfo.licenseImg">
|
||||
<image :src="vdata.applyDetailInfo.licenseImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.licenseImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证人像面照片" :start="false" v-if="vdata.applyDetailInfo.idcard1Img">
|
||||
<image :src="vdata.applyDetailInfo.idcard1Img" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.idcard1Img)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证国徽面照片" :start="false" v-if="vdata.applyDetailInfo.idcard2Img">
|
||||
<image :src="vdata.applyDetailInfo.idcard2Img" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.idcard2Img)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="门头照" :start="false" v-if="vdata.applyDetailInfo.storeOuterImg">
|
||||
<image :src="vdata.applyDetailInfo.storeOuterImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.storeOuterImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="店内环境照" :start="false" v-if="vdata.applyDetailInfo.storeInnerImg">
|
||||
<image :src="vdata.applyDetailInfo.storeInnerImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.storeInnerImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算银行卡照片" :start="false" v-if="vdata.applyDetailInfo.settAccountLicenseImg">
|
||||
<image :src="vdata.applyDetailInfo.settAccountLicenseImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.settAccountLicenseImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="开户许可证照片" :start="false" v-if="vdata.applyDetailInfo.companyAccountLicenseImg">
|
||||
<image :src="vdata.applyDetailInfo.companyAccountLicenseImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.companyAccountLicenseImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="入账账户身份证人像照" :start="false" v-if="vdata.applyDetailInfo.settAccountIdcard1Img">
|
||||
<image :src="vdata.applyDetailInfo.settAccountIdcard1Img" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.settAccountIdcard1Img)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="入账账户身份证国徽面照片" :start="false" v-if="vdata.applyDetailInfo.settAccountIdcard2Img">
|
||||
<image :src="vdata.applyDetailInfo.settAccountIdcard2Img" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.settAccountIdcard2Img)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="入账非法人证明照片" :start="false" v-if="vdata.applyDetailInfo.acntArtifImg">
|
||||
<image :src="vdata.applyDetailInfo.acntArtifImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.acntArtifImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="组织机构代码证照片" :start="false" v-if="vdata.applyDetailInfo.organizationImg">
|
||||
<image :src="vdata.applyDetailInfo.organizationImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.organizationImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="税务登记证照片" :start="false" v-if="vdata.applyDetailInfo.taxRegistrationImg">
|
||||
<image :src="vdata.applyDetailInfo.taxRegistrationImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.taxRegistrationImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="手持证件照片" :start="false" v-if="vdata.applyDetailInfo.handCertificateImg">
|
||||
<image :src="vdata.applyDetailInfo.handCertificateImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.handCertificateImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="补充资料照片" :start="false" v-if="vdata.applyDetailInfo.additionImg">
|
||||
<image :src="vdata.applyDetailInfo.additionImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.additionImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<view class="down-img">
|
||||
<view class="down" @click="fuiouUpload()">提交审核</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, inject } from 'vue'
|
||||
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
|
||||
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
|
||||
import { $elecContractGenerate, $elecContractSign, $fuiouUpload } from '@/http/apiManager.js'
|
||||
import qrcode from '@/util/qrcode.js'
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const vdata = reactive({
|
||||
storeSuccResParameter: {}, // 富友协议信息
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 调用富友签约接口，生成图片的操作，在接口返回的信息中进行
|
||||
if (channelInfo.state == 5) getFuiouInfo()
|
||||
})
|
||||
|
||||
// 富有进件专用， 用于获取签约信息
|
||||
const getFuiouInfo = () => {
|
||||
$elecContractGenerate(channelInfo.applyId).then(({bizData}) => {
|
||||
vdata.storeSuccResParameter = JSON.parse(bizData.storeSuccResParameter)
|
||||
vdata.contractImg = drawQRcode(vdata.storeSuccResParameter.signUrl) // 生成富友签约图片
|
||||
})
|
||||
}
|
||||
|
||||
// 富友确认签署
|
||||
const fuiouhandle = () => {
|
||||
$elecContractSign(channelInfo.applyId).then(res => {
|
||||
uni.showToast({ title: '签署成功', icon: 'none'})
|
||||
vdata.fuiouState = 6 // 切换富友的状态
|
||||
})
|
||||
}
|
||||
|
||||
// 富友提交审核
|
||||
const fuiouUpload = () => {
|
||||
$fuiouUpload(channelInfo.applyId).then(res => {
|
||||
uni.showToast({ title: '审核成功', icon: 'none'})
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转至电子合同页 盛付通 富友 会用到
|
||||
const toContract = () => {
|
||||
let uri = vdata.storeSuccResParameter.signUrl
|
||||
uni.navigateTo({ url: './contract?url=' + uri })
|
||||
}
|
||||
|
||||
// 制作图片
|
||||
const drawQRcode = url => {
|
||||
return qrcode.drawImg(url, {
|
||||
typeNumber: 4, // 密度
|
||||
errorCorrectLevel: 'Q', // 纠错等级
|
||||
size: 175, // 白色边框
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.box {
|
||||
height: auto;
|
||||
transition: .3s;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
background: #f5f6fc;
|
||||
padding: 10rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fuiou-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 微信签约
|
||||
.wx-open {
|
||||
margin-top: 30rpx;
|
||||
padding: 40rpx;
|
||||
.first-title {
|
||||
font-size: 28rpx;
|
||||
color: #18191d;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tips {
|
||||
font-size: 25rpx;
|
||||
color: #7e7e80;
|
||||
margin: 20rpx 0 40rpx;
|
||||
}
|
||||
.state {
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.second-title {
|
||||
font-size: 27rpx;
|
||||
color: #000;
|
||||
}
|
||||
.wx-img {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
margin: 30rpx 0 20rpx ;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
584
jeepay-ui-uapp-agent/pageApply/channel/fuiou/fuioupay.vue
Normal file
584
jeepay-ui-uapp-agent/pageApply/channel/fuiou/fuioupay.vue
Normal file
@@ -0,0 +1,584 @@
|
||||
<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-身份证 idcard1Img，idcard2Img 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>
|
||||
457
jeepay-ui-uapp-agent/pageApply/channel/lklpay.vue
Normal file
457
jeepay-ui-uapp-agent/pageApply/channel/lklpay.vue
Normal file
@@ -0,0 +1,457 @@
|
||||
<template>
|
||||
<!-- 只读文件 -->
|
||||
<readOnlyInfo
|
||||
v-if="isDisable"
|
||||
ref="applyInfoRef"
|
||||
applyName="lklpay"
|
||||
></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>
|
||||
|
||||
<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.licenseEffectBegin"
|
||||
@publicSelect="publicSelect($event, 'licenseEffectBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="营业执照有效期截止">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.licenseEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'licenseEffectEnd')"
|
||||
@endHandle="endHandle"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<JeePayForm
|
||||
text="用户名称"
|
||||
v-model:value="applyDetailInfo.mchFullName"
|
||||
tipText="商户名称不少于7个汉字"
|
||||
/>
|
||||
|
||||
<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')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item
|
||||
:show-animation="false"
|
||||
title="经营信息"
|
||||
class="coll-title"
|
||||
>
|
||||
<view class="content">
|
||||
<JeePayForm text="选择行业MCC">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.mccCode"
|
||||
:localdata="mcc"
|
||||
@change="publicSelect($event, 'mccCode')"
|
||||
paramType="splicing"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="经营内容">
|
||||
<uni-data-picker
|
||||
:localdata="merBusiArray"
|
||||
@change="publicSelect($event, 'merBusiContent')"
|
||||
v-slot:default="{ data }"
|
||||
>{{ merBusiText ? merBusiText : "请选择" }}</uni-data-picker
|
||||
>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="商户联系人姓名"
|
||||
v-model:value="applyDetailInfo.contactName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="商户联系人手机号"
|
||||
v-model:value="applyDetailInfo.contactPhone"
|
||||
/>
|
||||
|
||||
<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>
|
||||
</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="银行开户名"
|
||||
v-model:value="applyDetailInfo.settAccountName"
|
||||
/>
|
||||
|
||||
<JeePayForm text="银行卡照片" :start="false">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="bankCard"
|
||||
:imgUrl="applyDetailInfo.settAccountLicenseImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')"
|
||||
@clear="clear('settAccountLicenseImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="银行账号"
|
||||
v-model:value="applyDetailInfo.settAccountNo"
|
||||
/>
|
||||
|
||||
<!-- <JeePayForm text="结算周期">
|
||||
<uni-data-picker
|
||||
:localdata="settleArray"
|
||||
@change="publicSelect($event, 'settlePeriod')"
|
||||
v-slot:default="{ data }"
|
||||
>{{ settleText ? settleText : "请选择" }}</uni-data-picker
|
||||
>
|
||||
</JeePayForm> -->
|
||||
|
||||
<JeePayForm
|
||||
text="结算人身份证号"
|
||||
:start="false"
|
||||
tipText="结算人信息不填写默认为法人信息"
|
||||
v-model:value="applyDetailInfo.settAccountIdcardNo"
|
||||
/>
|
||||
|
||||
<JeePayForm :start="false" text="结算人身份证结束有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.settAccountIdcardEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'settAccountIdcardEffectEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<!-- <JeePayForm text="POS类型">
|
||||
<uni-data-picker
|
||||
:localdata="posArray"
|
||||
@change="publicSelect($event, 'posType')"
|
||||
v-slot:default="{ data }"
|
||||
>{{ posText ? posText : "请选择" }}</uni-data-picker
|
||||
>
|
||||
</JeePayForm> -->
|
||||
|
||||
<JeePayForm text="其他类型" :start="false">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.otherFile"
|
||||
@uploadSuccess="uploadSuccess($event, 'otherFile')"
|
||||
@clear="clear('otherFile')"
|
||||
/>
|
||||
</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/lklAdress.json"; // 地址
|
||||
import mcc from "@/components/applyJson/mccLkl.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 settlementTypeList = reactive(filterDcit(["B0", "B1"])); // 结算类型
|
||||
|
||||
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 代表企业
|
||||
settAccountType: "B", // 结算账号类型 默认为B 对公
|
||||
});
|
||||
|
||||
// 用于回显的经营内容的文字
|
||||
let merBusiText = ref("");
|
||||
// 经营内容
|
||||
const merBusiArray = [
|
||||
{ value: "642", text: "百货、中介、培训、景区门票等" },
|
||||
{ value: "645", text: "交通运输售票" },
|
||||
{ value: "646", text: "电气缴费" },
|
||||
{ value: "647", text: "政府类" },
|
||||
{ value: "648", text: "便民类" },
|
||||
{ value: "649", text: "公立医院、公立学校、慈善" },
|
||||
{ value: "650", text: "宾馆餐饮娱乐类" },
|
||||
{ value: "651", text: "房产汽车类" },
|
||||
{ value: "652", text: "批发类" },
|
||||
{ value: "653", text: "超市加油类" },
|
||||
{ value: "654", text: "一般类商户" },
|
||||
{ value: "655", text: "三农商户" },
|
||||
];
|
||||
|
||||
// 结算周期
|
||||
let settleText = ref("");
|
||||
const settleArray = [
|
||||
{ value: "T+1", text: "T+1结算" },
|
||||
{ value: "T+1+N", text: "T+1普通结算批次" },
|
||||
{ value: "T+3", text: "收单T+3结算" },
|
||||
{ value: "D+1+N", text: "D+1普通结算批次" },
|
||||
{ value: "W_T+9999", text: "喔噻T+9999不结算批次" },
|
||||
{ value: "D+1", text: "收单D+1结算批次" },
|
||||
{ value: "D1+24", text: "D1+24结算批次" },
|
||||
{ value: "D+30", text: "收单D+30结算" },
|
||||
{ value: "BT_D+1", text: "D+1四方补贴结算批次" },
|
||||
{ value: "QZT_FULL_D+1", text: "钱账通D+1全额结算批次" },
|
||||
{ value: "QZT_NET_D+1", text: "钱账通D+1净额结算批次" },
|
||||
];
|
||||
|
||||
// 结算周POS类型期
|
||||
let posText = ref("");
|
||||
const posArray = [
|
||||
{ value: " GENERAL_POS", text: "传统POS" },
|
||||
{ value: "SUPER_POS", text: "智能POS" },
|
||||
{ value: "BLUE_WIZARD", text: "蓝精灵" },
|
||||
{ value: "WECHAT_PAY", text: "专业化扫码" },
|
||||
{ value: "SQB_SCAN_CODE", text: "收钱吧扫码" },
|
||||
{ value: "SQB_PAPER_CODE", text: "收钱吧码牌" },
|
||||
{ value: "SQB_DESK_CODE", text: "收钱吧桌码" },
|
||||
{ value: "SQB_POS", text: "收钱吧POS" },
|
||||
{ value: "CLOUD_STORE_NEW", text: "新云小店" },
|
||||
{ value: "CLOUD_DISTRIBUTION", text: "云分销" },
|
||||
{ value: "CLOUD_DISTRIBUTION_CB", text: "云分销线上" },
|
||||
{ value: "CLOUD_STORE_CB", text: "云小店线上" },
|
||||
{ value: "CLOUD_STORE_BC", text: "云小店线下" },
|
||||
{ value: "CLOUD_STORE_BC_NOTLKL", text: "云小店非收银机" },
|
||||
{ value: "HM", text: "惠码" },
|
||||
{ value: "HM_CB", text: "惠码线上" },
|
||||
{ value: "HM_BC", text: "惠码线下" },
|
||||
{ value: "SCAN_CODE_ORDER", text: "扫码点餐" },
|
||||
{ value: "B2B_CASHIER_DESK", text: "B2B收银台" },
|
||||
{ value: "B2B_QR_CODE", text: "B2B收款码" },
|
||||
{ value: "MOBILE_POS", text: "手机POS" },
|
||||
{ value: "YF_YM", text: "御风云码" },
|
||||
{ value: "YF_YM_CB", text: "御风云码线上" },
|
||||
{ value: "TRANSFER_ACCOUNT", text: "大额理财" },
|
||||
{ value: "SUPER_MPOS", text: "超级收款宝" },
|
||||
{ value: "W_BOX", text: "收钱宝盒" },
|
||||
{ value: "SCANNING_GUN_PAY", text: "Q码精灵" },
|
||||
];
|
||||
|
||||
// 通用选择函数
|
||||
const publicSelect = (e, key) => {
|
||||
applyDetailInfo[key] = e.detail.value;
|
||||
if (key == "merBusiContent") {
|
||||
// 经营内容文字回显
|
||||
applyDetailInfo.merBusiContent = e.detail.value[0].value;
|
||||
merBusiText.value = merBusiArray.find(
|
||||
(item) => item.value == e.detail.value[0].value
|
||||
).text;
|
||||
} else if (key == "settlePeriod") {
|
||||
// 结算周期文字回显
|
||||
applyDetailInfo.settlePeriod = e.detail.value[0].value;
|
||||
settleText.value = settleArray.find(
|
||||
(item) => item.value == e.detail.value[0].value
|
||||
).text;
|
||||
} else if (key == "posType") {
|
||||
// POS类型文字回显
|
||||
applyDetailInfo.posType = e.detail.value[0].value;
|
||||
posText.value = posArray.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 == "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 = res.ocrInfo.address;
|
||||
} else if (name == "settAccountLicenseImg") {
|
||||
applyDetailInfo.settAccountNo = res.ocrInfo.settAccountNo; // 银行卡号
|
||||
}
|
||||
};
|
||||
// 清除图片 仅前端
|
||||
const clear = (name, url) => (applyDetailInfo[name] = "");
|
||||
|
||||
const defaultRateRef = ref(); // 获取费率组件
|
||||
|
||||
// 发起进件 注意后面的formCheck参数，表单校验要用
|
||||
const launchApply = (isTempData) => {
|
||||
// 有费率的进件渠道，要在发起进件之前，获取所选择的费率信息
|
||||
applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData);
|
||||
emit("applyHandle", {
|
||||
name: "lklpay",
|
||||
isTempData,
|
||||
applyDetailInfo,
|
||||
formCheck: [applyDetailInfo.merchantType],
|
||||
});
|
||||
};
|
||||
|
||||
// 只读组件信息
|
||||
let applyInfoRef = ref(null);
|
||||
|
||||
// 行业类型，地理位置回显
|
||||
let codeBack = reactive({
|
||||
areaCode: "", // 商户地理位置回显
|
||||
mccCode: "",
|
||||
});
|
||||
|
||||
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
|
||||
const assignObj = (obj) => {
|
||||
Object.assign(applyDetailInfo, obj);
|
||||
|
||||
if (!isDisable.value) {
|
||||
codeBack.areaCode = obj.areaCode ? obj.areaCode[2] : obj.areaCode; // mcc码，拼接类型要截取
|
||||
obj.mccCode ? (codeBack.mccCode = obj.mccCode.split("_")[1]) : null; // mcc码，拼接类型要截取
|
||||
// 各类文字回显 经营内容 结算周期 POS类型
|
||||
if (obj.merBusiContent)
|
||||
merBusiText.value = merBusiArray.find(
|
||||
(item) => item.value == obj.merBusiContent
|
||||
).text;
|
||||
if (obj.settlePeriod)
|
||||
settleText.value = settleArray.find(
|
||||
(item) => item.value == obj.settlePeriod
|
||||
).text;
|
||||
if (obj.posType)
|
||||
posText.value = posArray.find((item) => item.value == obj.posType).text;
|
||||
}
|
||||
|
||||
// 以下用于只读信息页
|
||||
obj.mccText = tool.mccBack(obj.mccCode, mcc, "splicing"); // 行业码转文字
|
||||
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>
|
||||
458
jeepay-ui-uapp-agent/pageApply/channel/lklspay/lklspay.vue
Normal file
458
jeepay-ui-uapp-agent/pageApply/channel/lklspay/lklspay.vue
Normal file
@@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<!-- 只读文件 -->
|
||||
<readOnlyInfo
|
||||
v-if="isDisable"
|
||||
ref="applyInfoRef"
|
||||
applyName="lklspay"
|
||||
></readOnlyInfo>
|
||||
<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"
|
||||
></uni-data-checkbox>
|
||||
</JeePayForm>
|
||||
<!-- 个人不需要营业执照 -->
|
||||
<template v-if="applyDetailInfo.merchantType != 1">
|
||||
<JeePayForm
|
||||
text="营业执照名称"
|
||||
v-model:value="applyDetailInfo.mchFullName"
|
||||
/>
|
||||
<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.licenseEffectBegin"
|
||||
@publicSelect="publicSelect($event, 'licenseEffectBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="营业执照有效期截止">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.licenseEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'licenseEffectEnd')"
|
||||
@endHandle="endHandle"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
<JeePayForm
|
||||
text="商户注册名称"
|
||||
v-model:value="applyDetailInfo.merRegName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="商户经营名称"
|
||||
v-model:value="applyDetailInfo.mchShortName"
|
||||
/>
|
||||
<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
|
||||
:show-animation="false"
|
||||
title="经营信息"
|
||||
class="coll-title"
|
||||
>
|
||||
<view class="content">
|
||||
<JeePayForm text="选择行业MCC">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.mccCode"
|
||||
:localdata="mcc"
|
||||
@change="publicSelect($event, 'mccCode')"
|
||||
paramType="splicing"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="商户联系人姓名"
|
||||
v-model:value="applyDetailInfo.contactName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="商户联系人手机号"
|
||||
v-model:value="applyDetailInfo.contactPhone"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="商户联系人邮箱"
|
||||
v-model:value="applyDetailInfo.contactEmail"
|
||||
/>
|
||||
<JeePayForm text="商户经营省市县">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.mchAreaCode"
|
||||
:localdata="address"
|
||||
@change="publicSelect($event, 'mchAreaCode')"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
<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="收银台照">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.storeCashierImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'storeCashierImg')"
|
||||
@clear="clear('storeCashierImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
<JeePayForm text="选择经纬度" tipHolder="点击选择经纬度">
|
||||
<text @tap="lnglatAmap">{{
|
||||
applyDetailInfo.lnglat || '点击选择经纬度'
|
||||
}}</text>
|
||||
</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="银行开户名"
|
||||
v-model:value="applyDetailInfo.settAccountName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="银行账号"
|
||||
v-model:value="applyDetailInfo.settAccountNo"
|
||||
/>
|
||||
<JeePayForm text="银行查询地区">
|
||||
<uni-data-checkbox
|
||||
v-model="applyDetailInfo.selectAreaCode"
|
||||
:localdata="selectAreaCodeList"
|
||||
></uni-data-checkbox>
|
||||
</JeePayForm>
|
||||
<JeePayForm text="支行地址">
|
||||
<jeeDataPicker
|
||||
:localdata="address"
|
||||
@change="changeSubBranch($event)"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
<JeePayForm v-if="bankInfoList.length > 0" text="支行">
|
||||
<text @tap="bank.open()">{{
|
||||
applyDetailInfo.settAccountBankName || '选择银行'
|
||||
}}</text>
|
||||
</JeePayForm>
|
||||
<JeePayForm
|
||||
text="银行名称"
|
||||
v-model:value="applyDetailInfo.settAccountBankName"
|
||||
>
|
||||
</JeePayForm>
|
||||
<JeePayForm
|
||||
text="联行行号"
|
||||
v-model:value="applyDetailInfo.openningBankCode"
|
||||
>
|
||||
</JeePayForm>
|
||||
<JeePayForm
|
||||
text="清算行号"
|
||||
v-model:value="applyDetailInfo.clearingBankCode"
|
||||
>
|
||||
</JeePayForm>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item
|
||||
:show-animation="false"
|
||||
title="结算人信息"
|
||||
class="coll-title"
|
||||
>
|
||||
<JeePayForm text="结算人是否为法人">
|
||||
<uni-data-checkbox
|
||||
v-model="applyDetailInfo.isLegalInfo"
|
||||
:localdata="isLegalInfoList"
|
||||
></uni-data-checkbox>
|
||||
</JeePayForm>
|
||||
<template v-if="applyDetailInfo.isLegalInfo == '0'">
|
||||
<JeePayForm text="结算人身份证人像面照">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.settAccountIdcard1Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')"
|
||||
@clear="clear('settAccountIdcard1Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
<JeePayForm text="结算人身份证国徽面照">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.settAccountIdcard2Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')"
|
||||
@clear="clear('settAccountIdcard2Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
<JeePayForm
|
||||
text="结算人身份证号"
|
||||
v-model:value="applyDetailInfo.settAccountIdcardNo"
|
||||
>
|
||||
</JeePayForm>
|
||||
<JeePayForm text="结算人身份证起始有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.settAccountIdcardEffectBegin"
|
||||
@publicSelect="
|
||||
publicSelect($event, 'settAccountIdcardEffectBegin')
|
||||
"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证结束有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.settAccountIdcardEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'settAccountIdcardEffectEnd')"
|
||||
@endHandle="endHandle"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
<JeePayForm text="其他材料">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.otherFile"
|
||||
@uploadSuccess="uploadSuccess($event, 'otherFile')"
|
||||
@clear="clear('otherFile')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</uni-collapse-item>
|
||||
|
||||
<!-- 盛付通费率组件 -->
|
||||
<defaultRate ref="defaultRateRef" />
|
||||
</uni-collapse>
|
||||
<SelectBank
|
||||
ref="bank"
|
||||
:list="bankInfoList"
|
||||
key="id"
|
||||
value="branchBankName"
|
||||
@choiceValue="updataBank"
|
||||
></SelectBank>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, inject } from 'vue'
|
||||
import readOnlyInfo from '../../components/readOnlyInfo.vue' // 只读文件
|
||||
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
|
||||
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
|
||||
import termOfValidity from '@/components/applyComponents/termOfValidity.vue' // 选择证件有效期
|
||||
import jeeDataPicker from '@/components/applyComponents/dataPicker.vue' // 通用级联选择
|
||||
import tool from '@/util/tool.js' // 工具类函数
|
||||
import address from '@/components/applyJson/lklAdress.json' // 地址
|
||||
import mcc from '@/components/applyJson/mccLkl.json' // 行业
|
||||
import { $lklGetBankList } from '@/http/apiManager.js' //获取银行列表
|
||||
import SelectBank from '../../components/SelectBank.vue'
|
||||
import { filterDcit } from '@/hooks/dict' // 字典
|
||||
const settlementTypeList = reactive(filterDcit(['B0', 'B1'])) // 结算类型
|
||||
const merchantTypeList = reactive(filterDcit(['A5', 'A2'])) // 商户
|
||||
const selectAreaCodeList = reactive(filterDcit(['N0', 'N1'])) // 银行卡查询地区
|
||||
const isLegalInfoList = reactive(filterDcit(['C2', 'C3'])) // 银行卡查询地区
|
||||
import defaultRate from '../../components/defaultRate.vue' // 默认费率
|
||||
const emit = defineEmits(['applyHandle'])
|
||||
const bankInfoList = ref([])
|
||||
const bank = ref()
|
||||
const defaultRateRef = ref() // 获取费率组件
|
||||
const applyDetailInfo = reactive({
|
||||
merchantType: 1,
|
||||
selectAreaCode: '1',
|
||||
isLegalInfo: '1',
|
||||
})
|
||||
const channelInfo = inject('channelInfo')
|
||||
let isDisable = ref(false)
|
||||
if (!['0', '3', '8'].includes(channelInfo.state)) isDisable.value = true
|
||||
// 行业类型，地理位置回显
|
||||
let codeBack = reactive({
|
||||
areaCode: '', // 商户地理位置回显
|
||||
mccCode: '',
|
||||
})
|
||||
// 只读组件信息
|
||||
let applyInfoRef = ref(null)
|
||||
// 通用选择函数
|
||||
const publicSelect = (e, key) => {
|
||||
applyDetailInfo[key] = e.detail.value
|
||||
if (key == 'merBusiContent') {
|
||||
// 经营内容文字回显
|
||||
applyDetailInfo.merBusiContent = e.detail.value[0].value
|
||||
merBusiText.value = merBusiArray.find(
|
||||
(item) => item.value == e.detail.value[0].value
|
||||
).text
|
||||
} else if (key == 'settlePeriod') {
|
||||
// 结算周期文字回显
|
||||
applyDetailInfo.settlePeriod = e.detail.value[0].value
|
||||
settleText.value = settleArray.find(
|
||||
(item) => item.value == e.detail.value[0].value
|
||||
).text
|
||||
} else if (key == 'posType') {
|
||||
// POS类型文字回显
|
||||
applyDetailInfo.posType = e.detail.value[0].value
|
||||
posText.value = posArray.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 == '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 = res.ocrInfo.address
|
||||
}
|
||||
}
|
||||
// 选择经纬度
|
||||
const lnglatAmap = () => {
|
||||
console.log(1)
|
||||
uni.chooseLocation({
|
||||
success: function (res) {
|
||||
// console.log("位置名称：" + res.name);
|
||||
// console.log("详细地址：" + res.address);
|
||||
// console.log("纬度：" + res.latitude);
|
||||
// console.log("经度：" + res.longitude);
|
||||
applyDetailInfo.lnglat = `${res.longitude},${res.latitude}`
|
||||
applyDetailInfo.longtude = res.longitude
|
||||
applyDetailInfo.latitude = res.latitude
|
||||
applyDetailInfo.address = res.address
|
||||
},
|
||||
})
|
||||
}
|
||||
// 清除图片 仅前端
|
||||
const clear = (name, url) => (applyDetailInfo[name] = '')
|
||||
// 选择支行的回调
|
||||
const changeSubBranch = (val) => {
|
||||
const areaCode = val.detail.value[applyDetailInfo.selectAreaCode]
|
||||
applyDetailInfo.settAccountBankBranchAreaCode = val.detail.value
|
||||
$lklGetBankList(areaCode).then((res) => {
|
||||
const { bizData } = res
|
||||
bankInfoList.value = JSON.parse(bizData)
|
||||
})
|
||||
}
|
||||
// 选择银行回调
|
||||
const updataBank = (val) => {
|
||||
// branchBankName 联行 行号
|
||||
// clearNo 清算行号
|
||||
applyDetailInfo.bankInfo = val.id
|
||||
applyDetailInfo.settAccountBankName = val.branchBankName
|
||||
applyDetailInfo.openningBankCode = val.branchBankNo
|
||||
applyDetailInfo.clearingBankCode = val.clearNo
|
||||
console.log(val, '银行回调')
|
||||
}
|
||||
const launchApply = (isTempData) => {
|
||||
// 有费率的进件渠道，要在发起进件之前，获取所选择的费率信息
|
||||
applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)
|
||||
applyDetailInfo.mchFullName = applyDetailInfo.mchFullName
|
||||
? applyDetailInfo.mchFullName
|
||||
: applyDetailInfo.mchShortName
|
||||
|
||||
// return;
|
||||
emit('applyHandle', {
|
||||
name: 'lklspay',
|
||||
isTempData,
|
||||
applyDetailInfo,
|
||||
formCheck: [applyDetailInfo.merchantType, applyDetailInfo.isLegalInfo],
|
||||
})
|
||||
}
|
||||
|
||||
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
|
||||
// const assignObj = (obj) => {
|
||||
// Object.assign(applyDetailInfo, obj);
|
||||
// };
|
||||
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
|
||||
const assignObj = (obj) => {
|
||||
Object.assign(applyDetailInfo, obj)
|
||||
|
||||
// 行业类型，地理位置回显
|
||||
codeBack.bankCode = obj.settAccountBankBranchAreaCode
|
||||
? obj.settAccountBankBranchAreaCode[2]
|
||||
: null
|
||||
codeBack.branchCode = obj.bankBranchAreaCode
|
||||
? obj.bankBranchAreaCode[1]
|
||||
: null
|
||||
|
||||
// 以下用于只读信息页
|
||||
obj.settAccountBankBranchAreaText = tool.addressBack(
|
||||
obj.settAccountBankBranchAreaCode,
|
||||
address
|
||||
)
|
||||
obj.bankBranchAreaCodeText = tool.addressBack(obj.bankBranchAreaCode, address)
|
||||
obj.areaText = tool.addressBack(obj.mchAreaCode, address)
|
||||
|
||||
// 传值给只读组件
|
||||
if (applyInfoRef.value) applyInfoRef.value.getApplyInof(obj)
|
||||
}
|
||||
defineExpose({ launchApply, assignObj })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
753
jeepay-ui-uapp-agent/pageApply/channel/sftpay.vue
Normal file
753
jeepay-ui-uapp-agent/pageApply/channel/sftpay.vue
Normal file
@@ -0,0 +1,753 @@
|
||||
<template>
|
||||
<!-- 只读文件 -->
|
||||
<readOnlyInfo
|
||||
v-if="isDisable"
|
||||
ref="applyInfoRef"
|
||||
applyName="sftpay"
|
||||
></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>
|
||||
|
||||
<template
|
||||
v-if="
|
||||
applyDetailInfo.merchantType == 2 ||
|
||||
applyDetailInfo.merchantType == 3
|
||||
"
|
||||
>
|
||||
<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="商户名称全称"
|
||||
v-model:value="applyDetailInfo.mchFullName"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<JeePayForm text="法人身份证人像面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.idcard1Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'idcard1Img')"
|
||||
@clear="clear('idcard1Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证国徽面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.idcard2Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'idcard2Img')"
|
||||
@clear="clear('idcard2Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="法人身份证姓名"
|
||||
v-model:value="applyDetailInfo.idcardName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="法人身份证号"
|
||||
v-model:value="applyDetailInfo.idcardNo"
|
||||
/>
|
||||
<JeePayForm
|
||||
v-if="applyDetailInfo.merchantType == 3"
|
||||
text="法人身份证居住地址"
|
||||
v-model:value="applyDetailInfo.idcardAddress"
|
||||
/>
|
||||
|
||||
<JeePayForm text="法人身份证起始有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.idcardEffectBegin"
|
||||
@publicSelect="publicSelect($event, 'idcardEffectBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证结束有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.idcardEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'idcardEffectEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="经营者/法人是否为受益人"
|
||||
v-if="applyDetailInfo.merchantType == '3'"
|
||||
>
|
||||
<view>
|
||||
{{ applyDetailInfo.owner ? "是" : "否" }}
|
||||
<switch
|
||||
@change="publicSelect($event, 'owner')"
|
||||
:checked="applyDetailInfo.owner"
|
||||
/>
|
||||
</view>
|
||||
</JeePayForm>
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<!-- 受益人卡片 -->
|
||||
<ownerCard
|
||||
v-if="applyDetailInfo.merchantType == '3'"
|
||||
ref="ownerCardRef"
|
||||
:isOwner="applyDetailInfo.owner"
|
||||
:ownerInfoBack="applyDetailInfo.companyBeneficiaryList"
|
||||
/>
|
||||
<uni-collapse-item
|
||||
:show-animation="false"
|
||||
title="店铺信息"
|
||||
class="coll-title"
|
||||
>
|
||||
<view class="content">
|
||||
<JeePayForm
|
||||
text="商户简称"
|
||||
v-model:value="applyDetailInfo.mchShortName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="店铺名称"
|
||||
v-model:value="applyDetailInfo.storeName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="店铺链接"
|
||||
v-model:value="applyDetailInfo.storeUrl"
|
||||
tipText="链接或二维码二选一必填"
|
||||
/>
|
||||
|
||||
<JeePayForm text="店铺二维码">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.storeQrCode"
|
||||
@uploadSuccess="uploadSuccess($event, 'storeQrCode')"
|
||||
@clear="clear('storeQrCode')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="小程序AppID"
|
||||
v-model:value="applyDetailInfo.miniProgramSubAppid"
|
||||
:start="false"
|
||||
/>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="结算规则" class="coll-title">
|
||||
<view class="content">
|
||||
<JeePayForm text="结算规则信息" :start="false">
|
||||
<view @click="setRulesRef.open('bottom')">{{
|
||||
setRulesText ? setRulesText : "请选择"
|
||||
}}</view>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="选择行业" :start="false">
|
||||
<view @click="openSecond">{{
|
||||
applyDetailInfo.mccCode ? applyDetailInfo.mccCode : "请选择"
|
||||
}}</view>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="特殊资质照"
|
||||
:start="false"
|
||||
v-if="applyDetailInfo.isNeedQualification"
|
||||
>
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.qualifications"
|
||||
@uploadSuccess="uploadSuccess($event, 'qualifications')"
|
||||
@clear="clear('qualifications')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
<!-- 撑开高度的元素 -->
|
||||
<!-- <view style="height: 200px"></view> -->
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="超级管理员" class="coll-title">
|
||||
<view class="content">
|
||||
<JeePayForm text="超管身份">
|
||||
<radio-group
|
||||
class="radio-group"
|
||||
@change="publicSelect($event, 'contactType')"
|
||||
>
|
||||
<label class="radio"
|
||||
><radio
|
||||
value="65"
|
||||
:checked="applyDetailInfo.contactType == '65'"
|
||||
/>经营者/法人</label
|
||||
>
|
||||
<label
|
||||
class="radio"
|
||||
v-if="
|
||||
applyDetailInfo.merchantType == 2 ||
|
||||
applyDetailInfo.merchantType == 3
|
||||
"
|
||||
><radio
|
||||
value="66"
|
||||
:checked="applyDetailInfo.contactType == '66'"
|
||||
/>经办人</label
|
||||
>
|
||||
</radio-group>
|
||||
</JeePayForm>
|
||||
|
||||
<template v-if="applyDetailInfo.contactType == '66'">
|
||||
<JeePayForm text="超管身份证人像面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.contactIdDocCopy"
|
||||
@uploadSuccess="uploadSuccess($event, 'contactIdDocCopy')"
|
||||
@clear="clear('contactIdDocCopy')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="超管身份证国徽面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.contactIdDocCopyBack"
|
||||
@uploadSuccess="uploadSuccess($event, 'contactIdDocCopyBack')"
|
||||
@clear="clear('contactIdDocCopyBack')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="超管身份证姓名"
|
||||
v-model:value="applyDetailInfo.contactName"
|
||||
/>
|
||||
|
||||
<JeePayForm
|
||||
text="超管身份证号"
|
||||
v-model:value="applyDetailInfo.contactIdNumber"
|
||||
/>
|
||||
|
||||
<JeePayForm text="超管身份证起始有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.contactIdDocPeriodBegin"
|
||||
@publicSelect="publicSelect($event, 'contactIdDocPeriodBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="超管身份证结束有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.contactIdDocPeriodEnd"
|
||||
@publicSelect="publicSelect($event, 'contactIdDocPeriodEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="业务办理授权函">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.businessAuthorizationLetter"
|
||||
@uploadSuccess="
|
||||
uploadSuccess($event, 'businessAuthorizationLetter')
|
||||
"
|
||||
@clear="clear('businessAuthorizationLetter')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<JeePayForm
|
||||
text="手机号"
|
||||
v-model:value="applyDetailInfo.contactPhone"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="邮箱"
|
||||
v-model:value="applyDetailInfo.contactEmail"
|
||||
/>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
<uni-collapse-item
|
||||
:show-animation="false"
|
||||
title="结算账户"
|
||||
class="coll-title"
|
||||
>
|
||||
<view class="content">
|
||||
<view class="item">
|
||||
<view class="title"><text class="require">*</text>账户类型</view>
|
||||
<radio-group
|
||||
class="radio-group"
|
||||
@change="publicSelect($event, 'settAccountType')"
|
||||
>
|
||||
<label
|
||||
class="radio"
|
||||
v-if="
|
||||
applyDetailInfo.merchantType == 1 ||
|
||||
applyDetailInfo.merchantType == 6 ||
|
||||
applyDetailInfo.merchantType == 2
|
||||
"
|
||||
><radio
|
||||
value="C"
|
||||
:checked="applyDetailInfo.settAccountType == 'C'"
|
||||
/>对私</label
|
||||
>
|
||||
<label
|
||||
class="radio"
|
||||
v-if="
|
||||
applyDetailInfo.merchantType == 2 ||
|
||||
applyDetailInfo.merchantType == 3
|
||||
"
|
||||
><radio
|
||||
value="B"
|
||||
:checked="applyDetailInfo.settAccountType == 'B'"
|
||||
/>对公</label
|
||||
>
|
||||
</radio-group>
|
||||
</view>
|
||||
<JeePayForm
|
||||
text="开户名称"
|
||||
v-model:value="applyDetailInfo.settAccountName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="银行账号"
|
||||
v-model:value="applyDetailInfo.settAccountNo"
|
||||
/>
|
||||
|
||||
<JeePayForm text="开户行">
|
||||
<view @click="openBankSelect">{{
|
||||
applyDetailInfo.accountBankNameShow
|
||||
? applyDetailInfo.accountBankNameShow
|
||||
: "请选择"
|
||||
}}</view>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="开户行省市区">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.bankCode"
|
||||
:localdata="address"
|
||||
@change="publicSelect($event, 'settAccountBankBranchAreaCode')"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<template v-if="applyDetailInfo.needBankBranch">
|
||||
<JeePayForm text="支行所在地区">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.branchCode"
|
||||
:localdata="sftAddress"
|
||||
@change="publicSelect($event, 'bankBranchAreaCode')"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="支行名称">
|
||||
<view @click="selectBranchBank">{{
|
||||
applyDetailInfo.settAccountBankBranchName
|
||||
? applyDetailInfo.settAccountBankBranchName
|
||||
: "请选择"
|
||||
}}</view>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
|
||||
<!-- 选择开户行组件 -->
|
||||
<sftSelectBank
|
||||
ref="sftSelectBankRef"
|
||||
:settAccountType="applyDetailInfo.settAccountType"
|
||||
@bankInfo="bankInfo"
|
||||
:ifCode="channelInfo.code"
|
||||
/>
|
||||
|
||||
<!-- 选择支行 -->
|
||||
<sftSelectBankBranch
|
||||
ref="sftSelectBankBranckRef"
|
||||
@bankBranckInfo="bankBranckInfo"
|
||||
:bankList="bankBranchList"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 一级类目弹窗 -->
|
||||
<uni-popup ref="setRulesRef" type="bottom">
|
||||
<scroll-view
|
||||
:scroll-y="true"
|
||||
style="width: 100%; height: 50vh; overflow: auto; background: #fff"
|
||||
class="firstradius"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in sftMccList"
|
||||
:key="index"
|
||||
:class="{ firstradius: index === 0 }"
|
||||
class="set-rules"
|
||||
@click="selectRule(index)"
|
||||
>
|
||||
<view>
|
||||
<text>{{ item.settlementName }}</text>
|
||||
<text style="color: #8c8c8c; margin-left: 20px">{{
|
||||
item.settRule
|
||||
}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<image
|
||||
v-if="index === setRulesIndex"
|
||||
src="../../static/indexImg/select-radio.svg"
|
||||
mode=""
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
src="../../static/indexImg/un-raido.svg"
|
||||
mode=""
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 二级类目弹窗 -->
|
||||
<uni-popup ref="secondListRef" type="bottom">
|
||||
<scroll-view
|
||||
style="width: 100%; height: 50vh; overflow: auto; background: #fff"
|
||||
class="firstradius"
|
||||
:scroll-y="true"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in secondList"
|
||||
:key="index"
|
||||
:class="{ firstradius: index === 0 }"
|
||||
class="set-rules"
|
||||
@click="secondListChange(index)"
|
||||
>
|
||||
<view>
|
||||
<text>{{ item.qualificationType }}</text>
|
||||
<text style="color: #8c8c8c; margin-left: 20px">{{
|
||||
item.qualifications
|
||||
}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<image
|
||||
v-if="index === secondListIndex"
|
||||
src="../../static/indexImg/select-radio.svg"
|
||||
mode=""
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
src="../../static/indexImg/un-raido.svg"
|
||||
mode=""
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRaw, inject, nextTick } from "vue";
|
||||
import address from "@/components/applyJson/address.json"; // 地址
|
||||
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
|
||||
import { $bankBranchList } from "@/http/apiManager.js";
|
||||
import readOnlyInfo from "../components/readOnlyInfo.vue"; // 只读文件
|
||||
import tool from "@/util/tool.js"; // 工具类函数
|
||||
import sftAddress from "@/components/applyJson/sftAddress.json"; // 选择支行地址用的json只到市
|
||||
import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
|
||||
import sftMcc from "@/components/applyJson/sftMcc.json"; // 行业
|
||||
import termOfValidity from "@/components/applyComponents/termOfValidity.vue"; // 选择证件有效期
|
||||
import jeeDataPicker from "@/components/applyComponents/dataPicker.vue"; // 通用级联选择
|
||||
import ownerCard from "../components/ownerCard.vue"; // 受益人卡片组件
|
||||
import sftSelectBank from "@/components/sftSelectBank/sftSelectBank.vue"; // 选择开户行
|
||||
import sftSelectBankBranch from "@/components/sftSelectBank/sftSelectBankBranch.vue"; // 选择支行
|
||||
import { filterDcit } from "@/hooks/dict"; // 字典
|
||||
const merchantTypeList = reactive(filterDcit(["A3", "A4", "A1", "A2"])); // 商户类型
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const emit = defineEmits(["applyHandle"]);
|
||||
|
||||
// 商户进件详细信息（JSON类型字符串）
|
||||
let applyDetailInfo = reactive({
|
||||
merchantType: "", // 商户类型 3 代表企业
|
||||
settAccountType: "", // 结算账号类型 B 对公
|
||||
companyBeneficiaryList: [],
|
||||
owner: false
|
||||
});
|
||||
|
||||
// 状态: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
|
||||
// 状态为 1,2,4,5 开启disable (也就是状态不为 0 3)
|
||||
let isDisable = ref(false);
|
||||
if (!["0", "3", "8"].includes(channelInfo.state)) isDisable.value = true;
|
||||
|
||||
const ownerCardRef = ref(null);
|
||||
|
||||
/*
|
||||
* 选择开户银行板块
|
||||
*/
|
||||
const sftSelectBankRef = ref();
|
||||
const sftSelectBankBranckRef = ref();
|
||||
// 调起选择开户行弹窗
|
||||
const openBankSelect = () => {
|
||||
if (!applyDetailInfo.settAccountType)
|
||||
return uni.showToast({
|
||||
title: "请先选择账户类型",
|
||||
icon: "none",
|
||||
});
|
||||
sftSelectBankRef.value.openHandle(applyDetailInfo.settAccountType);
|
||||
};
|
||||
// 接收选择的银行
|
||||
const bankInfo = (val) => {
|
||||
console.log(val.bank_alias)
|
||||
applyDetailInfo.accountBankNameShow = val.bank_alias;
|
||||
applyDetailInfo.settAccountBankName = val.account_bank;
|
||||
applyDetailInfo.needBankBranch = val.need_bank_branch; // 是否需要填写分支
|
||||
applyDetailInfo.bankAliasCode = val.bank_alias_code; // 银行别名编码，请求银行分支时使用
|
||||
};
|
||||
|
||||
let bankBranchList = ref([]); // 支行列表
|
||||
|
||||
// 选择支行
|
||||
const selectBranchBank = () => {
|
||||
// 空值校验
|
||||
if (bankBranchList.value.length == 0)
|
||||
return uni.showToast({ title: "请先选择支行地址", icon: "none" });
|
||||
sftSelectBankBranckRef.value.open();
|
||||
};
|
||||
|
||||
// 选择支行完毕
|
||||
const bankBranckInfo = (val) =>
|
||||
(applyDetailInfo.settAccountBankBranchName = val.bank_branch_name); // 支行名称
|
||||
|
||||
// 上传图片成功
|
||||
const uploadSuccess = (res, name) => {
|
||||
applyDetailInfo[name] = res.data;
|
||||
if (name == "contactIdDocCopy") {
|
||||
applyDetailInfo.contactName = res.ocrInfo.idcardName;
|
||||
applyDetailInfo.contactIdNumber = res.ocrInfo.idcardNo;
|
||||
return;
|
||||
}
|
||||
if (name == "contactIdDocCopyBack") {
|
||||
applyDetailInfo.contactIdDocPeriodBegin = res.ocrInfo.idcardEffectBegin;
|
||||
applyDetailInfo.contactIdDocPeriodEnd = res.ocrInfo.idcardEffectEnd;
|
||||
return;
|
||||
}
|
||||
Object.assign(applyDetailInfo, res.ocrInfo); // ocr信息回显
|
||||
};
|
||||
// 清除图片 仅前端
|
||||
const clear = (name) => (applyDetailInfo[name] = "");
|
||||
|
||||
// 通用radio checkbox选择事件 回调函数
|
||||
const publicSelect = (e, key) => {
|
||||
applyDetailInfo[key] = e.detail.value;
|
||||
// 如果超管身份选定为经营者法人 则固定超管姓名与身份证号为法人身份证号、姓名
|
||||
if (key == "merchantType") {
|
||||
applyDetailInfo.merchantType = Number(e.detail.value);
|
||||
if (e.detail.value == 1) {
|
||||
applyDetailInfo.settAccountType = "C"; // 微小商户，结算类型限制为 对私
|
||||
sftMccList.value = sftMcc.micro; // 切换mcc
|
||||
} else if (e.detail.value == 2) {
|
||||
sftMccList.value = sftMcc.individual;
|
||||
} else if (e.detail.value == 3) {
|
||||
sftMccList.value = sftMcc.enterprise;
|
||||
}
|
||||
setRulesText.value = '' // 重置一级类目文字
|
||||
applyDetailInfo.settlementId = '' // 重置一级类目ID
|
||||
applyDetailInfo.mccCode = ""; // 重置二级类目
|
||||
applyDetailInfo.qualificationId = ""; // 重置二级类目
|
||||
applyDetailInfo.isNeedQualification = ""; // 是否要上传证书的标识
|
||||
} else if (key == "bankBranchAreaCode") {
|
||||
// 备注： 盛付通支行地址表，也出现了value相同的情况，需要改一下数据类型 ！！！
|
||||
// 请求支行数据
|
||||
$bankBranchList(channelInfo.mchNo, channelInfo.code, {
|
||||
cityCode: e.detail.value[1],
|
||||
bankAliasCode: applyDetailInfo.bankAliasCode,
|
||||
}).then((res) => {
|
||||
bankBranchList.value = res.bizData;
|
||||
applyDetailInfo.settAccountBankBranchName = ""; // 请求完毕赋空
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* 结算规则板块
|
||||
*/
|
||||
let sftMccList = ref(sftMcc.individual); // 结算规则数组 个人是individual 企业是enterprise 默认给individual
|
||||
let setRulesIndex = ref(-1); // 一级类目 默认选中项
|
||||
const setRulesRef = ref(null); // 一级类目弹窗
|
||||
const setRulesText = ref(""); // 结算规则回显文字
|
||||
|
||||
let secondList = ref([]); // 二级类目列表
|
||||
|
||||
// 一级类目选择完毕
|
||||
const selectRule = (index) => {
|
||||
setRulesRef.value.close();
|
||||
// 结算规则变化，重置行业/特殊资质信息
|
||||
applyDetailInfo.settlementId = sftMccList.value[index].settlementId; // 给后台的一级类目
|
||||
setRulesIndex.value = index; // 选择完一级类目的下标
|
||||
setRulesText.value = sftMccList.value[index].settlementName; // 选择完一级类目的文字
|
||||
applyDetailInfo.mccCode = ""; // 重置二级类目
|
||||
applyDetailInfo.qualificationId = ""; // 重置二级类目
|
||||
applyDetailInfo.isNeedQualification = ""; // 是否要上传证书的标识
|
||||
secondList.value = sftMccList.value[index].qualification; // 二级类目列表
|
||||
};
|
||||
|
||||
const secondListRef = ref(null); // 二级类目弹窗
|
||||
const secondListIndex = ref(-1); // 二级类目 默认选中项
|
||||
let qualifications = ref(false); // 是否展示特殊资质照
|
||||
// 二级类目选择完毕
|
||||
const secondListChange = (index) => {
|
||||
secondListRef.value.close();
|
||||
secondListIndex.value = index;
|
||||
applyDetailInfo.mccCode = secondList.value[index].qualificationType; // 二级文字
|
||||
applyDetailInfo.isNeedQualification =
|
||||
secondList.value[index].isNeedQualification; // 上传特殊资质照是否必填
|
||||
applyDetailInfo.qualificationId = secondList.value[index].qualificationId; // 二级类目 code码赋值
|
||||
};
|
||||
|
||||
// 展开选择二级行业弹窗
|
||||
const openSecond = () => {
|
||||
if (!secondList.value.length)
|
||||
return uni.showToast({ title: "请先选择结算规则信息", icon: "none" });
|
||||
secondListRef.value.open("bottom");
|
||||
};
|
||||
|
||||
// 发起进件
|
||||
const launchApply = (isTempData) => {
|
||||
|
||||
if (
|
||||
!applyDetailInfo.storeUrl &&
|
||||
!applyDetailInfo.storeQrCode &&
|
||||
!isTempData
|
||||
) {
|
||||
return uni.showToast({
|
||||
title: "商户链接，商户二维码二选一必填",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
|
||||
// 获取受益人信息
|
||||
if (applyDetailInfo.merchantType == 3) {
|
||||
applyDetailInfo.companyBeneficiaryList = ownerCardRef.value.ownerInfo();
|
||||
}
|
||||
|
||||
emit(
|
||||
"applyHandle",
|
||||
{
|
||||
name: "sftpay",
|
||||
isTempData,
|
||||
applyDetailInfo,
|
||||
formCheck: [applyDetailInfo.merchantType, applyDetailInfo.contactType],
|
||||
},
|
||||
((applyDetailInfo.merchantType == 3) && !applyDetailInfo.owner) // 该字段为true则对受益人信息进行校验
|
||||
);
|
||||
};
|
||||
|
||||
// 只读组件信息
|
||||
let applyInfoRef = ref(null);
|
||||
|
||||
// 行业类型，地理位置回显
|
||||
let codeBack = reactive({
|
||||
bankCode: "", // 银行地址回显
|
||||
branchCode: "", // 银行支行地址回显
|
||||
});
|
||||
|
||||
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
|
||||
const assignObj = (obj) => {
|
||||
Object.assign(applyDetailInfo, obj);
|
||||
|
||||
// 受益人信息回显
|
||||
nextTick(() => {
|
||||
if (ownerCardRef.value) ownerCardRef.value.ownerInfoBack(obj.companyBeneficiaryList)
|
||||
})
|
||||
|
||||
// 行业类型，地理位置回显
|
||||
codeBack.bankCode = obj.settAccountBankBranchAreaCode
|
||||
? obj.settAccountBankBranchAreaCode[2]
|
||||
: null;
|
||||
codeBack.branchCode = obj.bankBranchAreaCode
|
||||
? obj.bankBranchAreaCode[1]
|
||||
: null;
|
||||
|
||||
// 根据商户类型 切换行业类型
|
||||
if (obj.merchantType == 1) {
|
||||
sftMccList.value = sftMcc.micro
|
||||
} else if (obj.merchantType == 2) {
|
||||
sftMccList.value = sftMcc.individual
|
||||
} else if (obj.merchantType == 3) {
|
||||
sftMccList.value = sftMcc.enterprise
|
||||
}
|
||||
|
||||
if (obj.settlementId) {
|
||||
setRulesText.value = sftMccList.value.find(val => val.settlementId == obj.settlementId).settlementName // 结算规则信息回显(通过settlementId匹配ID)
|
||||
secondList.value = sftMccList.value.find(val => val.settlementId == obj.settlementId).qualification // 信息合并之后，要给二级类目数组赋值
|
||||
}
|
||||
|
||||
// 为一级类目，二级类目选中的值做回显
|
||||
for (let i = 0; i < sftMccList.value.length; i++) {
|
||||
if (sftMccList.value[i].settlementId == obj.settlementId) {
|
||||
setRulesIndex.value = i
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < secondList.value.length; i++) {
|
||||
if (secondList.value[i].qualificationType == obj.mccCode) {
|
||||
secondListIndex.value = i
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 以下用于只读信息页
|
||||
obj.settAccountBankBranchAreaText = tool.addressBack(
|
||||
obj.settAccountBankBranchAreaCode,
|
||||
address
|
||||
);
|
||||
obj.bankBranchAreaCodeText = tool.addressBack(
|
||||
obj.bankBranchAreaCode,
|
||||
address,
|
||||
sftAddress
|
||||
);
|
||||
obj.settAccountText = obj.settAccountType == "C" ? "对私" : "对公";
|
||||
if (obj.merchantType == 1) {
|
||||
obj.merchantText = "小微商户";
|
||||
} else if (obj.merchantType == 2) {
|
||||
obj.merchantText = "个体工商户";
|
||||
} else if (obj.merchantType == 3) {
|
||||
obj.merchantText = "企业";
|
||||
} else {
|
||||
obj.merchantText = "个人卖家";
|
||||
}
|
||||
|
||||
// 传值给只读组件
|
||||
if (applyInfoRef.value) applyInfoRef.value.getApplyInof(obj);
|
||||
};
|
||||
|
||||
defineExpose({ launchApply, assignObj });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../static/information.scss";
|
||||
.set-rules {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.firstradius {
|
||||
border-top-left-radius: 10rpx;
|
||||
border-top-right-radius: 10rpx;
|
||||
}
|
||||
</style>
|
||||
139
jeepay-ui-uapp-agent/pageApply/channel/shengft/pos.vue
Normal file
139
jeepay-ui-uapp-agent/pageApply/channel/shengft/pos.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
|
||||
<view class="pos-title" >
|
||||
<text>pos产品开通</text>
|
||||
<view class="btn" @click="addPos">添加POS终端</view>
|
||||
</view>
|
||||
|
||||
<view v-for="(item, index) in posInfoList" :key="index" class="pos-list">
|
||||
<view class="pos-title">
|
||||
<text>pos终端【{{ index + 1 }}】</text>
|
||||
<view class="btn remove" @click="removePos(index)">删除终端</view>
|
||||
</view>
|
||||
|
||||
<JeePayForm text="pos安装位置" >
|
||||
<!-- -->
|
||||
<jeeDataPicker :localdata="address" :code="codeback[index]" @change="addressHandle($event, index)" paramType="arr" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="具体位置" v-model:value="item.terminalDetailAddress" />
|
||||
|
||||
<JeePayForm text="小品名称" v-model:value="item.ticketName" />
|
||||
|
||||
<JeePayForm text="终端数量" v-model:value="item.terminalCount" />
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref, reactive, toRaw } from 'vue'
|
||||
import address from '@/components/applyJson/address.json' // 盛付通地址json
|
||||
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
|
||||
import jeeDataPicker from '@/components/applyComponents/dataPicker.vue' // 通用级联选择
|
||||
|
||||
// pos信息列表
|
||||
let posInfoList = reactive([
|
||||
{
|
||||
terminalCityId: '', // pos位置
|
||||
terminalDetailAddress: '', // 具体位置
|
||||
ticketName: '', // 小票名称
|
||||
terminalCount: '', // 终端数量
|
||||
}
|
||||
])
|
||||
|
||||
// 地址回显
|
||||
let codeback = reactive([])
|
||||
|
||||
// pos信息合并
|
||||
const merge = list => {
|
||||
posInfoList.length = 0
|
||||
posInfoList.push(...list)
|
||||
posInfoList.forEach((item, index) => {
|
||||
codeback[index] = item.terminalCityId[2]
|
||||
})
|
||||
}
|
||||
|
||||
// 选择地址回调
|
||||
const addressHandle = (e, index) => {
|
||||
posInfoList[index].terminalCityId = e.detail.value
|
||||
codeback[index] = e.detail.value[2]
|
||||
}
|
||||
|
||||
// 新增POS
|
||||
const addPos = () => {
|
||||
posInfoList.push({
|
||||
terminalCityId: '', // pos位置
|
||||
terminalDetailAddress: '', // 具体位置
|
||||
ticketName: '', // 小票名称
|
||||
terminalCount: '', // 终端数量
|
||||
})
|
||||
}
|
||||
|
||||
// 删除终端
|
||||
const removePos = index => {
|
||||
if (posInfoList.length == 1) return uni.showToast({
|
||||
title: '最后一项不可删除',
|
||||
icon: 'none'
|
||||
})
|
||||
posInfoList.splice(index, 1)
|
||||
}
|
||||
|
||||
// 提供给父组件的数据
|
||||
const getPosInfo = (isTempData) => {
|
||||
|
||||
let num = 0 // pos数量不能超过五个
|
||||
|
||||
// 先进行校验 在传给父元素
|
||||
if (!isTempData) {
|
||||
|
||||
num =+posInfoList[i].terminalCount
|
||||
|
||||
for (var i = 0; i < posInfoList.length; i++) {
|
||||
if (!posInfoList[i].terminalCityId || !posInfoList[i].terminalDetailAddress || !posInfoList[i].ticketName || !posInfoList[i].terminalCount) {
|
||||
uni.showToast({
|
||||
title: `第${i + 1}项pos信息填写不完整`,
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (num > 5) {
|
||||
uni.showToast({title: '所有终端产品数量不能超过5个', icon: 'none'})
|
||||
return false
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return JSON.stringify(toRaw(posInfoList))
|
||||
}
|
||||
|
||||
defineExpose({ getPosInfo, merge })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pos-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
.btn {
|
||||
border-radius: 10rpx;
|
||||
background: #3981FF;
|
||||
color: #fff;
|
||||
padding: 5rpx 15rpx;
|
||||
}
|
||||
.remove {
|
||||
background: #ff4d4f;
|
||||
}
|
||||
|
||||
</style>
|
||||
680
jeepay-ui-uapp-agent/pageApply/channel/shengft/shengft.vue
Normal file
680
jeepay-ui-uapp-agent/pageApply/channel/shengft/shengft.vue
Normal file
@@ -0,0 +1,680 @@
|
||||
<template>
|
||||
<!-- 只读文件 -->
|
||||
<readOnlyInfo
|
||||
v-if="isDisable"
|
||||
ref="applyInfoRef"
|
||||
applyName="shengpay"
|
||||
></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="选择行业MCC">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.mccCode"
|
||||
:localdata="mcc"
|
||||
@change="publicSelect($event, 'mccCode')"
|
||||
paramType="last"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="商户联系人姓名"
|
||||
v-model:value="applyDetailInfo.contactName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="商户联系人电话"
|
||||
v-model:value="applyDetailInfo.contactPhone"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="商户联系人邮箱"
|
||||
v-model:value="applyDetailInfo.contactEmail"
|
||||
/>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item
|
||||
:show-animation="false"
|
||||
title="经营信息"
|
||||
class="coll-title"
|
||||
>
|
||||
<view class="content">
|
||||
<JeePayForm
|
||||
text="商户简称"
|
||||
v-model:value="applyDetailInfo.mchShortName"
|
||||
/>
|
||||
|
||||
<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.licenseEffectBegin"
|
||||
@publicSelect="publicSelect($event, 'licenseEffectBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="营业执照有效期截止">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.licenseEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'licenseEffectEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<JeePayForm
|
||||
text="商户名称全称"
|
||||
v-model:value="applyDetailInfo.mchFullName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="请输入商户详细地址"
|
||||
v-model:value="applyDetailInfo.address"
|
||||
/>
|
||||
|
||||
<JeePayForm text="商户地理位置选择省市县">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.areaCode"
|
||||
:localdata="address"
|
||||
@change="publicSelect($event, 'areaCode')"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="门头照">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.storeOuterImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'storeOuterImg')"
|
||||
@clear="clear('storeOuterImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="收银台照片">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.storeCashierImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'storeCashierImg')"
|
||||
@clear="clear('storeCashierImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="店内环境照">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.storeInnerImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'storeInnerImg')"
|
||||
@clear="clear('storeInnerImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item
|
||||
:show-animation="false"
|
||||
title="证件信息"
|
||||
class="coll-title"
|
||||
>
|
||||
<view class="content">
|
||||
<JeePayForm text="法人身份证人像面照">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.idcard1Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'idcard1Img')"
|
||||
@clear="clear('idcard1Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证国徽面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.idcard2Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'idcard2Img')"
|
||||
@clear="clear('idcard2Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="法人身份证姓名"
|
||||
v-model:value="applyDetailInfo.idcardName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="法人身份证号"
|
||||
v-model:value="applyDetailInfo.idcardNo"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="法人身份证居住地址"
|
||||
v-model:value="applyDetailInfo.idcardAddress"
|
||||
/>
|
||||
|
||||
<JeePayForm text="法人身份证起始有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.idcardEffectBegin"
|
||||
@publicSelect="publicSelect($event, 'idcardEffectBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证结束有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.idcardEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'idcardEffectEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人手持身份证照片" :start="false">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.idcardInHandImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'idcardInHandImg')"
|
||||
@clear="clear('idcardInHandImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<!-- 受益人卡片 -->
|
||||
<ownerCard
|
||||
v-if="applyDetailInfo.merchantType == '3'"
|
||||
ref="ownerCardRef"
|
||||
@setLegalInfo="setLegalInfo"
|
||||
:legalBtn="true"
|
||||
:isShengft="true"
|
||||
/>
|
||||
<uni-collapse-item
|
||||
:show-animation="false"
|
||||
title="联系人证件信息(联系人法人不一致时必填)"
|
||||
class="coll-title"
|
||||
>
|
||||
<view class="content">
|
||||
<JeePayForm text="商户联系人身份证人像面照片" :start="nameResult">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.contactIdcard1Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'contactIdcard1Img')"
|
||||
@clear="clear('contactIdcard1Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商户联系人身份证国徽面照片" :start="nameResult">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.contactIdcard2Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'contactIdcard2Img')"
|
||||
@clear="clear('contactIdcard2Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="商户联系人身份证号"
|
||||
v-model:value="applyDetailInfo.contactIdcardNo"
|
||||
:start="nameResult"
|
||||
/>
|
||||
|
||||
<JeePayForm text="商户联系人身份证起始有效期" :start="nameResult">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.contactIdcardEffectBegin"
|
||||
@publicSelect="publicSelect($event, 'contactIdcardEffectBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商户联系人身份证结束有效期" :start="nameResult">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.contactIdcardEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'contactIdcardEffectEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="商户联系人身份证居住地址"
|
||||
v-model:value="applyDetailInfo.contactIdcardAddress"
|
||||
:start="nameResult"
|
||||
/>
|
||||
|
||||
<JeePayForm text="业务办理授权函图片" :start="nameResult">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.contactWxAuthImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'contactWxAuthImg')"
|
||||
@clear="clear('contactWxAuthImg')"
|
||||
/>
|
||||
</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="
|
||||
applyDetailInfo.settAccountType == 'B'
|
||||
? '开户许可证照片'
|
||||
: '结算银行卡照片'
|
||||
"
|
||||
>
|
||||
<JeepayUpLoad
|
||||
ocrFlag="bankCard"
|
||||
:imgUrl="applyDetailInfo.settAccountLicenseImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')"
|
||||
@clear="clear('settAccountLicenseImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
:text="
|
||||
applyDetailInfo.settAccountType == 'B'
|
||||
? '对公账户名称'
|
||||
: '持卡人姓名'
|
||||
"
|
||||
v-model:value="applyDetailInfo.settAccountName"
|
||||
/>
|
||||
|
||||
<JeePayForm
|
||||
:text="
|
||||
applyDetailInfo.settAccountType == 'B' ? '对公账号' : '银行卡号'
|
||||
"
|
||||
v-model:value="applyDetailInfo.settAccountNo"
|
||||
/>
|
||||
|
||||
<!-- 以下几个 开户银行名称、支行所在地、支行名称、对公结算必填 -->
|
||||
<template v-if="applyDetailInfo.settAccountType == 'B'">
|
||||
<JeePayForm
|
||||
text="开户银行名称"
|
||||
v-model:value="applyDetailInfo.settAccountBankName"
|
||||
/>
|
||||
|
||||
<JeePayForm text="开户银行卡分支行所在地区">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.bankCode"
|
||||
:localdata="address"
|
||||
@change="publicSelect($event, 'settAccountBankBranchAreaCode')"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="开户银行卡支行名称"
|
||||
v-model:value="applyDetailInfo.settAccountBankBranchName"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 企业类型 && 结算到个人 -->
|
||||
<template
|
||||
v-if="
|
||||
applyDetailInfo.settAccountType == 'C' &&
|
||||
applyDetailInfo.merchantType == 3
|
||||
"
|
||||
>
|
||||
<JeePayForm
|
||||
text="对公账户名称"
|
||||
v-model:value="applyDetailInfo.companyAccountName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="对公账户银行卡号"
|
||||
v-model:value="applyDetailInfo.companyAccountNo"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="对公账户开户银行名称"
|
||||
v-model:value="applyDetailInfo.companyAccountBankName"
|
||||
/>
|
||||
|
||||
<JeePayForm text="对公账户开户支行所在地区">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.branchCode"
|
||||
:localdata="address"
|
||||
@change="
|
||||
publicSelect($event, 'companyAccountBankBranchAreaCode')
|
||||
"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="对公账户开户支行名称"
|
||||
v-model:value="applyDetailInfo.companyAccountBankBranchName"
|
||||
/>
|
||||
|
||||
<JeePayForm text="开户许可证照片">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.companyAccountLicenseImg"
|
||||
@uploadSuccess="
|
||||
uploadSuccess($event, 'companyAccountLicenseImg')
|
||||
"
|
||||
@clear="clear('companyAccountLicenseImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<!-- 企业性质 && 对私结算 && 结算到非法人银行卡时 需要传以下信息 -->
|
||||
<template
|
||||
v-if="
|
||||
(applyDetailInfo.merchantType == 2 ||
|
||||
applyDetailInfo.merchantType == 3) &&
|
||||
applyDetailInfo.settAccountType == 'C' &&
|
||||
applyDetailInfo.settAccountName != applyDetailInfo.idcardName
|
||||
"
|
||||
>
|
||||
<JeePayForm
|
||||
text="持卡人身份证号"
|
||||
v-model:value="applyDetailInfo.settAccountIdcardNo"
|
||||
/>
|
||||
<JeePayForm text="持卡人身份证人像照">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.settAccountIdcard1Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')"
|
||||
@clear="clear('settAccountIdcard1Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="持卡人身份证国徽面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.settAccountIdcard2Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')"
|
||||
@clear="clear('settAccountIdcard2Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="持卡人身份证起始有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.settAccountIdcardEffectBegin"
|
||||
@publicSelect="
|
||||
publicSelect($event, 'settAccountIdcardEffectBegin')
|
||||
"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="持卡人身份证结束有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.settAccountIdcardEffectEnd"
|
||||
@publicSelect="
|
||||
publicSelect($event, 'settAccountIdcardEffectEnd')
|
||||
"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
<!-- 盛付通费率组件 -->
|
||||
<defaultRate ref="defaultRateRef" @autoPos="autoPosHandle" />
|
||||
|
||||
<!-- pos产品开通组件 -->
|
||||
<autoPos ref="autoPosRef" v-if="vdata.isAutoPos" />
|
||||
|
||||
</uni-collapse>
|
||||
</view>
|
||||
|
||||
<!-- 自主签约组件 -->
|
||||
<signing v-if="channelInfo.state == 2" />
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRaw, computed, inject, nextTick } from "vue";
|
||||
import address from "@/components/applyJson/address.json"; // 地址
|
||||
import mcc from "@/components/applyJson/mcc.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 ownerCard from "../../components/ownerCard.vue"; // 受益人卡片组件
|
||||
import { filterDcit } from "@/hooks/dict"; // 字典
|
||||
import signing from '../../components/signing.vue' // 自主签约组件
|
||||
import autoPos from './pos.vue' // pos产品开通
|
||||
|
||||
const merchantTypeList = reactive(filterDcit(["A0", "A1", "A2"])); // 商家类型
|
||||
const settlementTypeList = reactive(filterDcit(["B3", "B4"])); // 结算类型
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const emit = defineEmits(["applyHandle"]);
|
||||
|
||||
// 商户进件详细信息（JSON类型字符串）
|
||||
let applyDetailInfo = reactive({
|
||||
merchantType: 3, // 商户类型 默认为3 代表企业
|
||||
settAccountType: "B", // 结算账号类型 默认为B 对公
|
||||
companyBeneficiaryList: [], // 受益人
|
||||
});
|
||||
|
||||
const vdata = reactive({
|
||||
isAutoPos: true, // 是否展示pos产品开通组件
|
||||
wayCodeList: [], // 渠道名称列表
|
||||
})
|
||||
|
||||
// 判断渠道名称中，是否包含 auto-pos
|
||||
const posHandle = list => {
|
||||
list.forEach(item => vdata.wayCodeList.push(item))
|
||||
return vdata.wayCodeList.includes('AUTO_POS')
|
||||
}
|
||||
|
||||
// 费率组件内部 开启或关闭auto-pos的回调
|
||||
const autoPosHandle = flag => {
|
||||
vdata.isAutoPos = flag
|
||||
if (!flag) applyDetailInfo.posListStr = [] // pos信息重置
|
||||
}
|
||||
|
||||
let autoPosRef = ref(null) // pos产品开通组件
|
||||
|
||||
let ownerCardRef = ref(null); // 受益人卡片
|
||||
let defaultRateRef = ref(null); // 费率组件
|
||||
|
||||
// 将法人信息传递给受益人
|
||||
const setLegalInfo = (index) => {
|
||||
ownerCardRef.value.getLegalInfo(
|
||||
{
|
||||
idcard1Img: applyDetailInfo.idcard1Img ? applyDetailInfo.idcard1Img : "",
|
||||
idcard2Img: applyDetailInfo.idcard2Img ? applyDetailInfo.idcard2Img : "",
|
||||
idcardNo: applyDetailInfo.idcardNo ? applyDetailInfo.idcardNo : "",
|
||||
idcardName: applyDetailInfo.idcardName ? applyDetailInfo.idcardName : "",
|
||||
idcardAddress: applyDetailInfo.idcardAddress
|
||||
? applyDetailInfo.idcardAddress
|
||||
: "",
|
||||
idcardEffectEnd: applyDetailInfo.idcardEffectEnd
|
||||
? applyDetailInfo.idcardEffectEnd
|
||||
: "",
|
||||
idcardEffectBegin: applyDetailInfo.idcardEffectBegin
|
||||
? applyDetailInfo.idcardEffectBegin
|
||||
: "",
|
||||
},
|
||||
index
|
||||
);
|
||||
};
|
||||
|
||||
// 法人与商户联系人不一致时，联系人证件信息必填（判断二者姓名）(加上*号)
|
||||
let nameResult = computed(() => {
|
||||
return !(applyDetailInfo.contactName === applyDetailInfo.idcardName);
|
||||
});
|
||||
|
||||
// 状态分类: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
|
||||
// 当状态为 0 2 4 5 时要开启只读模式，1 3 不开启
|
||||
let isDisable = ref(false);
|
||||
if (!["0", "3", "8"].includes(channelInfo.state)) isDisable.value = true;
|
||||
|
||||
// 通用选择函数
|
||||
const publicSelect = (e, key) => {
|
||||
applyDetailInfo[key] = e.detail.value;
|
||||
};
|
||||
|
||||
// 上传图片成功
|
||||
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
|
||||
// ocr识别返回的字段与当前字段不一致时，走以下判断
|
||||
if (name == "settAccountIdcard2Img") {
|
||||
applyDetailInfo.settAccountIdcardEffectBegin =
|
||||
res.ocrInfo.idcardEffectBegin; // 持卡人有效期
|
||||
applyDetailInfo.settAccountIdcardEffectEnd = res.ocrInfo.idcardEffectEnd; // 持卡人有效期end
|
||||
return;
|
||||
}
|
||||
if (name == "contactIdcard1Img") {
|
||||
// 商户联系人身份证人像面照片回显
|
||||
applyDetailInfo.contactIdcardNo = res.ocrInfo.idcardNo;
|
||||
applyDetailInfo.contactIdcardAddress = res.ocrInfo.idcardAddress;
|
||||
return;
|
||||
}
|
||||
if (name == "contactIdcard2Img") {
|
||||
// 商户联系人身份证国徽面照片回显
|
||||
applyDetailInfo.contactIdcardEffectBegin = res.ocrInfo.idcardEffectBegin;
|
||||
applyDetailInfo.contactIdcardEffectEnd = res.ocrInfo.idcardEffectEnd;
|
||||
return;
|
||||
}
|
||||
Object.assign(applyDetailInfo, res.ocrInfo); // ocr信息回显，字段一致直接合并
|
||||
};
|
||||
// 清除图片 仅前端
|
||||
const clear = (name, url) => (applyDetailInfo[name] = "");
|
||||
|
||||
// 发起进件 注意后面的formCheck参数，表单校验要用
|
||||
const launchApply = (isTempData) => {
|
||||
|
||||
// 有费率的进件渠道，要在发起进件之前，获取所选择的费率信息
|
||||
applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)
|
||||
if (applyDetailInfo.paywayFeeList.length <= 0 && !isTempData) {
|
||||
return uni.showToast({
|
||||
title: '请至少包含一个签约产品， 若无产品请先配置服务商相关底价信息。', icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// pos信息
|
||||
if (vdata.isAutoPos) {
|
||||
applyDetailInfo.posListStr = autoPosRef.value.getPosInfo(isTempData)
|
||||
|
||||
// pos组件内校验失败ruturn false了，所以这里也不能进行下一步了
|
||||
if (!applyDetailInfo.posListStr) return
|
||||
}
|
||||
|
||||
// 获取受益人信息
|
||||
if (applyDetailInfo.merchantType == 3) {
|
||||
applyDetailInfo.companyBeneficiaryList = ownerCardRef.value.ownerInfo();
|
||||
}
|
||||
|
||||
emit(
|
||||
"applyHandle",
|
||||
{
|
||||
name: "shengpay",
|
||||
isTempData,
|
||||
applyDetailInfo,
|
||||
formCheck: [
|
||||
applyDetailInfo.merchantType,
|
||||
applyDetailInfo.settAccountType,
|
||||
applyDetailInfo.settAccountName,
|
||||
applyDetailInfo.idcardName,
|
||||
toRaw(nameResult.value),
|
||||
],
|
||||
},
|
||||
applyDetailInfo.merchantType == 3 // 该字段为true则对受益人信息进行校验
|
||||
);
|
||||
};
|
||||
|
||||
// 只读组件信息
|
||||
let applyInfoRef = ref(null);
|
||||
|
||||
// 行业类型，地理位置回显
|
||||
let codeBack = reactive({
|
||||
areaCode: "", // 商户地理位置回显
|
||||
bankCode: "", // 银行地址回显
|
||||
mccCode: "", // 行业回显
|
||||
branchCode: "", // 企业类型 && 结算到个人 银行支行地址回显
|
||||
});
|
||||
|
||||
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
|
||||
const assignObj = (obj) => {
|
||||
Object.assign(applyDetailInfo, obj);
|
||||
posHandle(obj.paywayFeeList) // 费率信息中存在 AUTO_POS， 则打开pos组件
|
||||
// 受益人信息回显
|
||||
nextTick(() => {
|
||||
// 受益人组件信息回显
|
||||
if (ownerCardRef.value) ownerCardRef.value.ownerInfoBack(obj.companyBeneficiaryList)
|
||||
|
||||
// pos信息组件信息回显
|
||||
if (autoPosRef.value) autoPosRef.value.merge(JSON.parse(obj.posListStr))
|
||||
})
|
||||
|
||||
if (!isDisable.value) {
|
||||
ownerCardRef.value.ownerInfoBack(obj.companyBeneficiaryList); // 受益人信息回显
|
||||
// 行业类型，地理位置回显
|
||||
codeBack.areaCode = obj.areaCode ? obj.areaCode[2] : obj.areaCode;
|
||||
codeBack.bankCode = obj.settAccountBankBranchAreaCode
|
||||
? obj.settAccountBankBranchAreaCode[2]
|
||||
: null;
|
||||
codeBack.mccCode = obj.mccCode;
|
||||
codeBack.branchCode = obj.companyAccountBankBranchAreaCode
|
||||
? obj.companyAccountBankBranchAreaCode[2]
|
||||
: null;
|
||||
}
|
||||
|
||||
// 以下用于只读信息页
|
||||
let mccInfo; // 行业文字回显
|
||||
for (var i = 0; i < mcc.length; i++) {
|
||||
mccInfo = mcc[i].children.find((val) => val.value == obj.mccCode);
|
||||
if (mccInfo) break;
|
||||
}
|
||||
obj.mccText = mccInfo ? mccInfo.text : ""; // 行业码转文字
|
||||
obj.areaText = tool.addressBack(obj.areaCode, address); // 地址码转文字
|
||||
obj.settAccountBankBranchAreaText = tool.addressBack(
|
||||
obj.settAccountBankBranchAreaCode,
|
||||
address
|
||||
);
|
||||
obj.settAccountText = obj.settAccountType == "C" ? "对私" : "对公";
|
||||
obj.merchantText =
|
||||
obj.merchantType == 1
|
||||
? "小微企业"
|
||||
: obj.merchantType == 2
|
||||
? "个体工商户"
|
||||
: "企业";
|
||||
// pos信息
|
||||
let posInfoList = JSON.parse(obj.posListStr)
|
||||
if (posInfoList && posInfoList.length > 0) {
|
||||
posInfoList.forEach(item => {
|
||||
item.areaText = tool.addressBack(item.terminalCityId, address)
|
||||
})
|
||||
}
|
||||
obj.posInfoList = posInfoList
|
||||
|
||||
// 传值给只读组件
|
||||
if (applyInfoRef.value) applyInfoRef.value.getApplyInof(obj);
|
||||
};
|
||||
|
||||
defineExpose({ launchApply, assignObj });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../static/information.scss";
|
||||
</style>
|
||||
55
jeepay-ui-uapp-agent/pageApply/channel/utmpay/utmRead.vue
Normal file
55
jeepay-ui-uapp-agent/pageApply/channel/utmpay/utmRead.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view>
|
||||
<defaultRate ref="defaultRateRef" title="新增支付类型" isCheck="all" :isUtmpay="true" />
|
||||
|
||||
<!-- 银联前置平台专属 -->
|
||||
<view class="submit" @click="submitHandle">保存新增支付类型</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref, reactive, inject, toRaw } from 'vue'
|
||||
import { $payConfAdd } from '@/http/apiManager.js'
|
||||
import defaultRate from '../../components/defaultRate.vue' // 默认费率
|
||||
|
||||
let vdata = reactive({
|
||||
paywayFeeList: []
|
||||
})
|
||||
|
||||
const defaultRateRef = ref()
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const submitHandle = () => {
|
||||
// 拿费率组件的值
|
||||
applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(false)
|
||||
payConfAdd()
|
||||
}
|
||||
|
||||
const payConfAdd = () => {
|
||||
$payConfAdd(channelInfo.applyId, { paywayFeeList: toRaw(vdata.paywayFeeList) }).then((res) => {
|
||||
console.log(vdata.paywayFeeList)
|
||||
uni.showToast({title: '保存成功', icon: 'none'})
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.submit{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30rpx auto;
|
||||
width: 380rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #3981FF;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
238
jeepay-ui-uapp-agent/pageApply/channel/utmpay/utmpay.vue
Normal file
238
jeepay-ui-uapp-agent/pageApply/channel/utmpay/utmpay.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<!-- 盛付通进件模板 -->
|
||||
<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="商户类型" >
|
||||
<radio-group class="radio-group" @change="publicSelect($event, 'merchantType')" >
|
||||
<label class="radio"><radio value="2" :checked="applyDetailInfo.merchantType == '2'" />个体工商户</label>
|
||||
<label class="radio"><radio value="3" :checked="applyDetailInfo.merchantType == '3'" />企业</label>
|
||||
</radio-group>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="执照类型" >
|
||||
<radio-group class="radio-group" @change="publicSelect($event, 'businessLicenseType')" >
|
||||
<label class="radio"><radio value="00" :checked="applyDetailInfo.businessLicenseType == '00'" />统一社会信用代码证号(三证合一)</label>
|
||||
<label class="radio"><radio value="01" :checked="applyDetailInfo.businessLicenseType == '01'" />营业执照(非三证合一)</label>
|
||||
<label class="radio"><radio value="02" :checked="applyDetailInfo.businessLicenseType == '02'" />其他</label>
|
||||
</radio-group>
|
||||
</JeePayForm>
|
||||
|
||||
<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="法人姓名" v-model:value="applyDetailInfo.legalPerson" />
|
||||
<JeePayForm text="用户名称" v-model:value="applyDetailInfo.mchFullName" />
|
||||
<JeePayForm text="商户简称" v-model:value="applyDetailInfo.mchShortName" />
|
||||
<JeePayForm text="法人身份证人像面照">
|
||||
<JeepayUpLoad ocrFlag="idCard" :imgUrl="applyDetailInfo.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')" @clear="clear('idcard1Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证国徽面照片">
|
||||
<JeepayUpLoad ocrFlag="idCard" :imgUrl="applyDetailInfo.idcard2Img" @uploadSuccess="uploadSuccess($event, 'idcard2Img')" @clear="clear('idcard2Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="联系人身份证姓名" v-model:value="applyDetailInfo.idcardName" />
|
||||
<JeePayForm text="联系人身份证号" v-model:value="applyDetailInfo.idcardNo" />
|
||||
<JeePayForm text="商户联系人手机号" v-model:value="applyDetailInfo.contactPhone" />
|
||||
<JeePayForm text="商户联系人邮箱" v-model:value="applyDetailInfo.contactEmail" />
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item :show-animation="false" title="经营信息" class="coll-title">
|
||||
<view class="content">
|
||||
|
||||
<JeePayForm text="经营类目" >
|
||||
<jeeDataPicker :code="codeBack.mccCode" :localdata="mcc" @change="publicSelect($event, 'mccCode')" paramType="last" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商户地理位置选择省市县" >
|
||||
<jeeDataPicker :code="codeBack.areaCode" :localdata="address" @change="publicSelect($event, 'areaCode')" paramType="arr" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商户经营地址" v-model:value="applyDetailInfo.address" />
|
||||
<JeePayForm text="客服电话" v-model:value="applyDetailInfo.customerPhone" />
|
||||
|
||||
<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>
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item :show-animation="false" title="账户信息" class="coll-title">
|
||||
<view class="content">
|
||||
|
||||
<JeePayForm text="账户类型" >
|
||||
<radio-group class="radio-group" @change="publicSelect($event, 'settAccountType')" >
|
||||
<label class="radio"><radio value="C" :checked="applyDetailInfo.settAccountType == 'C'" />个人</label>
|
||||
<label class="radio"><radio value="B" :checked="applyDetailInfo.settAccountType == 'B'" />企业</label>
|
||||
</radio-group>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="是否为负责人信息" >
|
||||
<radio-group class="radio-group" @change="publicSelect($event, 'isContactInfo')" >
|
||||
<label class="radio"><radio value="1" :checked="applyDetailInfo.isContactInfo == '1'" />是</label>
|
||||
<label class="radio"><radio value="0" :checked="applyDetailInfo.isContactInfo == '0'" />否</label>
|
||||
</radio-group>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="银行开户名" v-model:value="applyDetailInfo.settAccountName" />
|
||||
<JeePayForm text="持卡人身份证号" v-model:value="applyDetailInfo.settAccountIdcardNo" v-if="applyDetailInfo.settAccountType == 'C'" :start="false" />
|
||||
<JeePayForm text="银行预留手机号" v-model:value="applyDetailInfo.bankCardPhone" />
|
||||
|
||||
<JeePayForm text="银行卡照片" :start="false">
|
||||
<JeepayUpLoad ocrFlag="bankCard" :imgUrl="applyDetailInfo.settAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')" @clear="clear('settAccountLicenseImg')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="银行账号" v-model:value="applyDetailInfo.settAccountNo" />
|
||||
<JeePayForm text="开户行省市县" >
|
||||
<jeeDataPicker :code="codeBack.settAccountBankBranchAreaCode" :localdata="address" @change="publicSelect($event, 'settAccountBankBranchAreaCode')" paramType="arr" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="开户行支行名称" v-model:value="applyDetailInfo.settAccountBankBranchName" :start="false" />
|
||||
|
||||
<JeePayForm text="开户银行ID" v-model:value="applyDetailInfo.bankId" />
|
||||
<JeePayForm text="联行行号" v-model:value="applyDetailInfo.contactLine" />
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item :show-animation="false" title="其他信息" class="coll-title">
|
||||
<view class="content">
|
||||
|
||||
<JeePayForm text="商户协议照片1" :start="false">
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.protocolPhoto1" @uploadSuccess="uploadSuccess($event, 'protocolPhoto1')" @clear="clear('protocolPhoto1')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商户协议照片2" :start="false">
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.protocolPhoto2" @uploadSuccess="uploadSuccess($event, 'protocolPhoto2')" @clear="clear('protocolPhoto2')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商户协议照片3" :start="false">
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.protocolPhoto3" @uploadSuccess="uploadSuccess($event, 'protocolPhoto3')" @clear="clear('protocolPhoto3')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商户协议照片4" :start="false">
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.protocolPhoto4" @uploadSuccess="uploadSuccess($event, 'protocolPhoto4')" @clear="clear('protocolPhoto4')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="组织机构代码证照片" :start="false">
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.orgPhoto" @uploadSuccess="uploadSuccess($event, 'orgPhoto')" @clear="clear('orgPhoto')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="其他资料照片" :start="false">
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.otherDoc" @uploadSuccess="uploadSuccess($event, 'otherDoc')" @clear="clear('otherDoc')" />
|
||||
</JeePayForm>
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
<!-- 费率组件 银联前置平台，在驳回待修改时，不显示费率板块 -->
|
||||
<defaultRate ref="defaultRateRef" isCheck="all" v-if="channelInfo.state == 0" />
|
||||
</uni-collapse>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 只读文件 与 进件完成后的额外操作 -->
|
||||
<readOnlyInfo v-if="isDisable" ref="applyInfoRef" applyName="utmpay" />
|
||||
<utmRead v-if="channelInfo.state != 0" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref , reactive, computed, toRaw, inject } from 'vue'
|
||||
import address from '@/components/applyJson/ysfAddress.json' // 地址
|
||||
import mcc from '@/components/applyJson/jeePayMcc.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 jeeDataPicker from '@/components/applyComponents/dataPicker.vue' // 通用级联选择
|
||||
import utmRead from './utmRead.vue' // 服务于进件完成之后的操作
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const defaultRateRef = ref(null)
|
||||
|
||||
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({})
|
||||
|
||||
// 通用选择函数
|
||||
const publicSelect = (e, key) => {
|
||||
applyDetailInfo[key] = e.detail.value
|
||||
// 是负责人直接赋值，不是清空
|
||||
if (key == 'isContactInfo') {
|
||||
if (e.detail.value == '1') {
|
||||
applyDetailInfo.settAccountName = applyDetailInfo.idcardName
|
||||
applyDetailInfo.settAccountIdcardNo = applyDetailInfo.idcardNo
|
||||
applyDetailInfo.bankCardPhone = applyDetailInfo.contactPhone
|
||||
} else {
|
||||
applyDetailInfo.settAccountName = applyDetailInfo.settAccountIdcardNo = applyDetailInfo.bankCardPhone = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 上传图片成功
|
||||
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
|
||||
Object.assign(applyDetailInfo, res.ocrInfo) // ocr信息回显，字段一致直接合并
|
||||
}
|
||||
// 清除图片 仅前端
|
||||
const clear = (name, url) => applyDetailInfo[name] = ''
|
||||
|
||||
// 发起进件 注意后面的formCheck参数，表单校验要用
|
||||
const launchApply = isTempData => {
|
||||
if (channelInfo.state == 0) {
|
||||
applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)
|
||||
}
|
||||
|
||||
emit('applyHandle', {name: 'utmpay', isTempData, applyDetailInfo})
|
||||
}
|
||||
|
||||
// 只读组件信息
|
||||
let applyInfoRef = ref(null)
|
||||
|
||||
// 行业类型，地理位置回显
|
||||
let codeBack = reactive({
|
||||
areaCode: '', // 商户地理位置回显
|
||||
mccCode: '', // 行业回显
|
||||
})
|
||||
|
||||
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
|
||||
const assignObj = (obj) => {
|
||||
Object.assign(applyDetailInfo, obj)
|
||||
if(!isDisable.value) {
|
||||
// 行业类型，地理位置回显
|
||||
codeBack.areaCode = obj.areaCode ? obj.areaCode[2] : obj.areaCode
|
||||
codeBack.mccCode = obj.mccCode
|
||||
} else {
|
||||
// 以下用于只读信息页
|
||||
obj.mccText = tool.mccBack(obj.mccCode, mcc, 'last') // 行业码转文字
|
||||
obj.areaText = tool.addressBack(obj.areaCode, address) // 地址码转文字
|
||||
obj.settAccountBankBranchAreaText = tool.addressBack(obj.settAccountBankBranchAreaCode, address)
|
||||
// 传值给只读组件
|
||||
if(applyInfoRef.value) applyInfoRef.value.getApplyInof(obj)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ launchApply, assignObj})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../static/information.scss';
|
||||
</style>
|
||||
709
jeepay-ui-uapp-agent/pageApply/channel/wxpay.vue
Normal file
709
jeepay-ui-uapp-agent/pageApply/channel/wxpay.vue
Normal file
@@ -0,0 +1,709 @@
|
||||
<template>
|
||||
<!-- 只读文件 -->
|
||||
<readOnlyInfo v-if="isDisable" ref="applyInfoRef" applyName="wxpay" />
|
||||
<!-- 该页码为填写信息的组件 -->
|
||||
<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"
|
||||
></uni-data-checkbox>
|
||||
</JeePayForm>
|
||||
<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="商户名称全称"
|
||||
v-model:value="applyDetailInfo.mchFullName"
|
||||
/>
|
||||
|
||||
<JeePayForm text="法人身份证人像面照">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.idcard1Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'idcard1Img')"
|
||||
@clear="clear('idcard1Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证国徽面照">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.idcard2Img"
|
||||
@uploadSuccess="uploadSuccess($event, 'idcard2Img')"
|
||||
@clear="clear('idcard2Img')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="法人身份证姓名"
|
||||
v-model:value="applyDetailInfo.idcardName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="法人身份证号"
|
||||
v-model:value="applyDetailInfo.idcardNo"
|
||||
/>
|
||||
|
||||
<JeePayForm
|
||||
v-if="applyDetailInfo.merchantType == 3"
|
||||
text="法人身份证居住地址"
|
||||
v-model:value="applyDetailInfo.idcardAddress"
|
||||
/>
|
||||
|
||||
<JeePayForm text="法人身份证起始有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.idcardEffectBegin"
|
||||
@publicSelect="publicSelect($event, 'idcardEffectBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证结束有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.idcardEffectEnd"
|
||||
@publicSelect="publicSelect($event, 'idcardEffectEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="经营者/法人是否为受益人"
|
||||
v-if="applyDetailInfo.merchantType == '3'"
|
||||
>
|
||||
<view>
|
||||
{{ applyDetailInfo.owner ? "是" : "否" }}
|
||||
<switch
|
||||
@change="publicSelect($event, 'owner')"
|
||||
:checked="applyDetailInfo.owner"
|
||||
/>
|
||||
</view>
|
||||
</JeePayForm>
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<!-- 受益人卡片 -->
|
||||
<ownerCard
|
||||
v-if="applyDetailInfo.merchantType == '3'"
|
||||
ref="ownerCardRef"
|
||||
:isOwner="applyDetailInfo.owner"
|
||||
:ownerInfoBack="applyDetailInfo.companyBeneficiaryList"
|
||||
/>
|
||||
<uni-collapse-item title="经营信息" class="coll-title">
|
||||
<view class="content">
|
||||
<JeePayForm
|
||||
text="商户简称"
|
||||
v-model:value="applyDetailInfo.mchShortName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="客服电话"
|
||||
v-model:value="applyDetailInfo.servicePhone"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="门店名称"
|
||||
v-model:value="applyDetailInfo.storeName"
|
||||
/>
|
||||
|
||||
<JeePayForm text="商户地理位置选择省市县">
|
||||
<jeeDataPicker
|
||||
:code="areaCode"
|
||||
:localdata="address"
|
||||
@change="publicSelect($event, 'areaCode')"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="商户详细地址"
|
||||
v-model:value="applyDetailInfo.address"
|
||||
/>
|
||||
|
||||
<JeePayForm text="门头照">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.storeOuterImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'storeOuterImg')"
|
||||
@clear="clear('storeOuterImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="店内环境照">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.storeInnerImg"
|
||||
@uploadSuccess="uploadSuccess($event, 'storeInnerImg')"
|
||||
@clear="clear('storeInnerImg')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="结算规则" class="coll-title">
|
||||
<view class="content">
|
||||
<JeePayForm text="结算规则信息">
|
||||
<view @click="setRulesRef.open('bottom')">{{
|
||||
setRulesText ? setRulesText : "请选择"
|
||||
}}</view>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="选择行业">
|
||||
<view @click="openSecond">{{
|
||||
applyDetailInfo.mccCode ? applyDetailInfo.mccCode : "请选择"
|
||||
}}</view>
|
||||
</JeePayForm>
|
||||
|
||||
<!-- 该特殊资质照，并非每个行业都必填，根据 isNeedQualification 判断-->
|
||||
<JeePayForm
|
||||
text="特殊资质照"
|
||||
:start="applyDetailInfo.isNeedQualification"
|
||||
>
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.qualifications"
|
||||
@uploadSuccess="uploadSuccess($event, 'qualifications')"
|
||||
@clear="clear('qualifications')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<!-- 优惠费率活动，费率值 商户不可修改 根据 isInActivities 判断是否展开 -->
|
||||
<JeePayForm text="优惠费率活动">
|
||||
<picker
|
||||
@change="activityChange"
|
||||
:value="activityIndex"
|
||||
:range="activityList"
|
||||
>
|
||||
<view class="uni-input">{{
|
||||
activityIndex == 0
|
||||
? "泛行业活动【优惠区间0.2%~0.6%】"
|
||||
: "不参与活动"
|
||||
}}</view>
|
||||
</picker>
|
||||
</JeePayForm>
|
||||
<!-- 撑开高度的元素 -->
|
||||
<!-- <view style="height: 200px"></view> -->
|
||||
</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-model:value="applyDetailInfo.settAccountName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="银行卡账号"
|
||||
v-model:value="applyDetailInfo.settAccountNo"
|
||||
/>
|
||||
|
||||
<JeePayForm text="开户行">
|
||||
<uni-data-picker
|
||||
:localdata="data.bankList"
|
||||
v-model="applyDetailInfo.settAccountBankName"
|
||||
:value="BankName"
|
||||
@change="BankChange"
|
||||
v-slot:default="{ data, error, options }"
|
||||
>
|
||||
{{
|
||||
applyDetailInfo.settAccountBankName
|
||||
? applyDetailInfo.settAccountBankName
|
||||
: "请选择"
|
||||
}}
|
||||
</uni-data-picker>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算银行卡分支行所在地区">
|
||||
<jeeDataPicker
|
||||
:code="bankCode"
|
||||
:localdata="address"
|
||||
@change="publicSelect($event, 'settAccountBankBranchAreaCode')"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
v-if="
|
||||
!applyDetailInfo.settAccountBankName ||
|
||||
applyDetailInfo.settAccountBankName == '其他银行'
|
||||
"
|
||||
text="开户行支行名称"
|
||||
v-model:value="applyDetailInfo.settAccountBankBranchName"
|
||||
/>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="超管信息" class="coll-title">
|
||||
<view class="content">
|
||||
<JeePayForm text="超管身份">
|
||||
<uni-data-checkbox
|
||||
v-model="applyDetailInfo.contactType"
|
||||
:localdata="superList"
|
||||
></uni-data-checkbox>
|
||||
</JeePayForm>
|
||||
<template v-if="applyDetailInfo.contactType == 'SUPER'">
|
||||
<JeePayForm text="超管身份证人像面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.contactIdDocCopy"
|
||||
@uploadSuccess="uploadSuccess($event, 'contactIdDocCopy')"
|
||||
@clear="clear('contactIdDocCopy')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="超管身份证国徽面照片">
|
||||
<JeepayUpLoad
|
||||
ocrFlag="idCard"
|
||||
:imgUrl="applyDetailInfo.contactIdDocCopyBack"
|
||||
@uploadSuccess="uploadSuccess($event, 'contactIdDocCopyBack')"
|
||||
@clear="clear('contactIdDocCopyBack')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="超管身份证姓名"
|
||||
v-model:value="applyDetailInfo.contactName"
|
||||
/>
|
||||
|
||||
<JeePayForm
|
||||
text="超管身份证号"
|
||||
v-model:value="applyDetailInfo.contactIdNumber"
|
||||
/>
|
||||
|
||||
<JeePayForm text="超管身份证起始有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.contactIdDocPeriodBegin"
|
||||
@publicSelect="publicSelect($event, 'contactIdDocPeriodBegin')"
|
||||
:isEnd="false"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="超管身份证结束有效期">
|
||||
<termOfValidity
|
||||
:defaultDate="applyDetailInfo.contactIdDocPeriodEnd"
|
||||
@publicSelect="publicSelect($event, 'contactIdDocPeriodEnd')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="业务办理授权函">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.businessAuthorizationLetter"
|
||||
@uploadSuccess="
|
||||
uploadSuccess($event, 'businessAuthorizationLetter')
|
||||
"
|
||||
@clear="clear('businessAuthorizationLetter')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<JeePayForm
|
||||
text="手机号"
|
||||
v-model:value="applyDetailInfo.contactPhone"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="邮箱"
|
||||
v-model:value="applyDetailInfo.contactEmail"
|
||||
/>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<!-- 费率组件 -->
|
||||
<defaultRate
|
||||
v-if="activityIndex == 0"
|
||||
ref="defaultRateRef"
|
||||
isCheck="all"
|
||||
/>
|
||||
</uni-collapse>
|
||||
|
||||
<!-- 一级类目弹窗 -->
|
||||
<uni-popup ref="setRulesRef" type="bottom">
|
||||
<scroll-view
|
||||
:scroll-y="true"
|
||||
style="width: 100%; height: 50vh; overflow: auto; background: #fff"
|
||||
class="firstradius"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in mccWxList"
|
||||
:key="index"
|
||||
:class="{ firstradius: index === 0 }"
|
||||
class="set-rules"
|
||||
@click="selectRule(index)"
|
||||
>
|
||||
<view>
|
||||
<text>{{ item.settlementName }}</text>
|
||||
<text style="color: #8c8c8c; margin-left: 20px">{{
|
||||
item.settRule
|
||||
}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<image
|
||||
v-if="index === setRulesIndex"
|
||||
src="../../static/indexImg/select-radio.svg"
|
||||
mode=""
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
src="../../static/indexImg/un-raido.svg"
|
||||
mode=""
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 二级类目弹窗 -->
|
||||
<uni-popup ref="secondListRef" type="bottom">
|
||||
<scroll-view
|
||||
:scroll-y="true"
|
||||
style="width: 100%; height: 50vh; overflow: auto; background: #fff"
|
||||
class="firstradius"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in secondList"
|
||||
:key="index"
|
||||
:class="{ firstradius: index === 0 }"
|
||||
class="set-rules"
|
||||
@click="secondListChange(index)"
|
||||
>
|
||||
<view>
|
||||
<text>{{ item.qualificationType }}</text>
|
||||
<text style="color: #8c8c8c; margin-left: 20px">{{
|
||||
item.qualifications
|
||||
}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<image
|
||||
v-if="index === secondListIndex"
|
||||
src="../../static/indexImg/select-radio.svg"
|
||||
mode=""
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
src="../../static/indexImg/un-raido.svg"
|
||||
mode=""
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, inject, nextTick } from "vue";
|
||||
import address from "@/components/applyJson/address.json"; // 地址
|
||||
import mccWx from "@/components/applyJson/mccWx.json"; // 行业
|
||||
import defaultRate from "../components/defaultRate.vue"; // 默认费率
|
||||
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.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 ownerCard from "../components/ownerCard.vue"; // 受益人卡片组件
|
||||
import { filterDcit } from "@/hooks/dict.js"; //字典
|
||||
const merchantTypeList = reactive(filterDcit(["A1", "A2"])); //商户类型
|
||||
const settlementTypeList = reactive(filterDcit(["B0", "B1"])); // 结算类型
|
||||
const superList = reactive(filterDcit(["L0", "L1"])); // 超管身份
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const emit = defineEmits(["applyHandle"]);
|
||||
let applyInfoRef = ref(null); // 只读组件信息
|
||||
let ownerCardRef = ref(null); // 受益人卡片
|
||||
const defaultRateRef = ref(null); // 默认费率组件
|
||||
|
||||
//一些会用到的数据
|
||||
const data = reactive({
|
||||
bankList: [
|
||||
{ text: "工商银行", value: "工商银行" },
|
||||
{ text: "交通银行", value: "交通银行" },
|
||||
{ text: "招商银行", value: "招商银行" },
|
||||
{ text: "民生银行", value: "民生银行" },
|
||||
{ text: "中信银行", value: "中信银行" },
|
||||
{ text: "浦发银行", value: "浦发银行" },
|
||||
{ text: "兴业银行", value: "兴业银行" },
|
||||
{ text: "光大银行", value: "光大银行" },
|
||||
{ text: "广发银行", value: "广发银行" },
|
||||
{ text: "平安银行", value: "平安银行" },
|
||||
{ text: "北京银行", value: "北京银行" },
|
||||
{ text: "华夏银行", value: "华夏银行" },
|
||||
{ text: "农业银行", value: "农业银行" },
|
||||
{ text: "建设银行", value: "建设银行" },
|
||||
{ text: "邮政储蓄银行", value: "邮政储蓄银行" },
|
||||
{ text: "中国银行", value: "中国银行" },
|
||||
{ text: "宁波银行", value: "宁波银行" },
|
||||
{ text: "其他银行", value: "其他银行" },
|
||||
],
|
||||
});
|
||||
|
||||
// 状态: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
|
||||
// 状态为 1,2,4,5 开启disable (也就是状态不为 0 3)
|
||||
let isDisable = ref(false);
|
||||
if (!["0", "3", "8"].includes(channelInfo.state)) isDisable.value = true;
|
||||
|
||||
// 商户进件详细信息（JSON类型字符串）
|
||||
const applyDetailInfo = reactive({
|
||||
merchantType: "2", // 商户类型
|
||||
settAccountType: "C",
|
||||
paywayFeeList: [],
|
||||
companyBeneficiaryList: [], // 受益人列表
|
||||
owner: false
|
||||
});
|
||||
|
||||
// 上传图片成功 含ocr识别
|
||||
const uploadSuccess = (res, name) => {
|
||||
applyDetailInfo[name] = res.data; // 图片回显
|
||||
|
||||
if (name == "contactIdDocCopy") {
|
||||
applyDetailInfo.contactName = res.ocrInfo.idcardName;
|
||||
applyDetailInfo.contactIdNumber = res.ocrInfo.idcardNo;
|
||||
return;
|
||||
}
|
||||
if (name == "contactIdDocCopyBack") {
|
||||
applyDetailInfo.contactIdDocPeriodBegin = res.ocrInfo.idcardEffectBegin;
|
||||
applyDetailInfo.contactIdDocPeriodEnd = res.ocrInfo.idcardEffectEnd;
|
||||
return;
|
||||
}
|
||||
Object.assign(applyDetailInfo, res.ocrInfo); // ocr信息回显
|
||||
};
|
||||
// 清除图片 仅前端
|
||||
const clear = (name) => (applyDetailInfo[name] = "");
|
||||
|
||||
// 通用选择事件回调
|
||||
const publicSelect = (e, key) => {
|
||||
applyDetailInfo[key] = e.detail.value;
|
||||
if (key == "merchantType") {
|
||||
// 结算规则数组 个人是individual 企业是enterprise
|
||||
e.detail.value == 2
|
||||
? (mccWxList.value = mccWx.individual)
|
||||
: (mccWxList.value = mccWx.enterprise);
|
||||
setRulesText.value = '' // 重置一级类目文字
|
||||
applyDetailInfo.settlementId = '' // 重置一级类目ID
|
||||
applyDetailInfo.mccCode = ""; // 重置二级类目
|
||||
applyDetailInfo.qualificationId = ""; // 重置二级类目
|
||||
applyDetailInfo.isNeedQualification = ""; // 是否要上传证书的标识
|
||||
} else if (key == "settAccountBankBranchAreaCode") {
|
||||
// 如果银行选择的是非其他银行，则清空 settAccountBankBranchName 字段
|
||||
applyDetailInfo.settAccountBankBranchName = "";
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* 结算规则板块
|
||||
*/
|
||||
let mccWxList = ref(mccWx.individual); // 结算规则数组 个人是individual 企业是enterprise 默认给individual
|
||||
let setRulesIndex = ref(-1); // 一级类目 默认选中项
|
||||
const setRulesRef = ref(null); // 一级类目弹窗
|
||||
const setRulesText = ref(""); // 结算规则回显文字
|
||||
|
||||
let secondList = ref([]); // 二级类目列表
|
||||
|
||||
// 一级类目选择完毕
|
||||
const selectRule = (index) => {
|
||||
setRulesRef.value.close();
|
||||
// 结算规则变化，重置行业/特殊资质信息
|
||||
applyDetailInfo.settlementId = mccWxList.value[index].settlementId; // 给后台的一级类目
|
||||
setRulesIndex.value = index; // 选择完一级类目的下标
|
||||
setRulesText.value = mccWxList.value[index].settlementName; // 选择完一级类目的文字
|
||||
applyDetailInfo.mccCode = ""; // 重置二级类目
|
||||
applyDetailInfo.qualificationId = ""; // 重置二级类目
|
||||
applyDetailInfo.isNeedQualification = ""; // 是否要上传证书的标识
|
||||
secondList.value = mccWxList.value[index].qualification; // 二级类目列表
|
||||
|
||||
// 重置费率信息
|
||||
applyDetailInfo.isInActivities = mccWxList.value[index].isInActivities; // 是否可参与优惠费率活动
|
||||
|
||||
if (!applyDetailInfo.isInActivities) {
|
||||
applyDetailInfo.activitiesId = "";
|
||||
} else {
|
||||
applyDetailInfo.activitiesId = activitiesId.value;
|
||||
}
|
||||
};
|
||||
|
||||
const secondListRef = ref(null); // 二级类目弹窗
|
||||
const secondListIndex = ref(-1); // 二级类目 默认选中项
|
||||
let qualifications = ref(false); // 是否展示特殊资质照
|
||||
// 二级类目选择完毕
|
||||
const secondListChange = (index) => {
|
||||
secondListRef.value.close();
|
||||
secondListIndex.value = index;
|
||||
applyDetailInfo.mccCode = secondList.value[index].qualificationType; // 二级文字
|
||||
applyDetailInfo.isNeedQualification =
|
||||
secondList.value[index].isNeedQualification; // 上传特殊资质照是否必填
|
||||
|
||||
applyDetailInfo.qualificationId = secondList.value[index].qualificationId; // 二级类目 code码赋值
|
||||
};
|
||||
|
||||
// 展开选择二级行业弹窗
|
||||
const openSecond = () => {
|
||||
if (!secondList.value.length)
|
||||
return uni.showToast({ title: "请先选择结算规则信息", icon: "none" });
|
||||
secondListRef.value.open("bottom");
|
||||
};
|
||||
|
||||
let activitiesId = ref("20191030111cff5b5e"); // 参加活动ID
|
||||
let activityList = ref(["泛行业活动【优惠区间0.2%~0.6%】", "不参与活动"]);
|
||||
let activityIndex = ref(0); // 是否参加活动
|
||||
// 选择活动回调事件
|
||||
const activityChange = (e) => {
|
||||
activityIndex.value = e.detail.value;
|
||||
|
||||
// 当选择不参与活动时，隐藏费率板块
|
||||
e.detail.value == 0
|
||||
? (applyDetailInfo.activitiesId = activitiesId.value)
|
||||
: (applyDetailInfo.activitiesId = "");
|
||||
};
|
||||
|
||||
//银行选择函数
|
||||
const BankChange = (e) => {
|
||||
if (e.detail.value[0].value === "其他银行")
|
||||
applyDetailInfo.settAccountBankBranchName = "";
|
||||
};
|
||||
|
||||
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
|
||||
let mccCode = ref();
|
||||
let areaCode = ref("");
|
||||
let BankName = ref(""); // 银行位置回显
|
||||
const bankCode = ref();
|
||||
|
||||
// 信息合并
|
||||
const assignObj = (obj) => {
|
||||
Object.assign(applyDetailInfo, obj); // obj是回显的信息
|
||||
|
||||
// 受益人信息回显
|
||||
nextTick(() => {
|
||||
if (ownerCardRef.value) ownerCardRef.value.ownerInfoBack(obj.companyBeneficiaryList)
|
||||
})
|
||||
|
||||
// 开启只读模式，直接return以下不在进行
|
||||
if (isDisable.value) {
|
||||
obj.areaText = tool.addressBack(obj.areaCode, address); // 商户地址
|
||||
obj.bankText = tool.addressBack(obj.bankCode, address); // 分行地址
|
||||
if (applyInfoRef.value) applyInfoRef.value.getApplyInof(obj); // 传值给只读组件
|
||||
return;
|
||||
}
|
||||
|
||||
mccCode.value = obj.mccCode;
|
||||
obj.areaCode ? (areaCode.value = obj.areaCode[2]) : null;
|
||||
|
||||
BankName.value = obj.settAccountBankName;
|
||||
obj.settAccountBankBranchAreaCode
|
||||
? (bankCode.value = obj.settAccountBankBranchAreaCode[2])
|
||||
: null;
|
||||
|
||||
// 结算规则数组 个人是individual 企业是enterprise
|
||||
obj.merchantType == 2
|
||||
? (mccWxList.value = mccWx.individual)
|
||||
: (mccWxList.value = mccWx.enterprise);
|
||||
|
||||
if (obj.settlementId) {
|
||||
setRulesText.value = mccWxList.value.find(
|
||||
(val) => val.settlementId == obj.settlementId
|
||||
).settlementName; // 结算规则信息回显(通过settlementId匹配ID)
|
||||
}
|
||||
|
||||
if (obj.settlementId) {
|
||||
secondList.value = mccWxList.value.find(
|
||||
(val) => val.settlementId == obj.settlementId
|
||||
).qualification; // 信息合并之后，要给二级类目数组赋值
|
||||
}
|
||||
|
||||
// 为一级类目，二级类目选中的值做回显
|
||||
for (let i = 0; i < mccWxList.value.length; i++) {
|
||||
if (mccWxList.value[i].settlementId == obj.settlementId) {
|
||||
setRulesIndex.value = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < secondList.value.length; i++) {
|
||||
if (secondList.value[i].qualificationType == obj.mccCode) {
|
||||
secondListIndex.value = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 是否参加活动回显
|
||||
applyDetailInfo.activitiesId
|
||||
? (activityIndex.value = 0)
|
||||
: (activityIndex.value = 1);
|
||||
};
|
||||
|
||||
// 发起进件
|
||||
const launchApply = (isTempData) => {
|
||||
// 微信进件特有，当选择不参与优惠费率活动时，不显示费率板块，也不校验费率
|
||||
if (activityIndex.value == 0) {
|
||||
// 拿费率组件的值
|
||||
applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)
|
||||
|
||||
// 判断类型，对象类型是费率正常提交 Sting 是错误信息
|
||||
if (typeof applyDetailInfo.paywayFeeList === "string")
|
||||
return uni.showToast({
|
||||
title: applyDetailInfo.paywayFeeList, icon: "none",
|
||||
});
|
||||
|
||||
// 费率必填，空值校验
|
||||
if (applyDetailInfo.paywayFeeList.length == 0 && !isTempData)
|
||||
return uni.showToast({ title: "请至少设置一项费率值", icon: "none" });
|
||||
} else {
|
||||
applyDetailInfo.paywayFeeList = "";
|
||||
}
|
||||
|
||||
// 获取受益人信息
|
||||
if (applyDetailInfo.merchantType == 3) {
|
||||
applyDetailInfo.companyBeneficiaryList = ownerCardRef.value.ownerInfo();
|
||||
}
|
||||
|
||||
emit(
|
||||
"applyHandle",
|
||||
{
|
||||
name: "wxpay",
|
||||
isTempData,
|
||||
applyDetailInfo,
|
||||
formCheck: [
|
||||
applyDetailInfo.isNeedQualification,
|
||||
applyDetailInfo.merchantType,
|
||||
applyDetailInfo.contactType,
|
||||
],
|
||||
},
|
||||
((applyDetailInfo.merchantType == 3) && !applyDetailInfo.owner) // 该字段为true则对受益人信息进行校验
|
||||
);
|
||||
};
|
||||
|
||||
defineExpose({ launchApply, assignObj });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../static/information.scss";
|
||||
.set-rules {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.firstradius {
|
||||
border-top-left-radius: 10rpx;
|
||||
border-top-right-radius: 10rpx;
|
||||
}
|
||||
</style>
|
||||
428
jeepay-ui-uapp-agent/pageApply/channel/ysfpay.vue
Normal file
428
jeepay-ui-uapp-agent/pageApply/channel/ysfpay.vue
Normal file
@@ -0,0 +1,428 @@
|
||||
<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>
|
||||
1
jeepay-ui-uapp-agent/pageApply/channel/yspay/ysBank.json
Normal file
1
jeepay-ui-uapp-agent/pageApply/channel/yspay/ysBank.json
Normal file
File diff suppressed because one or more lines are too long
205
jeepay-ui-uapp-agent/pageApply/channel/yspay/ysEvent.vue
Normal file
205
jeepay-ui-uapp-agent/pageApply/channel/yspay/ysEvent.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<!-- 上传图片&提交审核 状态4 出现-->
|
||||
<view v-if="channelInfo.state == 4">
|
||||
|
||||
<view class="title">上传图片</view>
|
||||
|
||||
<JeePayForm text="营业执照照片" v-if="applyInfo.merchantType != '1'">
|
||||
<JeepayUpLoad :imgUrl="applyInfo.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')" @clear="clear('idcard1Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证国徽面照片" >
|
||||
<JeepayUpLoad :imgUrl="applyInfo.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')" @clear="clear('idcard1Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证人像面照片" >
|
||||
<JeepayUpLoad :imgUrl="applyInfo.idcard2Img" @uploadSuccess="uploadSuccess($event, 'idcard2Img')" @clear="clear('idcard2Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="手持证件照片" >
|
||||
<JeepayUpLoad :imgUrl="applyInfo.idcardInHandImg" @uploadSuccess="uploadSuccess($event, 'idcardInHandImg')" @clear="clear('idcardInHandImg')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="门头照" >
|
||||
<JeepayUpLoad :imgUrl="applyInfo.storeOuterImg" @uploadSuccess="uploadSuccess($event, 'storeOuterImg')" @clear="clear('storeOuterImg')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="店内环境照" >
|
||||
<JeepayUpLoad :imgUrl="applyInfo.storeInnerImg" @uploadSuccess="uploadSuccess($event, 'storeInnerImg')" @clear="clear('storeInnerImg')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="收银台照" >
|
||||
<JeepayUpLoad :imgUrl="applyInfo.storeCashierImg" @uploadSuccess="uploadSuccess($event, 'storeCashierImg')" @clear="clear('storeCashierImg')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算银行卡正面照片" >
|
||||
<JeepayUpLoad :imgUrl="applyInfo.settAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')" @clear="clear('settAccountLicenseImg')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算银行卡反面照片" >
|
||||
<JeepayUpLoad :imgUrl="applyInfo.settAccountBankImg2" @uploadSuccess="uploadSuccess($event, 'settAccountBankImg2')" @clear="clear('settAccountBankImg2')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="开户许可证照片" v-if="applyInfo.merchantType == '3'">
|
||||
<JeepayUpLoad :imgUrl="applyInfo.companyAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')" @clear="clear('companyAccountLicenseImg')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="入账账户身份证人像面照片" v-if="applyInfo.codeLegalPersonAcc == 0">
|
||||
<JeepayUpLoad :imgUrl="applyInfo.settAccountIdcard1Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')" @clear="clear('settAccountIdcard1Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="入账账户身份证国徽面照片" v-if="applyInfo.codeLegalPersonAcc == 0">
|
||||
<JeepayUpLoad :imgUrl="applyInfo.settAccountIdcard2Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')" @clear="clear('settAccountIdcard2Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算授权证书照片" v-if="applyInfo.codeLegalPersonAcc == 0">
|
||||
<JeepayUpLoad :imgUrl="applyInfo.settleAuthLetterPhoto" @uploadSuccess="uploadSuccess($event, 'settleAuthLetterPhoto')" @clear="clear('settleAuthLetterPhoto')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="收单协议盖章页照片" :start="false">
|
||||
<JeepayUpLoad :imgUrl="applyInfo.acquiringAgreementPhoto" @uploadSuccess="uploadSuccess($event, 'acquiringAgreementPhoto')" @clear="clear('acquiringAgreementPhoto')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="其他材料照片" :start="false">
|
||||
<JeepayUpLoad :imgUrl="applyInfo.other1" @uploadSuccess="uploadSuccess($event, 'other1')" @clear="clear('other1')" />
|
||||
</JeePayForm>
|
||||
|
||||
<view class="submit" @tap="onSubmit">提交审核</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 自主签约 -->
|
||||
<signing v-if="['2','5'].includes(channelInfo.state)" />
|
||||
|
||||
<!-- 费率组件 与按钮 -->
|
||||
<template v-if="(channelInfo.state == 2)&&(vdata.paywayFeeList.length>0)" >
|
||||
|
||||
<defaultRate ref="defaultRateRef" />
|
||||
<view class="exhibition">请展开费率列表进行配置，已经配置过费率商户的不需重复配置</view>
|
||||
<view v-if="channelInfo.channelVar1" class="exhibition">
|
||||
<view>错误信息：</view>
|
||||
{{ channelInfo.channelVar1 }}
|
||||
</view>
|
||||
<view class="submit" @tap="rateSubmit">费率配置</view>
|
||||
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {ref ,reactive, toRaw, inject, onMounted } from 'vue';
|
||||
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
|
||||
import { $yspayUpload ,$ysPayRateConfig, $mchApplymentsInfo } from '@/http/apiManager.js'
|
||||
import graceChecker from '@/util/graceChecker.js'//引入表单校验工具函数
|
||||
import signing from '../../components/signing.vue' // 自主签约组件
|
||||
import defaultRate from '../../components/defaultRate.vue' // 费率
|
||||
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const applyInfo = ref({}) // 本页面的进件信息
|
||||
|
||||
const vdata = reactive({
|
||||
paywayFeeList: [] // 费率
|
||||
})
|
||||
|
||||
const defaultRateRef = ref(null) // 费率组件
|
||||
|
||||
// 提交审核
|
||||
const onSubmit = () => {
|
||||
|
||||
let check = JSON.parse(JSON.stringify(rules)) // 深拷贝一份
|
||||
|
||||
if (applyInfo.value.merchantType != 1) {
|
||||
check.push(
|
||||
{name: "licenseImg",checkType: "notnull",errorMsg: "请上传营业执照照片"}
|
||||
)
|
||||
}
|
||||
if (applyInfo.value.merchantType == 3) {
|
||||
check.push(
|
||||
{name: "companyAccountLicenseImg",checkType: "notnull",errorMsg: "请上传开户许可证照片"}
|
||||
)
|
||||
}
|
||||
if (applyInfo.value.codeLegalPersonAcc == 0) {
|
||||
check.push(
|
||||
{name: "settAccountIdcard1Img",checkType: "notnull",errorMsg: "请上传入账账户身份证人像面照片"},
|
||||
{name: "settAccountIdcard2Img",checkType: "notnull",errorMsg: "请上传入账账户身份证国徽面照片"},
|
||||
{name: "settleAuthLetterPhoto",checkType: "notnull",errorMsg: "请上传结算授权证书照片"},
|
||||
)
|
||||
}
|
||||
|
||||
let checkRes = graceChecker.check(applyInfo.value, check);
|
||||
if (!checkRes) return uni.showToast({ title: graceChecker.error, icon: "none"})
|
||||
|
||||
uni.showLoading({ title: '提交中' })
|
||||
$yspayUpload(channelInfo.applyId, toRaw(applyInfo.value)).then(res => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '操作成功', icon: 'none' })
|
||||
uni.navigateBack({})
|
||||
})
|
||||
}
|
||||
|
||||
const rules = [
|
||||
{name: "idcard1Img",checkType: "notnull",errorMsg: "请上传法人身份证人像面照片"},
|
||||
{name: "idcard2Img",checkType: "notnull",errorMsg: "请上传法人身份证国徽面照片"},
|
||||
{name: "idcardInHandImg",checkType: "notnull",errorMsg: "请上传手持证件照片"},
|
||||
{name: "storeOuterImg",checkType: "notnull",errorMsg: "请上传门头照"},
|
||||
{name: "storeInnerImg",checkType: "notnull",errorMsg: "请上传店内环境照"},
|
||||
{name: "storeCashierImg",checkType: "notnull",errorMsg: "请上传收银台照"},
|
||||
{name: "settAccountLicenseImg",checkType: "notnull",errorMsg: "请上传结算银行卡正面照片"},
|
||||
{name: "settAccountBankImg2",checkType: "notnull",errorMsg: "请上传结算银行卡反面照片"},
|
||||
{name: "settAccountBankImg2",checkType: "notnull",errorMsg: "请上传结算银行卡反面照片"},
|
||||
]
|
||||
|
||||
// 调用进件查询接口
|
||||
const mchApplyInfoHandle = () => {
|
||||
let originData = 1
|
||||
$mchApplymentsInfo(channelInfo.applyId, originData).then( ({bizData}) => {
|
||||
applyInfo.value = JSON.parse(bizData.applyDetailInfo)
|
||||
})
|
||||
}
|
||||
const setApplyInfo = () => mchApplyInfoHandle()
|
||||
|
||||
// 上传图片成功
|
||||
const uploadSuccess = (res, name) => applyInfo.value[name] = res.data
|
||||
|
||||
// 清除图片 仅前端
|
||||
const clear = (name, url) => applyInfo.value[name] = ''
|
||||
|
||||
// 配置费率
|
||||
const rateSubmit = () => {
|
||||
uni.showLoading({title: '提交中'})
|
||||
vdata.paywayFeeList = defaultRateRef.value.getList(false)
|
||||
$ysPayRateConfig(channelInfo.applyId, { paywayFeeList: vdata.paywayFeeList }).then((res) => {
|
||||
uni.hideLoading()
|
||||
uni.navigateBack({})
|
||||
uni.showToast({title: '提交成功', icon: 'none'})
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ setApplyInfo })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
text-align: center;
|
||||
margin: 30rpx;
|
||||
}
|
||||
.submit{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30rpx auto;
|
||||
width: 380rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #3981FF;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.exhibition {
|
||||
margin: 30rpx;
|
||||
}
|
||||
</style>
|
||||
378
jeepay-ui-uapp-agent/pageApply/channel/yspay/yspay.vue
Normal file
378
jeepay-ui-uapp-agent/pageApply/channel/yspay/yspay.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<!-- 只读文件 -->
|
||||
<readOnlyInfo v-if="isDisable" ref="applyInfoRef" applyName="yspay" />
|
||||
<!-- 盛付通进件模板 -->
|
||||
<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="商户类型" >
|
||||
<radio-group class="radio-group" @change="publicSelect($event, 'merchantType')" >
|
||||
<label class="radio"><radio value="1" :checked="applyDetailInfo.merchantType == '1'" />小微商户</label>
|
||||
<label class="radio"><radio value="2" :checked="applyDetailInfo.merchantType == '2'"/>个体商户</label>
|
||||
<label class="radio"><radio value="3" :checked="applyDetailInfo.merchantType == '3'"/>企业商户</label>
|
||||
</radio-group>
|
||||
</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.licenseEffectBegin" @publicSelect="publicSelect($event, 'licenseEffectBegin')" :isEnd="false" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="营业执照有效期截止">
|
||||
<termOfValidity :defaultDate="applyDetailInfo.licenseEffectEnd" @publicSelect="publicSelect($event, 'licenseEffectEnd')" />
|
||||
</JeePayForm>
|
||||
|
||||
</template>
|
||||
|
||||
<JeePayForm :text="applyDetailInfo.merchantType == 1 ? '用户名称':'营业执照名称'" v-model:value="applyDetailInfo.mchFullName" />
|
||||
<JeePayForm text="商户简称" v-if="applyDetailInfo.merchantType !== 1" v-model:value="applyDetailInfo.mchShortName" :start="false" />
|
||||
|
||||
<JeePayForm text="法人身份证人像面照">
|
||||
<JeepayUpLoad ocrFlag="idCard" :imgUrl="applyDetailInfo.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')" @clear="clear('idcard1Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证国徽面照片">
|
||||
<JeepayUpLoad ocrFlag="idCard" :imgUrl="applyDetailInfo.idcard2Img" @uploadSuccess="uploadSuccess($event, 'idcard2Img')" @clear="clear('idcard2Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人手持身份证照片">
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.idcardInHandImg" @uploadSuccess="uploadSuccess($event, 'idcardInHandImg')" @clear="clear('idcardInHandImg')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证姓名" v-model:value="applyDetailInfo.idcardName" />
|
||||
<JeePayForm text="法人身份证号" v-model:value="applyDetailInfo.idcardNo" />
|
||||
<JeePayForm text="法人地址" v-model:value="applyDetailInfo.idcardAddress" />
|
||||
<JeePayForm text="法人电话" v-model:value="applyDetailInfo.legalPersonPhone" />
|
||||
|
||||
<JeePayForm text="法人性别" >
|
||||
<radio-group class="radio-group" @change="publicSelect($event, 'crpGender')" >
|
||||
<label class="radio"><radio value="0" :checked="applyDetailInfo.crpGender == '0'" />男</label>
|
||||
<label class="radio"><radio value="1" :checked="applyDetailInfo.crpGender == '1'"/>女</label>
|
||||
</radio-group>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人职业" >
|
||||
<jeeDataPicker :code="applyDetailInfo.crpProfession" :localdata="professionList" @change="publicSelect($event, 'crpProfession')" paramType="arr" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证起始有效期">
|
||||
<termOfValidity :defaultDate="applyDetailInfo.idcardEffectBegin" @publicSelect="publicSelect($event, 'idcardEffectBegin')" :isEnd="false" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证结束有效期">
|
||||
<termOfValidity :defaultDate="applyDetailInfo.idcardEffectEnd" @publicSelect="publicSelect($event, 'idcardEffectEnd')" />
|
||||
</JeePayForm>
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item :show-animation="false" title="经营信息" class="coll-title">
|
||||
<view class="content">
|
||||
|
||||
<JeePayForm text="经营类目（MCC）" >
|
||||
<jeeDataPicker :code="codeBack.mccCode" :localdata="mcc" @change="publicSelect($event, 'mccCode')" paramType="last" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="实际控制人姓名" v-model:value="applyDetailInfo.actualManager" v-if="applyDetailInfo.merchantType != 1" />
|
||||
|
||||
<JeePayForm text="是否为法人信息" >
|
||||
<radio-group class="radio-group" @change="publicSelect($event, 'isLegalInfo')" >
|
||||
<label class="radio"><radio value="1" :checked="applyDetailInfo.isLegalInfo == '1'" />是</label>
|
||||
<label class="radio"><radio value="0" :checked="applyDetailInfo.isLegalInfo == '0'"/>否</label>
|
||||
</radio-group>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="商户联系人姓名" v-model:value="applyDetailInfo.contactName" />
|
||||
|
||||
<JeePayForm text="商户联系人手机号" v-model:value="applyDetailInfo.contactPhone" />
|
||||
<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.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="账户类型">
|
||||
<radio-group class="radio-group" @change="publicSelect($event, 'settAccountType')" >
|
||||
<label class="radio"><radio value="C" :checked="applyDetailInfo.settAccountType == 'C'" />对私</label>
|
||||
<label class="radio"><radio value="B" :checked="applyDetailInfo.settAccountType == 'B'"/>对公</label>
|
||||
</radio-group>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算类型">
|
||||
<radio-group class="radio-group" @change="publicSelect($event, 'settlementType')" >
|
||||
<label class="radio"><radio value="00" :checked="applyDetailInfo.settlementType == '00'" />结算至内部</label>
|
||||
<label class="radio"><radio value="01" :checked="applyDetailInfo.settlementType == '01'"/>结算至银行卡</label>
|
||||
</radio-group>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="银行开户名" v-model:value="applyDetailInfo.settAccountName" />
|
||||
|
||||
<template v-if="applyDetailInfo.settAccountType == 'B' && applyDetailInfo.merchantType == '3'">
|
||||
<JeePayForm text="开户许可证照片">
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.companyAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')" @clear="clear('companyAccountLicenseImg')" />
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<JeePayForm text="银行卡正面照">
|
||||
<JeepayUpLoad ocrFlag="bankCard" :imgUrl="applyDetailInfo.settAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')" @clear="clear('settAccountLicenseImg')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="银行卡反面照">
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.settAccountBankImg2" @uploadSuccess="uploadSuccess($event, 'settAccountBankImg2')" @clear="clear('settAccountBankImg2')" />
|
||||
</JeePayForm>
|
||||
</template>
|
||||
|
||||
<JeePayForm text="选择银行">
|
||||
<text @tap="bankRef.open()">{{ applyDetailInfo.settAccountBankName || "选择银行" }}</text>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="银行卡账号" v-model:value="applyDetailInfo.settAccountNo" />
|
||||
|
||||
<JeePayForm text="开户行省市县" >
|
||||
<jeeDataPicker :code="codeBack.bankCode" :localdata="address" @change="publicSelect($event, 'settAccountBankBranchAreaCode')" paramType="arr" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="选择支行">
|
||||
<view @click="selectBranchBank">{{ applyDetailInfo.settAccountBankBranchName ? applyDetailInfo.settAccountBankBranchName : "请选择" }}</view>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="开户行编号" v-model:value="applyDetailInfo.bankType" />
|
||||
<JeePayForm text="开户行行号" v-model:value="applyDetailInfo.openAccBanktype" />
|
||||
|
||||
<JeePayForm text="银行预留手机号" v-model:value="applyDetailInfo.bankMobile" />
|
||||
|
||||
<JeePayForm text="是否法人结算">
|
||||
<radio-group class="radio-group" @change="publicSelect($event, 'codeLegalPersonAcc')" >
|
||||
<label class="radio"><radio value="0" :checked="applyDetailInfo.codeLegalPersonAcc == 0" />非法人</label>
|
||||
<label class="radio"><radio value="1" :checked="applyDetailInfo.codeLegalPersonAcc == 1"/>法人</label>
|
||||
</radio-group>
|
||||
</JeePayForm>
|
||||
|
||||
<template v-if="applyDetailInfo.codeLegalPersonAcc == '0'">
|
||||
|
||||
<JeePayForm text="结算人身份证人像面照片">
|
||||
<JeepayUpLoad ocrFlag="idCard" :imgUrl="applyDetailInfo.settAccountIdcard1Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')" @clear="clear('settAccountIdcard1Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算人身份证国徽面照片">
|
||||
<JeepayUpLoad ocrFlag="idCard" :imgUrl="applyDetailInfo.settAccountIdcard2Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')" @clear="clear('settAccountIdcard2Img')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算人姓名" v-model:value="applyDetailInfo.unincorporatedName" />
|
||||
<JeePayForm text="结算人身份证号" v-model:value="applyDetailInfo.settAccountIdcardNo" />
|
||||
<JeePayForm text="结算人证件有效期">
|
||||
<termOfValidity :defaultDate="applyDetailInfo.settAccountIdcardEffectEnd" @publicSelect="publicSelect($event, 'settAccountIdcardEffectEnd')" />
|
||||
</JeePayForm>
|
||||
<JeePayForm text="结算人身份证地址" v-model:value="applyDetailInfo.authAddress" />
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
</uni-collapse>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 选择银行 -->
|
||||
<SelectBank ref="bankRef" :list="bankInfoList" value="label" @choiceValue="updataBank" />
|
||||
|
||||
<!-- 选择支行 -->
|
||||
<sftSelectBankBranch ref="sftSelectBankBranckRef" @bankBranckInfo="bankBranckInfo" :bankList="bankBranchList" field="bankName" />
|
||||
|
||||
<!-- 上传图片，提交审核 状态4触发 -->
|
||||
<ysEvent ref="ysEventRef" />
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref , reactive, computed, toRaw, inject } from 'vue'
|
||||
import address from '@/components/applyJson/ysfAddress.json' // 地址
|
||||
import mcc from '@/components/applyJson/jeePayMcc.json' // 行业
|
||||
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.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 ysEvent from './ysEvent.vue'
|
||||
import { $bankBranchList } from "@/http/apiManager.js";
|
||||
import sftSelectBankBranch from "@/components/sftSelectBank/sftSelectBankBranch.vue"; // 选择支行
|
||||
import SelectBank from "../../components/SelectBank.vue"; // 选择银行组件
|
||||
import bankInfoList from './ysBank.json' // 银行列表
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const emit = defineEmits(['applyHandle'])
|
||||
const ysEventRef = ref(null) // 进件完毕之后的操作页面
|
||||
const bankRef = ref(null)
|
||||
|
||||
// 状态分类: 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({})
|
||||
|
||||
const sftSelectBankBranckRef = ref(null) // 选择支行组件
|
||||
const bankBranchList = ref([]) // 支行列表，用于交付上方的组件渲染并选择
|
||||
|
||||
// 选择银行回调
|
||||
const updataBank = val => applyDetailInfo.settAccountBankName = val.label
|
||||
|
||||
// 通用选择函数
|
||||
const publicSelect = (e, key) => {
|
||||
applyDetailInfo[key] = e.detail.value
|
||||
if (key === 'isLegalInfo') {
|
||||
if (e.detail.value == 1) {
|
||||
applyDetailInfo.contactName = applyDetailInfo.idcardName
|
||||
applyDetailInfo.contactPhone = applyDetailInfo.legalPersonPhone
|
||||
applyDetailInfo.settAccountName = applyDetailInfo.idcardName
|
||||
applyDetailInfo.contactsAddr = applyDetailInfo.idcardAddress
|
||||
} else {
|
||||
applyDetailInfo.contactName = applyDetailInfo.contactPhone = ''
|
||||
applyDetailInfo.contactsAddr = applyDetailInfo.settAccountName = ''
|
||||
}
|
||||
} else if (key == 'crpProfession') {
|
||||
applyDetailInfo.crpProfession = e.detail.value[0]
|
||||
} else if (key == 'areaCode') {
|
||||
applyDetailInfo.mercProv = e.detail.text[0]
|
||||
applyDetailInfo.mercCity = e.detail.text[1]
|
||||
applyDetailInfo.mercArea = e.detail.text[2]
|
||||
} else if (key == 'settAccountBankBranchAreaCode') {
|
||||
applyDetailInfo.openAccProvince = e.detail.text[0]
|
||||
applyDetailInfo.openAccCity = e.detail.text[1]
|
||||
|
||||
// 选择开户行省市区的回调
|
||||
$bankBranchList(channelInfo.mchNo, channelInfo.code, {
|
||||
cityCode: e.detail.value[1], // 市编码
|
||||
bankAliasCode: applyDetailInfo.settAccountBankName, // 银行名称
|
||||
}).then((res) => {
|
||||
bankBranchList.value = res.bizData;
|
||||
applyDetailInfo.settAccountBankBranchName = ""; // 请求完毕赋空
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 选择支行
|
||||
const selectBranchBank = () => {
|
||||
// 空值校验
|
||||
if (bankBranchList.value.length == 0) return uni.showToast({ title: "支行列表为空", icon: "none" });
|
||||
sftSelectBankBranckRef.value.open();
|
||||
}
|
||||
|
||||
// 选择支行完毕
|
||||
const bankBranckInfo = val => {
|
||||
applyDetailInfo.settAccountBankBranchName = val.bankName
|
||||
applyDetailInfo.bankType = val.bankType
|
||||
applyDetailInfo.openAccBanktype = val.bankCode
|
||||
}
|
||||
|
||||
// 法人职业
|
||||
const professionList = [
|
||||
{ value: '1', text: '机关团体企事业单位' },
|
||||
{ value: '2', text: '公共事业' },
|
||||
{ value: '3', text: '农牧业' },
|
||||
{ value: '4', text: '交通运输业' },
|
||||
{ value: '5', text: '餐旅业' },
|
||||
{ value: '6', text: '建筑工程业' },
|
||||
{ value: '7', text: '制造业' },
|
||||
{ value: '8', text: '医疗保健业' },
|
||||
{ value: '9', text: '娱乐业' },
|
||||
{ value: '10', text: '其他' },
|
||||
]
|
||||
|
||||
// 上传图片成功
|
||||
const uploadSuccess = (res, name) => {
|
||||
applyDetailInfo[name] = res.data
|
||||
if (res.ocrInfo && Object.keys(res.ocrInfo).length < 1) return false
|
||||
if (name == 'settAccountIdcard1Img') {
|
||||
applyDetailInfo.unincorporatedName = res.ocrInfo.idcardName
|
||||
applyDetailInfo.settAccountIdcardNo = res.ocrInfo.idcardNo
|
||||
applyDetailInfo.authAddress = res.ocrInfo.idcardAddress
|
||||
return
|
||||
}
|
||||
if (name == 'settAccountIdcard2Img') {
|
||||
applyDetailInfo.settAccountIdcardEffectEnd = res.ocrInfo.idcardEffectEnd
|
||||
return
|
||||
}
|
||||
Object.assign(applyDetailInfo, res.ocrInfo) // ocr信息回显，字段一致直接合并
|
||||
}
|
||||
// 清除图片 仅前端
|
||||
const clear = (name, url) => applyDetailInfo[name] = ''
|
||||
|
||||
// 发起进件 注意后面的formCheck参数，表单校验要用
|
||||
const launchApply = isTempData => {
|
||||
emit(
|
||||
'applyHandle',
|
||||
{name: 'yspay',isTempData, applyDetailInfo, formCheck: [applyDetailInfo.merchantType, applyDetailInfo.codeLegalPersonAcc, applyDetailInfo.settAccountType]},
|
||||
)
|
||||
}
|
||||
|
||||
// 只读组件信息
|
||||
let applyInfoRef = ref(null)
|
||||
|
||||
// 行业类型，地理位置回显
|
||||
let codeBack = reactive({
|
||||
areaCode: '', // 商户地理位置回显
|
||||
mccCode: '', // 行业回显
|
||||
bankCode: '', // 银行地址回显
|
||||
})
|
||||
|
||||
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
|
||||
const assignObj = (obj) => {
|
||||
Object.assign(applyDetailInfo, obj)
|
||||
|
||||
if (channelInfo.state == 4) ysEventRef.value.setApplyInfo()
|
||||
|
||||
if(!isDisable.value) {
|
||||
// 行业类型，地理位置回显
|
||||
codeBack.areaCode = obj.areaCode ? obj.areaCode[2] : null
|
||||
codeBack.bankCode = obj.settAccountBankBranchAreaCode ? obj.settAccountBankBranchAreaCode[2] : null
|
||||
codeBack.mccCode = obj.mccCode
|
||||
} else {
|
||||
// 以下用于只读信息页
|
||||
obj.mccText = tool.mccBack(obj.mccCode, mcc, 'last') // 行业码转文字
|
||||
obj.areaText = tool.addressBack(obj.areaCode, address) // 地址码转文字
|
||||
obj.bankText = tool.addressBack(obj.settAccountBankBranchAreaCode, address)
|
||||
obj.crpProfessionText = professionList.find(item => item.value == obj.crpProfession).text // 职业
|
||||
// 传值给只读组件
|
||||
if(applyInfoRef.value) applyInfoRef.value.getApplyInof(obj)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ launchApply, assignObj })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../static/information.scss';
|
||||
</style>
|
||||
154
jeepay-ui-uapp-agent/pageApply/channel/zfbpay.vue
Normal file
154
jeepay-ui-uapp-agent/pageApply/channel/zfbpay.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<!-- 该页码为填写信息的组件 -->
|
||||
<!-- 只读文件 -->
|
||||
<readOnlyInfo v-if="isDisable" ref="applyInfoRef" applyName="alipay" />
|
||||
|
||||
<view v-if="!isDisable">
|
||||
<uni-collapse ref="collapse">
|
||||
<uni-collapse-item title="经营信息" class="coll-title" :open="true">
|
||||
<view class="content">
|
||||
|
||||
<JeePayForm text="产品类型" >
|
||||
<label class="radio"><radio value="1" checked="true" style="transform: scale(0.6,0.6);" />当面付</label>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="经营类目" >
|
||||
<dataPicker :code="mccCode" :localdata="mccAli" @change="publicSelect($event, 'mccCode')" paramType="splicing" />
|
||||
</JeePayForm>
|
||||
|
||||
<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')" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="特殊资质照" >
|
||||
<JeepayUpLoad :imgUrl="applyDetailInfo.specialLicenseImg" @uploadSuccess="uploadSuccess($event, 'specialLicenseImg')" @clear="clear('specialLicenseImg')" />
|
||||
</JeePayForm>
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="门店信息" class="coll-title">
|
||||
<view class="content">
|
||||
|
||||
<JeePayForm text="商户名称全称" v-model:value="applyDetailInfo.mchFullName" />
|
||||
|
||||
<JeePayForm text="商户地理位置" >
|
||||
<dataPicker :code="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>
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="联系人信息" class="coll-title">
|
||||
<view class="content">
|
||||
|
||||
<JeePayForm text="支付宝账号" v-model:value="applyDetailInfo.accountNo" />
|
||||
|
||||
<JeePayForm text="商户联系人姓名" v-model:value="applyDetailInfo.contactName" />
|
||||
|
||||
<JeePayForm text="商户联系人电话" v-model:value="applyDetailInfo.contactPhone" />
|
||||
|
||||
<JeePayForm text="商户联系人邮箱" v-model:value="applyDetailInfo.contactEmail" />
|
||||
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<!-- 费率组件 -->
|
||||
<defaultRate ref="defaultRateRef" isCheck="all" />
|
||||
</uni-collapse>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref , reactive, inject } from 'vue'
|
||||
import address from '@/components/applyJson/address.json' // 地址
|
||||
import mccAli from '@/components/applyJson/mccAli.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 dataPicker from '@/components/applyComponents/dataPicker.vue' // 通用级联选择
|
||||
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
const emit = defineEmits(['applyHandle'])
|
||||
const defaultRateRef = ref(null) // 默认费率组件
|
||||
|
||||
// 商户进件详细信息（JSON类型字符串）
|
||||
const applyDetailInfo = reactive({
|
||||
productType: 1,//产品类型
|
||||
})
|
||||
|
||||
// 状态: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
|
||||
// 状态为 1,2,4,5 开启disable (也就是状态不为 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
|
||||
Object.assign(applyDetailInfo, res.ocrInfo) // ocr信息回显
|
||||
}
|
||||
|
||||
// 清除图片 仅前端
|
||||
const clear = key => applyDetailInfo[key] = ''
|
||||
|
||||
// 通用选择事件 回调函数
|
||||
const publicSelect = (e, key) => applyDetailInfo[key] = e.detail.value
|
||||
|
||||
// 发起进件
|
||||
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: 'alipay',isTempData, applyDetailInfo})
|
||||
}
|
||||
|
||||
let mccCode = ref() // 行业mcc回显
|
||||
let areaCode = ref('') // 商户省市区回显
|
||||
|
||||
let applyInfoRef = ref(null) // 只读组件信息
|
||||
|
||||
// 合并信息方法, 智能读取，和信息回显，通过此方法合并
|
||||
const assignObj = (obj) => {
|
||||
// 开启只读模式
|
||||
if (isDisable.value) {
|
||||
obj.mccText = tool.mccBack(obj.mccCode, mccAli, 'splicing') // 行业码转文字
|
||||
obj.areaText = tool.addressBack(obj.areaCode, address) // 地理码转文字
|
||||
applyInfoRef.value.getApplyInof(obj) // 传给只读组件
|
||||
}
|
||||
|
||||
// 信息回显
|
||||
Object.assign(applyDetailInfo, obj)
|
||||
// 以下两个码是为了给级联选择器做回显用，需要最后一个码
|
||||
obj.mccCode ? mccCode.value = obj.mccCode.split('_')[1] : null // mcc码，拼接类型要截取
|
||||
obj.areaCode ? areaCode.value = obj.areaCode[2] : null // 数组类型，直接拿最后一个
|
||||
}
|
||||
|
||||
defineExpose({ launchApply, assignObj })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../static/information.scss';
|
||||
</style>
|
||||
545
jeepay-ui-uapp-agent/pageApply/channel/zftpay.vue
Normal file
545
jeepay-ui-uapp-agent/pageApply/channel/zftpay.vue
Normal file
@@ -0,0 +1,545 @@
|
||||
<template>
|
||||
<!-- 该页码为填写信息的组件 -->
|
||||
<!-- 只读文件 -->
|
||||
<readOnlyInfo
|
||||
v-if="isDisable"
|
||||
ref="applyInfoRef"
|
||||
applyName="zftpay"
|
||||
></readOnlyInfo>
|
||||
|
||||
<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"
|
||||
></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"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<JeePayForm
|
||||
text="用户名称"
|
||||
v-model:value="applyDetailInfo.mchFullName"
|
||||
tipText="个体工商户请填写法人姓名"
|
||||
/>
|
||||
|
||||
<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')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="经营信息" class="coll-title">
|
||||
<view class="content">
|
||||
<JeePayForm text="经营类目">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.mccCode"
|
||||
:localdata="mccAli"
|
||||
@change="publicSelect($event, 'mccCode')"
|
||||
paramType="splicing"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="资质图片">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.industryQualificationImage"
|
||||
@uploadSuccess="
|
||||
uploadSuccess($event, 'industryQualificationImage')
|
||||
"
|
||||
@clear="clear('industryQualificationImage')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="商户简称"
|
||||
v-model:value="applyDetailInfo.mchShortName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="商户联系人姓名"
|
||||
v-model:value="applyDetailInfo.contactName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="商户联系人手机号"
|
||||
v-model:value="applyDetailInfo.contactPhone"
|
||||
/>
|
||||
|
||||
<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>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
<uni-collapse-item title="结算账户" class="coll-title">
|
||||
<view class="content">
|
||||
<JeePayForm text="结算类型">
|
||||
<uni-data-checkbox
|
||||
v-model="applyDetailInfo.defaultSettleType"
|
||||
:localdata="defaultSettleTypeList"
|
||||
></uni-data-checkbox>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="结算支付宝账号"
|
||||
v-model:value="applyDetailInfo.alipayLogonId"
|
||||
v-if="applyDetailInfo.defaultSettleType == 'alipayAccount'"
|
||||
/>
|
||||
<template v-if="applyDetailInfo.defaultSettleType == 'bankCard'">
|
||||
<JeePayForm text="账户类型">
|
||||
<uni-data-checkbox
|
||||
v-model="applyDetailInfo.settAccountType"
|
||||
:localdata="settlementTypeList"
|
||||
></uni-data-checkbox>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="银行开户名"
|
||||
v-model:value="applyDetailInfo.settAccountName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="银行账号"
|
||||
v-model:value="applyDetailInfo.settAccountNo"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="银行名称"
|
||||
v-model:value="applyDetailInfo.settAccountBankName"
|
||||
/>
|
||||
<JeePayForm
|
||||
text="银行简称"
|
||||
v-model:value="applyDetailInfo.accountInstId"
|
||||
/>
|
||||
|
||||
<JeePayForm text="开户行分支行所在地区">
|
||||
<jeeDataPicker
|
||||
:code="codeBack.bankCode"
|
||||
:localdata="address"
|
||||
@change="publicSelect($event, 'settAccountBankBranchAreaCode')"
|
||||
paramType="arr"
|
||||
/>
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm
|
||||
text="开户支行名称"
|
||||
v-model:value="applyDetailInfo.settAccountBankBranchName"
|
||||
/>
|
||||
|
||||
<JeePayForm text="授权函照">
|
||||
<JeepayUpLoad
|
||||
:imgUrl="applyDetailInfo.licenseAuthLetterImage"
|
||||
@uploadSuccess="uploadSuccess($event, 'licenseAuthLetterImage')"
|
||||
@clear="clear('licenseAuthLetterImage')"
|
||||
/>
|
||||
</JeePayForm>
|
||||
</template>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
<uni-collapse-item title="签约信息站点资料" class="coll-title">
|
||||
<view class="content">
|
||||
<view class="item">
|
||||
<view class="title"
|
||||
><text class="require">*</text><text>签约支付宝账号</text></view
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="applyDetailInfo.bindingAlipayLogonId"
|
||||
placeholder="请输入签约支付宝账号"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="check">
|
||||
<checkbox-group
|
||||
@change="publicSelect($event, 'zftService')"
|
||||
class="check-box"
|
||||
>
|
||||
<label v-for="(item, index) in plainOptions" :key="index">
|
||||
<view>
|
||||
<checkbox
|
||||
:value="item.value"
|
||||
:checked="applyDetailInfo.zftService.includes(item.value)"
|
||||
/>
|
||||
</view>
|
||||
<view>{{ item.label }}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
<view class="site">
|
||||
<text class="title">站点信息</text>
|
||||
<view class="btn" @click="addSite">
|
||||
<text>添加站点</text>
|
||||
<text class="add">+</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-if="applyDetailInfo.siteInfos.length > 0">
|
||||
<view
|
||||
class="site-list"
|
||||
v-for="(item, index) in applyDetailInfo.siteInfos"
|
||||
:key="index"
|
||||
>
|
||||
<view class="site-item" style="padding: 0">
|
||||
<view class="title">站点类型</view>
|
||||
<radio-group
|
||||
class="radio-group"
|
||||
@change="siteTypeChange($event, index)"
|
||||
>
|
||||
<!-- 注意这里也是一个v-for 不能与父元素的冲突 -->
|
||||
<label
|
||||
class="radio"
|
||||
v-for="(siteTtem, siteIndex) in siteInfoList"
|
||||
:key="index"
|
||||
><radio
|
||||
:value="siteTtem.value"
|
||||
:checked="
|
||||
applyDetailInfo.siteInfos[index].siteType ==
|
||||
siteTtem.value
|
||||
"
|
||||
/>
|
||||
{{ siteTtem.label }}
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="site-item">
|
||||
<view class="title">站点地址</view>
|
||||
<input
|
||||
type="text"
|
||||
v-model="item.siteUrl"
|
||||
placeholder="请输入站点地址"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="site-item">
|
||||
<view class="title">站点名称</view>
|
||||
<input
|
||||
type="text"
|
||||
v-model="item.siteName"
|
||||
placeholder="请输入站点名称"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="site-item">
|
||||
<view class="title">测试账号</view>
|
||||
<input
|
||||
type="text"
|
||||
v-model="item.account"
|
||||
placeholder="请输入测试账号"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="site-item">
|
||||
<view class="title">测试密码</view>
|
||||
<input
|
||||
type="text"
|
||||
v-model="item.password"
|
||||
placeholder="请输入测试密码"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="site-del" @click="siteDel(index)"> 删除 </view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRaw, onMounted, inject } from "vue";
|
||||
import address from "@/components/applyJson/address.json"; // 地址
|
||||
import mccAli from "@/components/applyJson/zftMcc.json"; // 行业
|
||||
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
|
||||
import readOnlyInfo from "../components/readOnlyInfo.vue"; // 只读文件
|
||||
import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
|
||||
import tool from "@/util/tool.js"; // 工具类函数
|
||||
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 defaultSettleTypeList = reactive(filterDcit(["F0", "F1"])); // 结算类型
|
||||
const settlementTypeList = reactive(filterDcit(["B0", "B1"])); // 账户类型
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const emit = defineEmits(["applyHandle"]);
|
||||
// 商户进件详细信息（JSON类型字符串）
|
||||
const applyDetailInfo = reactive({
|
||||
merchantType: 3, // 商户类型 默认为3 代表企业
|
||||
productType: 1, //产品类型
|
||||
defaultSettleType: "bankCard", // 结算类型
|
||||
siteInfos: [], // 选择站点
|
||||
zftService: [], // 选择服务
|
||||
});
|
||||
|
||||
// 状态: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
|
||||
// 状态为 1,2,4,5 开启disable (也就是状态不为 0 3)
|
||||
let isDisable = ref(false);
|
||||
if (!["0", "3", "8"].includes(channelInfo.state)) isDisable.value = true;
|
||||
|
||||
// 通用radio checkbox选择事件 回调函数
|
||||
const publicSelect = (e, key) => {
|
||||
applyDetailInfo[key] = e.detail.value;
|
||||
if (key == "merchantType") applyDetailInfo[key] = Number(e.detail.value);
|
||||
};
|
||||
|
||||
// 服务选项
|
||||
const plainOptions = ref([
|
||||
{ label: "当面付", value: "当面付" },
|
||||
{ label: "APP支付", value: "app支付" },
|
||||
{ label: "WAP支付", value: "wap支付" },
|
||||
{ label: "电脑支付", value: "电脑支付" },
|
||||
{ label: "小程序支付", value: "小程序支付" },
|
||||
]);
|
||||
|
||||
// 选择站点下拉选择内容
|
||||
const siteInfoList = ref([
|
||||
{ value: "01", label: "微信" },
|
||||
{ value: "02", label: "APP" },
|
||||
{ value: "03", label: "服务窗" },
|
||||
{ value: "04", label: "公众号" },
|
||||
{ value: "05", label: "其他" },
|
||||
{ value: "06", label: "支付宝小程序" },
|
||||
]);
|
||||
|
||||
// 添加站点
|
||||
const addSite = () => {
|
||||
applyDetailInfo.siteInfos.push({
|
||||
siteType: "", // 站点类型
|
||||
siteUrl: "", // 站点地址
|
||||
siteName: "", // 站点名称
|
||||
account: "", // 站点账号
|
||||
password: "", // 站点密码
|
||||
});
|
||||
};
|
||||
|
||||
// 删除站点
|
||||
const siteDel = (index) => applyDetailInfo.siteInfos.splice(index, 1);
|
||||
|
||||
// 切换站点类型
|
||||
const siteTypeChange = (e, index) =>
|
||||
(applyDetailInfo.siteInfos[index].siteType = e.detail.value);
|
||||
|
||||
// 上传图片成功
|
||||
const uploadSuccess = (res, name) => {
|
||||
applyDetailInfo[name] = res.data;
|
||||
if (name === "licenseImg") {
|
||||
applyDetailInfo.licenseNo = res.ocrInfo.licenseNo;
|
||||
applyDetailInfo.licenseEffectEnd = res.ocrInfo.licenseEffectEnd; // 有效期end
|
||||
} else 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
|
||||
}
|
||||
};
|
||||
|
||||
// 清除图片 仅前端
|
||||
const clear = (name) => (applyDetailInfo[name] = "");
|
||||
|
||||
// 发起进件
|
||||
const launchApply = (isTempData) => {
|
||||
emit("applyHandle", {
|
||||
name: "zftpay",
|
||||
isTempData,
|
||||
applyDetailInfo,
|
||||
formCheck: [
|
||||
applyDetailInfo.defaultSettleType,
|
||||
applyDetailInfo.merchantType,
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
// 行业类型，地理位置回显
|
||||
let codeBack = reactive({
|
||||
areaCode: "", // 商户地理位置回显
|
||||
bankCode: "", // 银行地址回显
|
||||
mccCode: "", // 行业回显
|
||||
});
|
||||
|
||||
const applyInfoRef = ref();
|
||||
|
||||
// 合并信息方法, 智能读取，和信息回显，通过此方法合并
|
||||
const assignObj = (obj) => {
|
||||
// 开启只读模式
|
||||
if (isDisable.value) {
|
||||
// 开启只读默认需要将 mcc码，地址码，银行地址码转为文字
|
||||
let mccCodeText, areaCodeText, bankCodeText, code, mccInfo;
|
||||
|
||||
// mcc文字回显
|
||||
if (obj.mccCode) code = obj.mccCode.split("_")[1];
|
||||
for (var i = 0; i < mccAli.length; i++) {
|
||||
mccInfo = mccAli[i].children.find((val) => val.value == code);
|
||||
if (mccInfo) break;
|
||||
}
|
||||
obj.mccCodeText = obj.mccCode.split("_")[0] + "/" + mccInfo.text;
|
||||
|
||||
obj.areaCodeText = tool.addressBack(obj.areaCode, address); // 地理位置文字回显
|
||||
obj.bankCodeText = tool.addressBack(
|
||||
obj.settAccountBankBranchAreaCode,
|
||||
address
|
||||
); // 银行地理位置文字回显
|
||||
|
||||
// 传给只读组件
|
||||
applyInfoRef.value.getApplyInof(obj);
|
||||
}
|
||||
|
||||
Object.assign(applyDetailInfo, obj);
|
||||
|
||||
codeBack.mccCode = obj.mccCode;
|
||||
obj.areaCode ? (codeBack.areaCode = obj.areaCode[2]) : null;
|
||||
applyDetailInfo.mccCode
|
||||
? (codeBack.mccCode = applyDetailInfo.mccCode.split("_")[1])
|
||||
: null;
|
||||
};
|
||||
|
||||
defineExpose({ launchApply, assignObj });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../static/information.scss";
|
||||
.check-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 35rpx 30rpx 35rpx 30rpx;
|
||||
}
|
||||
.uni-label-pointer {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.site {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
color: #666f80;
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.btn {
|
||||
.add {
|
||||
border: 1px dashed #ddd;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
margin-left: 10px;
|
||||
color: #666f80;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-list {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 20rpx;
|
||||
margin: 30rpx;
|
||||
padding: 30rpx;
|
||||
.site-item {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
.title {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666f80;
|
||||
margin-right: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.site-del {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
width: 280rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #f00;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user