From ebad62338b66dd552ebb57bb41b7368788839ec2 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Wed, 29 Jan 2025 20:58:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9C=A8=E7=BA=BF=E4=B9=B0?=
 =?UTF-8?q?=E5=8D=95=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BasicLayout.vue    |   8 +
 src/router/index.js            |   5 +
 src/views/order/OnlineList.vue | 324 +++++++++++++++++++++++++++++++++
 3 files changed, 337 insertions(+)
 create mode 100644 src/views/order/OnlineList.vue

diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index 2c6a0ed..c576247 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -35,6 +35,9 @@
           <a-menu-item key="order-delivery">
             <router-link to="/order/delivery">配送订单</router-link>
           </a-menu-item>
+          <a-menu-item key="order-online">
+            <router-link to="/order/online">买单订单</router-link>
+          </a-menu-item>
         </a-sub-menu>
 
         <a-sub-menu key="finance">
@@ -208,6 +211,11 @@ export default defineComponent({
             key: 'order-delivery',
             title: '配送订单',
             path: '/order/delivery'
+          },
+          {
+            key: 'order-online',
+            title: '买单订单',
+            path: '/order/online'
           }
         ]
       },
diff --git a/src/router/index.js b/src/router/index.js
index 1e5a6b4..20f8e04 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -87,6 +87,11 @@ const routes = [
         path: 'delivery',
         component: () => import('@/views/order/DeliveryList.vue'),
         meta: { title: '配送订单' }
+      },
+      {
+        path: 'online',
+        component: () => import('@/views/order/OnlineList.vue'),
+        meta: { title: '买单订单' }
       }
     ]
   },
diff --git a/src/views/order/OnlineList.vue b/src/views/order/OnlineList.vue
new file mode 100644
index 0000000..6936779
--- /dev/null
+++ b/src/views/order/OnlineList.vue
@@ -0,0 +1,324 @@
+<template>
+  <page-container>
+    <div class="online-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.order_id"
+              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="商家ID">
+            <a-input
+              v-model:value="filterForm.merchant_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="UNPAID">未支付</a-select-option>
+              <a-select-option value="PAID">已支付</a-select-option>
+              <a-select-option value="REFUNDING">退款中</a-select-option>
+              <a-select-option value="REFUNDED">已退款</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 === 'amount'">
+            ¥{{ record.amount }}
+          </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({
+      order_id: '',
+      user_id: '',
+      merchant_id: '',
+      status: undefined
+    })
+    
+    const pagination = ref({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条记录`
+    })
+
+    const columns = [
+      {
+        title: '订单号',
+        dataIndex: 'order_id',
+        key: 'order_id',
+        width: 180
+      },
+      {
+        title: '商家ID',
+        dataIndex: 'merchant_id',
+        key: 'merchant_id',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '商家名称',
+        dataIndex: 'merchant_name',
+        key: 'merchant_name',
+        width: 160
+      },
+      {
+        title: '用户ID',
+        dataIndex: 'user_id',
+        key: 'user_id',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '支付金额',
+        dataIndex: 'amount',
+        key: 'amount',
+        width: 120,
+        align: 'right'
+      },
+      {
+        title: '获得积分',
+        dataIndex: 'gift_points',
+        key: 'gift_points',
+        width: 100,
+        align: 'right'
+      },
+      {
+        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.order_id?.trim()) {
+          params.order_id = filterForm.value.order_id.trim()
+        }
+        
+        if (filterForm.value.user_id?.trim()) {
+          params.user_id = filterForm.value.user_id.trim()
+        }
+
+        if (filterForm.value.merchant_id?.trim()) {
+          params.merchant_id = filterForm.value.merchant_id.trim()
+        }
+        
+        if (filterForm.value.status) {
+          params.status = filterForm.value.status
+        }
+        
+        const res = await request.get('/api/merchant-pay/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 = {
+        'UNPAID': '未支付',
+        'PAID': '已支付',
+        'REFUNDING': '退款中',
+        'REFUNDED': '已退款'
+      }
+      return statusMap[status] || status
+    }
+
+    // 获取状态标签颜色
+    const getStatusColor = (status) => {
+      const colorMap = {
+        'UNPAID': 'orange',
+        'PAID': '#87d068',
+        'REFUNDING': '#faad14',
+        'REFUNDED': '#2db7f5'
+      }
+      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 = {
+        order_id: '',
+        user_id: '',
+        merchant_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> 
\ No newline at end of file