dman-web-admin/src/views/finance/WithdrawList.vue

<template>
  <page-container>
    <div class="withdraw-list">
      <div class="table-header">
        <h1>提现管理</h1>
      </div>
      
      <!-- 过滤区域 -->
      <div class="table-filter">
        <a-form layout="inline">
          <a-form-item label="提现状态">
            <a-select
              v-model:value="filterForm.status"
              style="width: 200px"
              placeholder="请选择状态"
              allowClear
              @change="handleFilterChange"
            >
              <a-select-option value="PENDING">待审核</a-select-option>
              <a-select-option value="APPROVED">已通过</a-select-option>
              <a-select-option value="REJECTED">已拒绝</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item>
            <a-space>
              <a-button type="primary" @click="handleSearch">
                查询
              </a-button>
              <a-button @click="handleReset">
                重置
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>

      <a-table 
        :columns="columns" 
        :data-source="tableData" 
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <!-- 状态列 -->
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>
          <!-- 姓名列 -->
          <template v-if="column.key === 'name'">
            <span>{{ record.name }}</span>
            <a-button
              type="link"
              size="small"
              @click="copyText(record.name)"
            >
              复制
            </a-button>
          </template>
          <!-- 银行列 -->
          <template v-if="column.key === 'bank_name'">
            <span>{{ record.bank_name }}</span>
            <a-button
              type="link"
              size="small"
              @click="copyText(record.bank_name)"
            >
              复制
            </a-button>
          </template>
          <!-- 卡号列 -->
          <template v-if="column.key === 'bank_card_number'">
            <span>{{ record.bank_card_number }}</span>
            <a-button
              type="link"
              size="small"
              @click="copyText(record.bank_card_number)"
            >
              复制
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
  </page-container>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import PageContainer from '@/components/PageContainer.vue'
import request from '@/utils/request'

export default defineComponent({
  components: {
    PageContainer
  },
  setup() {
    const loading = ref(false)
    const tableData = ref([])
    
    const filterForm = ref({
      status: undefined
    })
    
    const pagination = ref({
      current: 1,
      pageSize: 20,
      total: 0,
      showSizeChanger: true,
      showTotal: (total) => `共 ${total} 条记录`
    })

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: 80,
        align: 'center'
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: 120
      },
      {
        title: '银行',
        dataIndex: 'bank_name',
        key: 'bank_name',
        width: 160
      },
      {
        title: '卡号',
        dataIndex: 'bank_card_number',
        key: 'bank_card_number',
        width: 200
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        align: 'center'
      },
      {
        title: '申请时间',
        dataIndex: 'create_time',
        key: 'create_time',
        width: 180
      }
    ]

    // 获取提现列表
    const fetchData = async () => {
      try {
        loading.value = true
        const params = {
          skip: (pagination.value.current - 1) * pagination.value.pageSize,
          limit: pagination.value.pageSize
        }
        
        if (filterForm.value.status) {
          params.status = filterForm.value.status
        }
        
        const res = await request.get('/api/withdraw', { params })
        if (res.code === 200) {
          tableData.value = res.data.items
          pagination.value.total = res.data.total
        }
      } catch (error) {
        console.error('获取提现列表失败:', error)
        message.error('获取提现列表失败')
      } finally {
        loading.value = false
      }
    }

    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        'PENDING': '待审核',
        'APPROVED': '已通过',
        'REJECTED': '已拒绝'
      }
      return statusMap[status] || status
    }

    // 获取状态标签颜色
    const getStatusColor = (status) => {
      const colorMap = {
        'PENDING': 'orange',
        'APPROVED': '#87d068',
        'REJECTED': 'red'
      }
      return colorMap[status] || 'default'
    }

    // 表格变化处理
    const handleTableChange = (pag) => {
      pagination.value.current = pag.current
      pagination.value.pageSize = pag.pageSize
      fetchData()
    }

    // 过滤条件变化
    const handleFilterChange = () => {
      pagination.value.current = 1
    }

    // 搜索按钮点击
    const handleSearch = () => {
      pagination.value.current = 1
      fetchData()
    }

    // 重置按钮点击
    const handleReset = () => {
      filterForm.value.status = undefined
      pagination.value.current = 1
      fetchData()
    }

    // 复制文本功能
    const copyText = (text) => {
      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
          message.success('复制成功')
        }).catch(() => {
          message.error('复制失败')
        })
      } else {
        // 兼容性处理
        const textarea = document.createElement('textarea')
        textarea.value = text
        document.body.appendChild(textarea)
        textarea.select()
        try {
          document.execCommand('copy')
          message.success('复制成功')
        } catch (err) {
          message.error('复制失败')
        }
        document.body.removeChild(textarea)
      }
    }

    onMounted(() => {
      fetchData()
    })

    return {
      loading,
      columns,
      tableData,
      pagination,
      filterForm,
      handleTableChange,
      handleFilterChange,
      handleSearch,
      handleReset,
      getStatusText,
      getStatusColor,
      copyText
    }
  }
})
</script>

<style scoped>
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.table-header h1 {
  margin: 0;
}

.table-filter {
  margin-bottom: 16px;
  padding: 16px 24px;
  background: #fff;
  border-radius: 2px;
}

:deep(.ant-form-item) {
  margin-bottom: 0;
  margin-right: 16px;
}

:deep(.ant-form-item:last-child) {
  margin-right: 0;
}

:deep(.ant-tag) {
  min-width: 60px;
  text-align: center;
}

:deep(.ant-table-cell) {
  .ant-btn-link {
    padding: 0 4px;
    height: 24px;
    margin-left: 8px;
  }
}
</style>