fix:充值界面接口对接

src/views/home/modules/card-data.vue

@@ -2,12 +2,11 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useBillingStore } from '@/store/modules/billing/billing';
 import { useI18n } from 'vue-i18n';
-import { useFormRules } from '@/hooks/common/form';
+import { submitOrder } from '@/service/api/auth';
+import { message } from 'ant-design-vue';
 import type { Ref } from 'vue';
-import type { Rule } from 'ant-design-vue/es/form';
 
 const { t } = useI18n();
-const { patternRules } = useFormRules();
 
 interface RechargeOption {
   amount: number;
@@ -15,8 +14,6 @@ interface RechargeOption {
   price: number;
 }
 
-const emailAddress = ref('');
-const emailError = ref('');
 const customAmount = ref<string | number | undefined>(undefined);
 const selectedAmount = ref<number | null>(null);
 const isCustomMode = ref<boolean>(false);
@@ -81,57 +78,32 @@ onUnmounted(() => {
 
 const balance = computed(() => billingStore.balance);
 
-// 创建邮箱验证规则，将 trigger 改为 'blur'
-const emailRules = computed<Rule[]>(() => [
-  { required: true, message: t('page.login.register.emailRequired'), trigger: 'blur' },
-  patternRules.email // 预定义规则已经设置为 blur 触发
-]);
-
-// 移除 change 事件处理，改用 blur 事件处理
-const handleEmailBlur = async (e: FocusEvent) => {
-  const target = e.target as HTMLInputElement;
-  emailAddress.value = target.value;
+// 修改充值处理方法，移除邮箱验证
+const handleRecharge = async () => {
+  // 验证金额
+  if (!paymentAmount.value || paymentAmount.value <= 0) {
+    message.error('请选择或输入正确的充值金额');
+    return;
+  }
 
   try {
-    // 使用验证规则进行验证
-    await Promise.all(emailRules.value.map(rule => {
-      if (rule.validator) {
-        return rule.validator(rule, target.value, () => {});
-      }
-      if (rule.pattern) {
-        if (!rule.pattern.test(target.value)) {
-          throw rule.message;
-        }
-      }
-      return Promise.resolve();
-    }));
-    emailError.value = '';
+    await submitOrder({
+      type: 1,
+      orderAmount: paymentAmount.value
+    });
+    message.success('充值订单提交成功！');
+
+    // 更新余额，传入充值金额
+    await billingStore.updateBalance(paymentAmount.value);
   } catch (error) {
-    emailError.value = error as string;
+    message.error('充值失败，请重试！');
+    console.error('Failed to submit recharge order:', error);
   }
 };
 </script>
 
 <template>
   <div class="recharge-container p-4">
-    <!-- 邮箱输入部分 -->
-    <div class="email-section mb-6">
-      <div class="text-lg font-bold mb-2">{{ t('page.carddata.email') }}</div>
-      <div class="email-input-wrapper">
-        <AInput
-          v-model:value="emailAddress"
-          :placeholder="t('page.login.common.emailPlaceholder')"
-          class="email-input"
-          size="large"
-          :status="emailError ? 'error' : ''"
-          @blur="handleEmailBlur"
-        />
-        <div v-if="emailError" class="error-message">
-          <span class="text-red-500">{{ emailError }}</span>
-        </div>
-      </div>
-    </div>
-
     <!-- 充值金额选择 -->
     <div class="amount-section mb-6">
       <div class="text-lg font-bold mb-2">{{ t('page.carddata.Rechargeamount') }}</div>
@@ -179,7 +151,8 @@ const handleEmailBlur = async (e: FocusEvent) => {
         type="primary"
         size="large"
         block
-        :disabled="!paymentAmount"
+        :disabled="!paymentAmount || paymentAmount <= 0"
+        @click="handleRecharge"
       >
         ¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }}
       </AButton>
@@ -257,24 +230,7 @@ const handleEmailBlur = async (e: FocusEvent) => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
-.email-input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.email-input {
-  border-radius: 8px;
-}
-
-.error-message {
-  font-size: 12px;
-  line-height: 1.5;
-  padding-left: 4px;
-  min-height: 18px;
-}
-
-/* 移除之前的后缀样式 */
+/* 除之前的后缀样式 */
 :deep(.ant-input-suffix) {
   display: none;
 }