增加配送订单列表页面

src/layouts/BasicLayout.vue

@@ -43,6 +43,16 @@
           </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 />
@@ -120,6 +130,7 @@ import {
   DashboardOutlined,
   ShopOutlined,
   SettingOutlined,
+  ShoppingOutlined,
 } from '@ant-design/icons-vue'
 import { useRouter } from 'vue-router'
 
@@ -135,6 +146,7 @@ export default defineComponent({
     DashboardOutlined,
     ShopOutlined,
     SettingOutlined,
+    ShoppingOutlined,
   },
   setup() {
     const router = useRouter()
@@ -156,12 +168,102 @@ export default defineComponent({
       router.push('/login')
     }
 
+    const menuItems = ref([
+      {
+        key: 'dashboard',
+        icon: () => h(DashboardOutlined),
+        title: '工作台',
+        path: '/dashboard'
+      },
+      {
+        key: 'user',
+        icon: () => h(UserOutlined),
+        title: '用户管理',
+        children: [
+          {
+            key: 'user-list',
+            title: '用户列表',
+            path: '/user/list'
+          }
+        ]
+      },
+      {
+        key: 'community',
+        icon: () => h(HomeOutlined),
+        title: '小区管理',
+        children: [
+          {
+            key: 'community-list',
+            title: '小区列表',
+            path: '/community/list'
+          },
+          {
+            key: 'building-list',
+            title: '楼栋列表',
+            path: '/community/building'
+          },
+          {
+            key: 'station-list',
+            title: '驿站列表',
+            path: '/community/station'
+          }
+        ]
+      },
+      {
+        key: 'order',
+        icon: () => h(ShoppingOutlined),
+        title: '订单管理',
+        children: [
+          {
+            key: 'order-delivery',
+            title: '配送订单',
+            path: '/order/delivery'
+          }
+        ]
+      },
+      {
+        key: 'merchant',
+        icon: () => h(ShopOutlined),
+        title: '商家管理',
+        children: [
+          {
+            key: 'merchant-list',
+            title: '商家列表',
+            path: '/merchant/list'
+          },
+          {
+            key: 'merchant-categories',
+            title: '商家分类',
+            path: '/merchant/categories'
+          },
+          {
+            key: 'merchant-products',
+            title: '商品列表',
+            path: '/merchant/products'
+          }
+        ]
+      },
+      {
+        key: 'system',
+        icon: () => h(SettingOutlined),
+        title: '系统管理',
+        children: [
+          {
+            key: 'system-logs',
+            title: '日志查询',
+            path: '/system/logs'
+          }
+        ]
+      }
+    ])
+
     return {
       collapsed,
       selectedKeys,
       openKeys,
       userInfo,
-      handleLogout
+      handleLogout,
+      menuItems
     }
   },
 })

src/router/index.js

@@ -78,6 +78,17 @@ const routes = [
         meta: { title: '日志查询' }
       }
     ]
+  },
+  {
+    path: '/order',
+    component: BasicLayout,
+    children: [
+      {
+        path: 'delivery',
+        component: () => import('@/views/order/DeliveryList.vue'),
+        meta: { title: '配送订单' }
+      }
+    ]
   }
 ]
 

src/views/order/DeliveryList.vue

