update

src/components/OrderList.vue

@@ -1,5 +1,60 @@
 <template>
   <div class="order-list-container">
+    <!-- 仪表盘统计信息 -->
+    <div class="dashboard-container" v-loading="dashboardLoading">
+      <el-row :gutter="20">
+        <!-- 今日数据总览 -->
+        <el-col :span="24">
+          <div class="today-overview">
+            <div class="overview-title">
+              <i class="el-icon-date"></i> 今日业务概览
+              <el-tag size="small" type="success" effect="dark">实时数据</el-tag>
+            </div>
+            <el-row :gutter="20" class="overview-data">
+              <el-col :xs="12" :sm="6" :md="4">
+                <div class="today-data-item">
+                  <div class="today-data-value highlight-primary" :title="dashboardData.today_order_count || 0">
+                    {{ dashboardData.today_order_count || 0 }}
+                  </div>
+                  <div class="today-data-label">今日订单数</div>
+                </div>
+              </el-col>
+              <el-col :xs="12" :sm="6" :md="4">
+                <div class="today-data-item">
+                  <div class="today-data-value highlight-primary" :title="formatAmount(dashboardData.today_order_amount)">
+                    ¥{{ formatAmount(dashboardData.today_order_amount) }}
+                  </div>
+                  <div class="today-data-label">今日订单金额</div>
+                </div>
+              </el-col>
+              <el-col :xs="12" :sm="6" :md="4">
+                <div class="today-data-item">
+                  <div class="today-data-value highlight-success" :title="dashboardData.order_completed_count || 0">
+                    {{ dashboardData.order_completed_count || 0 }}
+                  </div>
+                  <div class="today-data-label">已完成订单</div>
+                </div>
+              </el-col>
+              <el-col :xs="12" :sm="6" :md="4">
+                <div class="today-data-item">
+                  <div class="today-data-value highlight-warning" :title="formatAmount(dashboardData.unpaid_amount)">
+                    ¥{{ formatAmount(dashboardData.unpaid_amount) }}
+                  </div>
+                  <div class="today-data-label">未支付金额</div>
+                </div>
+              </el-col>
+              <el-col :xs="12" :sm="6" :md="4">
+                <div class="today-data-item">
+                  <div class="today-data-value highlight-warning">{{ dashboardData.order_unpaid_count || 0 }}</div>
+                  <div class="today-data-label">未支付订单数</div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    
     <!-- 搜索栏 -->
     <div class="search-container">
       <el-form :inline="true" :model="searchForm" class="search-form">
@@ -9,20 +64,20 @@
             placeholder="请输入订单号" 
             clearable
             @keyup.enter="handleSearch"
+            :prefix-icon="Search"
           />
         </el-form-item>
         <el-form-item class="search-form-item">
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
-          <el-button @click="handleReset">重置</el-button>
+          <el-button @click="handleReset" :icon="RefreshRight">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     
     <!-- 状态筛选标签 -->
     <div class="status-filter">
-      <span class="filter-label">订单状态：</span>
       <div class="status-buttons">
-        <el-radio-group v-model="searchForm.status" @change="handleStatusChange" size="small">
+        <el-radio-group v-model="searchForm.status" @change="handleStatusChange" size="default">
           <el-radio-button label="">全部</el-radio-button>
           <el-radio-button 
             v-for="(value, key) in statusOptions" 
@@ -54,7 +109,10 @@
           border
           style="width: 100%"
           :max-height="tableHeight"
-          class="order-table">
+          class="order-table"
+          :row-class-name="tableRowClassName"
+          highlight-current-row
+          stripe>
           
           <!-- 订单号 -->
           <el-table-column prop="orderid" label="订单号" width="160" fixed="left">
@@ -108,7 +166,11 @@
           <!-- 订单状态 -->
           <el-table-column label="订单状态" width="100" align="center">
             <template #default="scope">
-              <el-tag :type="getStatusType(scope.row.status)">
+              <el-tag 
+                :type="getStatusType(scope.row.status)" 
+                effect="dark" 
+                size="small"
+                class="status-tag">
                 {{ getStatusText(scope.row.status) }}
               </el-tag>
             </template>
@@ -137,14 +199,21 @@
           <!-- 订单金额 -->
           <el-table-column label="订单金额" width="100" align="right">
             <template #default="scope">
-              ¥{{ scope.row.original_amount.toFixed(2) }}
+              <span class="amount-value">¥{{ scope.row.original_amount.toFixed(2) }}</span>
+            </template>
+          </el-table-column>
+          
+          <!-- 加价金额 -->
+          <el-table-column label="加价金额" width="100" align="right">
+            <template #default="scope">
+              <span class="amount-value additional-fee">¥{{ scope.row.additional_fee_amount ? scope.row.additional_fee_amount.toFixed(2) : '0.00' }}</span>
             </template>
           </el-table-column>
           
           <!-- 支付金额 -->
           <el-table-column label="支付金额" width="100" align="right">
             <template #default="scope">
-              ¥{{ scope.row.final_amount.toFixed(2) }}
+              <span class="amount-value">¥{{ scope.row.final_amount.toFixed(2) }}</span>
             </template>
           </el-table-column>
           
