From 43364b9efac4057172c28802ff0b610478a0f864 Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Wed, 8 Oct 2025 02:06:54 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E8=BF=B0:=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=93=81=E7=89=8C=E5=BA=97=E9=93=BA=E8=AE=A2=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=8A=9F=E8=83=BD=E9=A1=B5=E9=9D=A2=E5=8F=8A=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=AF=BC=E8=88=AA=20-=20=E5=9C=A8=E5=93=81=E7=89=8C?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E8=8F=9C=E5=8D=95=E4=B8=AD=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?"=E5=93=81=E7=89=8C=E5=BA=97=E9=93=BA=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86"=E5=AD=90=E8=8F=9C=E5=8D=95=E9=A1=B9?=
 =?UTF-8?q?=EF=BC=8C=E6=89=A9=E5=B1=95=E5=93=81=E7=89=8C=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=A8=A1=E5=9D=97=E3=80=82=20-=20=E6=96=B0?=
 =?UTF-8?q?=E5=BB=BA=E5=AE=8C=E6=95=B4=E7=9A=84=E5=93=81=E7=89=8C=E5=BA=97?=
 =?UTF-8?q?=E9=93=BA=E8=AE=A2=E5=8D=95=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E5=8C=85=E5=90=AB=E6=90=9C=E7=B4=A2=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E3=80=81=E7=BB=9F=E8=AE=A1=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E3=80=81=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=AD=89=E5=8A=9F=E8=83=BD=E3=80=82=20-=20=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=8C=89=E6=94=B6=E8=B4=A7=E4=BA=BA=E5=A7=93?=
 =?UTF-8?q?=E5=90=8D=E3=80=81=E8=AE=A2=E5=8D=95=E7=BC=96=E5=8F=B7=E3=80=81?=
 =?UTF-8?q?=E5=BA=97=E9=93=BA=E8=AE=A2=E5=8D=95=E7=8A=B6=E6=80=81=E3=80=81?=
 =?UTF-8?q?=E7=BB=93=E7=AE=97=E5=8D=95=E4=BD=8D=E8=AE=A2=E5=8D=95=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E7=AD=89=E6=9D=A1=E4=BB=B6=E8=BF=9B=E8=A1=8C=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E6=9F=A5=E8=AF=A2=E3=80=82=20-=20=E6=8F=90=E4=BE=9B?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E6=95=B0=E9=87=8F=E3=80=81=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E9=87=91=E9=A2=9D=E3=80=81=E9=85=8D=E9=80=81=E8=B4=B9=E6=80=BB?=
 =?UTF-8?q?=E9=A2=9D=E3=80=81=E5=8C=85=E8=A3=85=E8=B4=B9=E6=80=BB=E9=A2=9D?=
 =?UTF-8?q?=E3=80=81=E8=B0=83=E5=BA=A6=E8=B4=B9=E6=80=BB=E9=A2=9D=E3=80=81?=
 =?UTF-8?q?=E9=80=80=E6=AC=BE=E9=87=91=E9=A2=9D=E3=80=81=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=8E=87=E3=80=81=E4=BB=A3=E7=90=86=E5=95=86?=
 =?UTF-8?q?=E6=8A=BD=E6=88=90=E7=AD=89=E5=A4=9A=E7=BB=B4=E5=BA=A6=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E6=95=B0=E6=8D=AE=E3=80=82=20-=20=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=94=AF=E6=8C=81=E5=B1=95=E5=BC=80=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85=EF=BC=8C=E5=8C=85?=
 =?UTF-8?q?=E5=90=AB=E5=95=86=E5=93=81=E5=90=8D=E7=A7=B0=E3=80=81=E6=95=B0?=
 =?UTF-8?q?=E9=87=8F=E3=80=81=E5=8E=9F=E4=BB=B7=E3=80=81=E7=BB=88=E4=BB=B7?=
 =?UTF-8?q?=E3=80=81=E8=AE=A2=E5=8D=95=E9=87=91=E9=A2=9D=E5=92=8C=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E5=9B=BE=E7=89=87=E7=AD=89=E4=BF=A1=E6=81=AF=E3=80=82?=
 =?UTF-8?q?=20-=20=E9=9B=86=E6=88=90=E5=88=86=E9=A1=B5=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E6=AF=8F?=
 =?UTF-8?q?=E9=A1=B5=E6=98=BE=E7=A4=BA=E6=9D=A1=E7=9B=AE=E6=95=B0=E9=87=8F?=
 =?UTF-8?q?=E5=92=8C=E9=A1=B5=E9=9D=A2=E8=B7=B3=E8=BD=AC=E3=80=82=20-=20?=
 =?UTF-8?q?=E4=BF=9D=E6=8C=81=E4=B8=8E=E7=8E=B0=E6=9C=89=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E4=B8=80=E8=87=B4=E7=9A=84?=
 =?UTF-8?q?UI=E8=AE=BE=E8=AE=A1=E9=A3=8E=E6=A0=BC=E5=92=8C=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 商家端web/index.html                     |   4 +
 商家端web/品牌管理/品牌店铺订单管理.html | 959 +++++++++++++++++++++++
 2 files changed, 963 insertions(+)
 create mode 100644 商家端web/品牌管理/品牌店铺订单管理.html