@@ -0,0 +1,325 @@
+<template>
+  <page-container>
+    <div class="delivery-list">
+      <div class="table-header">
+        <h1>配送订单列表</h1>
+      </div>
+      
+      <!-- 过滤区域 -->
+      <div class="table-filter">
+        <a-form layout="inline">
+          <a-form-item label="订单号">
+            <a-input
+              v-model:value="filterForm.orderid"
+              placeholder="请输入订单号"
+              style="width: 200px"
+              allowClear
+              @change="handleFilterChange"
+            />
+          </a-form-item>
+
+          <a-form-item label="用户ID">
+            <a-input
+              v-model:value="filterForm.user_id"
+              placeholder="请输入用户ID"
+              style="width: 200px"
+              allowClear
+              @change="handleFilterChange"
+            />
+          </a-form-item>
+
+          <a-form-item label="订单状态">
+            <a-select
+              v-model:value="filterForm.status"
+              style="width: 200px"
+              placeholder="请选择状态"
+              allowClear
+              @change="handleFilterChange"
+            >
+              <a-select-option value="CREATED">已创建</a-select-option>
+              <a-select-option value="UNPAID">未支付</a-select-option>
+              <a-select-option value="RECEIVED">已接单</a-select-option>
+              <a-select-option value="DELIVERING">配送中</a-select-option>
+              <a-select-option value="COMPLETED">已完成</a-select-option>
+              <a-select-option value="CANCELLED">已取消</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="['original_amount', 'coupon_discount_amount', 'point_discount_amount', 'final_amount'].includes(column.key)">
+            ¥{{ record[column.dataIndex] }}
+          </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({
+      orderid: '',
+      user_id: '',
+      status: undefined
+    })
+    
+    const pagination = ref({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条记录`
+    })
+
+    const columns = [
+      {
+        title: '订单号',
+        dataIndex: 'orderid',
+        key: 'orderid',
+        width: 180
+      },
+      {
+        title: '包裹数量',
+        dataIndex: 'package_count',
+        key: 'package_count',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '订单金额',
+        dataIndex: 'original_amount',
+        key: 'original_amount',
+        width: 120,
+        align: 'right'
+      },
+      {
+        title: '服务券抵扣',
+        dataIndex: 'coupon_discount_amount',
+        key: 'coupon_discount_amount',
+        width: 120,
+        align: 'right'
+      },
+      {
+        title: '积分抵扣',
+        dataIndex: 'point_discount_amount',
+        key: 'point_discount_amount',
+        width: 120,
+        align: 'right'
+      },
+      {
+        title: '最终金额',
+        dataIndex: 'final_amount',
+        key: 'final_amount',
+        width: 120,
+        align: 'right'
+      },
+      {
+        title: '订单状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '配送地址',
+        key: 'address',
+        width: 300,
+        ellipsis: true,
+        customRender: ({ record }) => {
+          const { address } = record
+          return `${address.name} ${address.community_name} ${address.address_detail}`
+        }
+      },
+      {
+        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.orderid?.trim()) {
+          params.orderid = filterForm.value.orderid.trim()
+        }
+        
+        if (filterForm.value.user_id?.trim()) {
+          params.user_id = filterForm.value.user_id.trim()
+        }
+        
+        if (filterForm.value.status) {
+          params.status = filterForm.value.status
+        }
+        
+        const res = await request.get('/api/order/admin/list', { 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 = {
+        'CREATED': '已创建',
+        'UNPAID': '未支付',
+        'RECEIVED': '已接单',
+        'DELIVERING': '配送中',
+        'COMPLETED': '已完成',
+        'CANCELLED': '已取消'
+      }
+      return statusMap[status] || status
+    }
+
+    // 获取状态标签颜色
+    const getStatusColor = (status) => {
+      const colorMap = {
+        'CREATED': 'blue',
+        'UNPAID': 'orange',
+        'RECEIVED': '#2db7f5',
+        'DELIVERING': 'green',
+        'COMPLETED': '#87d068',
+        'CANCELLED': '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 = {
+        orderid: '',
+        user_id: '',
+        status: undefined
+      }
+      pagination.value.current = 1
+      fetchData()
+    }
+
+    onMounted(() => {
+      fetchData()
+    })
+
+    return {
+      loading,
+      columns,
+      tableData,
+      pagination,
+      filterForm,
+      handleTableChange,
+      handleFilterChange,
+      handleSearch,
+      handleReset,
+      getStatusText,
+      getStatusColor
+    }
+  }
+})
+</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;
+}
+</style>