From 1caf519d18edd9bdb212bb36abeb60883ef36720 Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Wed, 6 Aug 2025 12:42:38 +0800
Subject: [PATCH] 1

---
 web/会员管理/积分订单/订单管理系统.html | 415 ++++++++++++++++++++++++
 1 file changed, 415 insertions(+)
 create mode 100644 web/会员管理/积分订单/订单管理系统.html
diff --git a/web/会员管理/积分订单/订单管理系统.html b/web/会员管理/积分订单/订单管理系统.html
new file mode 100644
index 0000000..d9c630b
--- /dev/null
+++ b/web/会员管理/积分订单/订单管理系统.html
@@ -0,0 +1,415 @@
+<!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: 'Microsoft YaHei', sans-serif;
+            background-color: #f5f5f5;
+            padding: 20px;
+        }
+
+        .header {
+            background: white;
+            padding: 20px;
+            margin-bottom: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .header h1 {
+            font-size: 24px;
+            color: #333;
+            margin-bottom: 10px;
+        }
+
+        .header p {
+            color: #666;
+            font-size: 14px;
+        }
+
+        .order-container {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+
+        /* 第一级表格样式 */
+        .level-1-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 14px;
+        }
+
+        .level-1-table th {
+            background: #f8f9fa;
+            padding: 12px 8px;
+            text-align: center;
+            border-bottom: 2px solid #dee2e6;
+            font-weight: 600;
+            color: #495057;
+            font-size: 13px;
+        }
+
+        .level-1-table td {
+            padding: 12px 8px;
+            text-align: center;
+            border-bottom: 1px solid #dee2e6;
+            color: #212529;
+        }
+
+        .expandable-row {
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+
+        .expandable-row:hover {
+            background-color: #f8f9fa;
+        }
+
+        .expand-icon {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+            transition: transform 0.3s;
+        }
+
+        .expand-icon.expanded {
+            transform: rotate(90deg);
+        }
+
+        /* 第二级表格样式 */
+        .level-2-container {
+            display: none;
+            background: #f8f9fa;
+            border-top: 1px solid #dee2e6;
+        }
+
+        .level-2-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-left: 30px;
+            font-size: 14px;
+        }
+
+        .level-2-table th {
+            background: #e9ecef;
+            padding: 10px 8px;
+            text-align: center;
+            border-bottom: 1px solid #dee2e6;
+            font-weight: 600;
+            color: #495057;
+        }
+
+        .level-2-table td {
+            padding: 10px 8px;
+            text-align: center;
+            border-bottom: 1px solid #dee2e6;
+            color: #212529;
+        }
+
+        /* 第三级表格样式 */
+        .level-3-container {
+            display: none;
+            background: #ffffff;
+            border-top: 1px solid #dee2e6;
+        }
+
+        .level-3-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-left: 60px;
+            font-size: 13px;
+        }
+
+        .level-3-table th {
+            background: #f1f3f4;
+            padding: 8px 6px;
+            text-align: center;
+            border-bottom: 1px solid #dee2e6;
+            font-weight: 600;
+            color: #495057;
+            font-size: 12px;
+        }
+
+        .level-3-table td {
+            padding: 8px 6px;
+            text-align: center;
+            border-bottom: 1px solid #dee2e6;
+            color: #212529;
+        }
+
+        .product-image {
+            width: 40px;
+            height: 40px;
+            object-fit: cover;
+            border-radius: 4px;
+            border: 1px solid #dee2e6;
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+            
+            .level-1-table th,
+            .level-1-table td {
+                padding: 8px 4px;
+                font-size: 12px;
+            }
+            
+            .level-2-table,
+            .level-3-table {
+                margin-left: 15px;
+            }
+            
+            .level-2-table th,
+            .level-2-table td {
+                padding: 8px 4px;
+                font-size: 12px;
+            }
+            
+            .level-3-table th,
+            .level-3-table td {
+                padding: 6px 3px;
+                font-size: 11px;
+            }
+            
+            .product-image {
+                width: 30px;
+                height: 30px;
+            }
+        }
+
+        /* 层级指示线 */
+        .level-indicator {
+            position: relative;
+        }
+
+        .level-indicator:before {
+            content: '';
+            position: absolute;
+            left: -20px;
+            top: 0;
+            bottom: 0;
+            width: 3px;
+            background: #007bff;
+        }
+
+        .level-2-indicator:before {
+            background: #28a745;
+        }
+
+        .level-3-indicator:before {
+            background: #ffc107;
+        }
+
+        .order-level-badge {
+            display: inline-block;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-size: 11px;
+            font-weight: 600;
+            margin-right: 8px;
+        }
+
+        .level-1-badge {
+            background: #e3f2fd;
+            color: #1976d2;
+        }
+
+        .level-2-badge {
+            background: #e8f5e8;
+            color: #388e3c;
+        }
+
+        .level-3-badge {
+            background: #fff3e0;
+            color: #f57c00;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>订单管理系统</h1>
+        <p>多级订单详情查看系统 - 支持总订单、店铺订单、商品订单三级展开</p>
+    </div>
+
+    <div class="order-container">
+        <!-- 第一级表格 - 总订单信息 -->
+        <table class="level-1-table">
+            <thead>
+                <tr>
+                    <th>操作</th>
+                    <th>总订单号</th>
+                    <th>顾客支付</th>
+                    <th>配送费</th>
+                    <th>优惠券减免</th>
+                    <th>下单时间</th>
+                    <th>预计送达时间</th>
+                    <th>预计收入</th>
+                    <th>距离</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="expandable-row" onclick="toggleLevel2(this)">
+                    <td>
+                        <span class="order-level-badge level-1-badge">总订单</span>
+                        <span class="expand-icon">▶</span>
+                    </td>
+                    <td>111202507191533848089917</td>
+                    <td>3.8</td>
+                    <td>0</td>
+                    <td>0</td>
+                    <td>2025-07-19 15:34:13</td>
+                    <td>-</td>
+                    <td>3.18</td>
+                    <td>0.125078736989803303</td>
+                </tr>
+                <tr class="level-2-container">
+                    <td colspan="9" class="level-indicator level-2-indicator">
+                        <!-- 第二级表格 - 店铺订单信息 -->
+                        <table class="level-2-table">
+                            <thead>
+                                <tr>
+                                    <th>操作</th>
+                                    <th>序号</th>
+                                    <th>店铺名称</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="expandable-row" onclick="toggleLevel3(this)">
+                                    <td>
+                                        <span class="order-level-badge level-2-badge">店铺</span>
+                                        <span class="expand-icon">▶</span>
+                                    </td>
+                                    <td>1</td>
+                                    <td>牛牛蔬菜店</td>
+                                </tr>
+                                <tr class="level-3-container">
+                                    <td colspan="3" class="level-indicator level-3-indicator">
+                                        <!-- 第三级表格 - 商品订单信息 -->
+                                        <table class="level-3-table">
+                                            <thead>
+                                                <tr>
+                                                    <th>序号</th>
+                                                    <th>商品订单号</th>
+                                                    <th>商品名称</th>
+                                                    <th>商品原价</th>
+                                                    <th>商品终价</th>
+                                                    <th>商品订单金额</th>
+                                                    <th>商品数量</th>
+                                                    <th>商品单价</th>
+                                                    <th>商品图片</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr>
+                                                    <td><span class="order-level-badge level-3-badge">商品</span>1</td>
+                                                    <td>11420250719153384802014</td>
+                                                    <td>上海青约300g</td>
+                                                    <td>2</td>
+                                                    <td>2</td>
+                                                    <td>2</td>
+                                                    <td>1</td>
+                                                    <td>-</td>
+                                                    <td>
+                                                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGOEZGIi8+CjxwYXRoIGQ9Ik0yMCAzNUMyOC4yODQzIDM1IDM1IDI4LjI4NDMgMzUgMjBDMzUgMTEuNzE1NyAyOC4yODQzIDUgMjAgNUMxMS43MTU3IDUgNSAxMS43MTU3IDUgMjBDNSAyOC4yODQzIDExLjcxNTcgMzUgMjAgMzVaIiBzdHJva2U9IiM0Q0FGNTBCIE1IDkgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0xNSAxNUgyNSIgc3Ryb2tlPSIjNENBRjUwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTcgMjBIMjMiIHN0cm9rZT0iIzRDQUY1MCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTE5IDI1SDIxIiBzdHJva2U9IiM0Q0FGNTBILE1pdGVyPSJhY2FmaW50aWFsaXMiLz4KPHN2Zz4K" 
+                                                             alt="蔬菜图片" class="product-image">
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <script>
+        // 切换第二级表格显示状态
+        function toggleLevel2(row) {
+            const icon = row.querySelector('.expand-icon');
+            const nextRow = row.nextElementSibling;
+            
+            if (nextRow.style.display === 'none' || !nextRow.style.display) {
+                nextRow.style.display = 'table-row';
+                icon.classList.add('expanded');
+                icon.textContent = '▼';
+            } else {
+                nextRow.style.display = 'none';
+                icon.classList.remove('expanded');
+                icon.textContent = '▶';
+                
+                // 关闭所有第三级表格
+                const level3Containers = nextRow.querySelectorAll('.level-3-container');
+                level3Containers.forEach(container => {
+                    container.style.display = 'none';
+                    const level2Icon = container.parentElement.parentElement.querySelector('.expand-icon');
+                    if (level2Icon) {
+                        level2Icon.classList.remove('expanded');
+                        level2Icon.textContent = '▶';
+                    }
+                });
+            }
+        }
+
+        // 切换第三级表格显示状态
+        function toggleLevel3(row) {
+            const icon = row.querySelector('.expand-icon');
+            const nextRow = row.nextElementSibling;
+            
+            if (nextRow.style.display === 'none' || !nextRow.style.display) {
+                nextRow.style.display = 'table-row';
+                icon.classList.add('expanded');
+                icon.textContent = '▼';
+            } else {
+                nextRow.style.display = 'none';
+                icon.classList.remove('expanded');
+                icon.textContent = '▶';
+            }
+        }
+
+        // 页面加载时初始化所有展开容器为隐藏状态
+        document.addEventListener('DOMContentLoaded', function() {
+            const allContainers = document.querySelectorAll('.level-2-container, .level-3-container');
+            allContainers.forEach(container => {
+                container.style.display = 'none';
+            });
+        });
+
+        // 添加键盘支持
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                // 按ESC键收起所有展开的表格
+                const allContainers = document.querySelectorAll('.level-2-container, .level-3-container');
+                const allIcons = document.querySelectorAll('.expand-icon');
+                
+                allContainers.forEach(container => {
+                    container.style.display = 'none';
+                });
+                
+                allIcons.forEach(icon => {
+                    icon.classList.remove('expanded');
+                    icon.textContent = '▶';
+                });
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
