源文件
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user