编辑页面

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">
    <title>陪护陪诊 - 服务预约平台</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
        }
        .page { display: none; padding-bottom: 70px; }
        .page.active { display: block; }
        
        /* 顶部导航 */
        .header {
            background: linear-gradient(135deg, #8fcf8f 0%, #7ec87e 100%);
            color: white;
            padding: 16px;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header-sub { font-size: 12px; font-weight: normal; margin-top: 4px; opacity: 0.9; }
        
        /* Banner */
        .banner {
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            margin: 12px;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .banner-content { flex: 1; }
        .banner-title { font-size: 18px; font-weight: 600; color: #2e7d32; }
        .banner-sub { font-size: 13px; color: #4CAF50; margin-top: 4px; }
        .banner-btn {
            background: #4CAF50; color: white; border: none;
            padding: 8px 16px; border-radius: 20px; font-size: 12px; margin-top: 8px;
            cursor: pointer;
        }
        .banner-icon { font-size: 48px; }
        
        /* 服务列表 */
        .section { margin-top: 12px; background: white; }
        .section-title {
            padding: 16px; font-size: 16px; font-weight: 600; color: #333;
            border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;
            cursor: pointer;
        }
        .section-title::after { content: '>'; color: #999; }
        
        .service-card {
            padding: 16px; border-bottom: 1px solid #f0f0f0;
            display: flex; gap: 12px; cursor: pointer;
        }
        .service-img {
            width: 80px; height: 80px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 8px; display: flex; align-items: center;
            justify-content: center; font-size: 32px;
        }
        .service-content { flex: 1; }
        .service-name { font-size: 15px; font-weight: 600; color: #333; }
        .service-desc { font-size: 12px; color: #999; margin-top: 4px; }
        .service-price { margin-top: 8px; color: #4CAF50; font-size: 16px; font-weight: 600; }
        .service-price span { font-size: 12px; font-weight: normal; color: #999; margin-left: 4px; }
        
        /* 底部标签栏 */
        .tab-bar {
            position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
            width: 100%; max-width: 430px; background: white;
            display: flex; justify-content: space-around; padding: 8px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 100;
        }
        .tab-item {
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            color: #999; padding: 4px 16px; cursor: pointer;
        }
        .tab-item.active { color: #4CAF50; }
        .tab-item svg { width: 24px; height: 24px; }
        .tab-item span { font-size: 11px; }
        
        /* 订单页面 */
        .order-tabs {
            display: flex; background: white; padding: 12px 16px;
            gap: 24px; border-bottom: 1px solid #f0f0f0;
        }
        .order-tab { font-size: 14px; color: #666; padding-bottom: 8px; cursor: pointer; }
        .order-tab.active { color: #4CAF50; border-bottom: 2px solid #4CAF50; }
        
        .order-card { background: white; border-radius: 12px; margin: 12px; padding: 16px; }
        .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .order-no { font-size: 13px; color: #999; }
        .order-status { font-size: 13px; color: #4CAF50; font-weight: 500; }
        .order-info { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
        .order-icon { width: 50px; height: 50px; background: #e8f5e9; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .order-detail { flex: 1; }
        .order-service { font-size: 14px; font-weight: 600; color: #333; }
        .order-time { font-size: 12px; color: #999; margin-top: 4px; }
        .order-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
        .order-price { font-size: 14px; color: #666; }
        .order-price strong { color: #4CAF50; font-size: 16px; }
        .order-action { background: #4CAF50; color: white; border: none; padding: 6px 16px; border-radius: 16px; font-size: 12px; cursor: pointer; }
        
        /* 陪诊师信息 */
        .escort-card { background: white; border-radius: 12px; margin: 12px; padding: 16px; display: flex; gap: 12px; align-items: center; }
        .escort-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #8fcf8f, #7ec87e); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; }
        .escort-info { flex: 1; }
        .escort-name { font-size: 15px; font-weight: 600; color: #333; }
        .escort-stars { color: #ffc107; font-size: 12px; margin-top: 4px; }
        .escort-contact { background: #e8f5e9; color: #4CAF50; border: none; padding: 8px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; }
        
        /* 我的页面 */
        .my-header { background: linear-gradient(135deg, #8fcf8f 0%, #7ec87e 100%); padding: 30px 20px; color: white; }
        .my-profile { display: flex; align-items: center; gap: 16px; }
        .my-avatar { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .my-name { font-size: 18px; font-weight: 600; }
        .my-id { font-size: 12px; opacity: 0.8; margin-top: 4px; }
        .my-stats { display: flex; justify-content: space-around; margin-top: 20px; text-align: center; }
        .stat-item { flex: 1; }
        .stat-num { font-size: 20px; font-weight: 600; }
        .stat-label { font-size: 12px; opacity: 0.8; margin-top: 4px; }
        
        .my-menu { background: white; margin-top: 12px; }
        .menu-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .menu-icon { width: 32px; height: 32px; background: #e8f5e9; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: 12px; }
        .menu-text { flex: 1; font-size: 14px; color: #333; }
        .menu-arrow { color: #ccc; }
        
        /* 推广中心 */
        .promo-card { background: linear-gradient(135deg, #8fcf8f, #7ec87e); color: white; margin: 12px; border-radius: 12px; padding: 20px; text-align: center; }
        .promo-title { font-size: 14px; opacity: 0.9; }
        .promo-amount { font-size: 32px; font-weight: 600; margin: 8px 0; }
        .promo-btn { background: white; color: #4CAF50; border: none; padding: 10px 30px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        
        .promo-list { background: white; margin: 12px; border-radius: 12px; padding: 16px; }
        .promo-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .promo-item:last-child { border-bottom: none; }
        .promo-item-left { display: flex; align-items: center; gap: 12px; }
        .promo-item-icon { width: 40px; height: 40px; background: #e8f5e9; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .promo-item-title { font-size: 14px; color: #333; }
        .promo-item-desc { font-size: 12px; color: #999; margin-top: 2px; }
        .promo-item-arrow { color: #ccc; }
        
        .qr-section { background: white; margin: 12px; border-radius: 12px; padding: 20px; text-align: center; }
        .qr-box { width: 150px; height: 150px; background: #f5f5f5; margin: 10px auto; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #999; }
        .qr-tip { font-size: 12px; color: #999; margin-top: 10px; }
        
        /* 模态框 */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; }
        .modal-overlay.show { display: block; }
        .modal-content {
            position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
            width: 100%; max-width: 430px; background: white;
            border-radius: 16px 16px 0 0; padding: 20px;
        }
        .modal-title { font-size: 16px; font-weight: 600; text-align: center; margin-bottom: 20px; }
        .form-group { margin-bottom: 16px; }
        .form-label { font-size: 13px; color: #666; margin-bottom: 8px; display: block; }
        .form-input { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; }
        .form-btn { width: 100%; background: #4CAF50; color: white; border: none; padding: 14px; border-radius: 8px; font-size: 16px; margin-top: 16px; cursor: pointer; }
        .modal-close { position: absolute; right: 16px; top: 16px; font-size: 20px; color: #999; cursor: pointer; }
        
        /* 详情页 */
        .detail-header { background: white; padding: 16px; display: flex; align-items: center; cursor: pointer; }
        .back-btn { font-size: 20px; margin-right: 12px; }
        .detail-title { font-size: 16px; font-weight: 600; }
        .detail-content { padding: 16px; }
        .detail-card { background: white; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .detail-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
        .detail-item:last-child { border-bottom: none; }
        .detail-label { color: #666; font-size: 14px; }
        .detail-value { color: #333; font-size: 14px; }
        
        /* 成员列表 */
        .member-card { background: white; border-radius: 12px; margin: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; }
        .member-avatar { width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(135deg, #8fcf8f, #7ec87e); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }
        .member-info { flex: 1; }
        .member-name { font-size: 15px; font-weight: 600; color: #333; }
        .member-time { font-size: 12px; color: #999; margin-top: 2px; }
        .member-stat { text-align: right; }
        .member-count { font-size: 16px; font-weight: 600; color: #4CAF50; }
        .member-label { font-size: 11px; color: #999; }
        
        /* 空状态 */
        .empty-state { text-align: center; padding: 60px 20px; }
        .empty-icon { font-size: 60px; }
        .empty-text { font-size: 14px; color: #999; margin-top: 16px; }
    </style>
</head>
<body>
    <!-- ==================== 首页 ==================== -->
    <div class="page active" id="homePage">
        <div class="header">
            陪护陪诊
            <div class="header-sub">专业陪诊 · 温暖服务</div>
        </div>
        
        <div class="banner">
            <div class="banner-content">
                <div class="banner-title">专业陪诊服务</div>
                <div class="banner-sub">让就医更简单，让家人更安心</div>
                <button class="banner-btn" onclick="showOrderModal()">立即预约</button>
            </div>
            <div class="banner-icon">🏥</div>
        </div>
        
        <div class="section">
            <div class="section-title" onclick="goPage('service')">热门服务 ></div>
            <div class="service-card" onclick="goPage('service')">
                <div class="service-img">🚶</div>
                <div class="service-content">
                    <div class="service-name">全程陪诊</div>
                    <div class="service-desc">挂号、候诊、取药全程陪同</div>
                    <div class="service-price">¥198 <span>起/次</span></div>
                </div>
            </div>
            <div class="service-card" onclick="goPage('service')">
                <div class="service-img">🏨</div>
                <div class="service-content">
                    <div class="service-name">医院陪护</div>
                    <div class="service-desc">住院期间专业护理服务</div>
                    <div class="service-price">¥268 <span>起/天</span></div>
                </div>
            </div>
            <div class="service-card" onclick="goPage('service')">
                <div class="service-img">🚗</div>
                <div class="service-content">
                    <div class="service-name">接送服务</div>
                    <div class="service-desc">医院往返接送，省心便捷</div>
                    <div class="service-price">¥98 <span>起/次</span></div>
                </div>
            </div>
        </div>
        
        <div class="tab-bar">
            <div class="tab-item active" onclick="goPage('home')">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="goPage('service')">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                <span>服务</span>
            </div>
            <div class="tab-item" onclick="goPage('orders')">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                <span>订单</span>
            </div>
            <div class="tab-item" onclick="goPage('my')">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                <span>我的</span>
            </div>
        </div>
    </div>

    <!-- ==================== 服务页面 ==================== -->
    <div class="page" id="servicePage">
        <div class="header" onclick="goPage('home')">← 服务预约</div>
        <div style="padding:12px">
            <div class="service-card" onclick="showOrderModal()">
                <div class="service-img">🚶</div>
                <div class="service-content">
                    <div class="service-name">全程陪诊</div>
                    <div class="service-desc">挂号、候诊、取药全程陪同服务，节省您的宝贵时间</div>
                    <div class="service-price">¥198 <span>起/次</span></div>
                </div>
            </div>
            <div class="service-card" onclick="showOrderModal()">
                <div class="service-img">🏨</div>
                <div class="service-content">
                    <div class="service-name">医院陪护</div>
                    <div class="service-desc">专业护工24小时陪护，照料住院期间的日常起居</div>
                    <div class="service-price">¥268 <span>起/天</span></div>
                </div>
            </div>
            <div class="service-card" onclick="showOrderModal()">
                <div class="service-img">🚗</div>
                <div class="service-content">
                    <div class="service-name">就医接送</div>
                    <div class="service-desc">专业司机点到点接送，让出行更便捷</div>
                    <div class="service-price">¥98 <span>起/次</span></div>
                </div>
            </div>
            <div class="service-card" onclick="showOrderModal()">
                <div class="service-img">💊</div>
                <div class="service-content">
                    <div class="service-name">代取报告</div>
                    <div class="service-desc">代为取药、代取检查报告，省时省力</div>
                    <div class="service-price">¥58 <span>起/次</span></div>
                </div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="goPage('home')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg><span>首页</span></div>
            <div class="tab-item active" onclick="goPage('service')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg><span>服务</span></div>
            <div class="tab-item" onclick="goPage('orders')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg><span>订单</span></div>
            <div class="tab-item" onclick="goPage('my')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg><span>我的</span></div>
        </div>
    </div>

    <!-- ==================== 订单页面 ==================== -->
    <div class="page" id="ordersPage">
        <div class="header" onclick="goPage('home')">← 我的订单</div>
        <div class="order-tabs">
            <div class="order-tab active" onclick="filterOrders('all', this)">全部</div>
            <div class="order-tab" onclick="filterOrders('pending', this)">待付款</div>
            <div class="order-tab" onclick="filterOrders('ongoing', this)">服务中</div>
            <div class="order-tab" onclick="filterOrders('done', this)">已完成</div>
        </div>
        
        <div id="orderList">
            <div class="order-card">
                <div class="order-header">
                    <span class="order-no">订单号: 20260421001</span>
                    <span class="order-status">服务中</span>
                </div>
                <div class="order-info">
                    <div class="order-icon">🚶</div>
                    <div class="order-detail">
                        <div class="order-service">全程陪诊服务</div>
                        <div class="order-time">4月21日 14:00 · 上海市第一人民医院</div>
                    </div>
                </div>
                <div class="escort-card" style="margin:0;padding:0;border:none">
                    <div class="escort-avatar">李</div>
                    <div class="escort-info">
                        <div class="escort-name">李晓梅</div>
                        <div class="escort-stars">★★★★★ 5.0分</div>
                    </div>
                    <button class="escort-contact" onclick="alert('拨打: 13800138000')">联系陪诊师</button>
                </div>
                <div class="order-footer">
                    <div class="order-price">实付 <strong>¥198</strong></div>
                    <button class="order-action" onclick="goPage('orderDetail')">查看进度</button>
                </div>
            </div>

            <div class="order-card">
                <div class="order-header">
                    <span class="order-no">订单号: 20260418002</span>
                    <span class="order-status">已完成</span>
                </div>
                <div class="order-info">
                    <div class="order-icon">🏨</div>
                    <div class="order-detail">
                        <div class="order-service">医院陪护服务</div>
                        <div class="order-time">4月18日 全天 · 瑞金医院</div>
                    </div>
                </div>
                <div class="order-footer">
                    <div class="order-price">实付 <strong>¥536</strong></div>
                    <button class="order-action" style="background:#f5f5f5;color:#666" onclick="goPage('review')">去评价</button>
                </div>
            </div>
        </div>
        
        <div class="tab-bar">
            <div class="tab-item" onclick="goPage('home')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg><span>首页</span></div>
            <div class="tab-item" onclick="goPage('service')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg><span>服务</span></div>
            <div class="tab-item active" onclick="goPage('orders')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg><span>订单</span></div>
            <div class="tab-item" onclick="goPage('my')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg><span>我的</span></div>
        </div>
    </div>

    <!-- ==================== 个人中心 ==================== -->
    <div class="page" id="myPage">
        <div class="my-header">
            <div class="my-profile">
                <div class="my-avatar">👤</div>
                <div>
                    <div class="my-name">张三</div>
                    <div class="my-id">ID: 88866688</div>
                </div>
            </div>
            <div class="my-stats">
                <div class="stat-item"><div class="stat-num">5</div><div class="stat-label">订单总数</div></div>
                <div class="stat-item"><div class="stat-num">¥1,234</div><div class="stat-label">累计消费</div></div>
                <div class="stat-item"><div class="stat-num">¥88.00</div><div class="stat-label">推广收益</div></div>
            </div>
        </div>
        
        <div class="my-menu">
            <div class="menu-item" onclick="goPage('promo')">
                <div class="menu-icon">🎁</div>
                <div class="menu-text">推广中心</div>
                <div class="menu-arrow">> 累计佣金 ¥88.00</div>
            </div>
            <div class="menu-item" onclick="goPage('wallet')">
                <div class="menu-icon">💰</div>
                <div class="menu-text">我的钱包</div>
                <div class="menu-arrow">></div>
            </div>
            <div class="menu-item" onclick="goPage('address')">
                <div class="menu-icon">📍</div>
                <div class="menu-text">常用地址</div>
                <div class="menu-arrow">></div>
            </div>
        </div>
        
        <div class="my-menu">
            <div class="menu-item" onclick="goPage('reviewList')">
                <div class="menu-icon">⭐</div>
                <div class="menu-text">我的评价</div>
                <div class="menu-arrow">></div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">📞</div>
                <div class="menu-text">联系客服</div>
                <div class="menu-arrow">></div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">⚙️</div>
                <div class="menu-text">设置</div>
                <div class="menu-arrow">></div>
            </div>
        </div>

        <div class="tab-bar">
            <div class="tab-item" onclick="goPage('home')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg><span>首页</span></div>
            <div class="tab-item" onclick="goPage('service')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg><span>服务</span></div>
            <div class="tab-item" onclick="goPage('orders')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg><span>订单</span></div>
            <div class="tab-item active" onclick="goPage('my')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg><span>我的</span></div>
        </div>
    </div>

    <!-- ==================== 推广中心 ==================== -->
    <div class="page" id="promoPage">
        <div class="header" onclick="goPage('my')">← 推广中心</div>
        
        <div class="promo-card">
            <div class="promo-title">累计佣金（元）</div>
            <div class="promo-amount">¥88.00</div>
            <button class="promo-btn" onclick="alert('申请提现中...')">立即提现</button>
        </div>
        
        <div class="promo-list">
            <div class="promo-item" onclick="goPage('commission')">
                <div class="promo-item-left">
                    <div class="promo-item-icon">💰</div>
                    <div>
                        <div class="promo-item-title">分佣订单</div>
                        <div class="promo-item-desc">查看收益订单明细</div>
                    </div>
                </div>
                <div class="promo-item-arrow">></div>
            </div>
            <div class="promo-item" onclick="goPage('team')">
                <div class="promo-item-left">
                    <div class="promo-item-icon">👥</div>
                    <div>
                        <div class="promo-item-title">团队成员</div>
                        <div class="promo-item-desc">一级3人 · 二级12人</div>
                    </div>
                </div>
                <div class="promo-item-arrow">></div>
            </div>
        </div>
        
        <div class="qr-section">
            <div style="font-size:15px;color:#333;font-weight:600;">我的推广二维码</div>
            <div class="qr-box">二维码区域</div>
            <div class="qr-tip">邀请好友扫码关注，获取分佣奖励</div>
            <button class="form-btn" style="margin-top:12px;background:#e8f5e9;color:#4CAF50;" onclick="alert('保存成功')">保存图片</button>
        </div>
        
        <div style="text-align:center;padding:20px;">
            <button onclick="alert('已复制链接')" style="background:#4CAF50;color:white;border:none;padding:12px 30px;border-radius:20px;font-size:14px;">复制邀请链接</button>
        </div>
    </div>

    <!-- ==================== 分佣订单 ==================== -->
    <div class="page" id="commissionPage">
        <div class="header" onclick="goPage('promo')">← 分佣订单</div>
        
        <div class="order-card">
            <div class="order-header">
                <span class="order-no">订单号: 20260420001</span>
                <span class="order-status">已结算</span>
            </div>
            <div class="detail-content">
                <div class="detail-item">
                    <span class="detail-label">订单金额</span>
                    <span class="detail-value">¥198.00</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">分佣比例</span>
                    <span class="detail-value">10%</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">预估佣金</span>
                    <span class="detail-value" style="color:#4CAF50;font-weight:600;">¥19.80</span>
                </div>
            </div>
        </div>
        
        <div class="order-card">
            <div class="order-header">
                <span class="order-no">订单号: 20260415002</span>
                <span class="order-status">已结算</span>
            </div>
            <div class="detail-content">
                <div class="detail-item">
                    <span class="detail-label">订单金额</span>
                    <span class="detail-value">¥268.00</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">分佣比例</span>
                    <span class="detail-value">10%</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">预估佣金</span>
                    <span class="detail-value" style="color:#4CAF50;font-weight:600;">¥26.80</span>
                </div>
            </div>
        </div>
        
        <div class="order-card">
            <div class="order-header">
                <span class="order-no">订单号: 20260410003</span>
                <span class="order-status" style="color:#ff9800;">待结算</span>
            </div>
            <div class="detail-content">
                <div class="detail-item">
                    <span class="detail-label">订单金额</span>
                    <span class="detail-value">¥536.00</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">分佣比例</span>
                    <span class="detail-value">10%</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">预估佣金</span>
                    <span class="detail-value" style="color:#ff9800;font-weight:600;">¥53.60</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 团队成员 ==================== -->
    <div class="page" id="teamPage">
        <div class="header" onclick="goPage('promo')">← 团队成员</div>
        
        <div style="background:white;padding:12px 16px;border-bottom:1px solid #f0f0f0;">
            <span style="font-size:13px;color:#666;">一级成员 3人</span>
        </div>
        
        <div class="member-card">
            <div class="member-avatar">王</div>
            <div class="member-info">
                <div class="member-name">王五</div>
                <div class="member-time">2026-04-15 加入</div>
            </div>
            <div class="member-stat">
                <div class="member-count">2</div>
                <div class="member-label">订单</div>
            </div>
        </div>
        <div class="member-card">
            <div class="member-avatar">赵</div>
            <div class="member-info">
                <div class="member-name">赵六</div>
                <div class="member-time">2026-04-10 加入</div>
            </div>
            <div class="member-stat">
                <div class="member-count">5</div>
                <div class="member-label">订单</div>
            </div>
        </div>
        <div class="member-card">
            <div class="member-avatar">钱</div>
            <div class="member-info">
                <div class="member-name">钱七</div>
                <div class="member-time">2026-04-05 加入</div>
            </div>
            <div class="member-stat">
                <div class="member-count">3</div>
                <div class="member-label">订单</div>
            </div>
        </div>
        
        <div style="background:white;padding:12px 16px;border-bottom:1px solid #f0f0f0;">
            <span style="font-size:13px;color:#666;">二级成员 12人</span>
        </div>
        
        <div class="member-card">
            <div class="member-avatar">孙</div>
            <div class="member-info">
                <div class="member-name">孙八</div>
                <div class="member-time">2026-04-18 加入</div>
            </div>
            <div class="member-stat">
                <div class="member-count">1</div>
                <div class="member-label">订单</div>
            </div>
        </div>
        <div class="member-card">
            <div class="member-avatar">周</div>
            <div class="member-info">
                <div class="member-name">周九</div>
                <div class="member-time">2026-04-12 加入</div>
            </div>
            <div class="member-stat">
                <div class="member-count">4</div>
                <div class="member-label">订单</div>
            </div>
        </div>
    </div>

    <!-- ==================== 订单详情 ==================== -->
    <div class="page" id="orderDetailPage">
        <div class="detail-header" onclick="goPage('orders')">
            <span class="back-btn">←</span>
            <span class="detail-title">订单进度</span>
        </div>
        <div class="detail-content">
            <div class="detail-card">
                <div style="font-size:15px;font-weight:600;color:#333;margin-bottom:12px;">订单信息</div>
                <div class="detail-item">
                    <span class="detail-label">服务类型</span>
                    <span class="detail-value">全程陪诊</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">预约时间</span>
                    <span class="detail-value">4月21日 14:00</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">医院</span>
                    <span class="detail-value">上海市第一人民医院</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">科室</span>
                    <span class="detail-value">骨科</span>
                </div>
            </div>
            
            <div class="detail-card">
                <div style="font-size:15px;font-weight:600;color:#333;margin-bottom:12px;">服务进度</div>
                <div style="padding:10px 0;">
                    <div style="display:flex;gap:12px;align-items:flex-start;">
                        <div style="width:20px;height:20px;border-radius:50%;background:#4CAF50;color:white;font-size:10px;display:flex;align-items:center;justify-content:center;">✓</div>
                        <div>
                            <div style="font-size:14px;color:#333;">已签到</div>
                            <div style="font-size:12px;color:#999;margin-top:2px;">14:02 陪诊师已到达医院</div>
                        </div>
                    </div>
                    <div style="width:2px;height:30px;background:#4CAF50;margin-left:9px;"></div>
                    <div style="display:flex;gap:12px;align-items:flex-start;">
                        <div style="width:20px;height:20px;border-radius:50%;background:#4CAF50;color:white;font-size:10px;display:flex;align-items:center;justify-content:center;">✓</div>
                        <div>
                            <div style="font-size:14px;color:#333;">服务中</div>
                            <div style="font-size:12px;color:#999;margin-top:2px;">13:55 陪诊师接单</div>
                        </div>
                    </div>
                    <div style="width:2px;height:30px;background:#ccc;margin-left:9px;"></div>
                    <div style="display:flex;gap:12px;align-items:flex-start;">
                        <div style="width:20px;height:20px;border-radius:50%;background:#ccc;color:white;font-size:10px;display:flex;align-items:center;justify-content:center;">3</div>
                        <div>
                            <div style="font-size:14px;color:#666;">服务完成</div>
                            <div style="font-size:12px;color:#ccc;margin-top:2px;">待完成</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="detail-card">
                <div style="font-size:15px;font-weight:600;color:#333;margin-bottom:12px;">陪诊师信息</div>
                <div style="display:flex;align-items:center;gap:12px;">
                    <div class="escort-avatar">李</div>
                    <div style="flex:1;">
                        <div style="font-size:15px;font-weight:600;color:#333;">李晓梅</div>
                        <div style="font-size:12px;color:#999;margin-top:2px;">★★★★★ 5.0分</div>
                    </div>
                    <button class="escort-contact" onclick="alert('拨打: 13800138000')">联系</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 预约模态框 -->
    <div class="modal-overlay" id="orderModal">
        <div class="modal-content">
            <div class="modal-close" onclick="closeModal()">×</div>
            <div class="modal-title">预约陪诊服务</div>
            <div class="form-group">
                <label class="form-label">选择服务</label>
                <select class="form-input">
                    <option>全程陪诊 - ¥198/次</option>
                    <option>医院陪护 - ¥268/天</option>
                    <option>就医接送 - ¥98/次</option>
                    <option>代取报告 - ¥58/次</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">选择日期</label>
                <input type="date" class="form-input" value="2026-04-21">
            </div>
            <div class="form-group">
                <label class="form-label">选择时段</label>
                <select class="form-input">
                    <option>08:00-10:00</option>
                    <option>10:00-12:00</option>
                    <option>14:00-16:00</option>
                    <option>16:00-18:00</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">医院</label>
                <input type="text" class="form-input" placeholder="请输入医院名称">
            </div>
            <div class="form-group">
                <label class="form-label">科室</label>
                <input type="text" class="form-input" placeholder="请输入就诊科室">
            </div>
            <div class="form-group">
                <label class="form-label">就诊人</label>
                <input type="text" class="form-input" placeholder="请输入就诊人姓名">
            </div>
            <div class="form-group">
                <label class="form-label">联系电话</label>
                <input type="tel" class="form-input" placeholder="请输入手机号码">
            </div>
            <button class="form-btn" onclick="submitOrder()">提交预约</button>
        </div>
    </div>

    <script>
        function goPage(page) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById(page + 'Page').classList.add('active');
            window.scrollTo(0, 0);
        }

        function showOrderModal() {
            document.getElementById('orderModal').classList.add('show');
        }

        function closeModal() {
            document.getElementById('orderModal').classList.remove('show');
        }

        function submitOrder() {
            alert('预约成功！我们将尽快为您安排陪诊师');
            closeModal();
        }

        document.getElementById('orderModal').addEventListener('click', function(e) {
            if (e.target === this) closeModal();
        });

        function filterOrders(type, el) {
            document.querySelectorAll('.order-tab').forEach(t => t.classList.remove('active'));
            el.classList.add('active');
            alert('筛选: ' + type);
        }
    </script>
</body>
</html>