diff --git a/商家端web/index.html b/商家端web/index.html
index 69df17f..ae27ecc 100644
--- a/商家端web/index.html
+++ b/商家端web/index.html
@@ -475,6 +475,10 @@
                                 <span class="submenu-icon"></span>
                                 品牌市场订单管理
                             </a>
+                            <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/品牌店铺订单管理.html', this);" style="padding-left: 70px;">
+                                <span class="submenu-icon"></span>
+                                品牌店铺订单管理
+                            </a>
                         </div>
                     </div>
                     <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/品牌信息.html', this)">
diff --git a/商家端web/品牌管理/品牌店铺订单管理.html b/商家端web/品牌管理/品牌店铺订单管理.html
new file mode 100644
index 0000000..689858d
--- /dev/null
+++ b/商家端web/品牌管理/品牌店铺订单管理.html
@@ -0,0 +1,959 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>品牌店铺订单管理 - 大妈集市商户端</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            background-color: #f5f5f5;
+            color: #333;
+        }
+
+        .container {
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .page-header {
+            background: white;
+            padding: 16px 24px;
+            margin-bottom: 16px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .page-title {
+            font-size: 24px;
+            font-weight: 600;
+            color: #262626;
+        }
+
+        .search-section {
+            background: white;
+            padding: 24px;
+            margin-bottom: 16px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .search-form {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 16px;
+            margin-bottom: 16px;
+        }
+
+        .form-item {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .form-label {
+            font-size: 14px;
+            color: #666;
+            font-weight: 500;
+        }
+
+        .form-input {
+            height: 40px;
+            padding: 0 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+        }
+
+        .form-input:focus {
+            outline: none;
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+
+        .filter-row {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+
+        .filter-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .filter-item label {
+            font-weight: 500;
+            color: #333;
+            min-width: 70px;
+        }
+
+        .filter-item select,
+        .filter-item input {
+            padding: 8px 12px;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+            min-width: 120px;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+
+        .filter-item select:focus,
+        .filter-item input:focus {
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+            outline: none;
+        }
+
+        .button-group {
+            display: flex;
+            gap: 12px;
+        }
+
+        .btn {
+            height: 40px;
+            padding: 0 16px;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .btn-primary {
+            background: #1890ff;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #40a9ff;
+        }
+
+        .btn-default {
+            background: white;
+            color: #666;
+            border: 1px solid #ddd;
+        }
+
+        .btn-default:hover {
+            border-color: #1890ff;
+            color: #1890ff;
+        }
+
+        .stats-section {
+            background: white;
+            padding: 24px;
+            margin-bottom: 16px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+        }
+
+        .stat-item {
+            text-align: center;
+            padding: 20px;
+            border: 1px solid #f0f0f0;
+            border-radius: 8px;
+            background: #fafafa;
+        }
+
+        .stat-label {
+            font-size: 14px;
+            color: #666;
+            margin-bottom: 8px;
+        }
+
+        .stat-value {
+            font-size: 24px;
+            font-weight: 600;
+            color: #1890ff;
+        }
+
+        .tabs-section {
+            background: white;
+            padding: 0 24px;
+            margin-bottom: 16px;
+            border-radius: 8px 8px 0 0;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .tab {
+            padding: 16px 20px;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+            color: #666;
+            font-size: 14px;
+            transition: all 0.3s;
+        }
+
+        .tab.active {
+            color: #1890ff;
+            border-bottom-color: #1890ff;
+        }
+
+        .tab:hover {
+            color: #1890ff;
+        }
+
+        .table-section {
+            background: white;
+            border-radius: 0 0 8px 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+        }
+
+        .table-wrapper {
+            overflow-x: auto;
+        }
+
+        .order-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 14px;
+        }
+
+        .order-table th {
+            background: #fafafa;
+            padding: 12px 16px;
+            text-align: left;
+            font-weight: 600;
+            color: #666;
+            border-bottom: 1px solid #f0f0f0;
+            white-space: nowrap;
+        }
+
+        .order-table td {
+            padding: 12px 16px;
+            border-bottom: 1px solid #f9f9f9;
+            vertical-align: top;
+        }
+
+        .order-table tbody tr:hover {
+            background: #f8f9fa;
+        }
+
+        .expandable-row {
+            background: #f8f9fa;
+        }
+
+        .expand-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 4px;
+        }
+
+        .expand-btn:hover {
+            background: #e6f7ff;
+        }
+
+        .sub-table {
+            width: 100%;
+            margin: 8px 0;
+            border: 1px solid #f0f0f0;
+            border-radius: 4px;
+        }
+
+        .sub-table th,
+        .sub-table td {
+            padding: 8px;
+            font-size: 12px;
+            border-bottom: 1px solid #f9f9f9;
+        }
+
+        .sub-table th {
+            background: #f5f5f5;
+        }
+
+        .status-tag {
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+
+        .status-paid {
+            background: #f6ffed;
+            color: #52c41a;
+            border: 1px solid #b7eb8f;
+        }
+
+        .status-pending {
+            background: #fff7e6;
+            color: #fa8c16;
+            border: 1px solid #ffd591;
+        }
+
+        .status-cancelled {
+            background: #fff2f0;
+            color: #ff4d4f;
+            border: 1px solid #ffb3b3;
+        }
+
+        .status-completed {
+            background: #f6ffed;
+            color: #52c41a;
+            border: 1px solid #b7eb8f;
+        }
+
+        .pagination {
+            padding: 20px 24px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: white;
+            border-top: 1px solid #f0f0f0;
+        }
+
+        .pagination-info {
+            color: #666;
+            font-size: 14px;
+        }
+
+        .pagination-controls {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .page-size-selector {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .page-size-select {
+            height: 32px;
+            padding: 0 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+
+        .page-list {
+            display: flex;
+            gap: 4px;
+            list-style: none;
+        }
+
+        .page-item {
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.3s;
+        }
+
+        .page-item:hover {
+            border-color: #1890ff;
+            color: #1890ff;
+        }
+
+        .page-item.active {
+            background: #1890ff;
+            color: white;
+            border-color: #1890ff;
+        }
+
+        .page-item.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .page-jump {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+            color: #666;
+        }
+
+        .page-jump input {
+            width: 60px;
+            height: 32px;
+            padding: 0 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            text-align: center;
+            font-size: 14px;
+        }
+
+        .product-image {
+            width: 40px;
+            height: 40px;
+            object-fit: cover;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .nested-table-wrapper {
+            padding: 16px;
+            background: #f8f9fa;
+        }
+
+        .order-detail-header {
+            background: #f5f5f5;
+            margin-bottom: 8px;
+        }
+
+        .fee-item {
+            color: #ff4d4f;
+            font-weight: 500;
+        }
+
+        .market-name {
+            color: #1890ff;
+            font-weight: 500;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 页面标题 -->
+        <div class="page-header">
+            <h1 class="page-title">品牌店铺订单管理</h1>
+        </div>
+
+        <!-- 搜索区域 -->
+        <div class="search-section">
+            <div class="filter-row">
+                <div class="filter-item">
+                    <label>收货人姓名:</label>
+                    <input type="text" placeholder="收货人姓名搜索">
+                </div>
+                <div class="filter-item">
+                    <label>订单编号:</label>
+                    <input type="text" placeholder="订单编号">
+                </div>
+                <div class="filter-item">
+                    <label>店铺订单状态:</label>
+                    <select>
+                        <option value="">全部</option>
+                        <option value="stock_completed">备货完成</option>
+                        <option value="pending_pickup">待取货</option>
+                        <option value="pickup_pending_delivery">已取货（待配送）</option>
+                        <option value="delivery_in_progress">配送中</option>
+                        <option value="delivery_completed_pending_receipt">配送完成(待收货)</option>
+                        <option value="pending_review">待评价</option>
+                        <option value="completed">已完成</option>
+                    </select>
+                </div>
+                <div class="filter-item">
+                    <label>结算单位订单状态:</label>
+                    <select>
+                        <option value="">全部</option>
+                        <option value="pending_payment">待支付</option>
+                        <option value="pending_accept">待接单</option>
+                        <option value="pending_prepare">待备货</option>
+                        <option value="pending_pickup">待取货</option>
+                        <option value="pickup_pending_delivery">已取货（待配送）</option>
+                        <option value="delivery_in_progress">配送中（待送达）</option>
+                        <option value="delivered_pending_receipt">已配送（待收货或已送达自提点）</option>
+                        <option value="completed_pending_review">完成（待评价或自动完成）</option>
+                        <option value="unpaid_cancelled">未支付订单取消</option>
+                        <option value="user_refund_processing">用户申请退款中</option>
+                        <option value="user_refund_completed">用户申请已退款</option>
+                        <option value="merchant_cancelled">商家取消订单</option>
+                        <option value="platform_cancelled">平台取消订单</option>
+                    </select>
+                </div>
+            </div>
+            <div class="filter-row">
+                <div class="filter-item">
+                    <label for="dateRange">日期范围:</label>
+                    <select id="dateRange">
+                        <option value="today">近1天</option>
+                        <option value="week" selected>近7天</option>
+                        <option value="month">近30天</option>
+                        <option value="custom">自定义</option>
+                    </select>
+                </div>
+                <div class="filter-item" id="customDateRange" style="display: none;">
+                    <label for="startDate">开始日期:</label>
+                    <input type="date" id="startDate">
+                    <label for="endDate">结束日期:</label>
+                    <input type="date" id="endDate">
+                </div>
+            </div>
+            <div class="button-group">
+                <button class="btn btn-primary">查询</button>
+                <button class="btn btn-default">重置</button>
+            </div>
+        </div>
+
+        <!-- 统计数据区域 -->
+        <div class="stats-section">
+            <div class="stats-grid">
+                <div class="stat-item">
+                    <div class="stat-label">订单数量（笔）</div>
+                    <div class="stat-value">125</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-label">订单金额（元）</div>
+                    <div class="stat-value">5680.50</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-label">配送费总额（元）</div>
+                    <div class="stat-value">380.20</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-label">包装费总额（元）</div>
+                    <div class="stat-value">125.50</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-label">调度费总额（元）</div>
+                    <div class="stat-value">95.80</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-label">退款金额</div>
+                    <div class="stat-value">450.30</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-label">订单完成率</div>
+                    <div class="stat-value">28.8%</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-label">代理商抽成(元)</div>
+                    <div class="stat-value">0</div>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- 表格区域 -->
+        <div class="table-section">
+            <div class="table-wrapper">
+                <table class="order-table">
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th>序号</th>
+                            <th>店铺订单号</th>
+                            <th>下单时间</th>
+                            <th>收货人姓名</th>
+                            <th>收货人电话</th>
+                            <th>收货人地址</th>
+                            <th>商品总金额</th>
+                            <th>店铺归属菜市场</th>
+                            <th>店铺订单状态</th>
+                            <th>结算单位订单状态</th>
+                            <th>店铺名称</th>
+                            <th>申请退款原因</th>
+                            <th>配送费</th>
+                            <th>包装费</th>
+                            <th>调度费</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
+                            <td>1</td>
+                            <td>BSO202407190001</td>
+                            <td>2025-07-19 15:33:55</td>
+                            <td>张三</td>
+                            <td>13818776990</td>
+                            <td>茅台酱香万家共享(春申路店) 101室</td>
+                            <td>38.5</td>
+                            <td><span class="market-name">春申菜市场</span></td>
+                            <td><span class="status-tag status-paid">已支付</span></td>
+                            <td><span class="status-tag status-paid">-</span></td>
+                            <td>品牌生鲜店</td>
+                            <td></td>
+                            <td><span class="fee-item">-</span></td>
+                            <td><span class="fee-item">-</span></td>
+                            <td><span class="fee-item">-</span></td>
+                            <td></td>
+                        </tr>
+                        <tr class="expandable-row" style="display: none;">
+                            <td colspan="16">
+                                <div class="nested-table-wrapper">
+                                    <table class="sub-table">
+                                        <thead>
+                                            <tr>
+                                                <th>序号</th>
+                                                <th>商品名称</th>
+                                                <th>商品数量</th>
+                                                <th>商品原价</th>
+                                                <th>商品终价</th>
+                                                <th>商品订单金额</th>
+                                                <th>商品图片</th>
+                                                <th></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>1</td>
+                                                <td>品牌有机蔬菜套装</td>
+                                                <td>1</td>
+                                                <td>45.0</td>
+                                                <td>38.5</td>
+                                                <td>38.5</td>
+                                                <td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
+                                                <td></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
+                            <td>2</td>
+                            <td>BSO202407190002</td>
+                            <td>2025-07-19 14:56:21</td>
+                            <td>李四</td>
+                            <td>13928776991</td>
+                            <td>瑞星商务中心 201室</td>
+                            <td>56.8</td>
+                            <td><span class="market-name">徐汇菜市场</span></td>
+                            <td><span class="status-tag status-completed">已完成</span></td>
+                            <td><span class="status-tag status-completed">已完成</span></td>
+                            <td>品牌水果店</td>
+                            <td></td>
+                            <td><span class="fee-item">5.0</span></td>
+                            <td><span class="fee-item">2.0</span></td>
+                            <td><span class="fee-item">1.2</span></td>
+                            <td></td>
+                        </tr>
+                        <tr class="expandable-row" style="display: none;">
+                            <td colspan="16">
+                                <div class="nested-table-wrapper">
+                                    <table class="sub-table">
+                                        <thead>
+                                            <tr>
+                                                <th>序号</th>
+                                                <th>商品名称</th>
+                                                <th>商品数量</th>
+                                                <th>商品原价</th>
+                                                <th>商品终价</th>
+                                                <th>商品订单金额</th>
+                                                <th>商品图片</th>
+                                                <th></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>1</td>
+                                                <td>品牌进口水果篮</td>
+                                                <td>1</td>
+                                                <td>68.0</td>
+                                                <td>56.8</td>
+                                                <td>56.8</td>
+                                                <td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
+                                                <td></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
+                            <td>3</td>
+                            <td>BSO202407180001</td>
+                            <td>2025-07-18 17:29:48</td>
+                            <td>王五</td>
+                            <td>13738776992</td>
+                            <td>静安寺商圈 A座501室</td>
+                            <td>78.9</td>
+                            <td><span class="market-name">静安菜市场</span></td>
+                            <td><span class="status-tag status-delivery">配送中</span></td>
+                            <td><span class="status-tag status-delivery">配送中</span></td>
+                            <td>品牌肉品店</td>
+                            <td></td>
+                            <td><span class="fee-item">6.0</span></td>
+                            <td><span class="fee-item">2.5</span></td>
+                            <td><span class="fee-item">1.5</span></td>
+                            <td></td>
+                        </tr>
+                        <tr class="expandable-row" style="display: none;">
+                            <td colspan="16">
+                                <div class="nested-table-wrapper">
+                                    <table class="sub-table">
+                                        <thead>
+                                            <tr>
+                                                <th>序号</th>
+                                                <th>商品名称</th>
+                                                <th>商品数量</th>
+                                                <th>商品原价</th>
+                                                <th>商品终价</th>
+                                                <th>商品订单金额</th>
+                                                <th>商品图片</th>
+                                                <th></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>1</td>
+                                                <td>品牌有机牛肉套装</td>
+                                                <td>1</td>
+                                                <td>89.9</td>
+                                                <td>78.9</td>
+                                                <td>78.9</td>
+                                                <td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
+                                                <td></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
+                            <td>4</td>
+                            <td>BSO202407180002</td>
+                            <td>2025-07-18 17:29:23</td>
+                            <td>赵六</td>
+                            <td>13648776993</td>
+                            <td>浦东新区 张江高科技园区</td>
+                            <td>45.2</td>
+                            <td><span class="market-name">浦东菜市场</span></td>
+                            <td><span class="status-tag status-cancelled">取消</span></td>
+                            <td><span class="status-tag status-cancelled">取消</span></td>
+                            <td>品牌海鲜店</td>
+                            <td>用户主动取消</td>
+                            <td><span class="fee-item">4.5</span></td>
+                            <td><span class="fee-item">1.8</span></td>
+                            <td><span class="fee-item">1.0</span></td>
+                            <td></td>
+                        </tr>
+                        <tr class="expandable-row" style="display: none;">
+                            <td colspan="16">
+                                <div class="nested-table-wrapper">
+                                    <table class="sub-table">
+                                        <thead>
+                                            <tr>
+                                                <th>序号</th>
+                                                <th>商品名称</th>
+                                                <th>商品数量</th>
+                                                <th>商品原价</th>
+                                                <th>商品终价</th>
+                                                <th>商品订单金额</th>
+                                                <th>商品图片</th>
+                                                <th></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>1</td>
+                                                <td>品牌海鲜礼盒</td>
+                                                <td>1</td>
+                                                <td>52.0</td>
+                                                <td>45.2</td>
+                                                <td>45.2</td>
+                                                <td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
+                                                <td></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td><button class="expand-btn" onclick="toggleShopExpand(this)">▼</button></td>
+                            <td>5</td>
+                            <td>BSO202407170001</td>
+                            <td>2025-07-17 12:08:07</td>
+                            <td>陈七</td>
+                            <td>13558776994</td>
+                            <td>黄浦区 南京东路步行街</td>
+                            <td>68.0</td>
+                            <td><span class="market-name">黄浦菜市场</span></td>
+                            <td><span class="status-tag status-pending">待接单</span></td>
+                            <td><span class="status-tag status-pending">待接单</span></td>
+                            <td>品牌零食店</td>
+                            <td></td>
+                            <td><span class="fee-item">5.5</span></td>
+                            <td><span class="fee-item">2.2</span></td>
+                            <td><span class="fee-item">1.3</span></td>
+                            <td></td>
+                        </tr>
+                        <tr class="expandable-row" style="display: none;">
+                            <td colspan="16">
+                                <div class="nested-table-wrapper">
+                                    <table class="sub-table">
+                                        <thead>
+                                            <tr>
+                                                <th>序号</th>
+                                                <th>商品名称</th>
+                                                <th>商品数量</th>
+                                                <th>商品原价</th>
+                                                <th>商品终价</th>
+                                                <th>商品订单金额</th>
+                                                <th>商品图片</th>
+                                                <th></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>1</td>
+                                                <td>品牌进口零食大礼包</td>
+                                                <td>1</td>
+                                                <td>75.0</td>
+                                                <td>68.0</td>
+                                                <td>68.0</td>
+                                                <td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
+                                                <td></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- 分页区域 -->
+            <div class="pagination">
+                <div class="pagination-info">共 125 条</div>
+                <div class="pagination-controls">
+                    <div class="page-size-selector">
+                        <select class="page-size-select">
+                            <option value="10">10条/页</option>
+                            <option value="20">20条/页</option>
+                            <option value="50">50条/页</option>
+                            <option value="100">100条/页</option>
+                        </select>
+                    </div>
+                    <div class="page-item disabled">«</div>
+                    <ul class="page-list">
+                        <li class="page-item active">1</li>
+                        <li class="page-item">2</li>
+                        <li class="page-item">3</li>
+                        <li class="page-item">4</li>
+                        <li class="page-item">5</li>
+                        <li class="page-item">...</li>
+                        <li class="page-item">13</li>
+                    </ul>
+                    <div class="page-item">»</div>
+                    <div class="page-jump">
+                        前往 <input type="number" value="1" min="1" max="13"> 页
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 日期范围选择
+        document.getElementById('dateRange').addEventListener('change', function() {
+            const customDateRange = document.getElementById('customDateRange');
+            if (this.value === 'custom') {
+                customDateRange.style.display = 'flex';
+            } else {
+                customDateRange.style.display = 'none';
+            }
+        });
+
+        // 标签页切换功能
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', function() {
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                this.classList.add('active');
+            });
+        });
+
+        // 展开/收起功能
+        function toggleExpand(btn) {
+            const currentRow = btn.closest('tr');
+            const nextRow = currentRow.nextElementSibling;
+
+            if (nextRow && nextRow.classList.contains('expandable-row')) {
+                const isVisible = nextRow.style.display !== 'none';
+
+                if (isVisible) {
+                    nextRow.style.display = 'none';
+                    btn.innerHTML = '▼';
+                } else {
+                    nextRow.style.display = 'table-row';
+                    btn.innerHTML = '▲';
+                }
+            }
+        }
+
+        // 店铺订单展开功能
+        function toggleShopExpand(btn) {
+            const currentRow = btn.closest('tr');
+            const nextRow = currentRow.nextElementSibling;
+
+            if (nextRow && nextRow.classList.contains('expandable-row')) {
+                const isVisible = nextRow.style.display !== 'none';
+
+                if (isVisible) {
+                    nextRow.style.display = 'none';
+                    btn.innerHTML = '▼';
+                } else {
+                    nextRow.style.display = 'table-row';
+                    btn.innerHTML = '▲';
+                }
+            }
+        }
+
+        // 分页功能
+        document.querySelectorAll('.page-item:not(.disabled):not(.active)').forEach(item => {
+            item.addEventListener('click', function() {
+                if (!this.classList.contains('disabled') && this.textContent !== '...') {
+                    document.querySelectorAll('.page-item').forEach(p => p.classList.remove('active'));
+                    this.classList.add('active');
+                }
+            });
+        });
+
+        // 搜索功能
+        document.querySelector('.btn-primary').addEventListener('click', function() {
+            alert('执行查询操作');
+        });
+
+        document.querySelector('.btn-default').addEventListener('click', function() {
+            document.querySelectorAll('.form-input').forEach(input => {
+                input.value = '';
+            });
+        });
+
+        // 页面跳转功能
+        document.querySelector('.page-jump input').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                const page = parseInt(this.value);
+                if (page >= 1 && page <= 13) {
+                    document.querySelectorAll('.page-item').forEach(p => p.classList.remove('active'));
+                    alert('跳转到第 ' + page + ' 页');
+                }
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file