From 539b92a0ed2ab0ae6355a75f48fc7439f78c95c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8?= <frankyang0820@outlook.com>
Date: Mon, 25 May 2026 17:54:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0=E7=BC=BA=E5=A4=B1?=
 =?UTF-8?q?=E7=9A=84=20getWithdrawOrderList=20=E5=AF=BC=E5=87=BA=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/capital/withdraw.ts |  13 ++
 src/components/common/Table.vue     |  11 ++
 src/views/order/withdraw/index.vue  | 195 ++++++++++++++++------------
 src/views/order/withdraw/options.ts |  60 ++++++---
 4 files changed, 183 insertions(+), 96 deletions(-)

diff --git a/src/api/modules/capital/withdraw.ts b/src/api/modules/capital/withdraw.ts
index 527c765..906878c 100644
--- a/src/api/modules/capital/withdraw.ts
+++ b/src/api/modules/capital/withdraw.ts
@@ -60,4 +60,17 @@ export const getWithdrawReviewList = (params: {
 // 提现审核操作（通过/驳回）
 export const withdrawReviewOrder = (params: { id: number; status: number }) => {
   return request.post('/withdraw/withdrawReviewOrder', params)
+}
+
+// 获取取款订单列表
+export const getWithdrawOrderList = (params: {
+  page: number
+  page_size: number
+  order_no?: string
+  start_time?: string
+  end_time?: string
+  status?: number
+  user_name?: string
+}) => {
+  return request.get('/withdraw/withdrawOrderList', params as any)
 }
\ No newline at end of file
diff --git a/src/components/common/Table.vue b/src/components/common/Table.vue
index 0f12c14..5219091 100644
--- a/src/components/common/Table.vue
+++ b/src/components/common/Table.vue
@@ -38,6 +38,9 @@
           <template v-if="column.isNumber" #default="{ row }">
             <span>{{ formatDecimalTruncate(row[column.prop]) }}</span>
           </template>
+          <template v-else-if="column.options && column.prop" #default="{ row }">
+            <span>{{ getOptionLabel(column.options, row[column.prop]) }}</span>
+          </template>
         </el-table-column>
 
         <!-- 具名插槽列 -->
@@ -61,6 +64,13 @@ import { ref, watch } from 'vue'
 import type { TableInstance } from 'element-plus'
 import { formatDecimalTruncate } from '@/utils/formatDecimal'
 
+// 根据选项配置获取标签
+const getOptionLabel = (options: { label: string; value: string | number }[], value: any): string => {
+  if (value === null || value === undefined) return ''
+  const option = options.find((opt) => opt.value === value)
+  return option?.label || String(value)
+}
+
 // 定义表格列配置接口
 interface TableColumn {
   prop?: string
@@ -71,6 +81,7 @@ interface TableColumn {
   slotName?: string // 具名插槽名称
   sortable?: boolean // 是否可排序
   isNumber?: boolean // 是否为数字类型（自动截取小数位）
+  options?: { label: string; value: string | number }[] // 选项配置（用于状态映射等）
 }
 
 // 定义表格组件属性接口
diff --git a/src/views/order/withdraw/index.vue b/src/views/order/withdraw/index.vue
index edd84d9..3960eb6 100644
--- a/src/views/order/withdraw/index.vue
+++ b/src/views/order/withdraw/index.vue
@@ -10,145 +10,179 @@
             </template>
         </OrderWithdrawSearch>
 
-        <!-- 列表区域：当前使用本地 mock 数据，后续可直接替换为接口返回 -->
-        <OrderWithdrawTable :table-data="pagedTableData" :columns="tableColumnsOptions" :highlight-current-row="false" />
+        <!-- 列表区域 -->
+        <OrderWithdrawTable :table-data="pagedTableData" :columns="tableColumnsOptions" :highlight-current-row="false" :loading="loading" />
 
         <!-- 分页区域：保持和订单模块其他页面一致的交互结构 -->
-        <OrderWithdrawPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="filteredTableData.length"
+        <OrderWithdrawPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
             @pagination-change="handlePaginationChange" />
     </div>
 </template>
 
 <script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import dayjs from 'dayjs'
 
 defineOptions({
   name: 'Withdraw'
 })
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import OrderWithdrawSearch from '@/components/common/Search.vue'
 import OrderWithdrawTable from '@/components/common/Table.vue'
 import OrderWithdrawPagination from '@/components/common/Pagination.vue'
 import { exportToExcel } from '@/utils/exportToExcel'
+import { usePageLoading } from '@/composables/useLoading'
 import { search, tableColumns } from './options'
+import { getWithdrawOrderList } from '@/api/modules/capital/withdraw'
 
-// 提现订单数据结构：仅保留当前页面展示和筛选所需字段。
-interface WithdrawOrderItem {
+// 提现订单数据结构（展示用）
+interface WithdrawOrderListItem {
     id: number
-    orderNo: string
-    currency: string
+    user_id: number
+    order_no: string
+    channel_id: number
     amount: string
-    status: 'success' | 'pending' | 'failed'
-    statusText: string
-    withdrawTime: string
-    withdrawAccount: string
+    withdraw_fee: string
+    status: number
+    created_at: string
+    updated_at: string
+    user?: {
+        username?: string
+    }
+    withdraw_currency?: {
+        symbol?: string
+    }
+    real_currency?: {
+        symbol?: string
+    }
+    channel?: {
+        name?: string
+    }
 }
 
-// 搜索表单结构：与配置项保持一致，便于后续替换为真实查询参数。
+interface WithdrawOrderVo {
+    id: number
+    user_id: number
+    order_no: string
+    channel_id: number
+    amount: string
+    withdraw_fee: string
+    status: number
+    created_at: string
+    updated_at: string
+    // 映射嵌套字段到扁平化字段
+    user_name: string
+    withdraw_currency_symbol: string
+    real_currency_symbol: string
+    channel_name: string
+}
+
+// 搜索表单结构
 interface SearchFormData {
-    orderNo: string
+    user_name: string
     startTime: string
     endTime: string
 }
 
-// 搜索项配置。
+// 搜索项配置
 const searchOptions = ref(search)
 
-// 搜索表单：当前由公共 Search 组件双向绑定。
+// 搜索表单
 const createDefaultSearchForm = (): SearchFormData => ({
-    orderNo: '',
-    startTime: '',
-    endTime: '',
+    user_name: '',
+    startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+    endTime: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
 })
 
 const searchForm = ref<SearchFormData>(createDefaultSearchForm())
 
-// mock 列表数据：用于还原提现订单页面的初始展示效果。
-const tableData = ref<WithdrawOrderItem[]>([
-    {
-        id: 1,
-        orderNo: '1111111',
-        currency: 'USD',
-        amount: 'USD 10.000000',
-        status: 'success',
-        statusText: '成功',
-        withdrawTime: '2026.01.30 10:05:15',
-        withdrawAccount: '123',
-    },
-    {
-        id: 2,
-        orderNo: 'WD202604250002',
-        currency: 'USDT',
-        amount: 'USDT 520.000000',
-        status: 'pending',
-        statusText: '待处理',
-        withdrawTime: '2026.02.18 08:20:11',
-        withdrawAccount: 'TRC20-9001',
-    },
-    {
-        id: 3,
-        orderNo: 'WD202604250003',
-        currency: 'CNY',
-        amount: 'CNY 1800.000000',
-        status: 'failed',
-        statusText: '失败',
-        withdrawTime: '2026.03.06 14:30:56',
-        withdrawAccount: 'BANK-3245',
-    },
-])
+// 列表数据
+const tableData = ref<WithdrawOrderVo[]>([])
 
-// 表格列配置。
+// 表格列配置
 const tableColumnsOptions = ref(tableColumns)
 
-// 分页状态：当前在前端完成分页切片。
+// 分页状态
 const currentPage = ref(1)
 const pageSize = ref(10)
+const total = ref(0)
 
-// 根据搜索条件过滤列表：先做前端筛选，后续接接口时可直接改成参数查询。
-const filteredTableData = computed(() => {
-    return tableData.value.filter((item) => {
-        const matchOrderNo = !searchForm.value.orderNo || item.orderNo.includes(searchForm.value.orderNo)
+// 加载状态
+const { loading, startLoading, stopLoading } = usePageLoading()
 
-        const itemDate = item.withdrawTime.slice(0, 10).replace(/\./g, '-')
-        const matchStartTime = !searchForm.value.startTime || itemDate >= searchForm.value.startTime
-        const matchEndTime = !searchForm.value.endTime || itemDate <= searchForm.value.endTime
-
-        return matchOrderNo && matchStartTime && matchEndTime
-    })
-})
-
-// 当前页数据：根据过滤后的结果再做分页切片。
-const pagedTableData = computed(() => {
-    const start = (currentPage.value - 1) * pageSize.value
-    const end = start + pageSize.value
-    return filteredTableData.value.slice(start, end)
-})
-
-// 搜索：当前页回到第一页，便于立即看到筛选结果。
-const handleSearch = () => {
-    currentPage.value = 1
+// 将接口数据映射为展示用数据
+const mapToVo = (item: WithdrawOrderListItem): WithdrawOrderVo => {
+    return {
+        ...item,
+        user_name: item.user?.username || '',
+        withdraw_currency_symbol: item.withdraw_currency?.symbol || '',
+        real_currency_symbol: item.real_currency?.symbol || '',
+        channel_name: item.channel?.name || '',
+        // 状态字段保持原值，表格列配置中的 options 会自动映射标签
+    }
 }
 
-// 重置：恢复默认搜索条件并返回第一页。
+// 获取列表数据
+const fetchList = async () => {
+    startLoading()
+    try {
+        const data = await getWithdrawOrderList({
+            page: currentPage.value,
+            page_size: pageSize.value,
+            start_time: searchForm.value.startTime || undefined,
+            end_time: searchForm.value.endTime || undefined,
+            user_name: searchForm.value.user_name || undefined,
+        })
+        tableData.value = ((data as any)?.data || []).map(mapToVo)
+        // 如果接口返回总数有 total 字段，可以这里设置
+        total.value = (data as any)?.total || tableData.value.length
+        stopLoading()
+    } catch (error) {
+        stopLoading()
+        console.error('获取提现订单列表失败', error)
+        // ElMessage.error('获取提现订单列表失败')
+    }
+}
+
+// 搜索
+const handleSearch = () => {
+    currentPage.value = 1
+    fetchList()
+}
+
+// 重置
 const handleReset = () => {
     searchForm.value = createDefaultSearchForm()
     currentPage.value = 1
+    fetchList()
 }
 
-// 导出：导出当前筛选后的全部列表数据，而不是仅当前页。
+// 导出
 const handleExport = async () => {
     await exportToExcel({
-        tableData: filteredTableData.value,
+        tableData: tableData.value,
         columns: tableColumnsOptions.value,
         title: '导出提现订单',
         defaultFileNamePrefix: '提现订单',
     })
 }
 
-// 分页切换：同步页码和每页条数。
+// 分页切换
 const handlePaginationChange = (page: { currentPage: number; pageSize: number }) => {
     currentPage.value = page.currentPage
     pageSize.value = page.pageSize
+    fetchList()
 }
+
+// 当前页数据
+const pagedTableData = computed(() => {
+    return tableData.value
+})
+
+// 页面加载时获取数据
+onMounted(() => {
+    fetchList()
+})
 </script>
 
 <style scoped lang="scss">
@@ -178,3 +212,4 @@ const handlePaginationChange = (page: { currentPage: number; pageSize: number })
     }
 }
 </style>
+
diff --git a/src/views/order/withdraw/options.ts b/src/views/order/withdraw/options.ts
index 1245400..0f69ce8 100644
--- a/src/views/order/withdraw/options.ts
+++ b/src/views/order/withdraw/options.ts
@@ -1,38 +1,66 @@
 // 提现订单搜索项：按截图保留订单号、开始时间、结束时间。
 export const search = [
     {
-        prop: 'orderNo',
-        label: '订单号',
+        prop: 'user_name',
+        label: '账户持有人',
         type: 'input' as const,
-        placeholder: '请输入流水号',
-        width: '210px',
+        placeholder: '请输入账户持有人',
+        width: '210',
     },
     {
         prop: 'startTime',
         label: '开始时间',
         type: 'date' as const,
-        dateType: 'date' as const,
-        valueFormat: 'YYYY-MM-DD',
+        dateType: 'datetime' as const,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
         placeholder: '请选择开始时间',
-        width: '150px',
+        width: '200',
     },
     {
         prop: 'endTime',
         label: '结束时间',
         type: 'date' as const,
-        dateType: 'date' as const,
-        valueFormat: 'YYYY-MM-DD',
+        dateType: 'datetime' as const,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
         placeholder: '请选择结束时间',
-        width: '150px',
+        width: '200',
     },
 ]
 
 // 提现订单表格列：对应截图中的列表表头。
 export const tableColumns = [
-    { prop: 'orderNo', label: '订单号', align: 'center' as const },
-    { prop: 'currency', label: '提现币种', align: 'center' as const },
-    { prop: 'amount', label: '金额', align: 'center' as const, isNumber: true },
-    { prop: 'statusText', label: '状态', align: 'center' as const },
-    { prop: 'withdrawTime', label: '提现时间', align: 'center' as const },
-    { prop: 'withdrawAccount', label: '提现账号', align: 'center' as const },
+    { prop: 'trade_id', label: '订单号', align: 'center' as const, width: 200 },
+    { prop: 'user_name', label: '账户持有人', width: 160, align: 'center' as const },
+    { prop: 'withdraw_currency_symbol', label: '取款币种', align: 'center' as const, width: 100 },
+    { prop: 'withdraw_amount', label: '取款金额', align: 'center' as const, width: 120, isNumber: true },
+    { prop: 'real_currency_symbol', label: '到账币种', align: 'center' as const, width: 100 },
+    { prop: 'real_amount', label: '到账金额', align: 'center' as const, width: 120, isNumber: true },
+    { prop: 'rate', label: '汇率', align: 'center' as const, width: 100 },
+    { prop: 'channel_name', label: '渠道', align: 'center' as const, width: 140 },
+    { prop: 'withdraw_service_fee', label: '服务费', align: 'center' as const, width: 100, isNumber: true },
+    { prop: 'withdraw_head_fee', label: '总部手续费', align: 'center' as const, width: 120, isNumber: true },
+    { prop: 'withdraw_fee_handle', label: '代理手续费', align: 'center' as const, width: 120, isNumber: true },
+    { prop: 'withdraw_point_diff', label: '点差', align: 'center' as const, width: 100, isNumber: true },
+    { prop: 'withdraw_risk_fee', label: '风控费', width: 140, align: 'center' as const, isNumber: true },
+    { prop: 'withdraw_address', label: '提现地址', width: 140, align: 'center' as const },
+    {
+        prop: 'status', label: '状态', align: 'center' as const, width: 140, options: [{
+            label: '未审核',
+            value: 1
+        },
+        {
+            label: '审核成功',
+            value: 2
+        },
+        {
+            label: '已提交',
+            value: 3
+        },
+        {
+            label: '驳回',
+            value: 4
+        },]
+    },
+    { prop: 'created_at', label: '申请时间', width: 240, align: 'center' as const }
 ]
+