添加删除银行卡静态布局

api/README.md

@@ -9,6 +9,7 @@
 ```
 api/
 ├── index.js          # API模块统一导出
+├── account.js        # 银行卡账户管理API
 ├── lease/            # 租赁相关API
 │   └── lease.js
 ├── device/           # 设备相关API
@@ -21,6 +22,76 @@ api/
     └── auth.js
 ```
 
+## 银行卡账户管理API
+
+### 接口说明
+
+银行卡账户管理模块提供了完整的银行卡CRUD操作，支持银行卡和收款二维码两种类型。
+
+### 主要接口
+
+#### 1. 添加银行卡号
+```javascript
+import { addBankAccount } from '@/api/account.js'
+
+// 添加银行卡
+const params = {
+  type: 'BANK',                    // 类型：BANK=银行卡, QR=收款二维码
+  no: '6217002490009046470',       // 银行卡号或收款码图片URL
+  name: '刘芙杰',                  // 收款人姓名
+  idCard: '411303198912184826',    // 身份证号
+  mobile: '18913873357'            // 手机号
+}
+
+const response = await addBankAccount(params)
+```
+
+#### 2. 删除银行卡号
+```javascript
+import { deleteBankAccount } from '@/api/account.js'
+
+// 删除单个银行卡
+await deleteBankAccount('15')
+
+// 删除多个银行卡
+await deleteBankAccount(['15', '14'])
+// 或者
+await deleteBankAccount('15,14')
+```
+
+#### 3. 获取银行卡列表
+```javascript
+import { getBankAccountList } from '@/api/account.js'
+
+const response = await getBankAccountList()
+```
+
+#### 4. 更新银行卡信息
+```javascript
+import { updateBankAccount } from '@/api/account.js'
+
+const params = {
+  id: '15',                        // 银行卡ID
+  type: 'BANK',
+  no: '6217002490009046470',
+  name: '刘芙杰',
+  idCard: '411303198912184826',
+  mobile: '18913873357'
+}
+
+const response = await updateBankAccount(params)
+```
+
+### 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| type | string | 是 | BANK=线下银行卡, QR=线下收款二维码 |
+| no | string | 是 | type是银行卡:银行卡号。type是二维码收款:收款码图片URL |
+| name | string | 是 | 收款人姓名 |
+| idCard | string | 是 | 身份证号 |
+| mobile | string | 是 | 手机号 |
+
 ## 使用方法
 
 ### 1. 导入API方法

api/account.js

@@ -0,0 +1,80 @@
+import { request } from '@/utils/request.js'
+
+/**
+ * 银行卡账户管理API
+ */
+
+/**
+ * 添加银行卡号
+ * @param {Object} params - 银行卡信息参数
+ * @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 addBankAccount(params) {
+  return request({
+    url: '/app/account',
+    method: 'POST',
+    data: {
+      type: params.type || 'BANK',
+      no: params.no,
+      name: params.name,
+      idCard: params.idCard,
+      mobile: params.mobile
+    }
+  })
+}
+
+/**
+ * 删除银行卡号
+ * @param {string|Array} ids - 银行卡ID，支持单个ID或ID数组，多个ID用逗号分隔
+ * @returns {Promise} API响应结果
+ */
+export function deleteBankAccount(ids) {
+  // 如果传入的是数组，转换为逗号分隔的字符串
+  const idString = Array.isArray(ids) ? ids.join(',') : ids
+  
+  return request({
+    url: `/app/account/${idString}`,
+    method: 'DELETE'
+  })
+}
+
+/**
+ * 获取银行卡列表
+ * @returns {Promise} API响应结果
+ */
+export function getBankAccountList() {
+  return request({
+    url: '/app/account',
+    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
+    }
+  })
+} 

api/index.js

@@ -4,4 +4,5 @@ export * from './device/device.js'
 export * from './banner/banner.js'
 export * from './article/article.js'
 export * from './auth/auth.js'
-export * from './user/user.js' 
+export * from './user/user.js'
+export * from './account.js' 

pages/requestWithdrawal/addCard.vue

