src/apis/admin.ts

@@ -35,12 +35,3 @@ export const DelInvoiceTitleInfo = (id:any) => request.delete(`/v1/invoice_title
 
 // 删除镜像
 export const delImageItem = (params:any) => request.delete(`/v1/image/delete_image/${params.image_id}`)
-
-// 银行卡管理-添加银行卡
-export const addBankCard = (params:any) => request.put('/v1/bank_card/add_bank_card',params)
-
-// 银行卡管理-获取绑定信息
-export const getBankCardInfo = (params:any) => request.get('/v1/bank_card/bank_card_info',{params})
-
-// 银行卡管理 - 解绑银行卡
-export const delBankCard = (params:any) => request.post('/v1/bank_card/delete_bank_card',params)

src/views/admin/account/bankCard/index.vue

@@ -14,17 +14,17 @@
           <div class="bank-icon">
             <img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" alt="银联" />
           </div>
-                    <div class="card-number">{{ formatCardNumber(boundCard.bank_card_no) }}</div>
+          <div class="card-number">{{ formatCardNumber(boundCard.cardNumber) }}</div>
         </div>
         
         <div class="card-details">
           <div class="detail-item">
             <span class="label">持卡人姓名：</span>
-                        <span class="value">{{ boundCard.name }}</span>
+            <span class="value">{{ boundCard.realName }}</span>
           </div>
           <div class="detail-item">
             <span class="label">开户行：</span>
-                        <span class="value">{{ boundCard.bank_name || '--' }}</span>
+            <span class="value">{{ boundCard.bankName }}</span>
           </div>
           <div class="detail-item">
             <span class="label">手机号：</span>
@@ -49,36 +49,48 @@
     </div>
 
     <!-- 添加银行卡对话框 -->
-        <a-modal v-model:visible="addModalVisible" title="添加银行卡" @ok="handleAddCard" @cancel="handleAddCancel"
-            :confirm-loading="addLoading" :width="500" :ok-text="'绑定'" :cancel-text="'取消'">
-            <a-form ref="addFormRef" :model="addFormState" :rules="addFormRules" layout="vertical">
+    <a-modal
+      v-model:visible="addModalVisible"
+      title="添加银行卡"
+      @ok="handleAddCard"
+      @cancel="handleAddCancel"
+      :confirm-loading="addLoading"
+      :width="500"
+      :ok-text="'绑定'"
+      :cancel-text="'取消'"
+    >
+      <a-form
+        ref="addFormRef"
+        :model="addFormState"
+        :rules="addFormRules"
+        layout="vertical"
+      >
         <a-form-item label="真实姓名" name="realName">
-                    <a-input v-model:value="addFormState.realName" placeholder="请输入持卡人真实姓名" size="large" />
-                </a-form-item>
-
-                <a-form-item label="手机号" name="phone">
-                    <div class="sms-code-input">
-                        <a-input v-model:value="addFormState.phone" placeholder="请输入银行预留手机号" size="large"
-                            :maxlength="11" />
-                        <a-button type="primary" :disabled="addCountdown > 0" @click="sendAddSmsCode"
-                            class="sms-button">
-                            {{ addCountdown > 0 ? `${addCountdown}秒后重新获取` : '获取验证码' }}
-                        </a-button>
-                    </div>
-                </a-form-item>
-
-                <a-form-item label="短信验证码" name="smsCode">
-                    <a-input v-model:value="addFormState.smsCode" placeholder="请输入短信验证码" size="large" :maxlength="6" />
+          <a-input
+            v-model:value="addFormState.realName"
+            placeholder="请输入持卡人真实姓名"
+            size="large"
+          />
         </a-form-item>
         
         <a-form-item label="银行卡号" name="cardNumber">
-                    <a-input v-model:value="addFormState.cardNumber" placeholder="请输入银行卡号" size="large" :maxlength="19"
-                        @input="formatCardInput" />
+          <a-input
+            v-model:value="addFormState.cardNumber"
+            placeholder="请输入银行卡号"
+            size="large"
+            :maxlength="19"
+            @input="formatCardInput"
+          />
         </a-form-item>
         
         <a-form-item label="开户行" name="bankName">
-                    <a-select v-model:value="addFormState.bankName" placeholder="请选择开户行" size="large"
-                        :options="bankOptions" show-search />
+          <a-select
+            v-model:value="addFormState.bankName"
+            placeholder="请选择开户行"
+            size="large"
+            :options="bankOptions"
+            show-search
+          />
         </a-form-item>
         
         <a-form-item name="agreement">
@@ -91,39 +103,62 @@
     </a-modal>
 
     <!-- 解绑银行卡对话框 -->
-        <!-- 修复：移除 @ok 事件中的参数传递，改为在方法内部处理 -->
-        <a-modal v-model:visible="unbindModalVisible" title="解绑银行卡" @ok="handleUnbindCard"
-            @cancel="handleUnbindCancel" :confirm-loading="unbindLoading" :width="500" :ok-text="'确认解绑'"
-            :cancel-text="'取消'">
-            <div v-if="boundCard" class="unbind-info">
+    <a-modal
+      v-model:visible="unbindModalVisible"
+      title="解绑银行卡"
+      @ok="handleUnbindCard"
+      @cancel="handleUnbindCancel"
+      :confirm-loading="unbindLoading"
+      :width="500"
+      :ok-text="'确认解绑'"
+      :cancel-text="'取消'"
+    >
+      <div class="unbind-info">
         <div class="info-item">
           <span class="label">持卡人姓名：</span>
-                    <span class="value">{{ boundCard.name }}</span>
+          <span class="value">{{ boundCard.realName }}</span>
         </div>
         <div class="info-item">
           <span class="label">银行卡号：</span>
-                    <span class="value">{{ formatCardNumber(boundCard.bank_card_no) }}</span>
+          <span class="value">{{ formatCardNumber(boundCard.cardNumber) }}</span>
         </div>
         <div class="info-item">
           <span class="label">开户行：</span>
-                    <span class="value">{{ boundCard.bank_name || '--' }}</span>
+          <span class="value">{{ boundCard.bankName }}</span>
         </div>
         <a-divider />
       </div>
       
-            <a-form ref="unbindFormRef" :model="unbindFormState" :rules="unbindFormRules" layout="vertical">
+      <a-form
+        ref="unbindFormRef"
+        :model="unbindFormState"
+        :rules="unbindFormRules"
+        layout="vertical"
+      >
         <a-form-item label="手机号码" name="phone">
-                    <a-input v-model:value="unbindFormState.phone" placeholder="请输入银行预留手机号" size="large"
-                        :maxlength="11" />
+          <a-input
+            v-model:value="unbindFormState.phone"
+            placeholder="请输入银行预留手机号"
+            size="large"
+            :maxlength="11"
+          />
         </a-form-item>
         
         <a-form-item label="短信验证码" name="smsCode">
           <div class="sms-code-input">
-                        <a-input v-model:value="unbindFormState.smsCode" placeholder="请输入短信验证码" size="large"
-                            :maxlength="6" />
-                        <a-button type="primary" :disabled="unbindCountdown > 0" @click="sendUnbindSmsCode"
-                            class="sms-button">
-                            {{ unbindCountdown > 0 ? `${unbindCountdown}秒后重新获取` : '获取验证码' }}
+            <a-input
+              v-model:value="unbindFormState.smsCode"
+              placeholder="请输入短信验证码"
+              size="large"
+              :maxlength="6"
+            />
+            <a-button
+              type="primary"
+              :disabled="countdown > 0"
+              @click="sendSmsCode"
+              class="sms-button"
+            >
+              {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
             </a-button>
           </div>
         </a-form-item>
@@ -139,22 +174,17 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive, computed, onMounted, nextTick } from 'vue'
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
 import { PlusOutlined } from '@ant-design/icons-vue'
 import { message, Modal } from 'ant-design-vue'
-import { addBankCard, getBankCardInfo, delBankCard } from '@/apis/admin'
-
-onMounted(() => {
-    getBoundCardInfo();
-})
 
 // 已绑定银行卡数据 - 初始为空
-const boundCard = ref<any>(null)
+const boundCard = ref(null)
 
 // 是否已绑定银行卡 - 初始为false
 const hasBoundCard = computed(() => {
-    return boundCard.value !== null && boundCard.value !== undefined && boundCard.value.bank_card_no
+  return boundCard.value !== null && boundCard.value !== undefined
 })
 
 // 银行选项
@@ -182,30 +212,17 @@ const addLoading = ref(false)
 const addFormRef = ref()
 const addFormState = reactive({
   realName: '',
-    phone: '',
-    smsCode: '',
   cardNumber: '',
   bankName: '',
   agreement: false
 })
 
-// 添加银行卡短信验证码倒计时
-const addCountdown = ref(0)
-
 // 添加银行卡表单验证规则
 const addFormRules = {
   realName: [
     { required: true, message: '请输入真实姓名', trigger: 'blur' },
     { pattern: /^[\u4e00-\u9fa5]{2,10}$/, message: '请输入2-10位中文字符', trigger: 'blur' }
   ],
-    phone: [
-        { required: true, message: '请输入手机号', trigger: 'blur' },
-        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
-    ],
-    smsCode: [
-        { required: true, message: '请输入短信验证码', trigger: 'blur' },
-        { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
-    ],
   cardNumber: [
     { required: true, message: '请输入银行卡号', trigger: 'blur' },
     { 
@@ -236,8 +253,8 @@ const unbindFormState = reactive({
   agreement: false
 })
 
-// 解绑银行卡短信验证码倒计时
-const unbindCountdown = ref(0)
+// 短信验证码倒计时
+const countdown = ref(0)
 
 // 解绑银行卡表单验证规则
 const unbindFormRules = {
@@ -275,13 +292,10 @@ const showAddModal = () => {
   // 重置表单
   Object.assign(addFormState, {
     realName: '',
-        phone: '',
-        smsCode: '',
     cardNumber: '',
     bankName: '',
     agreement: false
   })
-    addCountdown.value = 0
 }
 
 // 显示解绑银行卡对话框
@@ -293,195 +307,57 @@ const showUnbindModal = () => {
     smsCode: '',
     agreement: false
   })
-    unbindCountdown.value = 0
-
-    // 如果已绑定银行卡，自动填充手机号
-    if (boundCard.value && boundCard.value.phone) {
-        // 从脱敏的手机号中获取原始手机号（如果有的话）
-        // 注意：这里假设原始手机号保存在其他地方，或者需要用户重新输入
-        // 实际项目中可能需要从服务器获取原始手机号
-        unbindFormState.phone = ''
-    }
 }
 
 // 处理添加银行卡
-const handleAddCard = async () => {
-    try {
-        // 验证表单
-        await addFormRef.value.validate()
+const handleAddCard = () => {
+  addFormRef.value.validate().then(() => {
     addLoading.value = true
     
+    // 模拟API请求
+    setTimeout(() => {
       // 清除空格，保存纯数字
       const cleanCardNumber = addFormState.cardNumber.replace(/\s+/g, '')
       
-        // 构造API请求参数（按照后台要求的字段名）
-        const requestData = {
-            bank_card_no: cleanCardNumber, // 银行卡号
-            bank_name: addFormState.bankName, // 银行名称
-            code: addFormState.smsCode, // 短信验证码
-            name: addFormState.realName, // 真实姓名
-            phone: addFormState.phone // 手机号
-        }
-
-        console.log('发送银行卡添加请求:', requestData)
-
-        // 调用API
-        const res = await addBankCard(requestData)
-
-        console.log('添加银行卡结果:', res)
-
-        // 更新本地已绑定银行卡信息
+      // 更新已绑定银行卡信息
       boundCard.value = {
-            ...requestData,
-            phone: addFormState.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') // 脱敏显示
+        realName: addFormState.realName,
+        cardNumber: cleanCardNumber,
+        bankName: addFormState.bankName,
+        phone: '138****' + cleanCardNumber.substr(cleanCardNumber.length - 4) // 模拟手机号
       }
       
       addModalVisible.value = false
       addLoading.value = false
       
       message.success('银行卡绑定成功')
-        getBoundCardInfo();
-    } catch (error: any) {
-        console.log('银行卡绑定失败:', error)
-        addLoading.value = false
-
-        // 显示错误信息
-        if (error.response?.data?.message) {
-            message.error(error.response.data.message)
-        } else if (error.message) {
-            message.error(error.message)
-        } else {
-            message.error('银行卡绑定失败，请重试')
-        }
-    }
-}
-
-// 获取绑定信息
-const getBoundCardInfo = async () => {
-    try {
-        const res = await getBankCardInfo()
-        console.log('获取绑定银行卡信息结果:', res)
-
-        // 检查响应是否成功且有数据
-        if (res && res.bank_card_no) {
-            // 格式化电话号码，用于脱敏显示
-            const phoneNumber = res.phone || ''
-            const formattedPhone = phoneNumber ?
-                phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') :
-                ''
-
-            boundCard.value = {
-                ...res,
-                phone: formattedPhone,
-                // 保存原始手机号用于验证（如果API返回原始手机号）
-                original_phone: res.phone || ''
-            }
-            console.log('已绑定银行卡信息:', boundCard.value)
-        } else {
-            // 没有绑定银行卡
-            boundCard.value = null
-        }
-    } catch (error) {
-        console.log('获取绑定银行卡信息失败:', error)
-        boundCard.value = null
-    }
+    }, 1000)
+  }).catch(error => {
+    console.log('验证失败:', error)
+  })
 }
 
 // 处理解绑银行卡
-const handleUnbindCard = async () => {
-    try {
-        await unbindFormRef.value.validate()
+const handleUnbindCard = () => {
+  unbindFormRef.value.validate().then(() => {
     unbindLoading.value = true
     
-        // 确保有绑定的银行卡数据
-        if (!boundCard.value || !boundCard.value.id) {
-            message.error('银行卡信息无效，无法解绑')
-            unbindLoading.value = false
-            return
-        }
-
-        // 构造解绑银行卡请求参数
-        const requestData = {
-            code: unbindFormState.smsCode, // 短信验证码
-            id: boundCard.value.id, // 银行卡ID
-            phone: unbindFormState.phone // 手机号（需要用户输入，因为显示的是脱敏的）
-        }
-
-        console.log('发送银行卡解绑请求:', requestData)
-
-        // 调用解绑银行卡API
-        const res: any = await delBankCard(requestData)
-        console.log('解绑银行卡结果:', res)
-        
-        if (res.code === 1) {
-            message.success('解绑成功')
-            // 先关闭模态框
+    // 模拟API请求
+    setTimeout(() => {
+      // 清除已绑定银行卡信息
+      boundCard.value = null
       unbindModalVisible.value = false
-            
-            // 重置表单
-            Object.assign(unbindFormState, {
-                phone: '',
-                smsCode: '',
-                agreement: false
-            })
-            
-            // 等待模态框完全关闭后再更新数据
-            await nextTick()
-            
-            // 刷新银行卡信息（会设置为null）
-            await getBoundCardInfo();
-        } else {
-            message.error(res.msg || '解绑失败')
-        }
-    } catch (error: any) {
-        console.log('银行卡解绑失败:', error)
-        message.error('银行卡解绑失败，请重试')
-    } finally {
       unbindLoading.value = false
-    }
-}
       
-// 发送添加银行卡短信验证码
-const sendAddSmsCode = async () => {
-    if (!addFormState.phone) {
-        message.warning('请输入手机号码')
-        return
-    }
-
-    if (!/^1[3-9]\d{9}$/.test(addFormState.phone)) {
-        message.warning('手机号格式不正确')
-        return
-    }
-
-    try {
-        // TODO: 这里需要调用发送短信验证码的API
-        // 假设有一个 sendSmsCode API
-        // const res = await sendSmsCode({
-        //     phone: addFormState.phone,
-        //     type: 'BIND_CARD' // 发送验证码的类型
-        // })
-
-        // 开始倒计时
-        addCountdown.value = 60
-        const timer = setInterval(() => {
-            addCountdown.value -= 1
-            if (addCountdown.value <= 0) {
-                clearInterval(timer)
-            }
+      message.success('银行卡解绑成功')
     }, 1000)
-
-        // 模拟发送验证码（实际为123456）
-        message.success('验证码已发送，请注意查收（演示验证码：123456）')
-        // 注意：实际项目中不应该自动填入验证码，这里只是为了演示
-        // addFormState.smsCode = '123456'
-    } catch (error) {
-        console.log('发送验证码失败:', error)
-        message.error('发送验证码失败，请重试')
-    }
+  }).catch(error => {
+    console.log('验证失败:', error)
+  })
 }
 
-// 发送解绑银行卡短信验证码
-const sendUnbindSmsCode = async () => {
+// 发送短信验证码
+const sendSmsCode = () => {
   if (!unbindFormState.phone) {
     message.warning('请输入手机号码')
     return
@@ -492,38 +368,32 @@ const sendUnbindSmsCode = async () => {
     return
   }
   
-    try {
-        // 验证手机号是否匹配（这里需要用户输入原始手机号）
-        // 因为界面上显示的是脱敏的手机号，所以无法直接比较
-        // 可以在这里添加额外的验证逻辑，比如调用API验证手机号是否正确
+  // 模拟验证手机号是否匹配
+  const expectedPhone = boundCard.value.phone.replace(/\*/g, '')
+  const inputPhone = unbindFormState.phone
+  const lastFourDigits = boundCard.value.cardNumber.substr(boundCard.value.cardNumber.length - 4)
   
-        // TODO: 这里需要调用发送短信验证码的API
-        // const res = await sendSmsCode({
-        //     phone: unbindFormState.phone,
-        //     type: 'UNBIND_CARD'
-        // })
+  if (inputPhone !== '138' + lastFourDigits) {
+    message.error('手机号与预留手机号不匹配')
+    return
+  }
   
   // 开始倒计时
-        unbindCountdown.value = 60
+  countdown.value = 60
   const timer = setInterval(() => {
-            unbindCountdown.value -= 1
-            if (unbindCountdown.value <= 0) {
+    countdown.value -= 1
+    if (countdown.value <= 0) {
       clearInterval(timer)
     }
   }, 1000)
   
-        // 模拟发送验证码
+  // 模拟发送验证码（实际为123456）
   message.success('验证码已发送，请注意查收（演示验证码：123456）')
-        // 注意：实际项目中不应该自动填入验证码
-        // unbindFormState.smsCode = '123456'
-    } catch (error) {
-        console.log('发送验证码失败:', error)
-        message.error('发送验证码失败，请重试')
-    }
+  unbindFormState.smsCode = '123456'
 }
 
 // 格式化银行卡号显示
-const formatCardNumber = (cardNumber: string) => {
+const formatCardNumber = (cardNumber) => {
   if (!cardNumber) return ''
   const cleanNumber = cardNumber.replace(/\s+/g, '')
   const visibleDigits = 4
@@ -637,8 +507,9 @@ const showUnbindAgreement = () => {
   padding-top: 4px;
 }
 
-.add-card-section,
-.bound-card-section {
+.add-card-section, .bound-card-section {
+  /* display: flex;
+  justify-content: center; */
   align-items: center;
   min-height: 320px;
 }
@@ -812,7 +683,6 @@ const showUnbindAgreement = () => {
 
 .sms-button {
   white-space: nowrap;
-    min-width: 120px;
 }
 
 :deep(.ant-modal-body) {