@@ -160,6 +229,7 @@
                   preview-teleported
                   :initial-index="0"
                   :z-index="10000"
+                  class="order-image"
                 >
                   <template #error>
                     <div class="image-error">
@@ -198,7 +268,7 @@
 <script>
 import { ref, onMounted, reactive, computed, onBeforeUnmount } from 'vue'
 import { ElMessage } from 'element-plus'
-import { PictureFilled } from '@element-plus/icons-vue'
+import { PictureFilled, Search, RefreshRight } from '@element-plus/icons-vue'
 import api from '../services/api'
 
 // 订单状态选项
@@ -214,7 +284,9 @@ const statusOptions = {
 export default {
   name: 'OrderList',
   components: {
-    PictureFilled
+    PictureFilled,
+    Search,
+    RefreshRight
   },
   setup() {
     const loading = ref(false)
@@ -224,6 +296,17 @@ export default {
     const pageSize = ref(10)
     const tableHeight = ref('auto')
     
+    // 仪表盘数据
+    const dashboardLoading = ref(false)
+    const dashboardData = ref({
+      order_completed_count: 0,
+      unpaid_amount: 0,
+      today_order_count: 0,
+      yesterday_order_count: 0,
+      today_order_amount: 0,
+      yesterday_order_amount: 0
+    })
+    
     // 检测是否为移动设备
     const isMobile = ref(window.innerWidth < 768)
     
@@ -279,6 +362,7 @@ export default {
       window.addEventListener('resize', handleResize)
       setTableHeight()
       fetchOrders()
+      fetchDashboardData()
     })
     
     // 移除事件监听
@@ -292,6 +376,29 @@ export default {
       status: ''
     })
     
+    // 获取仪表盘数据
+    const fetchDashboardData = async () => {
+      dashboardLoading.value = true
+      try {
+        const response = await api.getDashboardData()
+        if (response.data.code === 200) {
+          dashboardData.value = response.data.data
+        } else {
+          ElMessage.error(response.data.message || '获取仪表盘数据失败')
+        }
+      } catch (error) {
+        console.error('获取仪表盘数据出错:', error)
+        ElMessage.error('网络错误，请稍后重试')
+      } finally {
+        dashboardLoading.value = false
+      }
+    }
+    
+    // 格式化金额，保留两位小数
+    const formatAmount = (amount) => {
+      return (amount || 0).toFixed(2)
+    }
+    
     // 获取订单列表数据
     const fetchOrders = async () => {
       loading.value = true
@@ -390,6 +497,14 @@ export default {
       fetchOrders()
     }
     
+    // 表格行类名
+    const tableRowClassName = ({ row }) => {
+      if (row.status === 'CANCELLED') {
+        return 'cancelled-row'
+      }
+      return ''
+    }
+    
     return {
       loading,
       orderList,
@@ -408,7 +523,11 @@ export default {
       handleStatusChange,
       handleSizeChange,
       handleCurrentChange,
-      getDeliveryTimeStatus
+      getDeliveryTimeStatus,
+      dashboardLoading,
+      dashboardData,
+      formatAmount,
+      tableRowClassName
     }
   }
 }
@@ -419,6 +538,177 @@ export default {
   padding: 20px;
   max-width: 100%;
   overflow: hidden;
+  /* 确保内容可选择 */
+  user-select: text;
+}
+
+/* 仪表盘样式 */
+.dashboard-container {
+  margin-bottom: 20px;
+}
+
+/* 今日概览样式 */
+.today-overview {
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4f4ff 100%);
+  border-radius: 8px;
+  padding: 15px 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  /* 确保内容可选择 */
+  user-select: text;
+}
+
+.overview-title {
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 15px;
+  border-bottom: 1px solid rgba(64, 158, 255, 0.2);
+  padding-bottom: 10px;
+}
+
+.overview-title i {
+  margin-right: 8px;
+  color: #409eff;
+}
+
+.overview-title .el-tag {
+  margin-left: 10px;
+}
+
+.overview-data {
+  margin-top: 10px;
+}
+
+.today-data-item {
+  text-align: center;
+  padding: 15px;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  transition: all 0.3s;
+  height: 100%;
+}
+
+.today-data-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+.today-data-value {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.today-data-label {
+  font-size: 14px;
+  color: #606266;
+}
+
+.dashboard-card {
+  margin-bottom: 20px;
+  transition: all 0.3s;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.orders-card {
+  border-top: 4px solid #67c23a;
+}
+
+.amount-card {
+  border-top: 4px solid #e6a23c;
+}
+
+.dashboard-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: bold;
+  font-size: 16px;
+  background-color: #f8f9fa;
+  padding: 10px 15px;
+}
+
+.dashboard-data {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 15px 5px;
+}
+
+.data-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 15px;
+  border-bottom: 1px dashed #ebeef5;
+  padding-bottom: 10px;
+}
+
+.data-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.data-label {
+  color: #606266;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.data-value {
+  font-size: 22px;
+  font-weight: bold;
+  color: #303133;
+  display: flex;
+  align-items: center;
+}
+
+.data-unit {
+  font-size: 14px;
+  margin-left: 5px;
+  color: #909399;
+  font-weight: normal;
+}
+
+.amount-prefix {
+  font-size: 16px;
+  margin-right: 2px;
+  font-weight: normal;
+}
+
+/* 高亮样式 */
+.highlight-success {
+  color: #67c23a;
+  font-size: 28px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.highlight-primary {
+  color: #409eff;
+  font-size: 28px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.highlight-info {
+  color: #909399;
+  font-size: 24px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.highlight-warning {
+  color: #e6a23c;
+  font-size: 24px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 /* 配送时段状态样式 */
@@ -469,7 +759,8 @@ export default {
   margin-bottom: 15px;
   background-color: #f5f7fa;
   padding: 15px;
-  border-radius: 4px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
 }
 
 .search-form {
@@ -483,26 +774,92 @@ export default {
   margin-bottom: 0 !important;
 }
 
+:deep(.el-input__inner) {
+  border-radius: 4px;
+}
+
+:deep(.el-button) {
+  border-radius: 4px;
+}
+
 .status-filter {
-  margin-bottom: 20px;
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  align-items: flex-start;
+  margin: 16px 0;
+  background-color: #f8f9fa;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .filter-label {
-  margin-right: 10px;
+  font-size: 16px;
-  margin-bottom: 8px;
+  font-weight: 500;
-  font-weight: bold;
+  color: #303133;
-  display: block;
+  margin-right: 16px;
 }
 
 .status-buttons {
-  width: 100%;
+  flex: 1;
   overflow-x: auto;
   white-space: nowrap;
-  padding-bottom: 10px;
+  padding-bottom: 5px;
-  -webkit-overflow-scrolling: touch;
+}
+
+:deep(.el-radio-group) {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+:deep(.el-radio-button) {
+  margin-bottom: 6px;
+}
+
+:deep(.el-radio-button__inner) {
+  padding: 10px 20px;
+  font-size: 14px;
+  transition: all 0.3s;
+  border-color: #dcdfe6;
+}
+
+:deep(.el-radio-button:first-child .el-radio-button__inner) {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+:deep(.el-radio-button:last-child .el-radio-button__inner) {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+  background-color: var(--el-color-primary);
+  box-shadow: 0 3px 10px rgba(64, 158, 255, 0.3);
+  font-weight: bold;
+}
+
+:deep(.el-radio-button__inner:hover) {
+  color: var(--el-color-primary);
+  background-color: #ecf5ff;
+  z-index: 1;
+}
+
+/* 移动端适配 */
+@media screen and (max-width: 768px) {
+  .status-filter {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 12px;
+  }
+  
+  .filter-label {
+    margin-bottom: 12px;
+    margin-right: 0;
+  }
+  
+  :deep(.el-radio-button__inner) {
+    padding: 10px 15px;
+  }
 }
 
 .mobile-hint {
@@ -514,6 +871,10 @@ export default {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  padding: 1px;
 }
 
 .table-container {
@@ -523,8 +884,87 @@ export default {
 
 .order-table {
   min-width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
 }
 
+/* 表格样式 */
+:deep(.el-table th) {
+  background-color: #f5f7fa;
+  color: #303133;
+  font-weight: bold;
+  font-size: 14px;
+  padding: 12px 0;
+}
+
+:deep(.el-table td) {
+  padding: 10px 0;
+}
+
+:deep(.el-table--border) {
+  border-radius: 8px;
+  border: 1px solid #ebeef5;
+}
+
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
+  background-color: #fafafa;
+}
+
+:deep(.el-table__body tr.hover-row > td) {
+  background-color: #f0f9ff !important;
+}
+
+:deep(.cancelled-row) {
+  background-color: #fff9f9 !important;
+  color: #f56c6c;
+}
+
+:deep(.el-table__body tr:hover > td) {
+  background-color: #f0f9ff !important;
+}
+
+:deep(.el-table__fixed) {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.el-table__fixed-right) {
+  box-shadow: -0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+/* 状态标签样式 */
+.status-tag {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-weight: bold;
+  width: 70px;
+  display: inline-block;
+}
+
+/* 金额样式 */
+.amount-value {
+  font-weight: bold;
+  color: #303133;
+}
+
+.additional-fee {
+  color: #e6a23c;
+}
+
+/* 图片样式 */
+.order-image {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  border: 2px solid transparent;
+}
+
+.order-image:hover {
+  transform: scale(1.05);
+  border-color: #409eff;
+}
+
+/* 分页样式 */
 .pagination-container {
   display: flex;
   justify-content: center;
@@ -532,6 +972,13 @@ export default {
   width: 100%;
 }
 
+:deep(.el-pagination) {
+  padding: 15px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+}
+
 .image-preview {
   display: flex;
   flex-wrap: wrap;

src/services/api.js

@@ -94,6 +94,14 @@ const api = {
         'Content-Type': 'multipart/form-data'
       }
     })
+  },
+
+  /**
+   * 获取仪表盘数据
+   * @returns {Promise} - 返回请求Promise
+   */
+  getDashboardData() {
+    return apiClient.get('/api/dashboard')
   }
 }