保存rp文件

- 在index.html中为分销管理添加了二级子菜单结构，改善了用户界面
- 增强了菜单项展开/收起的控制逻辑，提供了更好的交互体验
- 实现了菜单搜索功能，支持按文本内容过滤菜单项
- 添加了JavaScript错误监听器用于调试和错误追踪
- 修改了toggleSubmenu函数，优化了菜单展开/收起的行为控制

商家端web/index.html

@@ -156,6 +156,10 @@
             transform: rotate(90deg);
         }
 
+        .submenu-item.expanded .menu-arrow {
+            transform: rotate(90deg);
+        }
+
         .submenu {
             background-color: #fafafa;
             display: none;
@@ -165,6 +169,39 @@
             display: block;
         }
 
+        .submenu-item {
+            position: relative;
+        }
+
+        .submenu-item.expanded > .submenu {
+            display: block;
+        }
+
+        .submenu .submenu {
+            background-color: #f0f0f0;
+            display: none;
+        }
+
+        /* 确保二级子菜单也能正确显示 */
+        .menu-item.expanded .submenu-item.expanded > .submenu,
+        .submenu-item.expanded > .submenu {
+            display: block;
+        }
+        
+        /* 特别为分销管理的嵌套子菜单提供显示规则 */
+        .menu-item.expanded .submenu .submenu-item.expanded .submenu {
+            display: block;
+        }
+        
+        /* 确保在品牌管理展开的情况下，分销管理的子菜单能正确显示 */
+        .menu-item.expanded .submenu .submenu-item .submenu {
+            display: none; /* 默认隐藏 */
+        }
+        
+        .menu-item.expanded .submenu .submenu-item.expanded .submenu {
+            display: block; /* 只有在展开时才显示 */
+        }
+
         .submenu-link {
             padding: 8px 20px 8px 46px;
             font-size: 13px;
@@ -286,7 +323,7 @@
             </li>
             
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-user-cog"></i>
                     </span>
@@ -308,7 +345,7 @@
             </li>
             
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-clipboard-list"></i>
                     </span>
@@ -343,7 +380,7 @@
             </li>
             
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-analytics"></i>
                     </span>
@@ -370,7 +407,7 @@
             
             
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-users"></i>
                     </span>
@@ -393,7 +430,7 @@
             
 
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-file-alt"></i>
                     </span>
@@ -419,7 +456,7 @@
             </li>
 
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-award"></i>
                     </span>
@@ -437,6 +474,25 @@
                         <span class="submenu-icon"></span>
                         品牌市场订单
                     </a>
+                    <div class="submenu-item">
+                        <div class="submenu-link" onclick="toggleSubmenu(this, event);">
+                            <span class="submenu-icon"></span>
+                            <span class="menu-text">分销管理</span>
+                            <span class="menu-arrow">
+                                <i class="fas fa-chevron-right"></i>
+                            </span>
+                        </div>
+                        <div class="submenu">
+                            <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/分销商管理.html', this);" style="padding-left: 70px;">
+                                <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>
                 </div>
             </li>
         </ul>
@@ -459,10 +515,58 @@
             sidebar.classList.toggle('open');
         }
 
-        // 切换子菜单展开/收起
+        // 切换顶级菜单展开/收起
-        function toggleSubmenu(element) {
+        function toggleTopLevelSubmenu(element) {
+            console.log('toggleTopLevelSubmenu called', element);
             const menuItem = element.parentElement;
-            menuItem.classList.toggle('expanded');
+            console.log('Parent menu item:', menuItem);
+
+            // 切换 expanded 类
+            const isExpanded = menuItem.classList.toggle('expanded');
+            console.log('Menu item expanded state:', isExpanded);
+
+            // 阻止事件冒泡，防止触发父级菜单的点击事件
+            if (event && event.stopPropagation) {
+                event.stopPropagation();
+            } else if (window.event) {
+                window.event.cancelBubble = true;
+            }
+            console.log('Event stopped from propagating');
+        }
+
+        // 切换子菜单展开/收起 - 适用于所有层级
+        function toggleSubmenu(element, event) {
+            console.log('toggleSubmenu called', element);
+            const parentElement = element.parentElement;
+            console.log('Parent element:', parentElement);
+            
+            let targetElement;
+            
+            // Check if this is a direct submenu item or nested submenu item
+            if (parentElement.classList.contains('submenu-item')) {
+                targetElement = parentElement;
+                console.log('Found submenu-item element');
+            } else {
+                targetElement = parentElement;
+                console.log('Using parent element directly');
+            }
+
+            console.log('Target element before toggle:', targetElement);
+            console.log('Target element classList:', targetElement.classList);
+
+            // Toggle expanded class
+            const isExpanded = targetElement.classList.toggle('expanded');
+            console.log('Target element expanded state after toggle:', isExpanded);
+            console.log('Target element classList after toggle:', targetElement.classList);
+
+            // Prevent event bubbling, to avoid triggering parent menu clicks
+            if (event && event.stopPropagation) {
+                event.stopPropagation();
+                console.log('Event stopped from propagating');
+            } else if (window.event) {
+                window.event.cancelBubble = true;
+                console.log('Event cancelBubble set to true');
+            }
         }
 
         // 加载内容到iframe
@@ -502,17 +606,22 @@
 
         // 菜单搜索功能
         document.querySelector('.search-input').addEventListener('input', function(e) {
+            console.log('Search input event triggered', e.target.value);
             const searchText = e.target.value.toLowerCase();
             const menuItems = document.querySelectorAll('.menu-item');
+            console.log('Found', menuItems.length, 'menu items');
             
             menuItems.forEach(item => {
                 const menuText = item.querySelector('.menu-text');
                 if (menuText) {
                     const text = menuText.textContent.toLowerCase();
+                    console.log('Checking menu text:', text);
                     if (text.includes(searchText) || searchText === '') {
                         item.style.display = 'block';
+                        console.log('Display set to block for:', text);
                     } else {
                         item.style.display = 'none';
+                        console.log('Display set to none for:', text);
                     }
                 }
             });
@@ -532,6 +641,16 @@
                 }
             });
         });
