增加企业开户信息确认H5页面

main
halo 2026-08-07 16:04:42 +08:00
parent 2e879255ed
commit d2030f1711
3 changed files with 147 additions and 42 deletions

View File

@ -1,3 +1,4 @@
VITE_API_BASE_URL=http://localhost:8888 VITE_API_BASE_URL=http://localhost:8888
npmhttp://www.baidu.com VITE_H5_QRCODE_BASE_URL=http://www.baidu.com
VITE_H5_QRCODE_PATH=/mobile/personal-open VITE_H5_QRCODE_PATH=/mobile/personal-open
VITE_H5_QRCODE_PATH_ENTERPRISE=/mobile/enterprise-open

View File

@ -1,3 +1,4 @@
VITE_API_BASE_URL= VITE_API_BASE_URL=
VITE_H5_QRCODE_BASE_URL= VITE_H5_QRCODE_BASE_URL=
VITE_H5_QRCODE_PATH=/mobile/personal-open VITE_H5_QRCODE_PATH=/mobile/personal-open
VITE_H5_QRCODE_PATH_ENTERPRISE=/mobile/enterprise-open

View File

@ -380,6 +380,34 @@
<PersonalCustomerPicker ref="legalRepPickerRef" @select="handleSelectLegalRep" /> <PersonalCustomerPicker ref="legalRepPickerRef" @select="handleSelectLegalRep" />
<PersonalCustomerPicker ref="rolePickerRef" @select="handleRolePersonSelect" /> <PersonalCustomerPicker ref="rolePickerRef" @select="handleRolePersonSelect" />
<PersonalCustomerPicker ref="beneficiaryPickerRef" @select="handleAddBeneficiary" /> <PersonalCustomerPicker ref="beneficiaryPickerRef" @select="handleAddBeneficiary" />
<!-- "确认"按钮的二次确认弹窗,仿 PersonalOpenForm.vue:confirm=文案+三按钮态,
qrcode=邀请扫码办理成功后的二维码展示态 -->
<a-modal
v-model:open="confirmModalVisible"
title="提示"
:footer="null"
:mask-closable="false"
@cancel="handleModalCancel"
>
<template v-if="confirmModalStep === 'confirm'">
<p>是否确认开户?</p>
<div class="confirm-modal-actions">
<a-space>
<a-button type="primary" :loading="modalSaving" :disabled="modalInviting" @click="handleModalSave"></a-button>
<a-button :disabled="modalSaving || modalInviting" @click="handleModalCancel"></a-button>
<a-button :loading="modalInviting" :disabled="modalSaving" @click="handleModalInvite"></a-button>
</a-space>
</div>
</template>
<template v-else>
<div class="qrcode-panel">
<qrcode-vue :value="qrCodeUrl" :size="200" level="M" />
<p class="qrcode-application-no">申请编号:{{ qrApplicationNo }}</p>
<a-button @click="handleModalCancel"></a-button>
</div>
</template>
</a-modal>
</a-spin> </a-spin>
</div> </div>
</template> </template>
@ -389,6 +417,7 @@ import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { message, Modal } from 'ant-design-vue' import { message, Modal } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue' import { PlusOutlined } from '@ant-design/icons-vue'
import QrcodeVue from 'qrcode.vue'
import ChannelSelect from '@/components/ChannelSelect.vue' import ChannelSelect from '@/components/ChannelSelect.vue'
import DictSelect from '@/components/DictSelect.vue' import DictSelect from '@/components/DictSelect.vue'
import LicenseUpload from '@/components/LicenseUpload.vue' import LicenseUpload from '@/components/LicenseUpload.vue'
@ -427,6 +456,15 @@ const channelNo = ref(undefined)
const agreementChecked = ref(false) const agreementChecked = ref(false)
const submitting = ref(false) const submitting = ref(false)
// ""( create 使):confirm=+,
// qrcode=,仿 PersonalOpenForm.vue
const confirmModalVisible = ref(false)
const confirmModalStep = ref('confirm')
const modalSaving = ref(false)
const modalInviting = ref(false)
const qrCodeUrl = ref('')
const qrApplicationNo = ref('')
const businessLicenseFileNo = ref('') const businessLicenseFileNo = ref('')
const legalPersonIdFrontFileNo = ref('') const legalPersonIdFrontFileNo = ref('')
const legalPersonIdBackFileNo = ref('') const legalPersonIdBackFileNo = ref('')
@ -554,6 +592,8 @@ let smsTimer = null
const busy = computed( const busy = computed(
() => () =>
submitting.value || submitting.value ||
modalSaving.value ||
modalInviting.value ||
businessLicenseUploading.value || businessLicenseUploading.value ||
legalPersonIdFrontUploading.value || legalPersonIdFrontUploading.value ||
legalPersonIdBackUploading.value || legalPersonIdBackUploading.value ||
@ -565,7 +605,7 @@ const busyTip = computed(() => {
if (legalPersonIdFrontUploading.value || legalPersonIdBackUploading.value) return '身份证照片上传中,请稍候...' if (legalPersonIdFrontUploading.value || legalPersonIdBackUploading.value) return '身份证照片上传中,请稍候...'
if (beneficiaryProofUploading.value) return '受益人材料证明上传中,请稍候...' if (beneficiaryProofUploading.value) return '受益人材料证明上传中,请稍候...'
if (smsSending.value) return '验证码发送中,请稍候...' if (smsSending.value) return '验证码发送中,请稍候...'
if (submitting.value) return '提交中,请稍候...' if (submitting.value || modalSaving.value || modalInviting.value) return '提交中,请稍候...'
return '' return ''
}) })
@ -1055,10 +1095,10 @@ function buildBeneficiaryBto(bene) {
return bto return bto
} }
async function handleSubmit() { // create/update payload,create(/) update()
submitting.value = true // , update id
try { function buildSubmitPayload() {
const payload = { return {
organizationId: form.organizationId, organizationId: form.organizationId,
enterpriseId: form.enterpriseId, enterpriseId: form.enterpriseId,
enterpriseName: form.enterpriseName, enterpriseName: form.enterpriseName,
@ -1090,15 +1130,17 @@ async function handleSubmit() {
], ],
enterpriseAccountOpenApplicationBeneficiaryBtoList: beneficiaryList.value.map(buildBeneficiaryBto) enterpriseAccountOpenApplicationBeneficiaryBtoList: beneficiaryList.value.map(buildBeneficiaryBto)
} }
let res }
if (isCreate.value) {
res = await createEnterpriseOpenApplicationApi(payload) // "": update ,(
} else { // PersonalOpenForm.vue handleEditSubmit )
async function handleSubmit() {
submitting.value = true
try {
// : list/detail id, applicationNo , // : list/detail id, applicationNo ,
res = await updateEnterpriseOpenApplicationApi({ id: route.query.applicationNo, ...payload }) const res = await updateEnterpriseOpenApplicationApi({ id: route.query.applicationNo, ...buildSubmitPayload() })
}
if (res.data.code === 200) { if (res.data.code === 200) {
message.success(isCreate.value ? '开户申请已提交' : '修改成功') message.success('修改成功')
goBack() goBack()
} }
} finally { } finally {
@ -1106,12 +1148,62 @@ async function handleSubmit() {
} }
} }
// "":create ();edit 沿
async function handleConfirmButtonClick() { async function handleConfirmButtonClick() {
const valid = await validateBeforeSubmit() const valid = await validateBeforeSubmit()
if (!valid) return if (!valid) return
if (isCreate.value) {
confirmModalStep.value = 'confirm'
confirmModalVisible.value = true
return
}
await handleSubmit() await handleSubmit()
} }
// "": create 稿,
async function handleModalSave() {
modalSaving.value = true
try {
const res = await createEnterpriseOpenApplicationApi(buildSubmitPayload())
if (res.data.code === 200) {
message.success('开户申请已提交')
confirmModalVisible.value = false
goBack()
}
} finally {
modalSaving.value = false
}
}
// H5 :/,(),
// ,; .env.production,
// VITE_H5_QRCODE_PATH_ENTERPRISE( VITE_H5_QRCODE_PATH ,)
function buildQrCodeUrl(applicationNo) {
const base = import.meta.env.VITE_H5_QRCODE_BASE_URL || 'https://example.com'
const path = import.meta.env.VITE_H5_QRCODE_PATH_ENTERPRISE || '/mobile/enterprise-open'
return `${base}${path}?applicationNo=${applicationNo}`
}
// "":"",,
async function handleModalInvite() {
modalInviting.value = true
try {
const res = await createEnterpriseOpenApplicationApi(buildSubmitPayload())
if (res.data.code === 200) {
qrApplicationNo.value = res.data.data.applicationNo
qrCodeUrl.value = buildQrCodeUrl(res.data.data.applicationNo)
confirmModalStep.value = 'qrcode'
}
} finally {
modalInviting.value = false
}
}
// ""//"":,
function handleModalCancel() {
confirmModalVisible.value = false
}
function goBack() { function goBack() {
router.push('/wallet/enterprise-open') router.push('/wallet/enterprise-open')
} }
@ -1163,4 +1255,15 @@ function goBack() {
height: auto; height: auto;
max-height: none; max-height: none;
} }
.confirm-modal-actions {
margin-top: 24px;
text-align: right;
}
.qrcode-panel {
text-align: center;
}
.qrcode-application-no {
margin: 12px 0 8px;
color: #333;
}
</style> </style>