更新积分订单管理页面

- 实现可展开的二级表格结构，支持查看结算订单下的商品明细
- 添加展开/折叠功能和相关样式
- 更新JavaScript逻辑以支持新的数据结构和交互

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

@@ -232,6 +232,45 @@
             color: #fff;
         }
 
+        .expand-btn {
+            cursor: pointer;
+            user-select: none;
+            font-size: 12px;
+            color: #409eff;
+            transition: transform 0.2s;
+        }
+
+        .expand-btn:hover {
+            transform: scale(1.1);
+        }
+
+        .child-table {
+            width: 100%;
+            margin: 10px 0;
+            background-color: #fafafa;
+            border-radius: 4px;
+        }
+
+        .child-table th {
+            background-color: #f0f0f0;
+            font-weight: 500;
+            font-size: 12px;
+        }
+
+        .child-table td {
+            font-size: 12px;
+            background-color: #fafafa;
+        }
+
+        .parent-row:hover {
+            background-color: #f5f7fa;
+        }
+
+        .child-row td {
+            padding: 0;
+            border-bottom: none;
+        }
+
         @media (max-width: 768px) {
             .container {
                 padding: 10px;
@@ -299,80 +338,31 @@
                         <option value="completed">已完成</option>
                     </select>
                 </div>
-            </div>
 
                 <div class="btn-group">
                     <button class="btn btn-primary" onclick="searchOrders()">查询</button>
                     <button class="btn btn-default" onclick="resetForm()">重置</button>
                 </div>
             </div>
+        </div>
 
         <div class="table-container">
             <div class="table-wrapper">
                 <table class="data-table" id="ordersTable">
                     <thead>
                         <tr>
-						    <th>商品订单号</th>
+                            <th style="width: 40px;"></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>
+                    <tbody id="ordersTableBody">
-                        <tr>
+                        <!-- 数据将通过JavaScript动态生成 -->
-                            <td>PO2024010001</td>
-                            <td>¥158.00</td>
-                            <td>2</td>
-                            <td>200</td>
-                            <td>¥0.00</td>
-                            <td>积分换购</td>
-                            <td><span class="status-tag status-completed">已完成</span></td>
-                            <td>¥8.00</td>
-                            <td>¥2.00</td>
-                            <td>2024-01-15 14:30:22</td>
-                        </tr>
-                        <tr>
-                            <td>PO2024010002</td>
-                            <td>¥105.00</td>
-                            <td>1</td>
-                            <td>150</td>
-                            <td>¥52.50</td>
-                            <td>积分优惠购</td>
-                            <td><span class="status-tag status-pending">待备货</span></td>
-                            <td>¥6.00</td>
-                            <td>¥1.50</td>
-                            <td>2024-01-15 15:45:10</td>
-                        </tr>
-                        <tr>
-                            <td>PO2024010003</td>
-                            <td>¥268.00</td>
-                            <td>4</td>
-                            <td>380</td>
-                            <td>¥0.00</td>
-                            <td>积分换购</td>
-                            <td><span class="status-tag status-processing">待取货</span></td>
-                            <td>¥10.00</td>
-                            <td>¥3.00</td>
-                            <td>2024-01-15 16:20:35</td>
-                        </tr>
-                        <tr>
-                            <td>PO2024010004</td>
-                            <td>¥456.00</td>
-                            <td>6</td>
-                            <td>580</td>
-                            <td>¥228.00</td>
-                            <td>积分优惠购</td>
-                            <td><span class="status-tag status-processing">待收货</span></td>
-                            <td>¥15.00</td>
-                            <td>¥4.50</td>
-                            <td>2024-01-15 17:35:28</td>
-                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -383,61 +373,98 @@
     </div>
 
     <script>
-        // 模拟订单数据
+        // 模拟结算订单数据（一级表格数据）
-        const mockOrders = [
+        const settlementOrders = [
+            {
+                settlementOrderNo: 'SO2024010001',
+                booth: '牛牛蔬菜店',
+                status: '已完成',
+                deliveryFee: 8.00,
+                packageFee: 2.00,
+                dispatchFee: 3.00,
+                paymentTime: '2024-01-15 14:30:22',
+                // 商品明细（二级表格数据）
+                items: [
                     {
                         productOrderNo: 'PO2024010001',
+                        productName: '有机蔬菜礼盒',
                         originalPrice: 158.00,
                         productQuantity: 2,
                         pointsUsed: 200,
                         customerPayment: 0.00,
                         pointsType: '积分换购',
-                status: '已完成',
+                        status: '已完成'
-                deliveryFee: 8.00,
+                    }
-                packageFee: 2.00,
+                ]
-                paymentTime: '2024-01-15 14:30:22'
             },
+            {
+                settlementOrderNo: 'SO2024010002',
+                booth: '小明水果店',
+                status: '待备货',
+                deliveryFee: 6.00,
+                packageFee: 1.50,
+                dispatchFee: 2.00,
+                paymentTime: '2024-01-15 15:45:10',
+                items: [
                     {
                         productOrderNo: 'PO2024010002',
+                        productName: '进口苹果',
                         originalPrice: 105.00,
                         productQuantity: 1,
                         pointsUsed: 150,
                         customerPayment: 52.50,
                         pointsType: '积分优惠购',
-                status: '待备货',
+                        status: '待备货'
-                deliveryFee: 6.00,
+                    }
-                packageFee: 1.50,
+                ]
-                paymentTime: '2024-01-15 15:45:10'
             },
+            {
+                settlementOrderNo: 'SO2024010003',
+                booth: '王记杂货铺',
+                status: '待取货',
+                deliveryFee: 10.00,
+                packageFee: 3.00,
+                dispatchFee: 4.00,
+                paymentTime: '2024-01-15 16:20:35',
+                items: [
                     {
                         productOrderNo: 'PO2024010003',
+                        productName: '新鲜牛奶',
                         originalPrice: 268.00,
                         productQuantity: 4,
                         pointsUsed: 380,
                         customerPayment: 0.00,
                         pointsType: '积分换购',
-                status: '待取货',
+                        status: '待取货'
-                deliveryFee: 10.00,
+                    }
-                packageFee: 3.00,
+                ]
-                paymentTime: '2024-01-15 16:20:35'
             },
+            {
+                settlementOrderNo: 'SO2024010004',
+                booth: '牛牛蔬菜店',
+                status: '待收货',
+                deliveryFee: 15.00,
+                packageFee: 4.50,
+                dispatchFee: 5.00,
+                paymentTime: '2024-01-15 17:35:28',
+                items: [
                     {
                         productOrderNo: 'PO2024010004',
+                        productName: '精品牛肉',
                         originalPrice: 456.00,
                         productQuantity: 6,
                         pointsUsed: 580,
                         customerPayment: 228.00,
                         pointsType: '积分优惠购',
-                status: '待收货',
+                        status: '待收货'
-                deliveryFee: 15.00,
+                    }
-                packageFee: 4.50,
+                ]
-                paymentTime: '2024-01-15 17:35:28'
             }
         ];
 
-        // 渲染表格数据
+        // 渲染一级表格数据
         function renderTable(data = []) {
-            const tbody = document.querySelector('#ordersTable tbody');
+            const tbody = document.getElementById('ordersTableBody');
             const noDataMsg = document.getElementById('noDataMsg');
             
             if (data.length === 0) {
@@ -448,20 +475,70 @@
 
             noDataMsg.style.display = 'none';
             
-            tbody.innerHTML = data.map(order => `
+            tbody.innerHTML = data.map((order, index) => `
-                <tr>
+                <tr class="parent-row" data-index="${index}">
-                    <td>${order.productOrderNo}</td>
+                    <td><span class="expand-btn">▶</span></td>
-                    <td>¥${order.originalPrice.toFixed(2)}</td>
+                    <td>${order.settlementOrderNo}</td>
-                    <td>${order.productQuantity}</td>
+                    <td>${order.booth}</td>
-                    <td>${order.pointsUsed}</td>
-                    <td>¥${order.customerPayment.toFixed(2)}</td>
-                    <td>${order.pointsType}</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>
                 </tr>
+                <tr class="child-row" data-parent-index="${index}" style="display: none;">
+                    <td colspan="8">
+                        <table class="data-table child-table">
+                            <thead>
+                                <tr>
+                                    <th>商品订单号</th>
+                                    <th>商品名称</th>
+                                    <th>商品原价</th>
+                                    <th>商品数量</th>
+                                    <th>消耗积分</th>
+                                    <th>顾客支付</th>
+                                    <th>积分类型</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>
+                                    </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+                    </td>
+                </tr>
             `).join('');
+            
+            // 添加展开/折叠事件监听器
+            document.querySelectorAll('.expand-btn').forEach((btn, index) => {
+                btn.addEventListener('click', function() {
+                    toggleRow(index);
+                });
+            });
+        }
+
+        // 展开/折叠行
+        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');
+            
+            if (childRow.style.display === 'none' || childRow.style.display === '') {
+                childRow.style.display = 'table-row';
+                expandBtn.textContent = '▼';
+            } else {
+                childRow.style.display = 'none';
+                expandBtn.textContent = '▶';
+            }
         }
 
         // 获取状态样式类
@@ -485,7 +562,7 @@
             console.log('搜索参数:', { storeSelect, productName, orderStatus });
             
             // 模拟搜索结果
-            let filteredOrders = [...mockOrders];
+            let filteredOrders = [...settlementOrders];
             
             if (orderStatus) {
                 const statusMap = {
@@ -507,7 +584,7 @@
             document.getElementById('storeSelect').value = '';
             document.getElementById('productName').value = '';
             document.getElementById('orderStatus').value = '';
-            renderTable([]);
+            renderTable(settlementOrders);
         }
 
         // 导出订单
@@ -527,7 +604,7 @@
 
         // 页面加载完成后初始化
         document.addEventListener('DOMContentLoaded', function() {
-            renderTable([]);
+            renderTable(settlementOrders);
         });
     </script>
 </body>