+        // 添加错误监听器以便调试
+        window.addEventListener('error', function(e) {
+            console.error('JavaScript Error:', e.error);
+            console.error('Error Message:', e.message);
+            console.error('Error Filename:', e.filename);
+            console.error('Error Line Number:', e.lineno);
+            console.error('Error Column Number:', e.colno);
+        });
+        
+        console.log('Page loaded and scripts initialized');
     </script>
 </body>
 </html>

商家端web/品牌管理/分销商管理.html

@@ -0,0 +1,853 @@
+<!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: #f5f5f5;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1600px;
+            margin: 0 auto;
+        }
+
+        .header-card {
+            background: white;
+            padding: 16px 24px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .page-title {
+            font-size: 24px;
+            font-weight: 600;
+            color: #262626;
+        }
+
+        .page-desc {
+            font-size: 14px;
+            color: #666;
+        }
+
+        .main-card {
+            background: white;
+            padding: 24px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .stat-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 16px;
+        }
+
+        .stat-card {
+            text-align: center;
+            padding: 20px;
+            border: 1px solid #f0f0f0;
+            border-radius: 8px;
+            background: #fafafa;
+        }
+
+        .stat-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .stat-icon {
+            font-size: 48px;
+            margin-bottom: 12px;
+        }
+
+        .stat-icon.primary { color: #1890ff; }
+        .stat-icon.success { color: #52c41a; }
+        .stat-icon.danger { color: #ff4d4f; }
+        .stat-icon.warning { color: #fa8c16; }
+
+        .stat-info {
+            width: 100%;
+        }
+
+        .stat-label {
+            font-size: 14px;
+            color: #666;
+            margin-bottom: 8px;
+        }
+
+        .stat-value {
+            font-size: 24px;
+            font-weight: 600;
+            color: #1890ff;
+        }
+
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid #f0f0f0;
+            margin-bottom: 20px;
+        }
+
+        .tab-item {
+            padding: 16px 20px;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+            margin-bottom: -1px;
+            color: #666;
+            font-size: 14px;
+            transition: all 0.3s;
+        }
+
+        .tab-item.active {
+            color: #1890ff;
+            border-bottom-color: #1890ff;
+        }
+
+        .tab-item:hover {
+            color: #1890ff;
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        .search-form {
+            margin: 20px 0;
+            padding: 20px;
+            background: #fafafa;
+            border-radius: 6px;
+        }
+
+        .form-item {
+            display: inline-block;
+            margin-right: 16px;
+            margin-bottom: 10px;
+        }
+
+        .form-item label {
+            margin-right: 8px;
+            color: #666;
+            font-weight: 500;
+            font-size: 14px;
+        }
+
+        .form-item input, .form-item select {
+            height: 40px;
+            padding: 0 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+        }
+
+        .form-item input:focus, .form-item select:focus {
+            outline: none;
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+
+        .btn {
+            height: 40px;
+            padding: 0 16px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-right: 12px;
+            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;
+        }
+
+        .btn-success {
+            background: #52c41a;
+            color: white;
+        }
+
+        .btn-success:hover {
+            background: #73d13d;
+        }
+
+        .btn-danger {
+            background: #ff4d4f;
+            color: white;
+        }
+
+        .btn-danger:hover {
+            background: #ff7875;
+        }
+
+        .btn-warning {
+            background: #fa8c16;
+            color: white;
+        }
+
+        .btn-warning:hover {
+            background: #ffa940;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+            font-size: 14px;
+        }
+
+        table th, table td {
+            border: 1px solid #f0f0f0;
+            padding: 12px 16px;
+            text-align: center;
+        }
+
+        table th {
+            background: #fafafa;
+            color: #666;
+            font-weight: 600;
+        }
+
+        table td {
+            border-bottom: 1px solid #f9f9f9;
+        }
+
+        table tbody tr:hover {
+            background: #f8f9fa;
+        }
+
+        .tag {
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+
+        .tag-success {
+            background: #f6ffed;
+            color: #52c41a;
+            border: 1px solid #b7eb8f;
+        }
+
+        .tag-warning {
+            background: #fff7e6;
+            color: #fa8c16;
+            border: 1px solid #ffd591;
+        }
+
+        .tag-danger {
+            background: #fff2f0;
+            color: #ff4d4f;
+            border: 1px solid #ffb3b3;
+        }
+
+        .tag-info {
+            background: #f4f4f5;
+            color: #666;
+            border: 1px solid #e4e4e7;
+        }
+
+        .pagination {
+            text-align: right;
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid #f0f0f0;
+            color: #666;
+            font-size: 14px;
+        }
+
+        @media screen and (max-width: 1200px) {
+            .stat-cards {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media screen and (max-width: 768px) {
+            .stat-cards {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        /* 弹窗样式 */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+
+        .modal.show {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-content {
+            background-color: white;
+            padding: 0;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 500px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+        }
+
+        .modal-header {
+            padding: 20px 24px;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .modal-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #262626;
+        }
+
+        .modal-body {
+            padding: 24px;
+        }
+
+        .modal-body p {
+            margin: 0;
+            font-size: 14px;
+            color: #666;
+            line-height: 1.6;
+        }
+
+        .modal-body textarea {
+            width: 100%;
+            min-height: 80px;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+            margin-top: 12px;
+            resize: vertical;
+        }
+
+        .modal-body textarea:focus {
+            outline: none;
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+
+        .modal-footer {
+            padding: 16px 24px;
+            border-top: 1px solid #f0f0f0;
+            display: flex;
+            justify-content: flex-end;
+            gap: 12px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 页面标题 -->
+        <div class="header-card">
+            <h1 class="page-title">分销商管理</h1>
+        </div>
+
+        <!-- 主内容 -->
+        <div class="main-card">
+            <!-- Tab选项卡 -->
+            <div class="tabs">
+                <div class="tab-item active" onclick="switchTab('apply')">申请审核</div>
+                <div class="tab-item" onclick="switchTab('distributor')">分销商列表</div>
+            </div>
+
+            <!-- 申请审核Tab -->
+            <div id="tab-apply" class="tab-content active">
+                <!-- 搜索表单 -->
+                <div class="search-form">
+                    <div class="form-item">
+                        <label>审核状态</label>
+                        <select style="width: 150px">
+                            <option value="">全部</option>
+                            <option value="0">待审核</option>
+                            <option value="-1">已拒绝</option>
+                        </select>
+                    </div>
+                    <div class="form-item">
+                        <label>申请人</label>
+                        <input type="text" placeholder="请输入申请人姓名" style="width: 200px">
+                    </div>
+                    <div class="form-item">
+                        <button class="btn btn-primary">查询</button>
+                        <button class="btn btn-default">重置</button>
+                        <button class="btn btn-success">一键通过</button>
+                    </div>
+                </div>
+
+                <!-- 申请列表表格 -->
+                <table>
+                    <thead>
+                        <tr>
+                            <th>申请人</th>
+                            <th>手机号</th>
+                            <th>申请时间</th>
+                            <th>审核时间</th>
+                            <th>审核状态</th>
+                            <th>拒绝理由</th>
+                            <th>操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>张三</td>
+                            <td>13800138001</td>
+                            <td>2024-01-15 10:30:00</td>
+                            <td>-</td>
+                            <td><span class="tag tag-warning">待审核</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('张三')">通过</button>
+                                <button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('张三')">拒绝</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>李四</td>
+                            <td>13800138002</td>
+                            <td>2024-01-16 14:20:00</td>
+                            <td>-</td>
+                            <td><span class="tag tag-warning">待审核</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('李四')">通过</button>
+                                <button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('李四')">拒绝</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>王五</td>
+                            <td>13800138003</td>
+                            <td>2024-01-17 09:15:00</td>
+                            <td>-</td>
+                            <td><span class="tag tag-warning">待审核</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('王五')">通过</button>
+                                <button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('王五')">拒绝</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>赵六</td>
+                            <td>13800138004</td>
+                            <td>2024-01-18 11:45:00</td>
+                            <td>2024-01-18 15:30:00</td>
+                            <td><span class="tag tag-danger">已拒绝</span></td>
+                            <td>资料不完整</td>
+                            <td>
+                                <button class="btn btn-primary" style="margin: 0; padding: 5px 12px;" disabled>详情</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>钱七</td>
+                            <td>13800138005</td>
+                            <td>2024-01-19 08:00:00</td>
+                            <td>-</td>
+                            <td><span class="tag tag-warning">待审核</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('钱七')">通过</button>
+                                <button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('钱七')">拒绝</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>孙八</td>
+                            <td>13800138006</td>
+                            <td>2024-01-20 13:25:00</td>
+                            <td>-</td>
+                            <td><span class="tag tag-warning">待审核</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('孙八')">通过</button>
+                                <button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('孙八')">拒绝</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <!-- 分页 -->
+                <div class="pagination">
+                    共 6 条
+                </div>
+            </div>
+
+            <!-- 分销商列表Tab -->
+            <div id="tab-distributor" class="tab-content">
+                <!-- 统计卡片 -->
+                <div class="stat-cards">
+                    <div class="stat-card">
+                        <div class="stat-content">
+                            <div class="stat-icon primary">👥</div>
+                            <div class="stat-info">
+                                <div class="stat-label">总分销商数</div>
+                                <div class="stat-value">8</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-content">
+                            <div class="stat-icon success">✅</div>
+                            <div class="stat-info">
+                                <div class="stat-label">启用中</div>
+                                <div class="stat-value">6</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-content">
+                            <div class="stat-icon danger">❌</div>
+                            <div class="stat-info">
+                                <div class="stat-label">已禁用</div>
+                                <div class="stat-value">2</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-content">
+                            <div class="stat-icon warning">⭐</div>
+                            <div class="stat-info">
+                                <div class="stat-label">高级分销商</div>
+                                <div class="stat-value">4</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 搜索表单 -->
+                <div class="search-form">
+                    <div class="form-item">
+                        <label>姓名</label>
+                        <input type="text" placeholder="请输入姓名" style="width: 150px">
+                    </div>
+                    <div class="form-item">
+                        <label>手机号</label>
+                        <input type="text" placeholder="请输入手机号" style="width: 150px">
+                    </div>
+                    <div class="form-item">
+                        <label>状态</label>
+                        <select style="width: 120px">
+                            <option value="">全部</option>
+                            <option value="1">启用</option>
+                            <option value="0">禁用</option>
+                        </select>
+                    </div>
+                    <div class="form-item">
+                        <label>等级</label>
+                        <select style="width: 150px">
+                            <option value="">全部</option>
+                            <option value="1">普通分销商</option>
+                            <option value="2">高级分销商</option>
+                            <option value="3">精英分销商</option>
+                        </select>
+                    </div>
+                    <div class="form-item">
+                        <button class="btn btn-primary">查询</button>
+                        <button class="btn btn-default">重置</button>
+                    </div>
+                </div>
+
+                <!-- 分销商列表表格 -->
+                <table>
+                    <thead>
+                        <tr>
+                            <th>姓名</th>
+                            <th>手机号</th>
+                            <th>等级</th>
+                            <th>进店量</th>
+                            <th>成为分销商时间</th>
+                            <th>状态</th>
+                            <th>禁用原因</th>
+                            <th>操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>张三</td>
+                            <td>13800138001</td>
+                            <td><span class="tag tag-info">普通分销商</span></td>
+                            <td>120</td>
+                            <td>2024-01-15 10:30:00</td>
+                            <td><span class="tag tag-success">启用</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
+                                <button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('张三')">禁用</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>李四</td>
+                            <td>13800138002</td>
+                            <td><span class="tag tag-success">高级分销商</span></td>
+                            <td>350</td>
+                            <td>2024-01-16 14:20:00</td>
+                            <td><span class="tag tag-success">启用</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
+                                <button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('李四')">禁用</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>王五</td>
+                            <td>13800138003</td>
+                            <td><span class="tag tag-warning">精英分销商</span></td>
+                            <td>680</td>
+                            <td>2024-01-17 09:15:00</td>
+                            <td><span class="tag tag-success">启用</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
+                                <button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('王五')">禁用</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>赵六</td>
+                            <td>13800138004</td>
+                            <td><span class="tag tag-info">普通分销商</span></td>
+                            <td>45</td>
+                            <td>2024-01-18 11:45:00</td>
+                            <td><span class="tag tag-danger">禁用</span></td>
+                            <td>违规推广</td>
+                            <td>
+                                <button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
+                                <button class="btn btn-success" style="margin: 0; padding: 5px 12px;">启用</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>孙八</td>
+                            <td>13800138006</td>
+                            <td><span class="tag tag-success">高级分销商</span></td>
+                            <td>280</td>
+                            <td>2024-01-20 13:25:00</td>
+                            <td><span class="tag tag-success">启用</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
+                                <button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('孙八')">禁用</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>周九</td>
+                            <td>13800138007</td>
+                            <td><span class="tag tag-info">普通分销商</span></td>
+                            <td>95</td>
+                            <td>2024-01-21 16:00:00</td>
+                            <td><span class="tag tag-success">启用</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
+                                <button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('周九')">禁用</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>吴十</td>
+                            <td>13800138008</td>
+                            <td><span class="tag tag-warning">精英分销商</span></td>
+                            <td>520</td>
+                            <td>2024-01-22 10:15:00</td>
+                            <td><span class="tag tag-success">启用</span></td>
+                            <td>-</td>
+                            <td>
+                                <button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
+                                <button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('吴十')">禁用</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>郑十一</td>
+                            <td>13800138009</td>
+                            <td><span class="tag tag-success">高级分销商</span></td>
+                            <td>310</td>
+                            <td>2024-01-23 14:30:00</td>
+                            <td><span class="tag tag-danger">禁用</span></td>
+                            <td>不符合资质要求</td>
+                            <td>
+                                <button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
+                                <button class="btn btn-success" style="margin: 0; padding: 5px 12px;">启用</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <!-- 分页 -->
+                <div class="pagination">
+                    共 8 条
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 通过确认弹窗 -->
+    <div id="approveModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title">确认通过</h3>
+            </div>
+            <div class="modal-body">
+                <p>确定要通过 <strong id="approveName"></strong> 的申请吗?</p>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-default" onclick="closeModal('approveModal')">取消</button>
+                <button class="btn btn-success" onclick="confirmApprove()">确认通过</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 拒绝确认弹窗 -->
+    <div id="rejectModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title">确认拒绝</h3>
+            </div>
+            <div class="modal-body">
+                <p>确定要拒绝 <strong id="rejectName"></strong> 的申请吗?</p>
+                <textarea id="rejectReason" placeholder="请输入拒绝理由(必填)"></textarea>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-default" onclick="closeModal('rejectModal')">取消</button>
+                <button class="btn btn-danger" onclick="confirmReject()">确认拒绝</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 禁用确认弹窗 -->
+    <div id="disableModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title">确认禁用</h3>
+            </div>
+            <div class="modal-body">
+                <p>确定要禁用分销商 <strong id="disableName"></strong> 吗?</p>
+                <textarea id="disableReason" placeholder="请输入禁用原因(必填)"></textarea>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-default" onclick="closeModal('disableModal')">取消</button>
+                <button class="btn btn-warning" onclick="confirmDisable()">确认禁用</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let currentApplicant = '';
+
+        function switchTab(tabName) {
+            // 移除所有active类
+            document.querySelectorAll('.tab-item').forEach(item => {
+                item.classList.remove('active');
+            });
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+
+            // 添加active类到当前tab
+            event.target.classList.add('active');
+            document.getElementById('tab-' + tabName).classList.add('active');
+        }
+
+        // 打开通过弹窗
+        function handleApprove(name) {
+            currentApplicant = name;
+            document.getElementById('approveName').textContent = name;
+            document.getElementById('approveModal').classList.add('show');
+        }
+
+        // 打开拒绝弹窗
+        function handleReject(name) {
+            currentApplicant = name;
+            document.getElementById('rejectName').textContent = name;
+            document.getElementById('rejectReason').value = '';
+            document.getElementById('rejectModal').classList.add('show');
+        }
+
+        // 关闭弹窗
+        function closeModal(modalId) {
+            document.getElementById(modalId).classList.remove('show');
+        }
+
+        // 确认通过
+        function confirmApprove() {
+            alert(`已通过 ${currentApplicant} 的申请`);
+            closeModal('approveModal');
+            // 这里可以添加实际的审核通过逻辑
+        }
+
+        // 确认拒绝
+        function confirmReject() {
+            const reason = document.getElementById('rejectReason').value.trim();
+            if (!reason) {
+                alert('请输入拒绝理由');
+                return;
+            }
+            alert(`已拒绝 ${currentApplicant} 的申请，理由：${reason}`);
+            closeModal('rejectModal');
+            // 这里可以添加实际的审核拒绝逻辑
+        }
+
+        // 打开禁用弹窗
+        function handleDisable(name) {
+            currentApplicant = name;
+            document.getElementById('disableName').textContent = name;
+            document.getElementById('disableReason').value = '';
+            document.getElementById('disableModal').classList.add('show');
+        }
+
+        // 确认禁用
+        function confirmDisable() {
+            const reason = document.getElementById('disableReason').value.trim();
+            if (!reason) {
+                alert('请输入禁用原因');
+                return;
+            }
+            alert(`已禁用分销商 ${currentApplicant}，原因：${reason}`);
+            closeModal('disableModal');
+            // 这里可以添加实际的禁用逻辑
+        }
+
+        // 点击弹窗外部关闭
+        window.onclick = function(event) {
+            if (event.target.classList.contains('modal')) {
+                event.target.classList.remove('show');
+            }
+        }
+    </script>
+</body>
+</html>

商家端web/品牌管理/分销订单与佣金管理.html

@@ -0,0 +1,654 @@
+<!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: #f5f5f5;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1600px;
+            margin: 0 auto;
+        }
+
+        .header-card {
+            background: white;
+            padding: 16px 24px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .page-title {
+            font-size: 24px;
+            font-weight: 600;
+            color: #262626;
+        }
+
+        .page-desc {
+            font-size: 14px;
+            color: #666;
+        }
+
+        .stat-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 16px;
+        }
+
+        .stat-card {
+            text-align: center;
+            padding: 20px;
+            border: 1px solid #f0f0f0;
+            border-radius: 8px;
+            background: #fafafa;
+        }
+
+        .stat-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .stat-icon {
+            font-size: 48px;
+            margin-bottom: 12px;
+        }
+
+        .stat-icon.primary { color: #1890ff; }
+        .stat-icon.success { color: #52c41a; }
+        .stat-icon.warning { color: #fa8c16; }
+        .stat-icon.info { color: #666; }
+
+        .stat-info {
+            width: 100%;
+        }
+
+        .stat-label {
+            font-size: 14px;
+            color: #666;
+            margin-bottom: 8px;
+        }
+
+        .stat-value {
+            font-size: 24px;
+            font-weight: 600;
+            color: #1890ff;
+        }
+
+        .main-card {
+            background: white;
+            padding: 24px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid #f0f0f0;
+            margin-bottom: 20px;
+        }
+
+        .tab-item {
+            padding: 16px 20px;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+            margin-bottom: -1px;
+            color: #666;
+            font-size: 14px;
+            transition: all 0.3s;
+        }
+
+        .tab-item.active {
+            color: #1890ff;
+            border-bottom-color: #1890ff;
+        }
+
+        .tab-item:hover {
+            color: #1890ff;
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        .search-form {
+            margin: 20px 0;
+            padding: 20px;
+            background: #fafafa;
+            border-radius: 6px;
+        }
+
+        .form-item {
+            display: inline-block;
+            margin-right: 16px;
+            margin-bottom: 10px;
+        }
+
+        .form-item label {
+            margin-right: 8px;
+            color: #666;
+            font-weight: 500;
+            font-size: 14px;
+        }
+
+        .form-item input, .form-item select {
+            height: 40px;
+            padding: 0 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+        }
+
+        .form-item input:focus, .form-item select:focus {
+            outline: none;
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+
+        .btn {
+            height: 40px;
+            padding: 0 16px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-right: 12px;
+            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;
+        }
+
+        .btn-success {
+            background: #52c41a;
+            color: white;
+        }
+
+        .btn-success:hover {
+            background: #73d13d;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+            font-size: 14px;
+        }
+
+        table th, table td {
+            border: 1px solid #f0f0f0;
+            padding: 12px 16px;
+            text-align: center;
+        }
+
+        table th {
+            background: #fafafa;
+            color: #666;
+            font-weight: 600;
+        }
+
+        table td {
+            border-bottom: 1px solid #f9f9f9;
+        }
+
+        table tbody tr:hover {
+            background: #f8f9fa;
+        }
+
+        table tfoot tr {
+            background: #fafafa;
+            font-weight: 600;
+        }
+
+        .tag {
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+
+        .tag-success {
+            background: #f6ffed;
+            color: #52c41a;
+            border: 1px solid #b7eb8f;
+        }
+
+        .tag-warning {
+            background: #fff7e6;
+            color: #fa8c16;
+            border: 1px solid #ffd591;
+        }
+
+        .tag-info {
+            background: #f4f4f5;
+            color: #666;
+            border: 1px solid #e4e4e7;
+        }
+
+        .money-text {
+            color: #fa8c16;
+            font-weight: 600;
+        }
+
+        .commission-text {
+            color: #52c41a;
+            font-weight: 600;
+        }
+
+        .pagination {
+            text-align: right;
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid #f0f0f0;
+            color: #666;
+            font-size: 14px;
+        }
+
+        @media screen and (max-width: 1200px) {
+            .stat-cards {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media screen and (max-width: 768px) {
+            .stat-cards {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 页面标题 -->
+        <div class="header-card">
+            <h1 class="page-title">分销订单与佣金管理</h1>
+        </div>
+
+        <!-- 统计卡片 -->
+        <div class="stat-cards">
+            <div class="stat-card">
+                <div class="stat-content">
+                    <div class="stat-icon primary">📊</div>
+                    <div class="stat-info">
+                        <div class="stat-label">分销订单总数</div>
+                        <div class="stat-value">1250</div>
+                    </div>
+                </div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-content">
+                    <div class="stat-icon success">💰</div>
+                    <div class="stat-info">
+                        <div class="stat-label">订单总金额(元)</div>
+                        <div class="stat-value">125680.50</div>
+                    </div>
+                </div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-content">
+                    <div class="stat-icon warning">💳</div>
+                    <div class="stat-info">
+                        <div class="stat-label">佣金总额(元)</div>
+                        <div class="stat-value">12568.05</div>
+                    </div>
+                </div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-content">
+                    <div class="stat-icon info">📈</div>
+                    <div class="stat-info">
+                        <div class="stat-label">佣金比例</div>
+                        <div class="stat-value">10%</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 主内容 -->
+        <div class="main-card">
+            <!-- Tab选项卡 -->
+            <div class="tabs">
+                <div class="tab-item active" onclick="switchTab('order')">订单明细</div>
+                <div class="tab-item" onclick="switchTab('commission')">佣金统计</div>
+            </div>
+
+            <!-- 订单明细Tab -->
+            <div id="tab-order" class="tab-content active">
+                <!-- 搜索表单 -->
+                <div class="search-form">
+                    <div class="form-item">
+                        <label>订单编号</label>
+                        <input type="text" placeholder="请输入订单编号" style="width: 200px">
+                    </div>
+                    <div class="form-item">
+                        <label>分销商</label>
+                        <input type="text" placeholder="请输入分销商姓名" style="width: 150px">
+                    </div>
+                    <div class="form-item">
+                        <label>订单状态</label>
+                        <select style="width: 120px">
+                            <option value="">全部</option>
+                            <option value="0">未完成</option>
+                            <option value="1">已完成</option>
+                        </select>
+                    </div>
+                    <div class="form-item">
+                        <button class="btn btn-primary">查询</button>
+                        <button class="btn btn-default">重置</button>
+                        <button class="btn btn-success">导出订单</button>
+                    </div>
+                </div>
+
+                <!-- 订单列表表格 -->
+                <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>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>ORD20240101001</td>
+                            <td>UNIT20240101001</td>
+                            <td>张三</td>
+                            <td><span class="money-text">299.00</span></td>
+                            <td>10%</td>
+                            <td><span class="commission-text">29.90</span></td>
+                            <td><span class="commission-text">20.93</span></td>
+                            <td><span class="commission-text">8.97</span></td>
+                            <td><span class="tag tag-success">已完成</span></td>
+                            <td>2024-01-01 10:30:00</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>ORD20240102002</td>
+                            <td>UNIT20240102002</td>
+                            <td>李四</td>
+                            <td><span class="money-text">499.00</span></td>
+                            <td>10%</td>
+                            <td><span class="commission-text">49.90</span></td>
+                            <td><span class="commission-text">49.90</span></td>
+                            <td><span class="commission-text">0.00</span></td>
+                            <td><span class="tag tag-warning">未完成</span></td>
+                            <td>2024-01-02 14:20:00</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>ORD20240103003</td>
+                            <td>UNIT20240103003</td>
+                            <td>王五</td>
+                            <td><span class="money-text">688.00</span></td>
+                            <td>10%</td>
+                            <td><span class="commission-text">68.80</span></td>
+                            <td><span class="commission-text">48.16</span></td>
+                            <td><span class="commission-text">20.64</span></td>
+                            <td><span class="tag tag-success">已完成</span></td>
+                            <td>2024-01-03 09:15:00</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>ORD20240104004</td>
+                            <td>UNIT20240104004</td>
+                            <td>张三</td>
+                            <td><span class="money-text">358.00</span></td>
+                            <td>10%</td>
+                            <td><span class="commission-text">35.80</span></td>
+                            <td><span class="commission-text">25.06</span></td>
+                            <td><span class="commission-text">10.74</span></td>
+                            <td><span class="tag tag-success">已完成</span></td>
+                            <td>2024-01-04 16:45:00</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>ORD20240105005</td>
+                            <td>UNIT20240105005</td>
+                            <td>王五</td>
+                            <td><span class="money-text">799.00</span></td>
+                            <td>10%</td>
+                            <td><span class="commission-text">79.90</span></td>
+                            <td><span class="commission-text">55.93</span></td>
+                            <td><span class="commission-text">23.97</span></td>
+                            <td><span class="tag tag-success">已完成</span></td>
+                            <td>2024-01-05 11:20:00</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>ORD20240106006</td>
+                            <td>UNIT20240106006</td>
+                            <td>李四</td>
+                            <td><span class="money-text">428.00</span></td>
+                            <td>10%</td>
+                            <td><span class="commission-text">42.80</span></td>
+                            <td><span class="commission-text">42.80</span></td>
+                            <td><span class="commission-text">0.00</span></td>
+                            <td><span class="tag tag-warning">未完成</span></td>
+                            <td>2024-01-06 13:50:00</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>ORD20240107007</td>
+                            <td>UNIT20240107007</td>
+                            <td>赵六</td>
+                            <td><span class="money-text">568.00</span></td>
+                            <td>10%</td>
+                            <td><span class="commission-text">56.80</span></td>
+                            <td><span class="commission-text">56.80</span></td>
+                            <td><span class="commission-text">0.00</span></td>
+                            <td><span class="tag tag-success">已完成</span></td>
+                            <td>2024-01-07 15:30:00</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>ORD20240108008</td>
+                            <td>UNIT20240108008</td>
+                            <td>张三</td>
+                            <td><span class="money-text">268.00</span></td>
+                            <td>10%</td>
+                            <td><span class="commission-text">26.80</span></td>
+                            <td><span class="commission-text">18.76</span></td>
+                            <td><span class="commission-text">8.04</span></td>
+                            <td><span class="tag tag-success">已完成</span></td>
+                            <td>2024-01-08 08:15:00</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <!-- 分页 -->
+                <div class="pagination">
+                    共 8 条
+                </div>
+            </div>
+
+            <!-- 佣金统计Tab -->
+            <div id="tab-commission" class="tab-content">
+                <!-- 搜索表单 -->
+                <div class="search-form">
+                    <div class="form-item">
+                        <label>分销商</label>
+                        <input type="text" placeholder="请输入分销商姓名" style="width: 200px">
+                    </div>
+                    <div class="form-item">
+                        <label>等级</label>
+                        <select style="width: 150px">
+                            <option value="">全部</option>
+                            <option value="1">普通分销商</option>
+                            <option value="2">高级分销商</option>
+                            <option value="3">精英分销商</option>
+                        </select>
+                    </div>
+                    <div class="form-item">
+                        <button class="btn btn-primary">查询</button>
+                        <button class="btn btn-default">重置</button>
+                        <button class="btn btn-success">导出佣金</button>
+                    </div>
+                </div>
+
+                <!-- 佣金统计列表 -->
+                <table>
+                    <thead>
+                        <tr>
+                            <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>张三</td>
+                            <td>13800138001</td>
+                            <td><span class="tag tag-success">高级分销商</span></td>
+                            <td>25</td>
+                            <td><span class="money-text">7475.00</span></td>
+                            <td><span class="commission-text">747.50</span></td>
+                            <td><span class="commission-text">523.25</span></td>
+                            <td><span class="commission-text">224.25</span></td>
+                            <td>10%</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>李四</td>
+                            <td>13800138002</td>
+                            <td><span class="tag tag-info">普通分销商</span></td>
+                            <td>15</td>
+                            <td><span class="money-text">4485.00</span></td>
+                            <td><span class="commission-text">448.50</span></td>
+                            <td><span class="commission-text">448.50</span></td>
+                            <td><span class="commission-text">0.00</span></td>
+                            <td>10%</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>王五</td>
+                            <td>13800138003</td>
+                            <td><span class="tag tag-warning">精英分销商</span></td>
+                            <td>38</td>
+                            <td><span class="money-text">11378.00</span></td>
+                            <td><span class="commission-text">1137.80</span></td>
+                            <td><span class="commission-text">796.46</span></td>
+                            <td><span class="commission-text">341.34</span></td>
+                            <td>10%</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>赵六</td>
+                            <td>13800138004</td>
+                            <td><span class="tag tag-info">普通分销商</span></td>
+                            <td>12</td>
+                            <td><span class="money-text">3592.00</span></td>
+                            <td><span class="commission-text">359.20</span></td>
+                            <td><span class="commission-text">359.20</span></td>
+                            <td><span class="commission-text">0.00</span></td>
+                            <td>10%</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                        <tr>
+                            <td>孙八</td>
+                            <td>13800138006</td>
+                            <td><span class="tag tag-success">高级分销商</span></td>
+                            <td>28</td>
+                            <td><span class="money-text">8384.00</span></td>
+                            <td><span class="commission-text">838.40</span></td>
+                            <td><span class="commission-text">586.88</span></td>
+                            <td><span class="commission-text">251.52</span></td>
+                            <td>10%</td>
+                            <td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
+                        </tr>
+                    </tbody>
+                    <tfoot>
+                        <tr style="font-weight: bold; background: #F5F7FA;">
+                            <td>合计</td>
+                            <td></td>
+                            <td></td>
+                            <td>118</td>
+                            <td><span class="money-text">35314.00</span></td>
+                            <td><span class="commission-text">3531.40</span></td>
+                            <td><span class="commission-text">2714.29</span></td>
+                            <td><span class="commission-text">817.11</span></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                    </tfoot>
+                </table>
+
+                <!-- 分页 -->
+                <div class="pagination">
+                    共 5 条
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function switchTab(tabName) {
+            // 移除所有active类
+            document.querySelectorAll('.tab-item').forEach(item => {
+                item.classList.remove('active');
+            });
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+
+            // 添加active类到当前tab
+            event.target.classList.add('active');
+            document.getElementById('tab-' + tabName).classList.add('active');
+        }
+    </script>
+</body>
+</html>