459 lines
16 KiB
Vue
459 lines
16 KiB
Vue
<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>
|