238 lines
11 KiB
Vue
238 lines
11 KiB
Vue
<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> |