From 3bdb2ff5f3ae69d3c4d490930a34711775ab10d9 Mon Sep 17 00:00:00 2001
From: qiube <18969599531@163.com>
Date: Thu, 25 Dec 2025 18:12:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(order):=20=E6=B7=BB=E5=8A=A0=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建新的订单管理页面 OrderManage.vue，支持分页和多条件查询
- 添加订单查询API接口，支持复杂的订单筛选条件
- 在路由中添加订单管理页面路由配置
- 更新导航菜单，将订单查询改为订单管理并指向新页面
- 实现订单列表的表格展示，包含订单号、商品信息、金额、客户信息等
- 添加订单状态、支付状态、PayPal状态的标签显示和筛选功能
- 实现查询表单，支持订单号、PayPal订单ID、客户信息等多维度搜索
- 添加分页组件，支持每页显示数量调整和页码切换
- 实现订单详情查看功能和重置查询条件功能
---
 src/App.vue               |   6 +-
 src/api/order.js          |  11 +
 src/router/index.js       |   6 +
 src/views/OrderManage.vue | 545 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 565 insertions(+), 3 deletions(-)
 create mode 100644 src/views/OrderManage.vue

diff --git a/src/App.vue b/src/App.vue
index 14fca00..5968763 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,11 +11,11 @@
         <h1>MT Pay 管理系统</h1>
         <div class="nav-menu">
           <router-link 
-            to="/query" 
+            to="/manage/order" 
             class="nav-item"
-            :class="{ active: activeIndex === '/query' || activeIndex.startsWith('/query') }"
+            :class="{ active: activeIndex === '/manage/order' || activeIndex.startsWith('/manage/order') }"
           >
-            订单查询
+            订单管理
           </router-link>
           <router-link 
             to="/manage/product" 
diff --git a/src/api/order.js b/src/api/order.js
index 3b02bdb..fb96095 100644
--- a/src/api/order.js
+++ b/src/api/order.js
@@ -42,3 +42,14 @@ export function calculateCurrencyConversion(data) {
   })
 }
 
