编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>游泳馆推广裂变小程序</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        :root {
            --primary: #10b981; --primary-dark: #059669;
            --secondary: #f43f5e; --accent: #f97316; --purple: #8b5cf6;
            --bg: #f8fafc; --card-bg: #ffffff;
            --text-dark: #1f2937; --text-gray: #6b7280; --text-light: #9ca3af;
        }
        html, body { height: 100%; overflow: hidden; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: #1a1a1a; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px 0;
        }
        .phone-container {
            width: 100%; max-width: 390px; height: 92vh; max-height: 844px;
            background: var(--bg); border-radius: 40px; overflow: hidden; position: relative;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
        }
        .dynamic-island {
            position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
            width: 120px; height: 34px; background: #000; border-radius: 20px; z-index: 1001;
        }
        .app-content {
            height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
            padding-bottom: 90px;
        }
        .app-content::-webkit-scrollbar { display: none; }
        
        /* 返回栏 - 可点击 */
        .back-bar {
            height: 44px; padding: 0 16px; display: flex; align-items: center;
            background: white; position: sticky; top: 0; z-index: 100;
            cursor: pointer; transition: background 0.15s;
        }
        .back-bar:active { background: #f1f5f9; }
        .back-bar-content {
            display: flex; align-items: center; gap: 4px; color: var(--primary);
            font-size: 15px; font-weight: 500;
        }
        .back-bar-content i { font-size: 16px; }
        .back-bar-title {
            flex: 1; text-align: center; font-size: 16px; font-weight: 600;
            color: var(--text-dark); margin-right: 60px;
        }
        
        .status-bar {
            height: 0; display: none;
        }
        
        .header {
            background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white; padding: 0 20px 120px; position: relative;
        }
        .header-top {
            height: 44px; display: flex; justify-content: space-between; align-items: center;
        }
        .header-title { font-size: 18px; font-weight: 700; cursor: pointer; }
        .header-icons { display: flex; gap: 18px; align-items: center; }
        .header-icons i { font-size: 18px; cursor: pointer; transition: transform 0.2s; }
        .header-icons i:active { transform: scale(0.9); }
        .user-card { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
        .user-avatar {
            width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.2);
            display: flex; align-items: center; justify-content: center; font-size: 28px;
            border: 3px solid rgba(255,255,255,0.5); cursor: pointer; transition: transform 0.2s;
        }
        .user-avatar:active { transform: scale(0.95); }
        .user-info h3 { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
        .user-info p { font-size: 12px; opacity: 0.85; margin-top: 4px; cursor: pointer; }
        .promo-badge { background: var(--accent); color: white; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; }
        
        .header-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
        .header-stat {
            background: rgba(255,255,255,0.15); border-radius: 12px; padding: 14px 10px; text-align: center;
            cursor: pointer; transition: all 0.2s;
        }
        .header-stat:active { background: rgba(255,255,255,0.25); transform: scale(0.97); }
        .header-stat.selected { background: rgba(255,255,255,0.3); border: 2px solid white; }
        .header-stat-value { font-size: 20px; font-weight: 700; }
        .header-stat-label-row { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .header-stat-label { font-size: 11px; opacity: 0.85; }
        
        .main-content { margin: -70px 16px 0; position: relative; z-index: 10; }
        .section {
            background: var(--card-bg); border-radius: 16px; padding: 18px; margin-bottom: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
        .section-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
        .section-title i { color: var(--primary); }
        .section-more { font-size: 12px; color: var(--text-gray); cursor: pointer; display: flex; align-items: center; gap: 4px; }
        .section-more:active { color: var(--primary); }
        
        .clickable-list { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: white; }
        .clickable-item {
            display: flex; align-items: center; gap: 14px; padding: 15px; cursor: pointer;
            transition: all 0.15s; border-bottom: 0.5px solid #f1f5f9;
        }
        .clickable-item:last-child { border-bottom: none; }
        .clickable-item:active { background: #f9fafb; }
        .item-icon {
            width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center;
            justify-content: center; font-size: 15px; color: white; flex-shrink: 0;
        }
        .item-icon.blue { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
        .item-icon.purple { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
        .item-icon.red { background: linear-gradient(135deg, #ef4444, #f87171); }
        .item-icon.green { background: linear-gradient(135deg, #10b981, #34d399); }
        .item-icon.orange { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
        .item-icon.pink { background: linear-gradient(135deg, #ec4899, #f472b6); }
        .item-icon.gray { background: linear-gradient(135deg, #64748b, #94a3b8); }
        .item-content { flex: 1; }
        .item-title { font-size: 14px; font-weight: 500; }
        .item-tag { font-size: 10px; background: rgba(16, 185, 129, 0.1); color: var(--primary); padding: 2px 8px; border-radius: 10px; margin-left: 8px; }
        .item-badge { font-size: 10px; background: var(--secondary); color: white; padding: 2px 8px; border-radius: 10px; margin-right: 8px; }
        .item-arrow { color: var(--text-light); font-size: 13px; }
        
        .promo-banner {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border-radius: 16px; padding: 18px; color: white; position: relative;
            overflow: hidden; cursor: pointer; margin-bottom: 12px; transition: transform 0.2s;
        }
        .promo-banner:active { transform: scale(0.98); }
        .promo-banner::before { content: ''; position: absolute; top: -40%; right: -15%; width: 120px; height: 120px; background: rgba(255,255,255,0.1); border-radius: 50%; }
        .promo-banner h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
        .promo-banner p { font-size: 12px; opacity: 0.9; margin-bottom: 10px; line-height: 1.5; }
        .promo-btn { background: white; color: #6366f1; padding: 6px 16px; border-radius: 20px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
        
        .tab-bar {
            position: absolute; bottom: 0; left: 0; right: 0;
            background: white; display: flex; justify-content: space-around;
            padding: 10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
            box-shadow: 0 -4px 20px rgba(0,0,0,0.08); border-radius: 20px 20px 0 0; z-index: 100;
        }
        .tab-item { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 6px 16px; transition: all 0.2s; border-radius: 12px; min-width: 60px; }
        .tab-item:active { transform: scale(0.95); }
        .tab-item.active { background: rgba(16, 185, 129, 0.1); }
        .tab-item i { font-size: 20px; color: var(--text-gray); transition: all 0.2s; }
        .tab-item.active i { color: var(--primary); }
        .tab-item span { font-size: 10px; color: var(--text-gray); font-weight: 500; }
        .tab-item.active span { color: var(--primary); font-weight: 600; }
        
        .page { display: none; }
        .page.active { display: block; }
        
        /* 子页面通用样式 */
        .sub-page { padding: 16px; }
        .sub-list { border-radius: 12px; overflow: hidden; background: white; }
        .sub-item {
            display: flex; align-items: center; gap: 12px; padding: 14px 16px;
            border-bottom: 0.5px solid #f1f5f9; cursor: pointer; transition: background 0.15s;
        }
        .sub-item:last-child { border-bottom: none; }
        .sub-item:active { background: #f9fafb; }
        .sub-item.selected { background: rgba(16, 185, 129, 0.08); }
        .sub-avatar {
            width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #34d399);
            display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; flex-shrink: 0;
        }
        .sub-info { flex: 1; min-width: 0; }
        .sub-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
        .sub-meta { font-size: 11px; color: var(--text-gray); margin-top: 4px; }
        .sub-reward { font-size: 14px; font-weight: 600; color: var(--primary); white-space: nowrap; }
        
        /* 详情页 */
        .detail-content { padding: 0; }
        .detail-row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 0.5px solid #f1f5f9; }
        .detail-row:last-child { border-bottom: none; }
        .detail-label { font-size: 14px; color: var(--text-gray); }
        .detail-value { font-size: 14px; font-weight: 600; color: var(--text-dark); }
        .detail-btn-full {
            width: 100%; padding: 14px; border-radius: 12px; border: none;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 16px;
            transition: transform 0.2s;
        }
        .detail-btn-full:active { transform: scale(0.98); }
        
        .profile-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 14px 0; border-bottom: 0.5px solid #f1f5f9; cursor: pointer; transition: background 0.15s;
        }
        .profile-row:last-child { border-bottom: none; }
        .profile-row:active { background: #f9fafb; margin: 0 -18px; padding: 14px 18px; }
        .profile-row-left { font-size: 14px; color: var(--text-dark); }
        .profile-row-right { display: flex; align-items: center; gap: 8px; }
        .profile-row-value { font-size: 14px; color: var(--text-gray); }
        .profile-row-arrow { color: var(--text-light); font-size: 14px; }
        .profile-avatar-small {
            width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #34d399);
            display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;
        }
        
        /* Modal */
        .modal-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5); display: flex; align-items: flex-end;
            justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s;
        }
        .modal-overlay.active { opacity: 1; visibility: visible; }
        .modal {
            background: white; width: 100%; max-width: 390px; border-radius: 20px 20px 0 0;
            padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
            transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        }
        .modal-overlay.active .modal { transform: translateY(0); }
        .modal-handle { width: 36px; height: 4px; background: #e5e7eb; border-radius: 2px; margin: 0 auto 16px; }
        .modal-title { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 20px; }
        .qr-section { text-align: center; padding: 10px 0 20px; }
        .qr-code {
            width: 180px; height: 180px; background: white; border-radius: 16px;
            margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        .qr-placeholder {
            width: 140px; height: 140px;
            background: repeating-linear-gradient(0deg, #1f2937 0px, #1f2937 8px, white 8px, white 16px);
            border-radius: 8px; position: relative;
        }
        .qr-placeholder::before {
            content: ''; position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%); width: 50px; height: 50px;
            background: #1f2937; border-radius: 4px;
        }
        .qr-hint { font-size: 12px; color: var(--text-gray); margin-bottom: 16px; }
        .qr-actions { display: flex; gap: 12px; justify-content: center; }
        .qr-action-btn {
            flex: 1; max-width: 130px; padding: 12px; border-radius: 12px; font-size: 13px;
            cursor: pointer; border: none; display: flex; align-items: center;
            justify-content: center; gap: 6px; transition: all 0.2s;
        }
        .qr-action-btn:active { transform: scale(0.95); }
        .qr-action-btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; }
        .qr-action-btn.secondary { background: #f1f5f9; color: var(--text-dark); }
        .modal-close {
            width: 100%; padding: 14px; border-radius: 24px; background: #f1f5f9;
            color: var(--text-dark); font-size: 15px; font-weight: 600; border: none; cursor: pointer;
        }
        .modal-close:active { background: #e5e7eb; }
        
        .toast {
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8);
            background: rgba(0,0,0,0.8); color: white; padding: 14px 28px;
            border-radius: 10px; font-size: 14px; z-index: 2000;
            opacity: 0; visibility: hidden; transition: all 0.3s;
        }
        .toast.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
        .version { text-align: center; padding: 20px; color: var(--text-light); font-size: 11px; }
        .hidden { display: none !important; }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="dynamic-island"></div>
        <div class="app-content" id="appContent">
            
            <!-- ========== 首页 ========== -->
            <div class="page active" id="page-home">
                <div class="header">
                    <div class="header-top">
                        <div class="header-title" onclick="showToast('游泳馆推广中心')">游泳馆推广中心</div>
                        <div class="header-icons">
                            <i class="fas fa-bell" onclick="goToMessage()"></i>
                            <i class="fas fa-ellipsis-h" onclick="showMoreOptions()"></i>
                        </div>
                    </div>
                    <div class="user-card">
                        <div class="user-avatar" onclick="changeAvatar()">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="user-info">
                            <h3>张三 <span class="promo-badge">推广员</span></h3>
                            <p onclick="copyId()">ID: U-142876 <i class="fas fa-copy" style="font-size:10px;margin-left:4px;"></i></p>
                        </div>
                    </div>
                    <div class="header-stats">
                        <div class="header-stat" onclick="goToInviteList()">
                            <div class="header-stat-value">28</div>
                            <div class="header-stat-label-row">
                                <span class="header-stat-label">邀请人数</span>
                                <i class="fas fa-chevron-right" style="font-size:10px;opacity:0.6;margin-top:2px;"></i>
                            </div>
                        </div>
                        <div class="header-stat" onclick="goToCommissionDetail()">
                            <div class="header-stat-value">¥2,580</div>
                            <div class="header-stat-label-row">
                                <span class="header-stat-label">累计佣金</span>
                                <i class="fas fa-chevron-right" style="font-size:10px;opacity:0.6;margin-top:2px;"></i>
                            </div>
                        </div>
                        <div class="header-stat" onclick="goToRankList()">
                            <div class="header-stat-value">第3名</div>
                            <div class="header-stat-label-row">
                                <span class="header-stat-label">本月排名</span>
                                <i class="fas fa-chevron-right" style="font-size:10px;opacity:0.6;margin-top:2px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="main-content">
                    <div class="promo-banner" onclick="goToInvite()">
                        <h3>🎁 新人专享福利</h3>
                        <p>邀请好友注册即享双重奖励，会员卡充值返佣高达20%</p>
                        <div class="promo-btn">立即邀请 <i class="fas fa-arrow-right"></i></div>
                    </div>
                    
                    <div class="section">
                        <div class="section-header">
                            <div class="section-title"><i class="fas fa-th-large"></i> 我的服务</div>
                            <div class="section-more" onclick="showToast('查看全部服务')">全部 <i class="fas fa-chevron-right"></i></div>
                        </div>
                        <div class="clickable-list">
                            <div class="clickable-item" onclick="goToProfile()">
                                <div class="item-icon blue"><i class="fas fa-user-edit"></i></div>
                                <div class="item-content"><div class="item-title">个人信息</div></div>
                                <i class="fas fa-chevron-right item-arrow"></i>
                            </div>
                            <div class="clickable-item" onclick="goToAuth()">
                                <div class="item-icon purple"><i class="fas fa-certificate"></i></div>
                                <div class="item-content"><div class="item-title">推广员认证</div></div>
                                <span class="item-tag">已认证</span>
                                <i class="fas fa-chevron-right item-arrow"></i>
                            </div>
                            <div class="clickable-item" onclick="goToMessage()">
                                <div class="item-icon red"><i class="fas fa-bell"></i></div>
                                <div class="item-content"><div class="item-title">消息通知</div></div>
                                <span class="item-badge">3</span>
                                <i class="fas fa-chevron-right item-arrow"></i>
                            </div>
                            <div class="clickable-item" onclick="goToMaterials()">
                                <div class="item-icon green"><i class="fas fa-images"></i></div>
                                <div class="item-content"><div class="item-title">推广素材库</div></div>
                                <i class="fas fa-chevron-right item-arrow"></i>
                            </div>
                            <div class="clickable-item" onclick="goToLinks()">
                                <div class="item-icon orange"><i class="fas fa-link"></i></div>
                                <div class="item-content"><div class="item-title">推广链接管理</div></div>
                                <i class="fas fa-chevron-right item-arrow"></i>
                            </div>
                            <div class="clickable-item" onclick="goToCustomerService()">
                                <div class="item-icon pink"><i class="fas fa-headset"></i></div>
                                <div class="item-content"><div class="item-title">联系客服</div></div>
                                <i class="fas fa-chevron-right item-arrow"></i>
                            </div>
                            <div class="clickable-item" onclick="goToHelp()">
                                <div class="item-icon gray"><i class="fas fa-question-circle"></i></div>
                                <div class="item-content"><div class="item-title">帮助与反馈</div></div>
                                <i class="fas fa-chevron-right item-arrow"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="section" onclick="showQRModal()">
                        <div style="display:flex;align-items:center;gap:14px;cursor:pointer;">
                            <div style="width:50px;height:50px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;font-size:22px;">
                                <i class="fas fa-qrcode"></i>
                            </div>
                            <div style="flex:1;">
                                <div style="font-size:15px;font-weight:600;">我的专属推广码</div>
                                <div style="font-size:12px;color:var(--text-gray);margin-top:3px;">扫码注册即绑定上下级关系</div>
                            </div>
                            <i class="fas fa-chevron-right" style="color:var(--text-light);font-size:14px;"></i>
                        </div>
                    </div>
                    
                    <div class="version">游泳馆推广裂变小程序 v1.0.0</div>
                </div>
            </div>
            
            <!-- ========== 邀请列表页 ========== -->
            <div class="page" id="page-invite">
                <div class="back-bar" onclick="goBack()">
                    <div class="back-bar-content"><i class="fas fa-chevron-left"></i> 返回</div>
                    <div class="back-bar-title">邀请列表</div>
                </div>
                <div class="sub-page">
                    <div class="section">
                        <div style="display:flex;justify-content:space-between;margin-bottom:14px;">
                            <div style="font-size:16px;font-weight:600;">我的邀请</div>
                            <div style="font-size:12px;color:var(--primary);cursor:pointer;padding:4px 8px;border-radius:4px;" onclick="showToast('筛选功能')">筛选 <i class="fas fa-filter"></i></div>
                        </div>
                        <div class="sub-list">
                            <div class="sub-item selected" onclick="selectSubItem(this)">
                                <div class="sub-avatar"><i class="fas fa-user"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">李四 <span style="color:var(--primary);font-size:10px;background:rgba(16,185,129,0.1);padding:1px 6px;border-radius:4px;">一级</span></div>
                                    <div class="sub-meta">注册时间: 2026-04-24 | 办卡状态: 已办卡</div>
                                </div>
                                <div class="sub-reward">+¥68</div>
                            </div>
                            <div class="sub-item" onclick="selectSubItem(this)">
                                <div class="sub-avatar"><i class="fas fa-user"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">王五 <span style="color:#3b82f6;font-size:10px;background:rgba(59,130,246,0.1);padding:1px 6px;border-radius:4px;">一级</span></div>
                                    <div class="sub-meta">注册时间: 2026-04-23 | 办卡状态: 已办卡</div>
                                </div>
                                <div class="sub-reward">+¥68</div>
                            </div>
                            <div class="sub-item" onclick="selectSubItem(this)">
                                <div class="sub-avatar" style="background:linear-gradient(135deg,#8b5cf6,#a78bfa);"><i class="fas fa-user"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">赵六 <span style="color:var(--purple);font-size:10px;background:rgba(139,92,246,0.1);padding:1px 6px;border-radius:4px;">二级</span></div>
                                    <div class="sub-meta">注册时间: 2026-04-22 | 办卡状态: 未办卡</div>
                                </div>
                                <div style="font-size:12px;color:var(--text-gray);">-</div>
                            </div>
                            <div class="sub-item" onclick="selectSubItem(this)">
                                <div class="sub-avatar"><i class="fas fa-user"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">钱七 <span style="color:#3b82f6;font-size:10px;background:rgba(59,130,246,0.1);padding:1px 6px;border-radius:4px;">一级</span></div>
                                    <div class="sub-meta">注册时间: 2026-04-20 | 办卡状态: 已办卡</div>
                                </div>
                                <div class="sub-reward">+¥50</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ========== 佣金明细页 ========== -->
            <div class="page" id="page-commission">
                <div class="back-bar" onclick="goBack()">
                    <div class="back-bar-content"><i class="fas fa-chevron-left"></i> 返回</div>
                    <div class="back-bar-title">佣金明细</div>
                </div>
                <div class="sub-page">
                    <div class="section">
                        <div class="detail-content">
                            <div class="detail-row">
                                <span class="detail-label">累计佣金</span>
                                <span class="detail-value" style="color:var(--primary);">¥2,580.00</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">已结算佣金</span>
                                <span class="detail-value">¥1,900.00</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">待结算佣金</span>
                                <span class="detail-value" style="color:var(--accent);">¥680.00</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">已提现佣金</span>
                                <span class="detail-value">¥1,220.00</span>
                            </div>
                        </div>
                        <button class="detail-btn-full" onclick="goToWithdraw()">立即提现</button>
                    </div>
                    
                    <div class="section" style="margin-top:12px;">
                        <div class="section-header">
                            <div class="section-title"><i class="fas fa-history"></i> 佣金记录</div>
                        </div>
                        <div class="sub-list" style="background:white;">
                            <div class="sub-item" onclick="showToast('查看佣金详情')">
                                <div style="width:36px;height:36px;border-radius:50%;background:rgba(16,185,129,0.12);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:14px;"><i class="fas fa-user-plus"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">下级办卡奖励 - 李四</div>
                                    <div class="sub-meta">2026-04-24 15:20</div>
                                </div>
                                <div style="color:var(--primary);font-weight:600;font-size:14px;">+¥68.00</div>
                            </div>
                            <div class="sub-item" onclick="showToast('查看佣金详情')">
                                <div style="width:36px;height:36px;border-radius:50%;background:rgba(16,185,129,0.12);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:14px;"><i class="fas fa-coins"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">下级充值奖励 - 王五</div>
                                    <div class="sub-meta">2026-04-23 11:45</div>
                                </div>
                                <div style="color:var(--primary);font-weight:600;font-size:14px;">+¥60.00</div>
                            </div>
                            <div class="sub-item" onclick="showToast('查看佣金详情')">
                                <div style="width:36px;height:36px;border-radius:50%;background:rgba(16,185,129,0.12);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:14px;"><i class="fas fa-sync-alt"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">下级续费奖励 - 赵六</div>
                                    <div class="sub-meta">2026-04-22 09:30</div>
                                </div>
                                <div style="color:var(--primary);font-weight:600;font-size:14px;">+¥35.00</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ========== 排行榜页 ========== -->
            <div class="page" id="page-rank">
                <div class="back-bar" onclick="goBack()">
                    <div class="back-bar-content"><i class="fas fa-chevron-left"></i> 返回</div>
                    <div class="back-bar-title">推广排行榜</div>
                </div>
                <div class="sub-page">
                    <div class="section">
                        <div class="section-header">
                            <div class="section-title"><i class="fas fa-trophy" style="color:#f59e0b;"></i> 本月排行</div>
                        </div>
                        <div class="sub-list" style="background:white;">
                            <div class="sub-item" onclick="showToast('查看李明的详情')">
                                <div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#fbbf24,#f59e0b);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:12px;flex-shrink:0;">1</div>
                                <div class="sub-avatar"><i class="fas fa-user"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">李明</div>
                                    <div class="sub-meta">团队 156人</div>
                                </div>
                                <div style="text-align:right;">
                                    <div style="font-weight:600;color:var(--primary);font-size:14px;">¥12,580</div>
                                    <div style="font-size:10px;color:var(--text-gray);">佣金收益</div>
                                </div>
                            </div>
                            <div class="sub-item" onclick="showToast('查看王芳的详情')">
                                <div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#94a3b8,#64748b);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:12px;flex-shrink:0;">2</div>
                                <div class="sub-avatar"><i class="fas fa-user"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">王芳</div>
                                    <div class="sub-meta">团队 98人</div>
                                </div>
                                <div style="text-align:right;">
                                    <div style="font-weight:600;color:var(--primary);font-size:14px;">¥8,920</div>
                                    <div style="font-size:10px;color:var(--text-gray);">佣金收益</div>
                                </div>
                            </div>
                            <div class="sub-item selected" onclick="selectSubItem(this)" style="background:rgba(16,185,129,0.08);">
                                <div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#d97706,#b45309);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:12px;flex-shrink:0;">3</div>
                                <div class="sub-avatar"><i class="fas fa-user"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">我 (张三)</div>
                                    <div class="sub-meta">团队 28人</div>
                                </div>
                                <div style="text-align:right;">
                                    <div style="font-weight:600;color:var(--primary);font-size:14px;">¥2,580</div>
                                    <div style="font-size:10px;color:var(--text-gray);">佣金收益</div>
                                </div>
                            </div>
                            <div class="sub-item" onclick="showToast('查看赵丽的详情')">
                                <div style="width:28px;height:28px;border-radius:50%;background:#f1f5f9;color:var(--text-gray);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;">4</div>
                                <div class="sub-avatar"><i class="fas fa-user"></i></div>
                                <div class="sub-info">
                                    <div class="sub-name">赵丽</div>
                                    <div class="sub-meta">团队 25人</div>
                                </div>
                                <div style="text-align:right;">
                                    <div style="font-weight:600;color:var(--primary);font-size:14px;">¥1,850</div>
                                    <div style="font-size:10px;color:var(--text-gray);">佣金收益</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ========== 个人信息页 ========== -->
            <div class="page" id="page-profile">
                <div class="back-bar" onclick="goBack()">
                    <div class="back-bar-content"><i class="fas fa-chevron-left"></i> 返回</div>
                    <div class="back-bar-title">个人信息</div>
                </div>
                <div class="sub-page">
                    <div class="section">
                        <div class="profile-row" onclick="showToast('更换头像')">
                            <span class="profile-row-left">头像</span>
                            <div class="profile-row-right">
                                <div class="profile-avatar-small"><i class="fas fa-user"></i></div>
                                <i class="fas fa-chevron-right profile-row-arrow"></i>
                            </div>
                        </div>
                        <div class="profile-row" onclick="showToast('编辑昵称')">
                            <span class="profile-row-left">昵称</span>
                            <div class="profile-row-right">
                                <span class="profile-row-value">张三</span>
                                <i class="fas fa-chevron-right profile-row-arrow"></i>
                            </div>
                        </div>
                        <div class="profile-row" onclick="showToast('编辑性别')">
                            <span class="profile-row-left">性别</span>
                            <div class="profile-row-right">
                                <span class="profile-row-value">男</span>
                                <i class="fas fa-chevron-right profile-row-arrow"></i>
                            </div>
                        </div>
                        <div class="profile-row" onclick="showToast('编辑手机号')">
                            <span class="profile-row-left">手机号</span>
                            <div class="profile-row-right">
                                <span class="profile-row-value">138****8888</span>
                                <i class="fas fa-chevron-right profile-row-arrow"></i>
                            </div>
                        </div>
                        <div class="profile-row" onclick="copyId()">
                            <span class="profile-row-left">推广员ID</span>
                            <div class="profile-row-right">
                                <span class="profile-row-value">U-142876</span>
                                <i class="fas fa-copy" style="color:var(--primary);font-size:12px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        
        <!-- Tab Bar -->
        <div class="tab-bar">
            <div class="tab-item active" data-tab="home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" data-tab="invite">
                <i class="fas fa-users"></i>
                <span>邀请</span>
            </div>
            <div class="tab-item" data-tab="commission">
                <i class="fas fa-coins"></i>
                <span>佣金</span>
            </div>
            <div class="tab-item" data-tab="rank">
                <i class="fas fa-trophy"></i>
                <span>排行</span>
            </div>
            <div class="tab-item" data-tab="profile">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <!-- QR Modal -->
    <div class="modal-overlay" id="qrModal">
        <div class="modal">
            <div class="modal-handle"></div>
            <div class="modal-title">我的专属推广码</div>
            <div class="qr-section">
                <div class="qr-code"><div class="qr-placeholder"></div></div>
                <p class="qr-hint">扫码注册即绑定上下级关系，终身不解绑</p>
                <div class="qr-actions">
                    <button class="qr-action-btn secondary" onclick="downloadQR()">
                        <i class="fas fa-download"></i> 下载二维码
                    </button>
                    <button class="qr-action-btn primary" onclick="generatePoster()">
                        <i class="fas fa-image"></i> 生成海报
                    </button>
                </div>
            </div>
            <button class="modal-close" onclick="closeQRModal()">关闭</button>
        </div>
    </div>
    
    <!-- Toast -->
    <div class="toast" id="toast"></div>
    
    <script>
        // 页面栈
        let pageStack = ['home'];
        
        // Tab切换
        function switchTab(tab) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById('page-' + tab).classList.add('active');
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            document.querySelector(`.tab-item[data-tab="${tab}"]`).classList.add('active');
            
            // 更新页面栈
            if (!pageStack.includes(tab)) {
                pageStack.push(tab);
            }
            
            // 如果是通过底部Tab点击，重置栈
            if (tab === 'home') {
                pageStack = ['home'];
            }
            
            document.getElementById('appContent').scrollTo(0, 0);
        }
        
        document.querySelectorAll('.tab-item').forEach(item => {
            item.addEventListener('click', function() { switchTab(this.dataset.tab); });
        });
        
        // 返回
        function goBack() {
            if (pageStack.length > 1) {
                pageStack.pop();
                const prevPage = pageStack[pageStack.length - 1];
                switchTab(prevPage);
            } else {
                switchTab('home');
            }
        }
        
        // Toast
        function showToast(msg) {
            const toast = document.getElementById('toast');
            toast.textContent = msg;
            toast.classList.add('active');
            setTimeout(() => toast.classList.remove('active'), 2000);
        }
        
        // 首页跳转
        function goToInviteList() { switchTab('invite'); }
        function goToCommissionDetail() { switchTab('commission'); }
        function goToRankList() { switchTab('rank'); }
        function goToProfile() { switchTab('profile'); }
        function goToAuth() { showToast('推广员认证 - 已认证通过'); }
        function goToMessage() { showToast('您有 3 条未读消息'); }
        function goToMaterials() { showToast('正在打开推广素材库...'); }
        function goToLinks() { showToast('正在打开推广链接管理...'); }
        function goToCustomerService() { showToast('正在连接客服...'); }
        function goToInvite() { showToast('正在打开邀请页面...'); }
        function goToWithdraw() { showToast('提现申请已提交'); goBack(); }
        function changeAvatar() { showToast('更换头像'); }
        function copyId() { showToast('ID已复制到剪贴板'); }
        function showMoreOptions() { showToast('更多选项'); }
        
        // 选中子项
        function selectSubItem(el) {
            document.querySelectorAll('.sub-item').forEach(item => item.classList.remove('selected'));
            el.classList.add('selected');
        }
        
        // 二维码弹窗
        function showQRModal() { document.getElementById('qrModal').classList.add('active'); }
        function closeQRModal() { document.getElementById('qrModal').classList.remove('active'); }
        function downloadQR() { showToast('已保存到相册'); closeQRModal(); }
        function generatePoster() { showToast('海报生成中...'); setTimeout(() => { showToast('海报生成成功'); closeQRModal(); }, 1500); }
        
        // 弹窗点击外部关闭
        document.querySelectorAll('.modal-overlay').forEach(overlay => {
            overlay.addEventListener('click', function(e) { if (e.target === this) this.classList.remove('active'); });
        });
        
        // 防止双击缩放
        let lastTouchEnd = 0;
        document.addEventListener('touchend', function(e) {
            const now = Date.now();
            if (now - lastTouchEnd <= 300) e.preventDefault();
            lastTouchEnd = now;
        }, false);
    </script>
</body>
</html>