@@ -0,0 +1,412 @@
+<template>
+  <view v-if="visible" class="modal-overlay" @click="handleClose">
+    <view class="modal-content" @click.stop>
+      <view class="modal-header">
+        <text class="modal-title">添加银行卡</text>
+        <text class="modal-close" @click="handleClose">×</text>
+      </view>
+
+      <view class="modal-body">
+        <view class="form-item">
+          <text class="form-label">账户类型</text>
+          <picker
+            :range="typeOptions"
+            :value="typeIndex"
+            range-key="label"
+            @change="onTypeChange"
+          >
+            <view class="picker-value">{{ typeOptions[typeIndex].label }}</view>
+          </picker>
+        </view>
+
+        <view class="form-item">
+          <text class="form-label">{{ typeOptions[typeIndex].noLabel }}</text>
+          <input
+            v-model="bankForm.no"
+            :placeholder="typeOptions[typeIndex].noPlaceholder"
+            class="form-input"
+            maxlength="30"
+          />
+        </view>
+
+        <view class="form-item">
+          <text class="form-label">收款人姓名</text>
+          <input
+            v-model="bankForm.name"
+            class="form-input"
+            maxlength="20"
+            placeholder="请输入收款人姓名"
+          />
+        </view>
+
+        <view class="form-item">
+          <text class="form-label">身份证号</text>
+          <input
+            v-model="bankForm.idCard"
+            class="form-input"
+            maxlength="18"
+            placeholder="请输入身份证号"
+          />
+        </view>
+
+        <view class="form-item">
+          <text class="form-label">手机号</text>
+          <input
+            v-model="bankForm.mobile"
+            class="form-input"
+            maxlength="11"
+            placeholder="请输入手机号"
+            type="number"
+          />
+        </view>
+      </view>
+
+      <view class="modal-footer">
+        <view class="modal-btn cancel-btn" @click="handleClose">取消</view>
+        <view 
+          :class="{ 'loading-btn': loading }"
+          class="modal-btn confirm-btn" 
+          @click="handleSubmit"
+        >
+          {{ loading ? '添加中...' : '确认添加' }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { addBankAccount } from '@/api/account.js'
+
+export default {
+  name: 'AddCard',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      typeIndex: 0,
+      typeOptions: [
+        {
+          label: '银行卡',
+          value: 'BANK',
+          noLabel: '银行卡号',
+          noPlaceholder: '请输入银行卡号',
+        },
+        {
+          label: '收款二维码',
+          value: 'QR',
+          noLabel: '收款码图片',
+          noPlaceholder: '请输入收款码图片URL',
+        },
+      ],
+      bankForm: {
+        type: 'BANK',
+        no: '',
+        name: '',
+        idCard: '',
+        mobile: '',
+      },
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.resetForm()
+      }
+    }
+  },
+  methods: {
+    // 重置表单
+    resetForm() {
+      this.bankForm = {
+        type: 'BANK',
+        no: '',
+        name: '',
+        idCard: '',
+        mobile: '',
+      }
+      this.typeIndex = 0
+    },
+
+    // 关闭弹窗
+    handleClose() {
+      this.$emit('close')
+    },
+
+    // 类型选择变化
+    onTypeChange(e) {
+      this.typeIndex = e.detail.value
+      this.bankForm.type = this.typeOptions[this.typeIndex].value
+    },
+
+    // 验证表单
+    validateForm() {
+      if (!this.bankForm.no.trim()) {
+        uni.showToast({
+          title: '请输入' + this.typeOptions[this.typeIndex].noLabel,
+          icon: 'none',
+        })
+        return false
+      }
+
+      if (!this.bankForm.name.trim()) {
+        uni.showToast({
+          title: '请输入收款人姓名',
+          icon: 'none',
+        })
+        return false
+      }
+
+      if (!this.bankForm.idCard.trim()) {
+        uni.showToast({
+          title: '请输入身份证号',
+          icon: 'none',
+        })
+        return false
+      }
+
+      if (!this.bankForm.mobile.trim()) {
+        uni.showToast({
+          title: '请输入手机号',
+          icon: 'none',
+        })
+        return false
+      }
+
+      // 验证身份证号格式
+      const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
+      if (!idCardRegex.test(this.bankForm.idCard)) {
+        uni.showToast({
+          title: '身份证号格式不正确',
+          icon: 'none',
+        })
+        return false
+      }
+
+      // 验证手机号格式
+      const mobileRegex = /^1[3-9]\d{9}$/
+      if (!mobileRegex.test(this.bankForm.mobile)) {
+        uni.showToast({
+          title: '手机号格式不正确',
+          icon: 'none',
+        })
+        return false
+      }
+
+      return true
+    },
+
+    // 提交表单
+    async handleSubmit() {
+      if (!this.validateForm()) {
+        return
+      }
+
+      this.loading = true
+      try {
+        const response = await addBankAccount(this.bankForm)
+
+        if (response.code === 200) {
+          uni.showToast({
+            title: '银行卡添加成功',
+            icon: 'success',
+          })
+
+          this.$emit('success')
+          this.handleClose()
+        } else {
+          uni.showToast({
+            title: response.msg || '添加失败',
+            icon: 'none',
+          })
+        }
+      } catch (error) {
+        console.error('添加银行卡失败:', error)
+        uni.showToast({
+          title: '添加失败，请重试',
+          icon: 'none',
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+/* 模态框样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.modal-content {
+  width: 90%;
+  max-width: 600rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  animation: slideUp 0.3s ease-out;
+}
+
+.modal-header {
+  padding: 30rpx;
+  text-align: center;
+  border-bottom: 1rpx solid #f0f0f0;
+  position: relative;
+
+  .modal-title {
+    font-size: 32rpx;
+    color: #333;
+    font-weight: 500;
+  }
+
+  .modal-close {
+    position: absolute;
+    right: 30rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 40rpx;
+    color: #999;
+    cursor: pointer;
+  }
+}
+
+.modal-body {
+  padding: 30rpx;
+
+  .form-item {
+    margin-bottom: 30rpx;
+
+    .form-label {
+      display: block;
+      font-size: 28rpx;
+      color: #333;
+      margin-bottom: 15rpx;
+      font-weight: 500;
+    }
+
+    .form-input {
+      width: 100%;
+      height: 80rpx;
+      border: 1rpx solid #e0e0e0;
+      border-radius: 10rpx;
+      padding: 0 20rpx;
+      font-size: 28rpx;
+      color: #333;
+      background: #fafafa;
+
+      &:focus {
+        border-color: #ff803a;
+        background: #fff;
+      }
+    }
+
+    .picker-value {
+      width: 100%;
+      height: 80rpx;
+      border: 1rpx solid #e0e0e0;
+      border-radius: 10rpx;
+      padding: 0 20rpx;
+      font-size: 28rpx;
+      color: #333;
+      background: #fafafa;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.modal-footer {
+  display: flex;
+  border-top: 1rpx solid #f0f0f0;
+
+  .modal-btn {
+    flex: 1;
+    padding: 30rpx;
+    text-align: center;
+    font-size: 30rpx;
+    font-weight: 500;
+
+    &.cancel-btn {
+      color: #666;
+      border-right: 1rpx solid #f0f0f0;
+    }
+
+    &.confirm-btn {
+      color: #ff803a;
+    }
+
+    &.loading-btn {
+      position: relative;
+      color: transparent !important;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 30rpx;
+        height: 30rpx;
+        margin: -15rpx 0 0 -15rpx;
+        border: 3rpx solid transparent;
+        border-top: 3rpx solid #ff803a;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100rpx);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 750rpx) {
+  .modal-content {
+    width: 95%;
+    margin: 20rpx;
+  }
+}
+</style>

pages/requestWithdrawal/deleteCar.vue

@@ -0,0 +1,426 @@
+<template>
+  <view v-if="visible" class="modal-overlay" @click="handleClose">
+    <view class="modal-content" @click.stop>
+      <view class="modal-header">
+        <text class="modal-title">删除银行卡</text>
+        <text class="modal-close" @click="handleClose">×</text>
+      </view>
+
+      <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>
+        </view>
+        
+        <!-- 银行卡列表 -->
+        <view v-else-if="bankList.length > 0" class="bank-list">
+          <view
+            v-for="bank in bankList"
+            :key="bank.id"
+            :class="{ selected: selectedIds.includes(bank.id) }"
+            class="bank-item"
+            @click="toggleSelection(bank.id)"
+          >
+            <view class="bank-info">
+              <view class="bank-header">
+                <text class="bank-name">{{ bank.name }}</text>
+                <text class="bank-type">{{ getBankTypeText(bank.type) }}</text>
+              </view>
+              <text class="bank-number">{{ maskCardNumber(bank.no) }}</text>
+            </view>
+            <view :class="{ checked: selectedIds.includes(bank.id) }" class="checkbox">
+              <text v-if="selectedIds.includes(bank.id)" class="check-icon">✓</text>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 空状态 -->
+        <view v-else class="empty-state">
+          <text class="empty-icon">💳</text>
+          <text class="empty-text">暂无银行卡</text>
+        </view>
+      </view>
+
+      <view class="modal-footer">
+        <view class="modal-btn cancel-btn" @click="handleClose">取消</view>
+        <view
+          :class="{ disabled: selectedIds.length === 0 || loading }"
+          class="modal-btn confirm-btn"
+          @click="handleDelete"
+        >
+          {{ loading ? '删除中...' : `确认删除 (${selectedIds.length})` }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { deleteBankAccount, getBankAccountList } from '@/api/account.js'
+
+export default {
+  name: 'DeleteCard',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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')
+    },
+
+    // 切换选择状态
+    toggleSelection(bankId) {
+      const index = this.selectedIds.indexOf(bankId)
+      if (index > -1) {
+        this.selectedIds.splice(index, 1)
+      } else {
+        this.selectedIds.push(bankId)
+      }
+    },
+
+    // 掩码银行卡号
+    maskCardNumber(cardNumber) {
+      if (!cardNumber) return ''
+      if (cardNumber.length <= 8) return cardNumber
+      return '**** **** **** ' + cardNumber.slice(-4)
+    },
+
+    // 获取银行类型文本
+    getBankTypeText(type) {
+      const typeMap = {
+        'BANK': '银行卡',
+        'QR': '收款二维码'
+      }
+      return typeMap[type] || '未知类型'
+    },
+
+    // 删除银行卡
+    async handleDelete() {
+      if (this.selectedIds.length === 0) {
+        uni.showToast({
+          title: '请选择要删除的银行卡',
+          icon: 'none',
+        })
+        return
+      }
+
+      uni.showModal({
+        title: '确认删除',
+        content: `确认删除选中的${this.selectedIds.length}张银行卡吗？`,
+        success: async res => {
+          if (res.confirm) {
+            this.loading = true
+            try {
+              const response = await deleteBankAccount(this.selectedIds)
+
+              if (response.code === 200) {
+                uni.showToast({
+                  title: '删除成功',
+                  icon: 'success',
+                })
+
+                this.$emit('success')
+                this.handleClose()
+              } else {
+                uni.showToast({
+                  title: response.msg || '删除失败',
+                  icon: 'none',
+                })
+              }
+            } catch (error) {
+              console.error('删除银行卡失败:', error)
+              uni.showToast({
+                title: '删除失败，请重试',
+                icon: 'none',
+              })
+            } finally {
+              this.loading = false
+            }
+          }
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+/* 模态框样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.modal-content {
+  width: 90%;
+  max-width: 600rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  animation: slideUp 0.3s ease-out;
+}
+
+.modal-header {
+  padding: 30rpx;
+  text-align: center;
+  border-bottom: 1rpx solid #f0f0f0;
+  position: relative;
+
+  .modal-title {
+    font-size: 32rpx;
+    color: #333;
+    font-weight: 500;
+  }
+
+  .modal-close {
+    position: absolute;
+    right: 30rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 40rpx;
+    color: #999;
+    cursor: pointer;
+  }
+}
+
+.modal-body {
+  padding: 30rpx;
+  max-height: 600rpx;
+  overflow-y: auto;
+
+  .delete-tip {
+    font-size: 28rpx;
+    color: #666;
+    margin-bottom: 30rpx;
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60rpx 0;
+
+    .loading-spinner {
+      width: 60rpx;
+      height: 60rpx;
+      border: 4rpx solid #f3f3f3;
+      border-top: 4rpx solid #ff803a;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 20rpx;
+    }
+
+    .loading-text {
+      font-size: 28rpx;
+      color: #666;
+    }
+  }
+
+  .bank-list {
+    .bank-item {
+      display: flex;
+      align-items: center;
+      padding: 30rpx;
+      border: 2rpx solid #f0f0f0;
+      border-radius: 15rpx;
+      margin-bottom: 20rpx;
+      transition: all 0.3s ease;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &.selected {
+        border-color: #ff803a;
+        background: #fff5f0;
+      }
+
+      .bank-info {
+        flex: 1;
+
+        .bank-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10rpx;
+
+          .bank-name {
+            font-size: 30rpx;
+            color: #333;
+            font-weight: 500;
+            margin-right: 15rpx;
+          }
+
+          .bank-type {
+            font-size: 22rpx;
+            color: #ff803a;
+            background: #fff5f0;
+            padding: 4rpx 12rpx;
+            border-radius: 20rpx;
+          }
+        }
+
+        .bank-number {
+          font-size: 26rpx;
+          color: #666;
+        }
+      }
+
+      .checkbox {
+        width: 40rpx;
+        height: 40rpx;
+        border: 2rpx solid #e0e0e0;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease;
+
+        &.checked {
+          border-color: #ff803a;
+          background: #ff803a;
+
+          .check-icon {
+            color: #fff;
+            font-size: 24rpx;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 80rpx 0;
+
+    .empty-icon {
+      font-size: 80rpx;
+      margin-bottom: 20rpx;
+    }
+
+    .empty-text {
+      font-size: 28rpx;
+      color: #999;
+    }
+  }
+}
+
+.modal-footer {
+  display: flex;
+  border-top: 1rpx solid #f0f0f0;
+
+  .modal-btn {
+    flex: 1;
+    padding: 30rpx;
+    text-align: center;
+    font-size: 30rpx;
+    font-weight: 500;
+
+    &.cancel-btn {
+      color: #666;
+      border-right: 1rpx solid #f0f0f0;
+    }
+
+    &.confirm-btn {
+      color: #ff803a;
+
+      &.disabled {
+        color: #ccc;
+        background: #f5f5f5;
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100rpx);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 750rpx) {
+  .modal-content {
+    width: 95%;
+    margin: 20rpx;
+  }
+}
+</style>

pages/requestWithdrawal/requestWithdrawal.vue

@@ -51,6 +51,13 @@
           </view>
           <text class="arrow-icon">›</text>
         </view>
+
+        <!-- 银行卡管理按钮 -->
+      </view>
+
+      <view class="bank-management">
+        <view class="bank-btn add-btn" @click="showAddModal = true">添加银行卡</view>
+        <view class="bank-btn delete-btn" @click="showDeleteModal = true">删除银行卡</view>
       </view>
 
       <!-- 提现按钮 -->
@@ -59,8 +66,6 @@
 
     <!-- 可提现金额提示 -->
     <view class="available-amount"> 可提现金额: {{ withdrawInfo.available }}元</view>
-    
-
 
     <!-- 提现说明 -->
     <view class="withdrawal-explanation">
@@ -81,14 +86,31 @@
         <text>最大提现金额: {{ withdrawInfo.maxAmount }}元</text>
       </view>
     </view>
+
+    <!-- 添加银行卡组件 -->
+    <add-card :visible="showAddModal" @close="showAddModal = false" @success="onBankSuccess" />
+
+    <!-- 删除银行卡组件 -->
+    <delete-card
+      :visible="showDeleteModal"
+      @close="showDeleteModal = false"
+      @success="onBankSuccess"
+    />
   </view>
 </template>
 
 <script>
 import { commonEnum } from '@/enum/commonEnum.js'
 import { getWithdrawInfo, submitWithdraw } from '@/api/user/user.js'
+import { getBankAccountList } from '@/api/account.js'
+import AddCard from './addCard.vue'
+import DeleteCard from './deleteCar.vue'
 
 export default {
+  components: {
+    AddCard,
+    DeleteCard,
+  },
   data() {
     return {
       loading: false,
@@ -96,9 +118,9 @@ export default {
         balance: '10000.00',
         unsettled: '0.00',
         available: '10000.00',
-        fee: 1.00,
+        fee: 1.0,
-        minAmount: 100.00,
+        minAmount: 100.0,
-        maxAmount: 50000.00,
+        maxAmount: 50000.0,
       },
       withdrawalData: {
         amount: '',
@@ -136,6 +158,11 @@ export default {
           cardNumber: '**** **** **** 3456',
         },
       ],
+
+      // 银行卡管理相关
+      showAddModal: false,
+      showDeleteModal: false,
+      bankList: [],
     }
   },
   computed: {
@@ -152,6 +179,7 @@ export default {
   },
   onLoad() {
     this.fetchWithdrawInfo()
+    this.fetchBankList()
   },
   methods: {
     // 获取提现信息
@@ -177,16 +205,48 @@ export default {
       }
     },
 
+    // 获取银行卡列表
+    async fetchBankList() {
+      try {
+        const response = await getBankAccountList()
+        if (response.code === 200 && response.data) {
+          this.bankList = response.data.map(item => ({
+            ...item,
+            cardNumber: this.maskCardNumber(item.no),
+          }))
+          console.log('银行卡列表获取成功:', this.bankList)
+        }
+      } catch (error) {
+        console.error('获取银行卡列表失败:', error)
+        uni.showToast({
+          title: '获取银行卡列表失败',
+          icon: 'none',
+        })
+      }
+    },
+
+    // 掩码银行卡号
+    maskCardNumber(cardNumber) {
+      if (!cardNumber) return ''
+      if (cardNumber.length <= 8) return cardNumber
+      return '**** **** **** ' + cardNumber.slice(-4)
+    },
+
+    // 银行卡操作成功回调
+    onBankSuccess() {
+      this.fetchBankList()
+    },
+
     goBack() {
       uni.navigateBack()
     },
     onAmountInput(e) {
       const value = e.detail.value
       console.log('输入值:', value)
-      
+
       // 只允许数字和小数点
       const filteredValue = value.replace(/[^\d.]/g, '')
-      
+
       // 确保只有一个小数点
       const parts = filteredValue.split('.')
       if (parts.length > 2) {
@@ -524,7 +584,7 @@ view {
   margin: 20rpx;
   padding: 20rpx;
   border-radius: 10rpx;
-  
+
   text {
     display: block;
     font-size: 24rpx;
@@ -534,7 +594,298 @@ view {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 银行卡管理样式 */
+.bank-management {
+  margin-top: 20rpx;
+  display: flex;
+  gap: 20rpx;
+
+  .bank-btn {
+    flex: 1;
+    padding: 20rpx;
+    text-align: center;
+    border-radius: 10rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+
+    &.add-btn {
+      background: #ff803a;
+      color: #fff;
+    }
+
+    &.delete-btn {
+      background: #ff4757;
+      color: #fff;
+    }
+  }
+}
+
+/* 模态框样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+
+  .modal-content {
+    width: 90%;
+    max-width: 600rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    overflow: hidden;
+
+    .modal-header {
+      padding: 30rpx;
+      text-align: center;
+      border-bottom: 1rpx solid #f0f0f0;
+
+      .modal-title {
+        font-size: 32rpx;
+        color: #333;
+        font-weight: 500;
+      }
+    }
+
+    .modal-body {
+      padding: 30rpx;
+
+      .form-group {
+        margin-bottom: 30rpx;
+
+        .form-label {
+          display: block;
+          font-size: 28rpx;
+          color: #333;
+          margin-bottom: 15rpx;
+          font-weight: 500;
+        }
+
+        .form-input {
+          width: 100%;
+          height: 80rpx;
+          border: 1rpx solid #e0e0e0;
+          border-radius: 10rpx;
+          padding: 0 20rpx;
+          font-size: 28rpx;
+          color: #333;
+          background: #fafafa;
+
+          &:focus {
+            border-color: #ff803a;
+            background: #fff;
+          }
+        }
+
+        .form-select {
+          width: 100%;
+          height: 80rpx;
+          border: 1rpx solid #e0e0e0;
+          border-radius: 10rpx;
+          padding: 0 20rpx;
+          font-size: 28rpx;
+          color: #333;
+          background: #fafafa;
+        }
+
+        .upload-area {
+          border: 2rpx dashed #e0e0e0;
+          border-radius: 10rpx;
+          padding: 40rpx;
+          text-align: center;
+          background: #fafafa;
+
+          &.has-image {
+            border-color: #ff803a;
+            background: #fff;
+          }
+
+          .upload-icon {
+            font-size: 60rpx;
+            color: #999;
+            margin-bottom: 20rpx;
+          }
+
+          .upload-text {
+            font-size: 26rpx;
+            color: #666;
+            margin-bottom: 20rpx;
+          }
+
+          .upload-btn {
+            display: inline-block;
+            padding: 15rpx 30rpx;
+            background: #ff803a;
+            color: #fff;
+            border-radius: 8rpx;
+            font-size: 24rpx;
+          }
+
+          .preview-image {
+            width: 200rpx;
+            height: 200rpx;
+            border-radius: 10rpx;
+            margin: 20rpx auto;
+          }
+        }
+      }
+    }
+
+    .modal-footer {
+      display: flex;
+      border-top: 1rpx solid #f0f0f0;
+
+      .modal-btn {
+        flex: 1;
+        padding: 30rpx;
+        text-align: center;
+        font-size: 30rpx;
+        font-weight: 500;
+
+        &.cancel-btn {
+          color: #666;
+          border-right: 1rpx solid #f0f0f0;
+        }
+
+        &.confirm-btn {
+          color: #ff803a;
+        }
+      }
+    }
+  }
+}
+
+/* 银行卡列表样式 */
+.bank-list-modal {
+  .modal-content {
+    .bank-list {
+      max-height: 600rpx;
+      overflow-y: auto;
+
+      .bank-item {
+        display: flex;
+        align-items: center;
+        padding: 30rpx;
+        border-bottom: 1rpx solid #f0f0f0;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .bank-icon {
+          width: 60rpx;
+          height: 60rpx;
+          margin-right: 20rpx;
+          border-radius: 8rpx;
+        }
+
+        .bank-info {
+          flex: 1;
+
+          .bank-name {
+            font-size: 30rpx;
+            color: #333;
+            margin-bottom: 8rpx;
+            font-weight: 500;
+          }
+
+          .bank-number {
+            font-size: 26rpx;
+            color: #666;
+          }
+
+          .bank-type {
+            font-size: 24rpx;
+            color: #999;
+            margin-top: 5rpx;
+          }
+        }
+
+        .delete-icon {
+          width: 40rpx;
+          height: 40rpx;
+          color: #ff4757;
+        }
+      }
+    }
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 750rpx) {
+  .modal-content {
+    width: 95%;
+    margin: 20rpx;
+  }
+
+  .bank-management {
+    flex-direction: column;
+
+    .bank-btn {
+      margin-bottom: 15rpx;
+    }
+  }
+}
+
+/* 动画效果 */
+.modal-overlay {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.modal-content {
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100rpx);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* 加载状态样式 */
+.loading-btn {
+  position: relative;
+  color: transparent !important;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 30rpx;
+    height: 30rpx;
+    margin: -15rpx 0 0 -15rpx;
+    border: 3rpx solid transparent;
+    border-top: 3rpx solid currentColor;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
 }
 </style>