实现银行卡的添加和删除

api/account.js

@@ -47,37 +47,12 @@ export function deleteBankAccount(ids) {
 }
 
 /**
- * 获取银行卡列表
+ * 获取用户银行卡列表（用于提现选择）
  * @returns {Promise} API响应结果
  */
-export function getBankAccountList() {
+export function getUserBankList() {
   return request({
-    url: '/app/account',
+    url: '/app/account/list',
     method: 'GET',
   })
 }
-
-/**
- * 更新银行卡信息
- * @param {Object} params - 银行卡信息参数
- * @param {string} params.id - 银行卡ID
- * @param {string} params.type - 类型：BANK=线下银行卡, QR=线下收款二维码
- * @param {string} params.no - 银行卡号或收款码图片URL
- * @param {string} params.name - 收款人姓名
- * @param {string} params.idCard - 身份证号
- * @param {string} params.mobile - 手机号
- * @returns {Promise} API响应结果
- */
-export function updateBankAccount(params) {
-  return request({
-    url: `/app/account/${params.id}`,
-    method: 'PUT',
-    data: {
-      type: params.type || 'BANK',
-      no: params.no,
-      name: params.name,
-      idCard: params.idCard,
-      mobile: params.mobile,
-    },
-  })
-}

pages/requestWithdrawal/deleteCard.vue

@@ -8,13 +8,13 @@
 
       <view class="modal-body">
         <view class="delete-tip">请选择要删除的银行卡：</view>
-        
+
         <!-- 加载状态 -->
         <view v-if="loading" class="loading-container">
           <view class="loading-spinner"></view>
-          <text class="loading-text">加载中...</text>
+          <text class="loading-text">删除中...</text>
         </view>
-        
+
         <!-- 银行卡列表 -->
         <view v-else-if="bankList.length > 0" class="bank-list">
           <view
@@ -36,7 +36,7 @@
             </view>
           </view>
         </view>
-        
+
         <!-- 空状态 -->
         <view v-else class="empty-state">
           <text class="empty-icon">💳</text>
@@ -59,52 +59,34 @@
 </template>
 
 <script>
-import { deleteBankAccount, getBankAccountList } from '@/api/account.js'
+import { deleteBankAccount } from '@/api/account.js'
 
 export default {
   name: 'DeleteCard',
   props: {
     visible: {
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
+    bankList: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
       loading: false,
-      bankList: [],
       selectedIds: [],
     }
   },
   watch: {
     visible(newVal) {
       if (newVal) {
-        this.fetchBankList()
         this.selectedIds = []
       }
-    }
+    },
   },
   methods: {
-    // 获取银行卡列表
-    async fetchBankList() {
-      this.loading = true
-      try {
-        const response = await getBankAccountList()
-        if (response.code === 200 && response.data) {
-          this.bankList = response.data
-          console.log('银行卡列表获取成功:', this.bankList)
-        }
-      } catch (error) {
-        console.error('获取银行卡列表失败:', error)
-        uni.showToast({
-          title: '获取银行卡列表失败',
-          icon: 'none',
-        })
-      } finally {
-        this.loading = false
-      }
-    },
-
     // 关闭弹窗
     handleClose() {
       this.$emit('close')
@@ -130,8 +112,9 @@ export default {
     // 获取银行类型文本
     getBankTypeText(type) {
       const typeMap = {
-        'BANK': '银行卡',
+        B: '银行卡',
-        'QR': '收款二维码'
+        BAN: '银行卡',
+        QR: '收款二维码',
       }
       return typeMap[type] || '未知类型'
     },

pages/requestWithdrawal/requestWithdrawal.vue

@@ -45,8 +45,11 @@
           <view class="bank-info">
             <image :src="selectedBank.icon" class="bank-icon" mode="aspectFit"></image>
             <view class="bank-details">
-              <text class="bank-name">{{ selectedBank.name }}</text>
+              <text class="bank-name">{{ selectedBank.displayName || '请选择银行卡' }}</text>
-              <text class="bank-card">{{ selectedBank.cardNumber }}</text>
+              <text class="bank-card">{{ selectedBank.cardNumber || '暂无银行卡' }}</text>
+              <text v-if="selectedBank.name" class="bank-owner"
+                >收款人: {{ selectedBank.name }}
+              </text>
             </view>
           </view>
           <text class="arrow-icon">›</text>
@@ -60,6 +63,11 @@
         <view class="bank-btn delete-btn" @click="showDeleteModal = true">删除银行卡</view>
       </view>
 
+      <!-- 银行卡状态提示 -->
+      <view v-if="userBankList.length === 0" class="bank-status-tip">
+        <text class="tip-text">您还没有添加银行卡，请先添加银行卡</text>
+      </view>
+
       <!-- 提现按钮 -->
       <view class="withdraw-btn" @click="submitWithdrawal">立即提现</view>
     </view>
@@ -93,6 +101,7 @@
     <!-- 删除银行卡组件 -->
     <delete-card
       :visible="showDeleteModal"
+      :bank-list="userBankList"
       @close="showDeleteModal = false"
       @success="onBankSuccess"
     />
@@ -102,14 +111,14 @@
 <script>
 import { commonEnum } from '@/enum/commonEnum.js'
 import { getWithdrawInfo, submitWithdraw } from '@/api/user/user.js'
-import { getBankAccountList } from '@/api/account.js'
+import { getUserBankList } from '@/api/account.js'
 import AddCard from './addCard.vue'
-import DeleteCard from './deleteCar.vue'
+import DeleteCardd from './deleteCard.vue'
 
 export default {
   components: {
     AddCard,
-    DeleteCard,
+    DeleteCard: DeleteCardd,
   },
   data() {
     return {
@@ -124,45 +133,20 @@ export default {
       },
       withdrawalData: {
         amount: '',
-        bankId: '1',
+        bankId: '',
       },
       selectedBank: {
-        id: '1',
+        id: '',
-        name: '建设银行',
+        name: '',
         icon: commonEnum.CHINA_CONSTRUCTION_BANK,
-        cardNumber: '**** **** **** 1234',
+        cardNumber: '',
+        type: 'BANK',
       },
-      banks: [
+      // 用户银行卡列表
-        {
+      userBankList: [],
-          id: '1',
-          name: '建设银行',
-          icon: commonEnum.CHINA_CONSTRUCTION_BANK,
-          cardNumber: '**** **** **** 1234',
-        },
-        {
-          id: '2',
-          name: '工商银行',
-          icon: commonEnum.CHINA_CONSTRUCTION_BANK,
-          cardNumber: '**** **** **** 5678',
-        },
-        {
-          id: '3',
-          name: '农业银行',
-          icon: commonEnum.CHINA_CONSTRUCTION_BANK,
-          cardNumber: '**** **** **** 9012',
-        },
-        {
-          id: '4',
-          name: '中国银行',
-          icon: commonEnum.CHINA_CONSTRUCTION_BANK,
-          cardNumber: '**** **** **** 3456',
-        },
-      ],
-
       // 银行卡管理相关
       showAddModal: false,
       showDeleteModal: false,
-      bankList: [],
     }
   },
   computed: {
@@ -179,7 +163,7 @@ export default {
   },
   onLoad() {
     this.fetchWithdrawInfo()
-    this.fetchBankList()
+    this.fetchUserBankList()
   },
   methods: {
     // 获取提现信息
@@ -205,19 +189,43 @@ export default {
       }
     },
 
-    // 获取银行卡列表
+    // 获取用户银行卡列表
-    async fetchBankList() {
+    async fetchUserBankList() {
       try {
-        const response = await getBankAccountList()
+        console.log('开始获取用户银行卡列表...123')
-        if (response.code === 200 && response.data) {
+        const response = await getUserBankList()
-          this.bankList = response.data.map(item => ({
+        console.log('API响应123:', response)
+        console.log('row:')
+        if (response.code === 200 && response.rows) {
+          this.userBankList = response.rows || []
+          console.log('用户银行卡列表获取成功:')
+          // 处理银行卡数据
+          this.userBankList = this.userBankList.map(item => ({
             ...item,
             cardNumber: this.maskCardNumber(item.no),
+            icon: this.getBankIcon(item.type),
+            displayName: this.getDisplayName(item),
           }))
-          console.log('银行卡列表获取成功:', this.bankList)
+
+          console.log('用户银行卡列表获取成功:', this.userBankList)
+
+          // 如果有银行卡，设置默认选中的银行卡
+          if (this.userBankList.length > 0) {
+            this.selectedBank = this.userBankList[0]
+            this.withdrawalData.bankId = this.selectedBank.id
+            console.log('设置默认银行卡:', this.selectedBank)
+          } else {
+            console.log('没有找到银行卡，显示空状态')
+          }
+        } else {
+          console.log('API返回错误:', response)
+          uni.showToast({
+            title: response.msg || '获取银行卡列表失败',
+            icon: 'none',
+          })
         }
       } catch (error) {
-        console.error('获取银行卡列表失败:', error)
+        console.error('获取用户银行卡列表失败:', error)
         uni.showToast({
           title: '获取银行卡列表失败',
           icon: 'none',
@@ -232,9 +240,31 @@ export default {
       return '**** **** **** ' + cardNumber.slice(-4)
     },
 
+    // 获取银行图标
+    getBankIcon(type) {
+      // 根据type字段判断类型，B和BAN都表示银行卡
+      if (type === 'B' || type === 'BAN') {
+        return commonEnum.CHINA_CONSTRUCTION_BANK
+      } else if (type === 'QR') {
+        return '/static/icons/qr-code.png' // 收款二维码图标
+      }
+      return commonEnum.CHINA_CONSTRUCTION_BANK
+    },
+
+    // 获取显示名称
+    getDisplayName(item) {
+      // 根据type字段判断类型
+      if (item.type === 'B' || item.type === 'BAN') {
+        return '银行卡'
+      } else if (item.type === 'QR') {
+        return '收款二维码'
+      }
+      return '银行卡'
+    },
+
     // 银行卡操作成功回调
     onBankSuccess() {
-      this.fetchBankList()
+      this.fetchUserBankList()
     },
 
     goBack() {
@@ -266,12 +296,23 @@ export default {
       console.log('全部提现，设置金额:', this.withdrawalData.amount)
     },
     selectBank() {
+      if (this.userBankList.length === 0) {
+        uni.showToast({
+          title: '请先添加银行卡',
+          icon: 'none',
+        })
+        return
+      }
+
       uni.showActionSheet({
-        itemList: this.banks.map(bank => `${bank.name} ${bank.cardNumber}`),
+        itemList: this.userBankList.map(
+          bank => `${bank.displayName} ${bank.cardNumber} (${bank.name})`
+        ),
         success: res => {
-          const selectedBank = this.banks[res.tapIndex]
+          const selectedBank = this.userBankList[res.tapIndex]
           this.selectedBank = selectedBank
           this.withdrawalData.bankId = selectedBank.id
+          console.log('选择银行卡:', selectedBank)
         },
       })
     },
@@ -284,6 +325,14 @@ export default {
         return
       }
 
+      if (!this.withdrawalData.bankId) {
+        uni.showToast({
+          title: '请选择提现银行卡',
+          icon: 'none',
+        })
+        return
+      }
+
       const amount = parseFloat(this.withdrawalData.amount)
       const available = parseFloat(this.withdrawInfo.available)
       const minAmount = parseFloat(this.withdrawInfo.minAmount)
@@ -315,7 +364,7 @@ export default {
 
       uni.showModal({
         title: '确认提现',
-        content: `确认提现${this.withdrawalData.amount}元到${this.selectedBank.name}吗？`,
+        content: `确认提现${this.withdrawalData.amount}元到${this.selectedBank.displayName}吗？`,
         success: async res => {
           if (res.confirm) {
             this.loading = true
@@ -524,6 +573,13 @@ export default {
         .bank-card {
           font-size: 24rpx;
           color: #999;
+          margin-top: 8rpx;
+        }
+
+        .bank-owner {
+          font-size: 22rpx;
+          color: #666;
+          margin-top: 4rpx;
         }
       }
     }
@@ -579,20 +635,6 @@ view {
   //border: red solid 1px;
 }
 
-.debug-info {
-  background: #fff;
-  margin: 20rpx;
-  padding: 20rpx;
-  border-radius: 10rpx;
-
-  text {
-    display: block;
-    font-size: 24rpx;
-    color: #666;
-    margin-bottom: 10rpx;
-  }
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -628,6 +670,21 @@ view {
   }
 }
 
+/* 银行卡状态提示 */
+.bank-status-tip {
+  margin: 20rpx 30rpx;
+  padding: 20rpx;
+  background: #fff5f0;
+  border-radius: 10rpx;
+  border-left: 4rpx solid #ff803a;
+
+  .tip-text {
+    font-size: 26rpx;
+    color: #ff803a;
+    text-align: center;
+  }
+}
+
 /* 模态框样式 */
 .modal-overlay {
   position: fixed;