|
|
@@ -0,0 +1,261 @@
|
|
|
+<template>
|
|
|
+ <app-modal direction="right-top" height="100%" width="100%" v-model:show="showModal" :refresh="refresh">
|
|
|
+ <app-view class="g-form">
|
|
|
+ <template #header>
|
|
|
+ <app-navbar :title="isedit ? $t('banksign.modifybanksign') : $t('banksign.addbanksign')"
|
|
|
+ @back="closed" />
|
|
|
+ </template>
|
|
|
+ <Form ref="formRef" class="g-form__container" @submit="formSubmit">
|
|
|
+ <CellGroup inset>
|
|
|
+ <Field name="OpenBankAccId" :label="$t('banksign.bankname')" v-model="selectedBankName"
|
|
|
+ :placeholder="$t('banksign.Pleaseselectyourbank')" :rules="formRules.OpenBankAccId"
|
|
|
+ @click-input="showSelect = true" readonly is-link />
|
|
|
+ <Field type="number" name="BankNo" :label="$t('banksign.bankaccountno')"
|
|
|
+ :readonly="bankaccount != ''" maxlength="30" v-model.trim="formData.BankAccountNo"
|
|
|
+ :placeholder="$t('banksign.Pleaseenterbankaccountno')" :rules="formRules.BankAccountNo" />
|
|
|
+ <Field name="AccountName" :label="$t('banksign.bankaccountname')" readonly
|
|
|
+ v-model="formData.AccountName" :placeholder="$t('banksign.Pleaseenterbankaccountname')"
|
|
|
+ :rules="formRules.AccountName" />
|
|
|
+ <Field name="MobilePhone" :label="$t('banksign.mobilephone')" :readonly="mobile2 != ''"
|
|
|
+ maxlength="50" v-model="formData.MobilePhone"
|
|
|
+ :placeholder="$t('banksign.Pleaseenteryourmobilephonenumber')" :rules="formRules.MobilePhone" />
|
|
|
+ <template v-for="(item, index) in configs" :key="index">
|
|
|
+ <template v-if="(item.fieldcode === 'verify_code')">
|
|
|
+ <Field v-if="(bankInfo === undefined) && showExtendInfo(item)" v-model="item.value"
|
|
|
+ type="digit" name="vcode" :label="item.fieldname" :placeholder="$t('common.required')"
|
|
|
+ autocomplete="off">
|
|
|
+ <template #button>
|
|
|
+ <Button size="small" type="danger" :disabled="isCountdown" @click="sendVerifyCode">
|
|
|
+ <span v-if="isCountdown">{{ $t('banksign.sendagain') }}({{ currentTime.seconds
|
|
|
+ }})</span>
|
|
|
+ <span v-else>{{ $t('banksign.verificationcode') }}</span>
|
|
|
+ </Button>
|
|
|
+ </template>
|
|
|
+ </Field>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="(item.fieldcode === 'bank_branch_name')">
|
|
|
+ <Field v-if="showExtendInfo(item)" name="OpenBankName" :label="item.fieldname"
|
|
|
+ v-model="item.value" maxlength="100" right-icon="search"
|
|
|
+ :placeholder="$t('common.pleaseenter') + `${item.fieldname}`"
|
|
|
+ :rules="formRules.OpenBankName" @click-right-icon="showSearch = true" />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="(item.fieldcode === '100')">
|
|
|
+ <Field v-if="showExtendInfo(item)" type="number" name="OpenBankNo" :label="item.fieldname"
|
|
|
+ v-model="item.value" maxlength="50"
|
|
|
+ :placeholder="$t('common.pleaseenter') + `${item.fieldname}`"
|
|
|
+ :rules="formRules.OpenBankNo" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <Field v-if="showExtendInfo(item)" :name="item.fieldcode" :label="item.fieldname"
|
|
|
+ :readonly="item.fieldcode === 'legal_name' && legalpersonname != ''"
|
|
|
+ v-model="item.value" maxlength="50"
|
|
|
+ :placeholder="$t('common.pleaseenter') + `${item.fieldname}`" />
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </CellGroup>
|
|
|
+ </Form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="g-form__footer inset">
|
|
|
+ <Button type="danger" round block @click="formRef?.submit()">{{ bankInfo ? $t('operation.modify') :
|
|
|
+ $t('operation.submit') }}</Button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <SelectBank v-model:show="showSelect" :data-list="banklist" @change="onSelectBankChange" />
|
|
|
+ <SearchBank v-model:show="showSearch" @change="onSearchBankChange" />
|
|
|
+ </app-view>
|
|
|
+ </app-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+
|
|
|
+import { shallowRef, ref, computed, defineAsyncComponent } from 'vue'
|
|
|
+import { CellGroup, Button, Field, Form, FormInstance, FieldRule, showFailToast } from 'vant'
|
|
|
+import { fullloading, dialog } from '@/utils/vant'
|
|
|
+import { useDoBankSign, useDoCusBankExtendConfigs } from '@/business/bank'
|
|
|
+import { validateRules } from '@/constants/regex'
|
|
|
+import { useCountDown } from '@vant/use'
|
|
|
+import { useUserStore, i18n } from '@/stores'
|
|
|
+import AppModal from '@/components/base/modal/index.vue'
|
|
|
+
|
|
|
+// 选择银行
|
|
|
+const SelectBank = defineAsyncComponent(() => import('./select-bank/index.vue'))
|
|
|
+// 搜索支行
|
|
|
+const SearchBank = defineAsyncComponent(() => import('./search-bank/index.vue'))
|
|
|
+
|
|
|
+const { formData, onSubmit, banklist, bankInfo, system_1010, smsVerificationCode } = useDoBankSign()
|
|
|
+const showModal = shallowRef(true)
|
|
|
+const refresh = shallowRef(false) // 是否刷新父组件数据
|
|
|
+const formRef = shallowRef<FormInstance>()
|
|
|
+const showSelect = shallowRef(false) // 弹出客户选择界面
|
|
|
+const showSearch = shallowRef(false) // 弹出客户搜索界面
|
|
|
+const selectedBankName = shallowRef('') // 选中的银行名称
|
|
|
+const { configs } = useDoCusBankExtendConfigs(1)
|
|
|
+const userStore = useUserStore()
|
|
|
+const { legalpersonname, mobile2, bankaccount, userinfotype } = userStore.userInfo
|
|
|
+
|
|
|
+const { global: { t } } = i18n
|
|
|
+/// 短信验证码交易中心信息
|
|
|
+const CenterErrMsg = shallowRef('')
|
|
|
+// 倒计时函数
|
|
|
+const countdown = useCountDown({
|
|
|
+ time: 60 * 1000,
|
|
|
+ onFinish: () => {
|
|
|
+ countdown.reset()
|
|
|
+ isCountdown.value = false
|
|
|
+ }
|
|
|
+})
|
|
|
+const isCountdown = ref(false) // 是否正在倒计时
|
|
|
+// 倒计时剩余时间
|
|
|
+const currentTime = computed(() => countdown.current.value)
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ isedit: {
|
|
|
+ type: Boolean,
|
|
|
+ required: true,
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+/// 是否显示拓展信息
|
|
|
+const showExtendInfo = (item: Model.BankCusBankExtendConfigRsp) => {
|
|
|
+ return (item.usabletype === 1) ||
|
|
|
+ (item.usabletype === 2 && userinfotype === 2) ||
|
|
|
+ (item.usabletype === 3 && userinfotype === 1)
|
|
|
+}
|
|
|
+
|
|
|
+// 发送手机验证码
|
|
|
+const sendVerifyCode = () => {
|
|
|
+ formRef.value?.validate('MobilePhone').then(() => {
|
|
|
+ smsVerificationCode().then((res) => {
|
|
|
+ if (res.CenterErrMsg != '') {
|
|
|
+ CenterErrMsg.value = res.CenterErrMsg ?? ''
|
|
|
+ }
|
|
|
+ isCountdown.value = true
|
|
|
+ countdown.start()
|
|
|
+ }).catch(() => {
|
|
|
+ showFailToast(t('banksign.sendfailure'))
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const onSelectBankChange = (item: Model.BankInfoRsp) => {
|
|
|
+ selectedBankName.value = item.bankname
|
|
|
+ formData.OpenBankAccId = item.bankid
|
|
|
+}
|
|
|
+
|
|
|
+const onSearchBankChange = (item: Model.BankBranChnumInfoRsp) => {
|
|
|
+ configs.value.forEach((e) => {
|
|
|
+ switch (e.fieldcode) {
|
|
|
+ case 'bank_branch_name':
|
|
|
+ e.value = item.branchname
|
|
|
+ break
|
|
|
+ case '100':
|
|
|
+ e.value = item.branchnum
|
|
|
+ break
|
|
|
+ case '101':
|
|
|
+ e.value = item.branchprovince
|
|
|
+ break
|
|
|
+ case '102':
|
|
|
+ e.value = item.branchcity
|
|
|
+ break
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const formRules: { [key in keyof Proto.t2bBankSignReq]?: FieldRule[] } = {
|
|
|
+ OpenBankAccId: [{
|
|
|
+ message: t('banksign.tips11'),
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.OpenBankAccId
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ BankAccountNo: [{
|
|
|
+ required: true,
|
|
|
+ message: t('banksign.Pleaseenterbankaccountno')
|
|
|
+ }],
|
|
|
+ AccountName: [{
|
|
|
+ required: true,
|
|
|
+ message: t('banksign.Pleaseenterbankaccountname')
|
|
|
+ }],
|
|
|
+ MobilePhone: [{
|
|
|
+ required: true,
|
|
|
+ message: t('banksign.Pleaseenteryourmobilephonenumber'),
|
|
|
+ validator: (val) => {
|
|
|
+ /// 值为”0“ 时 只校验长度20位,不限字符
|
|
|
+ if (system_1010.value === '0') {
|
|
|
+ if (val.length <= 20) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return t('banksign.tips6')
|
|
|
+ } else {
|
|
|
+ /// 不存在或值为空或”1“时,根据国内手机号校验11位
|
|
|
+ if (validateRules.phone.validate(val)) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return validateRules.phone.message
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ OpenBankName: [{
|
|
|
+ required: true,
|
|
|
+ message: t('banksign.Pleaseenterbranchbankname'),
|
|
|
+ }],
|
|
|
+ OpenBankNo: [{
|
|
|
+ required: true,
|
|
|
+ message: t('banksign.Pleaseenterbranchbankno'),
|
|
|
+ }]
|
|
|
+}
|
|
|
+
|
|
|
+const formSubmit = () => {
|
|
|
+ fullloading((hideLoading) => {
|
|
|
+ const obj: { [key: string]: unknown } = Object.create({})
|
|
|
+ configs.value.forEach((e) => {
|
|
|
+ if (e.value) {
|
|
|
+ obj[e.fieldcode] = e.value
|
|
|
+ }
|
|
|
+ if (e.fieldcode === 'bank_branch_name') {
|
|
|
+ formData.OpenBankName = e.value
|
|
|
+ }
|
|
|
+ if (e.fieldcode === '100') {
|
|
|
+ formData.OpenBankNo = e.value
|
|
|
+ }
|
|
|
+ if (e.fieldcode === '101') {
|
|
|
+ formData.BankProvince = e.value
|
|
|
+ }
|
|
|
+ if (e.fieldcode === '102') {
|
|
|
+ formData.BankCity = e.value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ /// 如果需要短信验证码
|
|
|
+ if (CenterErrMsg.value != '') {
|
|
|
+ obj['smsSerialNo'] = CenterErrMsg.value
|
|
|
+ }
|
|
|
+ formData.extendInfo = JSON.stringify(obj)
|
|
|
+
|
|
|
+ onSubmit().then(() => {
|
|
|
+ hideLoading()
|
|
|
+ dialog(props.isedit ? t('banksign.submitsuccess1') : t('banksign.submitsuccess2')).then(() => {
|
|
|
+ closed(true)
|
|
|
+ })
|
|
|
+ }).catch((err) => {
|
|
|
+ hideLoading(err, 'fail')
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 关闭弹窗
|
|
|
+const closed = (isRefresh = false) => {
|
|
|
+ refresh.value = isRefresh
|
|
|
+ if (showSearch.value || showSelect.value) {
|
|
|
+ showSearch.value = false
|
|
|
+ showSelect.value = false
|
|
|
+ } else {
|
|
|
+ showModal.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 暴露组件属性给父组件调用
|
|
|
+defineExpose({
|
|
|
+ closed,
|
|
|
+})
|
|
|
+</script>
|