增加 提现列表 页面

页面优化调整。

src/layouts/BasicLayout.vue

@@ -27,6 +27,26 @@
           </a-menu-item>
         </a-sub-menu>
         
+        <a-sub-menu key="order">
+          <template #icon>
+            <shopping-outlined />
+          </template>
+          <template #title>订单管理</template>
+          <a-menu-item key="order-delivery">
+            <router-link to="/order/delivery">配送订单</router-link>
+          </a-menu-item>
+        </a-sub-menu>
+
+        <a-sub-menu key="finance">
+          <template #icon>
+            <money-collect-outlined />
+          </template>
+          <template #title>财务管理</template>
+          <a-menu-item key="finance-withdraw">
+            <router-link to="/finance/withdraw">提现管理</router-link>
+          </a-menu-item>
+        </a-sub-menu>
+
         <a-sub-menu key="community">
           <template #icon>
             <home-outlined />
@@ -43,16 +63,6 @@
           </a-menu-item>
         </a-sub-menu>
 
-        <a-sub-menu key="order">
-          <template #icon>
-            <shopping-outlined />
-          </template>
-          <template #title>订单管理</template>
-          <a-menu-item key="order-delivery">
-            <router-link to="/order/delivery">配送订单</router-link>
-          </a-menu-item>
-        </a-sub-menu>
-
         <a-sub-menu key="merchant">
           <template #icon>
             <shop-outlined />
@@ -131,6 +141,7 @@ import {
   ShopOutlined,
   SettingOutlined,
   ShoppingOutlined,
+  MoneyCollectOutlined
 } from '@ant-design/icons-vue'
 import { useRouter } from 'vue-router'
 
@@ -147,12 +158,13 @@ export default defineComponent({
     ShopOutlined,
     SettingOutlined,
     ShoppingOutlined,
+    MoneyCollectOutlined
   },
   setup() {
     const router = useRouter()
     const collapsed = ref(false)
     const selectedKeys = ref(['dashboard'])
-    const openKeys = ref(['user', 'community', 'merchant', 'system'])
+    const openKeys = ref([])
     
     const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))
 
@@ -187,6 +199,30 @@ export default defineComponent({
           }
         ]
       },
+      {
+        key: 'order',
+        icon: () => h(ShoppingOutlined),
+        title: '订单管理',
+        children: [
+          {
+            key: 'order-delivery',
+            title: '配送订单',
+            path: '/order/delivery'
+          }
+        ]
+      },
+      {
+        key: 'finance',
+        icon: () => h(MoneyCollectOutlined),
+        title: '财务管理',
+        children: [
+          {
+            key: 'finance-withdraw',
+            title: '提现管理',
+            path: '/finance/withdraw'
+          }
+        ]
+      },
       {
         key: 'community',
         icon: () => h(HomeOutlined),
@@ -209,18 +245,6 @@ export default defineComponent({
           }
         ]
       },
-      {
-        key: 'order',
-        icon: () => h(ShoppingOutlined),
-        title: '订单管理',
-        children: [
-          {
-            key: 'order-delivery',
-            title: '配送订单',
-            path: '/order/delivery'
-          }
-        ]
-      },
       {
         key: 'merchant',
         icon: () => h(ShopOutlined),
@@ -254,7 +278,7 @@ export default defineComponent({
             path: '/system/logs'
           }
         ]
-      }
+      },
     ])
 
     return {

src/router/index.js

@@ -89,6 +89,17 @@ const routes = [
         meta: { title: '配送订单' }
       }
     ]
+  },
+  {
+    path: '/finance',
+    component: BasicLayout,
+    children: [
+      {
+        path: 'withdraw',
+        component: () => import('@/views/finance/WithdrawList.vue'),
+        meta: { title: '提现管理' }
+      }
+    ]
   }
 ]
 

src/views/dashboard/Dashboard.vue

@@ -1,81 +1,37 @@
 <template>
   <page-container>
-    <h2>欢迎使用后台管理系统</h2>
+    <div class="dashboard">
-    <p class="time">{{ currentTime }}</p>
+      <div class="welcome-card">
-
+        <h1>欢迎使用蜂快运营管理系统</h1>
-    <div class="stats-section">
+        <p>{{ greeting }}</p>
-      <div class="stat-item">
-        <div class="stat-label">小区总数</div>
-        <div class="stat-value">{{ stats.communityCount }}</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-label">楼栋总数</div>
-        <div class="stat-value">{{ stats.buildingCount }}</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-label">用户总数</div>
-        <div class="stat-value">{{ stats.userCount }}</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-label">今日活跃</div>
-        <div class="stat-value">{{ stats.activeCount }}</div>
       </div>
     </div>
   </page-container>
 </template>
 
 <script>
-import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
+import { defineComponent, computed } from 'vue'
-import dayjs from 'dayjs'
 import PageContainer from '@/components/PageContainer.vue'
 
 export default defineComponent({
+  name: 'Dashboard',
   components: {
     PageContainer
   },
   setup() {
-    const currentTime = ref('')
+    const greeting = computed(() => {
-    const stats = ref({
+      const hour = new Date().getHours()
-      communityCount: 0,
+      if (hour < 6) return '夜深了，请注意休息'
-      buildingCount: 0,
+      if (hour < 9) return '早上好'
-      userCount: 0,
+      if (hour < 12) return '上午好'
-      activeCount: 0
+      if (hour < 14) return '中午好'
-    })
+      if (hour < 17) return '下午好'
-
+      if (hour < 19) return '傍晚好'
-    // 更新时间
+      return '晚上好'
-    const updateTime = () => {
-      currentTime.value = dayjs().format('YYYY年MM月DD日 HH:mm:ss')
-    }
-
-    // 定时器
-    let timer = null
-
-    onMounted(() => {
-      // 初始化时间
-      updateTime()
-      // 每秒更新时间
-      timer = setInterval(updateTime, 1000)
-
-      // TODO: 这里可以添加获取统计数据的API调用
-      // 目前使用模拟数据
-      stats.value = {
-        communityCount: 25,
-        buildingCount: 168,
-        userCount: 1280,
-        activeCount: 368
-      }
-    })
-
-    onUnmounted(() => {
-      // 清除定时器
-      if (timer) {
-        clearInterval(timer)
-      }
     })
 
     return {
-      currentTime,
+      greeting
-      stats
     }
   }
 })
@@ -83,45 +39,24 @@ export default defineComponent({
 
 <style scoped>
 .dashboard {
-  /* 移除 background、padding、margin 等样式 */
+  padding: 24px;
-}
-
-.dashboard h2 {
-  margin: 0;
-  font-size: 20px;
-  font-weight: normal;
-  color: #000;
-}
-
-.time {
-  margin: 8px 0 24px;
-  font-size: 13px;
-  color: #999;
-}
-
-.stats-section {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
   background: #fff;
+  min-height: 400px;
 }
 
-.stat-item {
+.welcome-card {
-  background: #fff;
+  text-align: center;
-  padding: 20px;
+  padding: 48px 0;
-  border: 1px solid #eee;
-  border-radius: 2px;
 }
 
-.stat-label {
+.welcome-card h1 {
-  font-size: 14px;
+  font-size: 28px;
-  color: #666;
-  margin-bottom: 8px;
-}
-
-.stat-value {
-  font-size: 24px;
   color: #1890ff;
-  font-weight: normal;
+  margin-bottom: 16px;
+}
+
+.welcome-card p {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.65);
 }
 </style> 

src/views/finance/WithdrawList.vue

@@ -0,0 +1,316 @@
+<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>