+/**
+ * 查询订单列表（支持分页和多条件查询）
+ */
+export function queryOrders(query) {
+  return request({
+    url: '/order/query',
+    method: 'post',
+    data: query
+  })
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 796d9dd..832bfa2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -78,6 +78,12 @@ const routes = [
     name: 'OrderQuery',
     component: OrderQuery
   },
+  {
+    path: '/manage/order',
+    name: 'OrderManage',
+    component: () => import('../views/OrderManage.vue'),
+    meta: { requiresAuth: true }
+  },
   {
     path: '/manage/product',
     name: 'ProductManage',
diff --git a/src/views/OrderManage.vue b/src/views/OrderManage.vue
new file mode 100644
index 0000000..5587f05
--- /dev/null
+++ b/src/views/OrderManage.vue
@@ -0,0 +1,545 @@
+<template>
+  <div class="order-manage">
+    <!-- 查询表单 -->
+    <el-card class="search-card" style="margin-bottom: 20px">
+      <el-form :model="queryForm" :inline="true" class="search-form">
+        <el-form-item label="订单号">
+          <el-input
+            v-model="queryForm.orderNo"
+            placeholder="请输入订单号"
+            clearable
+            style="width: 200px"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="PayPal订单ID">
+          <el-input
+            v-model="queryForm.paypalOrderId"
+            placeholder="请输入PayPal订单ID"
+            clearable
+            style="width: 200px"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="订单状态">
+          <el-select
+            v-model="queryForm.status"
+            placeholder="请选择状态"
+            clearable
+            style="width: 150px"
+          >
+            <el-option label="待支付" value="PENDING" />
+            <el-option label="已支付" value="PAID" />
+            <el-option label="已发货" value="SHIPPED" />
+            <el-option label="已完成" value="COMPLETED" />
+            <el-option label="已取消" value="CANCELLED" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支付状态">
+          <el-select
+            v-model="queryForm.paymentStatus"
+            placeholder="请选择支付状态"
+            clearable
+            style="width: 150px"
+          >
+            <el-option label="未支付" value="UNPAID" />
+            <el-option label="已支付" value="PAID" />
+            <el-option label="支付失败" value="FAILED" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="PayPal状态">
+          <el-select
+            v-model="queryForm.paypalStatus"
+            placeholder="请选择PayPal状态"
+            clearable
+            style="width: 150px"
+          >
+            <el-option label="已创建" value="CREATED" />
+            <el-option label="已批准" value="APPROVED" />
+            <el-option label="已完成" value="COMPLETED" />
+            <el-option label="已取消" value="VOIDED" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户姓名">
+          <el-input
+            v-model="queryForm.customerName"
+            placeholder="请输入客户姓名"
+            clearable
+            style="width: 150px"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="客户电话">
+          <el-input
+            v-model="queryForm.customerPhone"
+            placeholder="请输入客户电话"
+            clearable
+            style="width: 150px"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="商品名称">
+          <el-input
+            v-model="queryForm.productName"
+            placeholder="请输入商品名称"
+            clearable
+            style="width: 150px"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">
+            <el-icon><Search /></el-icon>
+            查询
+          </el-button>
+          <el-button @click="handleReset">
+            <el-icon><Refresh /></el-icon>
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 订单列表 -->
+    <el-card>
+      <el-table :data="orderList" v-loading="loading" style="width: 100%">
+        <!-- 订单号 -->
+        <el-table-column label="订单号" prop="orderNo" width="180" show-overflow-tooltip />
+        
+        <!-- 商品信息 -->
+        <el-table-column label="商品信息" min-width="200">
+          <template #default="{ row }">
+            <div>
+              <div class="product-name">{{ row.productName }}</div>
+              <div class="sku-name">SKU: {{ row.skuName }}</div>
+              <div class="quantity">数量: {{ row.quantity }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        
+        <!-- 订单金额 -->
+        <el-table-column label="订单金额" width="150" align="center">
+          <template #default="{ row }">
+            <div v-if="row.paymentCurrency && row.paymentCurrency !== row.originalCurrency">
+              <div class="original-amount">{{ row.originalAmount }} {{ row.originalCurrency }}</div>
+              <div class="payment-amount">{{ row.paymentAmount }} {{ row.paymentCurrency }}</div>
+            </div>
+            <div v-else>
+              {{ row.totalAmount }} {{ row.originalCurrency || row.currency }}
+            </div>
+          </template>
+        </el-table-column>
+        
+        <!-- 客户信息 -->
+        <el-table-column label="客户信息" min-width="180">
+          <template #default="{ row }">
+            <div>
+              <div>{{ row.customerName }}</div>
+              <div class="customer-phone">{{ row.customerPhone }}</div>
+              <div class="customer-email" v-if="row.customerEmail">{{ row.customerEmail }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        
+        <!-- 收货地址 -->
+        <el-table-column label="收货地址" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div>
+              {{ row.shippingCountry }} {{ row.shippingCity }}
+            </div>
+          </template>
+        </el-table-column>
+        
+        <!-- 订单状态 -->
+        <el-table-column label="订单状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getStatusTagType(row.status)" size="small">
+              {{ getStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        
+        <!-- 支付状态 -->
+        <el-table-column label="支付状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getPaymentStatusTagType(row.paymentStatus)" size="small">
+              {{ getPaymentStatusText(row.paymentStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        
+        <!-- PayPal信息 -->
+        <el-table-column label="PayPal信息" min-width="200">
+          <template #default="{ row }">
+            <div v-if="row.paypalOrderId">
+              <div class="paypal-order-id">订单ID: {{ row.paypalOrderId }}</div>
+              <el-tag v-if="row.paypalStatus" :type="getPaypalStatusTagType(row.paypalStatus)" size="small" style="margin-top: 4px">
+                {{ row.paypalStatus }}
+              </el-tag>
+              <div v-if="row.payerEmail" class="payer-email">{{ row.payerEmail }}</div>
+            </div>
+            <span v-else class="no-paypal">未关联PayPal订单</span>
+          </template>
+        </el-table-column>
+        
+        <!-- 创建时间 -->
+        <el-table-column label="创建时间" width="180" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </el-table-column>
+        
+        <!-- 操作 -->
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="viewOrderDetail(row.id)">
+              查看详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      
+      <!-- 分页组件 -->
+      <div class="pagination-container" v-if="pagination.total > 0">
+        <el-pagination
+          v-model:current-page="pagination.pageNum"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handlePageChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Search, Refresh } from '@element-plus/icons-vue'
+import { queryOrders } from '../api/order'
+
+const router = useRouter()
+const loading = ref(false)
+const orderList = ref([])
+
+// 查询表单
+const queryForm = reactive({
+  orderNo: '',
+  paypalOrderId: '',
+  merchantOrderNo: '',
+  status: '',
+  paymentStatus: '',
+  paypalStatus: '',
+  paypalPaymentStatus: '',
+  customerName: '',
+  customerPhone: '',
+  customerEmail: '',
+  productName: '',
+  payerEmail: '',
+  payerName: '',
+  startTime: '',
+  endTime: ''
+})
+
+// 分页信息
+const pagination = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0
+})
+
+// 查询订单列表
+const handleQuery = async () => {
+  loading.value = true
+  try {
+    const query = {}
+    if (queryForm.orderNo && queryForm.orderNo.trim()) {
+      query.orderNo = queryForm.orderNo.trim()
+    }
+    if (queryForm.paypalOrderId && queryForm.paypalOrderId.trim()) {
+      query.paypalOrderId = queryForm.paypalOrderId.trim()
+    }
+    if (queryForm.merchantOrderNo && queryForm.merchantOrderNo.trim()) {
+      query.merchantOrderNo = queryForm.merchantOrderNo.trim()
+    }
+    if (queryForm.status) {
+      query.status = queryForm.status
+    }
+    if (queryForm.paymentStatus) {
+      query.paymentStatus = queryForm.paymentStatus
+    }
+    if (queryForm.paypalStatus) {
+      query.paypalStatus = queryForm.paypalStatus
+    }
+    if (queryForm.paypalPaymentStatus) {
+      query.paypalPaymentStatus = queryForm.paypalPaymentStatus
+    }
+    if (queryForm.customerName && queryForm.customerName.trim()) {
+      query.customerName = queryForm.customerName.trim()
+    }
+    if (queryForm.customerPhone && queryForm.customerPhone.trim()) {
+      query.customerPhone = queryForm.customerPhone.trim()
+    }
+    if (queryForm.customerEmail && queryForm.customerEmail.trim()) {
+      query.customerEmail = queryForm.customerEmail.trim()
+    }
+    if (queryForm.productName && queryForm.productName.trim()) {
+      query.productName = queryForm.productName.trim()
+    }
+    if (queryForm.payerEmail && queryForm.payerEmail.trim()) {
+      query.payerEmail = queryForm.payerEmail.trim()
+    }
+    if (queryForm.payerName && queryForm.payerName.trim()) {
+      query.payerName = queryForm.payerName.trim()
+    }
+    if (queryForm.startTime && queryForm.startTime.trim()) {
+      query.startTime = queryForm.startTime.trim()
+    }
+    if (queryForm.endTime && queryForm.endTime.trim()) {
+      query.endTime = queryForm.endTime.trim()
+    }
+    
+    // 添加分页参数
+    query.pageNum = pagination.value.pageNum
+    query.pageSize = pagination.value.pageSize
+    
+    const response = await queryOrders(query)
+    if (response.code === '0000' && response.data) {
+      const pageResult = response.data
+      orderList.value = pageResult.records || []
+      
+      // 更新分页信息
+      pagination.value.total = pageResult.total || 0
+      pagination.value.pageNum = pageResult.current || 1
+      pagination.value.pageSize = pageResult.size || 10
+      
+      if (orderList.value.length === 0) {
+        ElMessage.info('未找到符合条件的订单')
+      } else {
+        ElMessage.success(`查询到 ${pagination.value.total} 条订单，当前第 ${pagination.value.pageNum} 页`)
+      }
+    } else {
+      ElMessage.error(response.message || '查询订单列表失败')
+      orderList.value = []
+      pagination.value.total = 0
+    }
+  } catch (error) {
+    console.error('查询订单列表失败:', error)
+    ElMessage.error('查询订单列表失败')
+    orderList.value = []
+    pagination.value.total = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 重置查询条件
+const handleReset = () => {
+  Object.assign(queryForm, {
+    orderNo: '',
+    paypalOrderId: '',
+    merchantOrderNo: '',
+    status: '',
+    paymentStatus: '',
+    paypalStatus: '',
+    paypalPaymentStatus: '',
+    customerName: '',
+    customerPhone: '',
+    customerEmail: '',
+    productName: '',
+    payerEmail: '',
+    payerName: '',
+    startTime: '',
+    endTime: ''
+  })
+  pagination.value = {
+    pageNum: 1,
+    pageSize: 10,
+    total: 0
+  }
+  handleQuery()
+}
+
+// 分页大小改变
+const handleSizeChange = (size) => {
+  pagination.value.pageSize = size
+  pagination.value.pageNum = 1 // 重置到第一页
+  handleQuery()
+}
+
+// 页码改变
+const handlePageChange = (page) => {
+  pagination.value.pageNum = page
+  handleQuery()
+}
+
+// 查看订单详情
+const viewOrderDetail = (orderId) => {
+  router.push(`/order/detail/${orderId}`)
+}
+
+// 获取订单状态文本
+const getStatusText = (status) => {
+  const statusMap = {
+    'PENDING': '待支付',
+    'PAID': '已支付',
+    'SHIPPED': '已发货',
+    'COMPLETED': '已完成',
+    'CANCELLED': '已取消'
+  }
+  return statusMap[status] || status
+}
+
+// 获取订单状态标签类型
+const getStatusTagType = (status) => {
+  const typeMap = {
+    'PENDING': 'warning',
+    'PAID': 'success',
+    'SHIPPED': 'info',
+    'COMPLETED': 'success',
+    'CANCELLED': 'danger'
+  }
+  return typeMap[status] || ''
+}
+
+// 获取支付状态文本
+const getPaymentStatusText = (status) => {
+  const statusMap = {
+    'UNPAID': '未支付',
+    'PAID': '已支付',
+    'FAILED': '支付失败'
+  }
+  return statusMap[status] || status
+}
+
+// 获取支付状态标签类型
+const getPaymentStatusTagType = (status) => {
+  const typeMap = {
+    'UNPAID': 'warning',
+    'PAID': 'success',
+    'FAILED': 'danger'
+  }
+  return typeMap[status] || ''
+}
+
+// 获取PayPal状态标签类型
+const getPaypalStatusTagType = (status) => {
+  const typeMap = {
+    'CREATED': 'info',
+    'APPROVED': 'success',
+    'COMPLETED': 'success',
+    'VOIDED': 'danger'
+  }
+  return typeMap[status] || ''
+}
+
+// 格式化日期时间
+const formatDateTime = (dateTime) => {
+  if (!dateTime) return ''
+  const date = new Date(dateTime)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+// 组件挂载时加载订单列表
+onMounted(() => {
+  handleQuery()
+})
+</script>
+
+<style scoped>
+.order-manage {
+  padding: 20px;
+}
+
+.search-card {
+  margin-bottom: 20px;
+}
+
+.search-form {
+  margin-bottom: 0;
+}
+
+.product-name {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.sku-name {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.quantity {
+  color: #909399;
+  font-size: 12px;
+}
+
+.original-amount {
+  color: #909399;
+  font-size: 12px;
+  text-decoration: line-through;
+}
+
+.payment-amount {
+  color: #f56c6c;
+  font-weight: bold;
+}
+
+.customer-phone {
+  color: #909399;
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+.customer-email {
+  color: #909399;
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+.paypal-order-id {
+  font-size: 12px;
+  color: #606266;
+  margin-bottom: 4px;
+}
+
+.payer-email {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+.no-paypal {
+  color: #c0c4cc;
+  font-size: 12px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+  padding: 20px 0;
+}
+
+@media (max-width: 768px) {
+  .pagination-container {
+    justify-content: center;
+  }
+  
+  .pagination-container :deep(.el-pagination) {
+    flex-wrap: wrap;
+  }
+}
+</style>
+