1

商家端web/2.1 营销工具/2.1.1 会员功能/积分订单/积分订单管理.html

@@ -271,6 +271,67 @@
             border-bottom: none;
         }
 
+        /* 三级表格样式 */
+        .level1-row {
+            background-color: #fff;
+        }
+
+        .level1-row:hover {
+            background-color: #f5f7fa;
+        }
+
+        .level2-container td {
+            padding: 0;
+            border-bottom: none;
+        }
+
+        .level2-table {
+            margin: 5px 0;
+            background-color: #f8f9fa;
+        }
+
+        .level2-table th {
+            background-color: #eef1f6;
+            font-size: 12px;
+            padding: 8px 6px;
+        }
+
+        .level2-table td {
+            background-color: #f8f9fa;
+            font-size: 12px;
+            padding: 8px 6px;
+        }
+
+        .level2-row:hover {
+            background-color: #ecf5ff;
+        }
+
+        .level3-container td {
+            padding: 0;
+            border-bottom: none;
+        }
+
+        .level3-table {
+            margin: 5px 0;
+            background-color: #fafbfc;
+        }
+
+        .level3-table th {
+            background-color: #e8eaec;
+            font-size: 11px;
+            padding: 6px 4px;
+        }
+
+        .level3-table td {
+            background-color: #fafbfc;
+            font-size: 11px;
+            padding: 6px 4px;
+        }
+
+        .level3-table tr:hover {
+            background-color: #f0f9ff;
+        }
+
         @media (max-width: 768px) {
             .container {
                 padding: 10px;
@@ -352,12 +413,13 @@
                     <thead>
                         <tr>
                             <th style="width: 40px;"></th>
-                            <th>店铺订单号</th>
+                            <th>结算单位订单号</th>
                             <th>摊位</th>
                             <th>订单状态</th>
                             <th>配送费</th>
                             <th>打包费</th>
                             <th>调度费</th>
+                            <th>总费用</th>
                             <th>支付时间</th>
                         </tr>
                     </thead>
@@ -373,17 +435,22 @@
     </div>
 
     <script>
-        // 模拟结算订单数据（一级表格数据）
+        // 模拟结算订单数据（三级表格数据）
         const settlementOrders = [
             {
-                settlementOrderNo: 'SO2024010001',
+                settlementOrderNo: 'SU2024010001',
-                booth: '牛牛蔬菜店',
                 status: '已完成',
                 deliveryFee: 8.00,
                 packageFee: 2.00,
                 dispatchFee: 3.00,
+                totalFee: 13.00,
                 paymentTime: '2024-01-15 14:30:22',
-                // 商品明细（二级表格数据）
+                // 店铺订单（二级表格数据）
+                storeOrders: [
+                    {
+                        storeOrderNo: 'SO2024010001',
+                        booth: '牛牛蔬菜店',
+                        // 商品明细（三级表格数据）
                         items: [
                             {
                                 productOrderNo: 'PO2024010001',
@@ -396,15 +463,21 @@
                                 status: '已完成'
                             }
                         ]
+                    }
+                ]
             },
             {
-                settlementOrderNo: 'SO2024010002',
+                settlementOrderNo: 'SU2024010002',
-                booth: '小明水果店',
                 status: '待备货',
                 deliveryFee: 6.00,
                 packageFee: 1.50,
                 dispatchFee: 2.00,
+                totalFee: 9.50,
                 paymentTime: '2024-01-15 15:45:10',
+                storeOrders: [
+                    {
+                        storeOrderNo: 'SO2024010002',
+                        booth: '小明水果店',
                         items: [
                             {
                                 productOrderNo: 'PO2024010002',
@@ -417,15 +490,21 @@
                                 status: '待备货'
                             }
                         ]
+                    }
+                ]
             },
             {
-                settlementOrderNo: 'SO2024010003',
+                settlementOrderNo: 'SU2024010003',
-                booth: '王记杂货铺',
                 status: '待取货',
                 deliveryFee: 10.00,
                 packageFee: 3.00,
                 dispatchFee: 4.00,
+                totalFee: 17.00,
                 paymentTime: '2024-01-15 16:20:35',
+                storeOrders: [
+                    {
+                        storeOrderNo: 'SO2024010003',
+                        booth: '王记杂货铺',
                         items: [
                             {
                                 productOrderNo: 'PO2024010003',
@@ -438,15 +517,21 @@
                                 status: '待取货'
                             }
                         ]
+                    }
+                ]
             },
             {
-                settlementOrderNo: 'SO2024010004',
+                settlementOrderNo: 'SU2024010004',
-                booth: '牛牛蔬菜店',
                 status: '待收货',
                 deliveryFee: 15.00,
                 packageFee: 4.50,
                 dispatchFee: 5.00,
+                totalFee: 24.50,
                 paymentTime: '2024-01-15 17:35:28',
+                storeOrders: [
+                    {
+                        storeOrderNo: 'SO2024010004',
+                        booth: '牛牛蔬菜店',
                         items: [
                             {
                                 productOrderNo: 'PO2024010004',
@@ -460,9 +545,11 @@
                             }
                         ]
                     }
+                ]
+            }
         ];
 
-        // 渲染一级表格数据
+        // 渲染三级表格数据
         function renderTable(data = []) {
             const tbody = document.getElementById('ordersTableBody');
             const noDataMsg = document.getElementById('noDataMsg');
@@ -475,20 +562,43 @@
 
             noDataMsg.style.display = 'none';
             
-            tbody.innerHTML = data.map((order, index) => `
+            tbody.innerHTML = data.map((settlementOrder, settlementIndex) => `
-                <tr class="parent-row" data-index="${index}">
+                <!-- 第一层：结算单位订单 -->
-                    <td><span class="expand-btn">▶</span></td>
+                <tr class="level1-row" data-settlement-index="${settlementIndex}">
-                    <td>${order.settlementOrderNo}</td>
+                    <td><span class="expand-btn level1-expand">▶</span></td>
-                    <td>${order.booth}</td>
+                    <td>${settlementOrder.settlementOrderNo}</td>
-                    <td><span class="status-tag ${getStatusClass(order.status)}">${order.status}</span></td>
+                    <td>-</td>
-                    <td>¥${order.deliveryFee.toFixed(2)}</td>
+                    <td><span class="status-tag ${getStatusClass(settlementOrder.status)}">${settlementOrder.status}</span></td>
-                    <td>¥${order.packageFee.toFixed(2)}</td>
+                    <td>¥${settlementOrder.deliveryFee.toFixed(2)}</td>
-                    <td>¥${order.dispatchFee.toFixed(2)}</td>
+                    <td>¥${settlementOrder.packageFee.toFixed(2)}</td>
-                    <td>${order.paymentTime}</td>
+                    <td>¥${settlementOrder.dispatchFee.toFixed(2)}</td>
+                    <td>¥${settlementOrder.totalFee.toFixed(2)}</td>
+                    <td>${settlementOrder.paymentTime}</td>
                 </tr>
-                <tr class="child-row" data-parent-index="${index}" style="display: none;">
+                <!-- 第二层：店铺订单 -->
-                    <td colspan="8">
+                <tr class="level2-container" data-settlement-index="${settlementIndex}" style="display: none;">
-                        <table class="data-table child-table">
+                    <td colspan="9">
+                        <table class="data-table child-table level2-table">
+                            <thead>
+                                <tr>
+                                    <th style="width: 40px;"></th>
+                                    <th>店铺订单号</th>
+                                    <th>摊位</th>
+                                    <th colspan="6"></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                ${settlementOrder.storeOrders.map((storeOrder, storeIndex) => `
+                                    <tr class="level2-row" data-settlement-index="${settlementIndex}" data-store-index="${storeIndex}">
+                                        <td><span class="expand-btn level2-expand">▶</span></td>
+                                        <td>${storeOrder.storeOrderNo}</td>
+                                        <td>${storeOrder.booth}</td>
+                                        <td colspan="6"></td>
+                                    </tr>
+                                    <!-- 第三层：商品详情 -->
+                                    <tr class="level3-container" data-settlement-index="${settlementIndex}" data-store-index="${storeIndex}" style="display: none;">
+                                        <td colspan="9">
+                                            <table class="data-table child-table level3-table">
                                                 <thead>
                                                     <tr>
                                                         <th>商品订单号</th>
@@ -501,7 +611,7 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody>
-                                ${order.items.map(item => `
+                                                    ${storeOrder.items.map(item => `
                                                         <tr>
                                                             <td>${item.productOrderNo}</td>
                                                             <td>${item.productName}</td>
@@ -516,27 +626,67 @@
                                             </table>
                                         </td>
                                     </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
             `).join('');
             
-            // 添加展开/折叠事件监听器
+            // 添加三级展开/折叠事件监听器
-            document.querySelectorAll('.expand-btn').forEach((btn, index) => {
+            addExpandListeners();
+        }
+
+        // 添加三级展开/折叠事件监听器
+        function addExpandListeners() {
+            // 第一层展开/折叠（结算单位订单）
+            document.querySelectorAll('.level1-expand').forEach(btn => {
                 btn.addEventListener('click', function() {
-                    toggleRow(index);
+                    const settlementIndex = this.closest('tr').dataset.settlementIndex;
+                    toggleLevel2(settlementIndex, this);
+                });
+            });
+            
+            // 第二层展开/折叠（店铺订单）
+            document.querySelectorAll('.level2-expand').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const settlementIndex = this.closest('tr').dataset.settlementIndex;
+                    const storeIndex = this.closest('tr').dataset.storeIndex;
+                    toggleLevel3(settlementIndex, storeIndex, this);
                 });
             });
         }
         
-        // 展开/折叠行
+        // 展开/折叠第二层（店铺订单）
-        function toggleRow(index) {
+        function toggleLevel2(settlementIndex, expandBtn) {
-            const parentRow = document.querySelector(`.parent-row[data-index="${index}"]`);
+            const level2Container = document.querySelector(`.level2-container[data-settlement-index="${settlementIndex}"]`);
-            const childRow = document.querySelector(`.child-row[data-parent-index="${index}"]`);
-            const expandBtn = parentRow.querySelector('.expand-btn');
             
-            if (childRow.style.display === 'none' || childRow.style.display === '') {
+            if (level2Container.style.display === 'none' || level2Container.style.display === '') {
-                childRow.style.display = 'table-row';
+                level2Container.style.display = 'table-row';
                 expandBtn.textContent = '▼';
             } else {
-                childRow.style.display = 'none';
+                level2Container.style.display = 'none';
+                expandBtn.textContent = '▶';
+                // 同时关闭所有第三层
+                const level3Containers = document.querySelectorAll(`.level3-container[data-settlement-index="${settlementIndex}"]`);
+                level3Containers.forEach(container => {
+                    container.style.display = 'none';
+                });
+                // 重置第二层展开按钮
+                const level2Btns = document.querySelectorAll(`.level2-expand[data-settlement-index="${settlementIndex}"]`);
+                level2Btns.forEach(btn => btn.textContent = '▶');
+            }
+        }
+        
+        // 展开/折叠第三层（商品详情）
+        function toggleLevel3(settlementIndex, storeIndex, expandBtn) {
+            const level3Container = document.querySelector(`.level3-container[data-settlement-index="${settlementIndex}"][data-store-index="${storeIndex}"]`);
+            
+            if (level3Container.style.display === 'none' || level3Container.style.display === '') {
+                level3Container.style.display = 'table-row';
+                expandBtn.textContent = '▼';
+            } else {
+                level3Container.style.display = 'none';
                 expandBtn.textContent = '▶';
             }
         }