diff --git a/src/views/capital/transfer/index.vue b/src/views/capital/transfer/index.vue index 827241e..79cd967 100644 --- a/src/views/capital/transfer/index.vue +++ b/src/views/capital/transfer/index.vue @@ -45,8 +45,8 @@ - +
验证方式
@@ -57,7 +57,7 @@ @click="handleVerifyTabClick('phone')">手机号验证
{{ verifyType === "email" ? userInfo.email : userInfo.phone }}
- + @@ -98,9 +98,9 @@ import { sendCaptcha, initCaptchaState, clearCaptchaTimer } from '@/utils/sendCa const transferType = ref('internal') /** - * @description 转账表单数据 + * @description 创建默认转账表单数据 */ -const transferForm = ref({ +const createDefaultTransferForm = () => ({ transferOutAccount: -1, transferInAccount: '', transferAmount: '', @@ -110,10 +110,16 @@ const transferForm = ref({ type: '', code: '' }) + /** - * @description 转账表单引用 + * @description 转账表单数据 */ -const transferFormRef = ref() +const transferForm = ref(createDefaultTransferForm()) +/** + * @description 主转账表单和验证码表单引用 + */ +const mainTransferFormRef = ref() +const verifyFormRef = ref() const transferFormItemOptions = computed(() => transferType.value === 'internal' ? internalFormItem : externalFormItem) const transferFormRules = ref(rules(transferForm.value)) const transferFormOptionsMap = ref({ @@ -279,13 +285,31 @@ onMounted(() => { getTransferWalletOptions() }) +// 获取默认主钱包最大可转金额,切换标签或提交成功后用于恢复初始展示。 +const getDefaultMaxOutAmount = () => { + return transferFormOptionsMap.value.transferOutAccount.find((item: any) => item.value === -1)?.amount || '' +} + +// 重置转账表单:切换内部/第三方转账时清空所有输入框。 +const resetTransferForm = async () => { + Object.assign(transferForm.value, createDefaultTransferForm(), { + MaxOutAmount: getDefaultMaxOutAmount(), + }) + + await nextTick() + verifyFormRef.value?.clearValidate?.() +} + /** * @description 切换转账类型 * @param type 转账类型 */ -const handleTransferTabClick = (type: string) => { +const handleTransferTabClick = async (type: string) => { + // 只有内部/第三方转账类型真的发生切换时,才清空当前表单内容。 + if (transferType.value === type) return + transferType.value = type - transferForm.value.MaxOutAmount = transferFormOptionsMap.value.transferOutAccount.find((item: any) => item.value === -1)?.amount + await resetTransferForm() } /** * @description 切换验证方式 @@ -311,7 +335,12 @@ const handleVerifyParams = (type: string) => { * @description 提交转账表单 */ const handleSubmit = async () => { - await transferFormRef.value.validate() + await mainTransferFormRef.value?.validate?.() + + if (transferType.value === 'external') { + await verifyFormRef.value?.validate?.() + } + const params = { type: transferType.value === 'internal' ? '1' : '2', from: String(transferForm.value.transferOutAccount), @@ -322,33 +351,14 @@ const handleSubmit = async () => { description: transferForm.value.remark, } console.log(params) + if (transferType.value === 'internal') { await transferApi(params) - transferForm.value = { - transferOutAccount: -1, - transferInAccount: '', - transferAmount: '', - remark: '', - // 最大可转账金额 - MaxOutAmount: '', - type: '', - code: '' - - } } else { await transferApi({ ...params, verify_type: verifyType.value === 'email' ? '1' : '2', verify_code: transferForm.value.code }) - transferForm.value = { - transferOutAccount: -1, - transferInAccount: '', - transferAmount: '', - remark: '', - // 最大可转账金额 - MaxOutAmount: '', - type: '', - code: '' - - } } + + await resetTransferForm() } @@ -386,6 +396,17 @@ const handleSubmit = async () => { } .transfer-form { + // 主转账表单的错误提示改为占位展示,避免长校验文案跑到“备注”下面。 + :deep(.transfer-main-form .el-form-item) { + margin-bottom: 24px; + } + + :deep(.transfer-main-form .el-form-item__error) { + position: static; + padding-top: 4px; + line-height: 18px; + } + .external-item { margin-bottom: 10px;