更改样式

src/utils/api.js

@@ -188,7 +188,7 @@ const api = {
 
   beans: {
     getStats: () => request.get('/beans/stats'),
-    getHistory: (params) => request.get('/beans/history', { params })
+    getHistory: (params) => request.get('/transfers/history', { params }),
   },
   
   // 文件上传

src/views/Beans.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="beans-container">
     <div class="header">
-      <h2>融豆管理</h2>
+      <h2>转账管理</h2>
     </div>
 
-    <!-- 融豆统计卡片 -->
+    <!-- 转账统计卡片 -->
     <div class="stats-cards">
       <el-card class="stat-card">
         <div class="stat-content">
-          <div class="stat-value">{{ stats.totalBeans || 0 }}</div>
-          <div class="stat-label">总融豆</div>
+          <div class="stat-value">{{ stats.totalTransfers || 0 }}</div>
+          <div class="stat-label">总交易数</div>
         </div>
         <el-icon class="stat-icon" color="#409eff"><Coin /></el-icon>
       </el-card>
@@ -29,8 +29,8 @@
       </el-card>
       <el-card class="stat-card">
         <div class="stat-content">
-          <div class="stat-value">{{ stats.activeUsers || 0 }}</div>
-          <div class="stat-label">活跃用户</div>
+          <div class="stat-value">{{ stats.completedTransfers || 0 }}</div>
+          <div class="stat-label">已完成交易</div>
         </div>
         <el-icon class="stat-icon" color="#f56c6c"><User /></el-icon>
       </el-card>
@@ -46,23 +46,13 @@
             @keyup.enter="loadBeansHistory"
           />
         </el-form-item>
-        <el-form-item label="融豆类型">
+        <el-form-item label="转账类型">
           <el-select v-model="filters.type" placeholder="全部类型" clearable style="display: inline-block; width: 150px;">
             <el-option label="全部类型" value="" selected />
-            <el-option label="注册奖励" value="register" />
-            <el-option label="商品兑换" value="purchase" />
-            <el-option label="订单退款" value="refund" />
-            <el-option label="转账确认收款奖励融豆" value="transfer_received" />
-            <el-option label="订单完成奖励" value="order_completed" />
-            <el-option label="融豆获得" value="earn" />
-            <el-option label="融豆消费" value="spend" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="融豆变化">
-          <el-select v-model="filters.change" placeholder="全部变化" clearable style="display: inline-block; width: 150px;">
-            <el-option label="全部变化" value="" selected />
-            <el-option label="增加" value="positive" />
-            <el-option label="减少" value="negative" />
+            <el-option label="用户转系统" value="user_to_system" />
+            <el-option label="用户转代理" value="user_to_agent" />
+            <el-option label="用户转分销" value="user_to_operated" />
+            <el-option label="用户转直营" value="user_to_directly_operated" />
           </el-select>
         </el-form-item>
         <el-form-item label="时间范围">
@@ -85,26 +75,34 @@
 
     <el-table :data="beansHistory" v-loading="loading" stripe>
       <el-table-column prop="id" label="ID" width="80" />
-      <el-table-column prop="username" label="用户" width="120" />
-      <el-table-column prop="type" label="类型" width="120">
+      <el-table-column label="转出用户" width="120">
         <template #default="{ row }">
-          <el-tag :type="getTypeColor(row.type)">{{ getTypeText(row.type) }}</el-tag>
+          <div>
+            <div>{{ row.from_username }}</div>
+            <div class="user-real-name">{{ row.from_real_name }}</div>
+          </div>
         </template>
       </el-table-column>
-      <el-table-column prop="beans" label="融豆变化" width="120">
+      <el-table-column label="转入用户" width="120">
         <template #default="{ row }">
-          <span :class="row.beans > 0 ? 'beans-positive' : 'beans-negative'">
-            {{ row.beans > 0 ? '+' : '' }}{{ row.beans }}
-          </span>
+          <div>
+            <div>{{ row.to_username }}</div>
+            <div class="user-real-name">{{ row.to_real_name }}</div>
+          </div>
         </template>
       </el-table-column>
-      <el-table-column prop="balance_after" label="变化后余额" width="120">
+      <el-table-column prop="transfer_type" label="转账类型" width="140">
         <template #default="{ row }">
-          <span class="beans-text">{{ row.balance_after }}</span>
+          <el-tag :type="getTransferTypeColor(row.transfer_type)">{{ getTransferTypeText(row.transfer_type) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="amount" label="金额" width="120">
+        <template #default="{ row }">
+          <span class="amount-text">¥{{ row.amount }}</span>
         </template>
       </el-table-column>
       <el-table-column prop="description" label="描述" min-width="200" />
-      <el-table-column prop="created_at" label="时间" width="180">
+      <el-table-column prop="created_at" label="创建时间" width="180">
         <template #default="{ row }">
           {{ formatDate(row.created_at) }}
         </template>
@@ -141,7 +139,6 @@ const stats = ref({})
 const filters = reactive({
   username: '',
   type: '', // 默认显示全部类型
-  change: '', // 默认显示全部变化
   dateRange: null
 })
 
@@ -171,11 +168,7 @@ const loadBeansHistory = async () => {
       page: pagination.page,
       limit: pagination.limit,
       username: filters.username,
-      type: filters.type
-    }
-    
-    if (filters.change) {
-      params.change = filters.change
+      transfer_type: filters.type
     }
     
     if (filters.dateRange && filters.dateRange.length === 2) {
@@ -184,37 +177,12 @@ const loadBeansHistory = async () => {
     }
     
     const {data} = await api.beans.getHistory(params)
-    beansHistory.value = data.data.history
-    pagination.total = data.data.total
+    beansHistory.value = data.data.transfers || []
+    pagination.total = data.data.pagination?.total || 0
   } catch (error) {
-    beansHistory.value = [{
-      id: 1,
-      username: 'test1',
-      type: 'register',
-      beans: 100,
-      balance_after: 100,
-      description: '注册奖励',
-      created_at: '2025-09-09 00:00:00'
-    },
-    {
-      id: 2,
-      username: 'test2',
-      type: 'purchase',
-      beans: -100,
-      balance_after: 0,
-      description: '商品兑换',
-      created_at: '2025-09-09 00:00:00'
-    },
-    {
-      id: 3,
-      username: 'test3',
-      type: 'refund',
-      beans: 100,
-      balance_after: 100,
-      description: '订单退款',
-      created_at: '2025-09-09 00:00:00'
-    }]
-    ElMessage.error('加载融豆历史失败')
+    console.error('加载转账历史失败:', error)
+    beansHistory.value = []
+    ElMessage.error('加载转账历史失败')
   } finally {
     loading.value = false
   }
@@ -227,7 +195,6 @@ const resetFilters = () => {
   Object.assign(filters, {
     username: '',
     type: '',
-    change: '',
     dateRange: null
   })
   pagination.page = 1
@@ -236,30 +203,24 @@ const resetFilters = () => {
 
 
 
-// 获取类型颜色
-const getTypeColor = (type) => {
+// 获取转账类型颜色
+const getTransferTypeColor = (type) => {
   const colors = {
-    register: 'success',
-    purchase: 'danger',
-    refund: 'info',
-    transfer_received: 'success',
-    order_completed: 'success',
-    earn: 'success',
-    spend: 'danger'
+    user_to_system: 'warning',
+    user_to_agent: 'success',
+    user_to_operated: 'info',
+    user_to_directly_operated: 'primary'
   }
   return colors[type] || 'info'
 }
 
-// 获取类型文本
-const getTypeText = (type) => {
+// 获取转账类型文本
+const getTransferTypeText = (type) => {
   const texts = {
-    register: '注册奖励',
-    purchase: '商品兑换',
-    refund: '订单退款',
-    transfer_received: '转账确认收款奖励融豆',
-    order_completed: '订单完成奖励',
-    earn: '融豆获得',
-    spend: '融豆消费'
+    user_to_system: '用户转系统',
+    user_to_agent: '用户转代理',
+    user_to_operated: '用户转分销',
+    user_to_directly_operated: '用户转直营'
   }
   return texts[type] || type
 }
@@ -278,9 +239,6 @@ onMounted(() => {
     if (filters.type === '') {
       filters.type = ''
     }
-    if (filters.change === '') {
-      filters.change = ''
-    }
   })
 })
 </script>
@@ -357,19 +315,16 @@ onMounted(() => {
   margin: 0;
 }
 
-.beans-text {
+.user-real-name {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 2px;
+}
+
+.amount-text {
   color: #e6a23c;
   font-weight: 500;
-}
-
-.beans-positive {
-  color: #67c23a;
-  font-weight: 500;
-}
-
-.beans-negative {
-  color: #f56c6c;
-  font-weight: 500;
+  font-size: 14px;
 }
 
 .pagination {