修复转账提示bug,并在切换按钮时清空输入框

src/views/capital/transfer/index.vue

@@ -45,8 +45,8 @@
                     </div>
                 </el-card>
             </div>
-            <TransferForm :form-data="transferForm" :form-rules="transferFormRules"
-                :form-items="transferFormItemOptions" :options-map="transferFormOptionsMap" ref="transferFormRef">
+            <TransferForm :key="transferType" class="transfer-main-form" :form-data="transferForm" :form-rules="transferFormRules"
+                :form-items="transferFormItemOptions" :options-map="transferFormOptionsMap" ref="mainTransferFormRef">
             </TransferForm>
             <div class="transfer-type verify" v-if="transferType === 'external'">
                 <div class="type-title">验证方式</div>
@@ -57,7 +57,7 @@
                         @click="handleVerifyTabClick('phone')">手机号验证</el-button>
                 </div>
                 <div class="username">{{ verifyType === "email" ? userInfo.email : userInfo.phone }}</div>
-                <el-form class="verify-form" :model="transferForm" :rules="transferFormRules" ref="transferFormRef">
+                <el-form class="verify-form" :model="transferForm" :rules="transferFormRules" ref="verifyFormRef">
                     <el-form-item prop="code">
                         <el-input v-model="transferForm.code" style="max-width: 300px" placeholder="请输入验证码">
 
@@ -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()
 }
 </script>
 
@@ -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;