From e6f83c6c5d98c2baed4ccaa8ded864b677894aef Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Sun, 17 Aug 2025 01:09:45 +0800
Subject: [PATCH] 1

---
 .../2.1.1 会员功能/积分订单/积分订单管理.html | 328 +++++++++++++-----
 1 file changed, 239 insertions(+), 89 deletions(-)

diff --git a/商家端web/2.1 营销工具/2.1.1 会员功能/积分订单/积分订单管理.html b/商家端web/2.1 营销工具/2.1.1 会员功能/积分订单/积分订单管理.html
index 7072d20..70f0c5f 100644
--- a/商家端web/2.1 营销工具/2.1.1 会员功能/积分订单/积分订单管理.html	
+++ b/商家端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,96 +435,121 @@
     </div>
 
     <script>
-        // 模拟结算订单数据（一级表格数据）
+        // 模拟结算订单数据（三级表格数据）
         const settlementOrders = [
             {
-                settlementOrderNo: 'SO2024010001',
-                booth: '牛牛蔬菜店',
+                settlementOrderNo: 'SU2024010001',
                 status: '已完成',
                 deliveryFee: 8.00,
                 packageFee: 2.00,
                 dispatchFee: 3.00,
+                totalFee: 13.00,
                 paymentTime: '2024-01-15 14:30:22',
-                // 商品明细（二级表格数据）
-                items: [
+                // 店铺订单（二级表格数据）
+                storeOrders: [
                     {
-                        productOrderNo: 'PO2024010001',
-                        productName: '有机蔬菜礼盒',
-                        originalPrice: 158.00,
-                        productQuantity: 2,
-                        pointsUsed: 200,
-                        customerPayment: 0.00,
-                        pointsType: '积分换购',
-                        status: '已完成'
+                        storeOrderNo: 'SO2024010001',
+                        booth: '牛牛蔬菜店',
+                        // 商品明细（三级表格数据）
+                        items: [
+                            {
+                                productOrderNo: 'PO2024010001',
+                                productName: '有机蔬菜礼盒',
+                                originalPrice: 158.00,
+                                productQuantity: 2,
+                                pointsUsed: 200,
+                                customerPayment: 0.00,
+                                pointsType: '积分换购',
+                                status: '已完成'
+                            }
+                        ]
                     }
                 ]
             },
             {
-                settlementOrderNo: 'SO2024010002',
-                booth: '小明水果店',
+                settlementOrderNo: 'SU2024010002',
                 status: '待备货',
                 deliveryFee: 6.00,
                 packageFee: 1.50,
                 dispatchFee: 2.00,
+                totalFee: 9.50,
                 paymentTime: '2024-01-15 15:45:10',
-                items: [
+                storeOrders: [
                     {
-                        productOrderNo: 'PO2024010002',
-                        productName: '进口苹果',
-                        originalPrice: 105.00,
-                        productQuantity: 1,
-                        pointsUsed: 150,
-                        customerPayment: 52.50,
-                        pointsType: '积分优惠购',
-                        status: '待备货'
+                        storeOrderNo: 'SO2024010002',
+                        booth: '小明水果店',
+                        items: [
+                            {
+                                productOrderNo: 'PO2024010002',
+                                productName: '进口苹果',
+                                originalPrice: 105.00,
+                                productQuantity: 1,
+                                pointsUsed: 150,
+                                customerPayment: 52.50,
+                                pointsType: '积分优惠购',
+                                status: '待备货'
+                            }
+                        ]
                     }
                 ]
             },
             {
-                settlementOrderNo: 'SO2024010003',
-                booth: '王记杂货铺',
+                settlementOrderNo: 'SU2024010003',
                 status: '待取货',
                 deliveryFee: 10.00,
                 packageFee: 3.00,
                 dispatchFee: 4.00,
+                totalFee: 17.00,
                 paymentTime: '2024-01-15 16:20:35',
-                items: [
+                storeOrders: [
                     {
-                        productOrderNo: 'PO2024010003',
-                        productName: '新鲜牛奶',
-                        originalPrice: 268.00,
-                        productQuantity: 4,
-                        pointsUsed: 380,
-                        customerPayment: 0.00,
-                        pointsType: '积分换购',
-                        status: '待取货'
+                        storeOrderNo: 'SO2024010003',
+                        booth: '王记杂货铺',
+                        items: [
+                            {
+                                productOrderNo: 'PO2024010003',
+                                productName: '新鲜牛奶',
+                                originalPrice: 268.00,
+                                productQuantity: 4,
+                                pointsUsed: 380,
+                                customerPayment: 0.00,
+                                pointsType: '积分换购',
+                                status: '待取货'
+                            }
+                        ]
                     }
                 ]
             },
             {
-                settlementOrderNo: 'SO2024010004',
-                booth: '牛牛蔬菜店',
+                settlementOrderNo: 'SU2024010004',
                 status: '待收货',
                 deliveryFee: 15.00,
                 packageFee: 4.50,
                 dispatchFee: 5.00,
+                totalFee: 24.50,
                 paymentTime: '2024-01-15 17:35:28',
-                items: [
+                storeOrders: [
                     {
-                        productOrderNo: 'PO2024010004',
-                        productName: '精品牛肉',
-                        originalPrice: 456.00,
-                        productQuantity: 6,
-                        pointsUsed: 580,
-                        customerPayment: 228.00,
-                        pointsType: '积分优惠购',
-                        status: '待收货'
+                        storeOrderNo: 'SO2024010004',
+                        booth: '牛牛蔬菜店',
+                        items: [
+                            {
+                                productOrderNo: 'PO2024010004',
+                                productName: '精品牛肉',
+                                originalPrice: 456.00,
+                                productQuantity: 6,
+                                pointsUsed: 580,
+                                customerPayment: 228.00,
+                                pointsType: '积分优惠购',
+                                status: '待收货'
+                            }
+                        ]
                     }
                 ]
             }
         ];
 
-        // 渲染一级表格数据
+        // 渲染三级表格数据
         function renderTable(data = []) {
             const tbody = document.getElementById('ordersTableBody');
             const noDataMsg = document.getElementById('noDataMsg');
@@ -475,41 +562,69 @@
 
             noDataMsg.style.display = 'none';
             
-            tbody.innerHTML = data.map((order, index) => `
-                <tr class="parent-row" data-index="${index}">
-                    <td><span class="expand-btn">▶</span></td>
-                    <td>${order.settlementOrderNo}</td>
-                    <td>${order.booth}</td>
-                    <td><span class="status-tag ${getStatusClass(order.status)}">${order.status}</span></td>
-                    <td>¥${order.deliveryFee.toFixed(2)}</td>
-                    <td>¥${order.packageFee.toFixed(2)}</td>
-                    <td>¥${order.dispatchFee.toFixed(2)}</td>
-                    <td>${order.paymentTime}</td>
+            tbody.innerHTML = data.map((settlementOrder, settlementIndex) => `
+                <!-- 第一层：结算单位订单 -->
+                <tr class="level1-row" data-settlement-index="${settlementIndex}">
+                    <td><span class="expand-btn level1-expand">▶</span></td>
+                    <td>${settlementOrder.settlementOrderNo}</td>
+                    <td>-</td>
+                    <td><span class="status-tag ${getStatusClass(settlementOrder.status)}">${settlementOrder.status}</span></td>
+                    <td>¥${settlementOrder.deliveryFee.toFixed(2)}</td>
+                    <td>¥${settlementOrder.packageFee.toFixed(2)}</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">
-                        <table class="data-table child-table">
+                <!-- 第二层：店铺订单 -->
+                <tr class="level2-container" data-settlement-index="${settlementIndex}" style="display: none;">
+                    <td colspan="9">
+                        <table class="data-table child-table level2-table">
                             <thead>
                                 <tr>
-                                    <th>商品订单号</th>
-                                    <th>商品名称</th>
-                                    <th>商品原价</th>
-                                    <th>商品数量</th>
-                                    <th>消耗积分</th>
-                                    <th>顾客支付</th>
-                                    <th>积分类型</th>
+                                    <th style="width: 40px;"></th>
+                                    <th>店铺订单号</th>
+                                    <th>摊位</th>
+                                    <th colspan="6"></th>
                                 </tr>
                             </thead>
                             <tbody>
-                                ${order.items.map(item => `
-                                    <tr>
-                                        <td>${item.productOrderNo}</td>
-                                        <td>${item.productName}</td>
-                                        <td>¥${item.originalPrice.toFixed(2)}</td>
-                                        <td>${item.productQuantity}</td>
-                                        <td>${item.pointsUsed}</td>
-                                        <td>¥${item.customerPayment.toFixed(2)}</td>
-                                        <td>${item.pointsType}</td>
+                                ${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>
+                                                        <th>商品名称</th>
+                                                        <th>商品原价</th>
+                                                        <th>商品数量</th>
+                                                        <th>消耗积分</th>
+                                                        <th>顾客支付</th>
+                                                        <th>积分类型</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    ${storeOrder.items.map(item => `
+                                                        <tr>
+                                                            <td>${item.productOrderNo}</td>
+                                                            <td>${item.productName}</td>
+                                                            <td>¥${item.originalPrice.toFixed(2)}</td>
+                                                            <td>${item.productQuantity}</td>
+                                                            <td>${item.pointsUsed}</td>
+                                                            <td>¥${item.customerPayment.toFixed(2)}</td>
+                                                            <td>${item.pointsType}</td>
+                                                        </tr>
+                                                    `).join('')}
+                                                </tbody>
+                                            </table>
+                                        </td>
                                     </tr>
                                 `).join('')}
                             </tbody>
@@ -518,25 +633,60 @@
                 </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) {
-            const parentRow = document.querySelector(`.parent-row[data-index="${index}"]`);
-            const childRow = document.querySelector(`.child-row[data-parent-index="${index}"]`);
-            const expandBtn = parentRow.querySelector('.expand-btn');
+        
+        // 展开/折叠第二层（店铺订单）
+        function toggleLevel2(settlementIndex, expandBtn) {
+            const level2Container = document.querySelector(`.level2-container[data-settlement-index="${settlementIndex}"]`);
             
-            if (childRow.style.display === 'none' || childRow.style.display === '') {
-                childRow.style.display = 'table-row';
+            if (level2Container.style.display === 'none' || level2Container.style.display === '') {
+                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 = '▶';
             }
         }