编辑页面

HTML内容
<!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", Roboto, sans-serif;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .phone-container {
            max-width: 420px;
            margin: 0 auto;
            background: #fff;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .phone-header-bar {
            height: 30px;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .phone-notch {
            width: 120px;
            height: 25px;
            background: #000;
            border-radius: 20px;
        }
        .app-content {
            min-height: calc(100vh - 50px);
            display: flex;
            flex-direction: column;
        }
        .screen-view {
            display: none;
            flex: 1;
            padding-bottom: 70px;
        }
        .screen-view.active { display: block; }
        
        /* 首页/抢单大厅 */
        .home-header {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
            padding: 20px;
            text-align: center;
        }
        .home-welcome {
            font-size: 14px;
            opacity: 0.9;
        }
        .home-title {
            font-size: 22px;
            font-weight: 600;
            margin: 5px 0;
        }
        .home-subtitle {
            font-size: 12px;
            opacity: 0.8;
        }
        .status-bar {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }
        .status-btn {
            flex: 1;
            padding: 10px;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 20px;
            color: white;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .status-btn.active {
            background: white;
            color: #f5576c;
        }
        .order-queue {
            padding: 15px;
        }
        .queue-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .queue-count {
            background: #f5576c;
            color: white;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        .order-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.3s;
        }
        .order-card:hover {
            border-color: #f5576c;
            transform: translateX(5px);
        }
        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .order-id {
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }
        .order-tag {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 12px;
        }
        .order-info {
            font-size: 13px;
            color: #666;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .order-actions {
            display: flex;
            gap: 10px;
            margin-top: 12px;
        }
        .btn {
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            font-weight: 500;
        }
        .btn-primary {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
        }
        .btn-outline {
            background: white;
            color: #f5576c;
            border: 1px solid #f5576c;
        }
        .btn-success {
            background: #4caf50;
            color: white;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 420px;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            border-top: 1px solid #eee;
            z-index: 100;
        }
        .nav-item {
            text-align: center;
            font-size: 10px;
            color: #999;
            cursor: pointer;
            padding: 5px 15px;
            transition: all 0.3s;
        }
        .nav-item.active { color: #f5576c; }
        .nav-item .icon {
            font-size: 22px;
            margin-bottom: 3px;
            display: block;
        }
        
        /* 模态框 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
        }
        .modal.show { display: flex; }
        .modal-content {
            background: white;
            border-radius: 20px;
            max-width: 420px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease;
        }
        @keyframes slideUp {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            background: white;
        }
        .modal-header h3 { font-size: 16px; color: #333; }
        .modal-close {
            width: 30px;
            height: 30px;
            border: none;
            background: #f0f0f0;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
        }
        .modal-body { padding: 20px; }
        
        /* 订单管理 */
        .order-tabs {
            display: flex;
            gap: 5px;
            padding: 15px;
            overflow-x: auto;
            background: #f8f9fa;
        }
        .order-tab {
            padding: 8px 16px;
            background: white;
            border-radius: 20px;
            font-size: 12px;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.3s;
        }
        .order-tab.active {
            background: #f5576c;
            color: white;
        }
        
        /* 个人中心 */
        .profile-header {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
            padding: 25px;
            text-align: center;
        }
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: white;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
        }
        .profile-name { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
        .profile-cert {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }
        .cert-badge {
            background: rgba(255,255,255,0.2);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 11px;
        }
        .profile-stats {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            background: #f8f9fa;
        }
        .stat-item {
            text-align: center;
        }
        .stat-value {
            font-size: 20px;
            font-weight: 700;
            color: #f5576c;
        }
        .stat-label {
            font-size: 12px;
            color: #999;
            margin-top: 3px;
        }
        .menu-section { padding: 15px; }
        .menu-group {
            background: #f8f9fa;
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 15px;
        }
        .menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: all 0.3s;
        }
        .menu-item:last-child { border-bottom: none; }
        .menu-item:hover { background: #e9ecef; }
        .menu-icon {
            width: 35px;
            height: 35px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .menu-text { flex: 1; }
        .menu-title { font-size: 14px; color: #333; }
        .menu-desc { font-size: 11px; color: #999; margin-top: 2px; }
        .menu-arrow { color: #ccc; font-size: 18px; }
        
        /* 收益中心 */
        .income-header {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
            padding: 25px;
            text-align: center;
        }
        .income-total {
            font-size: 36px;
            font-weight: 700;
        }
        .income-label {
            font-size: 14px;
            opacity: 0.9;
            margin-top: 5px;
        }
        .income-stats {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            background: #f8f9fa;
            margin: 0;
        }
        .income-stat {
            text-align: center;
        }
        .income-stat .value {
            font-size: 18px;
            font-weight: 600;
            color: #f5576c;
        }
        .income-stat .label {
            font-size: 12px;
            color: #999;
            margin-top: 3px;
        }
        
        /* 评价列表 */
        .review-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 12px;
        }
        .review-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .review-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f093fb, #f5576c);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        .review-user { font-weight: 500; color: #333; }
        .review-time { font-size: 11px; color: #999; }
        .review-rating {
            color: #ff9800;
            font-size: 14px;
        }
        .review-content {
            font-size: 13px;
            color: #666;
            line-height: 1.5;
        }
        
        /* 消息列表 */
        .message-item {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 12px;
            display: flex;
            gap: 12px;
            cursor: pointer;
        }
        .message-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f093fb, #f5576c);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            flex-shrink: 0;
        }
        .message-content { flex: 1; }
        .message-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 5px;
        }
        .message-desc {
            font-size: 12px;
            color: #999;
            line-height: 1.4;
        }
        .message-time {
            font-size: 11px;
            color: #ccc;
            margin-top: 5px;
        }
        .message-unread {
            width: 8px;
            height: 8px;
            background: #f5576c;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 5px;
        }
        
        /* 签到打卡 */
        .checkin-map {
            background: #e0e0e0;
            height: 200px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            margin-bottom: 15px;
        }
        .checkin-info {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .checkin-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        .checkin-row:last-child { border-bottom: none; }
        .checkin-label { color: #666; font-size: 13px; }
        .checkin-value { color: #333; font-size: 13px; font-weight: 500; }
        
        /* 服务进度 */
        .progress-steps {
            padding: 20px 0;
        }
        .step-item {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            position: relative;
        }
        .step-item:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 15px;
            top: 35px;
            width: 2px;
            height: calc(100% - 20px);
            background: #e0e0e0;
        }
        .step-item.done:not(:last-child)::after {
            background: #4caf50;
        }
        .step-dot {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
            z-index: 1;
        }
        .step-item.done .step-dot {
            background: #4caf50;
            color: white;
        }
        .step-item.current .step-dot {
            background: #f5576c;
            color: white;
        }
        .step-content { flex: 1; }
        .step-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }
        .step-item.done .step-title { color: #999; }
        .step-time {
            font-size: 12px;
            color: #999;
            margin-top: 3px;
        }
        
        /* 帮助中心 */
        .help-item {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 12px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .help-question {
            font-size: 14px;
            color: #333;
        }
        .help-arrow { color: #ccc; }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="phone-header-bar">
            <div class="phone-notch"></div>
        </div>
        <div class="app-content">
            
            <!-- 首页/抢单大厅 -->
            <div class="screen-view active" id="screen-home">
                <div class="home-header">
                    <div class="home-welcome">欢迎回来</div>
                    <div class="home-title">👩‍⚕️ 赵晓梅</div>
                    <div class="home-subtitle">金牌陪诊师 | 服务328次 | ⭐4.9</div>
                    <div class="status-bar">
                        <button class="status-btn active" id="接单状态" onclick="toggleStatus()">
                            <span>●</span> 接单中
                        </button>
                        <button class="status-btn" onclick="showModal('休息设置', '设置休息时间段')">
                            <span>💤</span> 休息中
                        </button>
                    </div>
                </div>
                
                <div class="order-queue">
                    <div class="queue-title">
                        🔥 抢单大厅
                        <span class="queue-count">3</span>
                    </div>
                    
                    <div class="order-card" onclick="showOrderDetail('20240424001')">
                        <div class="order-header">
                            <span class="order-id">订单 #20240424001</span>
                            <span class="order-tag">全天陪诊</span>
                        </div>
                        <div class="order-info">🏥 上海市第一人民医院</div>
                        <div class="order-info">📍 静安区延长中路301号</div>
                        <div class="order-info">👤 就诊人：李四 | 男 | 45岁</div>
                        <div class="order-info">📅 2024-04-25 09:00</div>
                        <div class="order-info" style="color: #f5576c; font-weight: 600; font-size: 18px;">¥268.00</div>
                        <div class="order-actions">
                            <button class="btn btn-primary" onclick="event.stopPropagation(); grabOrder('20240424001')">立即抢单</button>
                            <button class="btn btn-outline" onclick="event.stopPropagation(); showModal('订单详情', '订单详细信息')">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="order-card" onclick="showOrderDetail('20240424002')">
                        <div class="order-header">
                            <span class="order-id">订单 #20240424002</span>
                            <span class="order-tag">半天陪诊</span>
                        </div>
                        <div class="order-info">🏥 复旦大学附属华山医院</div>
                        <div class="order-info">📍 静安区乌鲁木齐中路12号</div>
                        <div class="order-info">👤 就诊人：王五 | 女 | 32岁</div>
                        <div class="order-info">📅 2024-04-25 14:00</div>
                        <div class="order-info" style="color: #f5576c; font-weight: 600; font-size: 18px;">¥168.00</div>
                        <div class="order-actions">
                            <button class="btn btn-primary" onclick="event.stopPropagation(); grabOrder('20240424002')">立即抢单</button>
                            <button class="btn btn-outline" onclick="event.stopPropagation(); showModal('订单详情', '订单详细信息')">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="order-card" onclick="showOrderDetail('20240424003')">
                        <div class="order-header">
                            <span class="order-id">订单 #20240424003</span>
                            <span class="order-tag">2小时陪诊</span>
                        </div>
                        <div class="order-info">🏥 瑞金医院</div>
                        <div class="order-info">📍 黄浦区瑞金二路197号</div>
                        <div class="order-info">👤 就诊人：孙七 | 男 | 28岁</div>
                        <div class="order-info">📅 2024-04-25 10:00</div>
                        <div class="order-info" style="color: #f5576c; font-weight: 600; font-size: 18px;">¥98.00</div>
                        <div class="order-actions">
                            <button class="btn btn-primary" onclick="event.stopPropagation(); grabOrder('20240424003')">立即抢单</button>
                            <button class="btn btn-outline" onclick="event.stopPropagation(); showModal('订单详情', '订单详细信息')">查看详情</button>
                        </div>
                    </div>
                </div>
                <div style="height: 20px;"></div>
            </div>
            
            <!-- 订单管理 -->
            <div class="screen-view" id="screen-order">
                <div style="background: linear-gradient(135deg, #f093fb, #f5576c); color: white; padding: 20px; text-align: center;">
                    <div style="font-size: 18px; font-weight: 600;">我的订单</div>
                </div>
                <div class="order-tabs">
                    <div class="order-tab active" onclick="filterOrders('pending')">待服务</div>
                    <div class="order-tab" onclick="filterOrders('processing')">服务中</div>
                    <div class="order-tab" onclick="filterOrders('done')">已完成</div>
                    <div class="order-tab" onclick="filterOrders('cancelled')">已取消</div>
                </div>
                
                <div style="padding: 15px;">
                    <div class="order-card">
                        <div class="order-header">
                            <span class="order-id">订单 #20240423001</span>
                            <span class="order-tag" style="background: #4caf50;">服务中</span>
                        </div>
                        <div class="order-info">🏥 上海市第一人民医院 | 全天陪诊</div>
                        <div class="order-info">👤 就诊人：李四 | 138****8888</div>
                        <div class="order-info">📅 今天 14:00 服务</div>
                        <div class="order-info">📍 医院地址：静安区延长中路301号</div>
                        <div class="order-actions">
                            <button class="btn btn-success" onclick="showCheckin()">到院签到</button>
                            <button class="btn btn-outline" onclick="showModal('服务进度', '查看当前服务进度')">服务进度</button>
                            <button class="btn btn-primary" onclick="showModal('联系用户', '正在为您拨打...')">联系用户</button>
                        </div>
                    </div>
                    
                    <div class="order-card">
                        <div class="order-header">
                            <span class="order-id">订单 #20240422005</span>
                            <span style="background: #e0e0e0; color: #666; padding: 4px 10px; border-radius: 15px; font-size: 12px;">待服务</span>
                        </div>
                        <div class="order-info">🏥 瑞金医院 | 半天陪诊</div>
                        <div class="order-info">👤 就诊人：孙七 | 137****5555</div>
                        <div class="order-info">📅 明天 09:00 服务</div>
                        <div class="order-actions">
                            <button class="btn btn-outline" onclick="showModal('订单详情', '订单详细信息')">查看详情</button>
                            <button class="btn btn-primary" onclick="showModal('联系用户', '正在为您拨打...')">联系用户</button>
                        </div>
                    </div>
                    
                    <div class="order-card">
                        <div class="order-header">
                            <span class="order-id">订单 #20240420001</span>
                            <span style="background: #4caf50; color: white; padding: 4px 10px; border-radius: 15px; font-size: 12px;">已完成</span>
                        </div>
                        <div class="order-info">🏥 华山医院 | 全天陪诊</div>
                        <div class="order-info">👤 就诊人：王五 | 139****6666</div>
                        <div class="order-info">📅 2024-04-20 完成</div>
                        <div class="order-info">💰 收入：¥268.00</div>
                        <div class="order-actions">
                            <button class="btn btn-outline" onclick="showModal('上传凭证', '上传服务凭证')">上传凭证</button>
                            <button class="btn btn-primary" onclick="showModal('查看收入', '订单收入详情')">查看收入</button>
                        </div>
                    </div>
                </div>
                <div style="height: 20px;"></div>
            </div>
            
            <!-- 收益中心 -->
            <div class="screen-view" id="screen-income">
                <div class="income-header">
                    <div class="income-total">¥3,680.00</div>
                    <div class="income-label">累计收益（元）</div>
                </div>
                <div class="income-stats">
                    <div class="income-stat">
                        <div class="value">¥1,280</div>
                        <div class="label">本月收入</div>
                    </div>
                    <div class="income-stat">
                        <div class="value">¥800</div>
                        <div class="label">可提现</div>
                    </div>
                    <div class="income-stat">
                        <div class="value">¥2,880</div>
                        <div class="label">已提现</div>
                    </div>
                </div>
                
                <div class="menu-section">
                    <div class="menu-group">
                        <div class="menu-item" onclick="showModal('订单收益', '每单收入明细展示')">
                            <div class="menu-icon" style="background: #fce4ec;">📋</div>
                            <div class="menu-text">
                                <div class="menu-title">订单收益</div>
                                <div class="menu-desc">查看每单收入明细</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showModal('收益统计', '日/周/月收益统计图表')">
                            <div class="menu-icon" style="background: #e3f2fd;">📊</div>
                            <div class="menu-text">
                                <div class="menu-title">收益统计</div>
                                <div class="menu-desc">收入数据可视化</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showModal('提现申请', '申请提现到银行卡')">
                            <div class="menu-icon" style="background: #e8f5e9;">💰</div>
                            <div class="menu-text">
                                <div class="menu-title">提现申请</div>
                                <div class="menu-desc">可提现 ¥800.00</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showModal('提现记录', '历史提现记录')">
                            <div class="menu-icon" style="background: #fff3e0;">📝</div>
                            <div class="menu-text">
                                <div class="menu-title">提现记录</div>
                                <div class="menu-desc">查看历史提现</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                    </div>
                </div>
                
                <div style="padding: 0 15px;">
                    <div style="font-size: 14px; font-weight: 600; margin-bottom: 10px;">📈 近7日收益</div>
                    <div class="echart-placeholder" style="background: #f8f9fa; border-radius: 15px; padding: 30px; text-align: center;">
                        <p>📊 收益趋势图表</p>
                        <p style="font-size: 12px; color: #999; margin-top: 5px;">近7天收益数据可视化</p>
                    </div>
                </div>
                <div style="height: 20px;"></div>
            </div>
            
            <!-- 个人中心 -->
            <div class="screen-view" id="screen-profile">
                <div class="profile-header">
                    <div class="profile-avatar">👩‍⚕️</div>
                    <div class="profile-name">赵晓梅</div>
                    <div style="font-size: 13px; opacity: 0.9;">138****8888</div>
                    <div class="profile-cert">
                        <span class="cert-badge">✓ 身份认证</span>
                        <span class="cert-badge">✓ 健康证</span>
                        <span class="cert-badge">✓ 护士证</span>
                    </div>
                </div>
                <div class="profile-stats">
                    <div class="stat-item">
                        <div class="stat-value">328</div>
                        <div class="stat-label">服务次数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">⭐4.9</div>
                        <div class="stat-label">好评率</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">98%</div>
                        <div class="stat-label">完单率</div>
                    </div>
                </div>
                
                <div class="menu-section">
                    <div class="menu-group">
                        <div class="menu-item" onclick="showModal('个人资料', '头像、昵称、简介、擅长服务')">
                            <div class="menu-icon" style="background: #e3f2fd;">👤</div>
                            <div class="menu-text">
                                <div class="menu-title">个人资料</div>
                                <div class="menu-desc">完善个人简介</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showReviews()">
                            <div class="menu-icon" style="background: #fff3e0;">⭐</div>
                            <div class="menu-text">
                                <div class="menu-title">我的评价</div>
                                <div class="menu-desc">查看用户评价</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showMessages()">
                            <div class="menu-icon" style="background: #e8f5e9;">🔔</div>
                            <div class="menu-text">
                                <div class="menu-title">消息通知</div>
                                <div class="menu-desc">订单通知、系统消息</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                    </div>
                    
                    <div class="menu-group">
                        <div class="menu-item" onclick="showModal('异常上报', '用户爽约、突发情况上报')">
                            <div class="menu-icon" style="background: #ffebee;">⚠️</div>
                            <div class="menu-text">
                                <div class="menu-title">异常上报</div>
                                <div class="menu-desc">上报异常情况</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showHelp()">
                            <div class="menu-icon" style="background: #e3f2fd;">❓</div>
                            <div class="menu-text">
                                <div class="menu-title">帮助中心</div>
                                <div class="menu-desc">接单规则、服务规范</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                    </div>
                    
                    <div class="menu-group">
                        <div class="menu-item" onclick="showModal('关于我们', '平台介绍、联系方式')">
                            <div class="menu-icon" style="background: #f3e5f5;">ℹ️</div>
                            <div class="menu-text">
                                <div class="menu-title">关于我们</div>
                                <div class="menu-desc">平台介绍</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showModal('退出登录', '确定退出当前账号？')" style="color: #f5576c;">
                            <div class="menu-icon" style="background: #ffebee;">🚪</div>
                            <div class="menu-text">
                                <div class="menu-title">退出登录</div>
                                <div class="menu-desc">安全退出</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                    </div>
                </div>
                <div style="height: 20px;"></div>
            </div>
            
        </div>
        
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item active" onclick="switchTab('home')">
                <span class="icon">🏠</span>
                首页
            </div>
            <div class="nav-item" onclick="switchTab('order')">
                <span class="icon">📋</span>
                订单
            </div>
            <div class="nav-item" onclick="switchTab('income')">
                <span class="icon">💰</span>
                收益
            </div>
            <div class="nav-item" onclick="switchTab('profile')">
                <span class="icon">👤</span>
                我的
            </div>
        </div>
    </div>
    
    <!-- 模态框 -->
    <div class="modal" id="modal">
        <div class="modal-content" id="modal-content">
            <div class="modal-header">
                <h3 id="modal-title">功能详情</h3>
                <button class="modal-close" onclick="closeModal()">×</button>
            </div>
            <div class="modal-body" id="modal-body"></div>
        </div>
    </div>

    <script>
        // 切换Tab
        function switchTab(tab) {
            document.querySelectorAll('.screen-view').forEach(v => v.classList.remove('active'));
            document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
            
            const tabMap = {
                'home': 'screen-home',
                'order': 'screen-order',
                'income': 'screen-income',
                'profile': 'screen-profile'
            };
            
            const navIndex = ['home', 'order', 'income', 'profile'].indexOf(tab);
            
            if (tabMap[tab]) {
                document.getElementById(tabMap[tab]).classList.add('active');
            }
            if (navIndex >= 0) {
                document.querySelectorAll('.nav-item')[navIndex].classList.add('active');
            }
        }
        
        // 显示模态框
        function showModal(title, content) {
            document.getElementById('modal-title').textContent = title;
            document.getElementById('modal-body').innerHTML = '<p style="text-align: center; color: #666; padding: 30px;">' + content + '</p>';
            document.getElementById('modal').classList.add('show');
        }
        
        // 关闭模态框
        function closeModal() {
            document.getElementById('modal').classList.remove('show');
        }
        
        // 点击模态框外部关闭
        document.getElementById('modal').addEventListener('click', function(e) {
            if (e.target === this) closeModal();
        });
        
        // 切换接单状态
        function toggleStatus() {
            const btn = document.getElementById('接单状态');
            if (btn.classList.contains('active')) {
                btn.classList.remove('active');
                btn.innerHTML = '<span>○</span> 休息中';
            } else {
                btn.classList.add('active');
                btn.innerHTML = '<span>●</span> 接单中';
            }
        }
        
        // 抢单
        function grabOrder(orderId) {
            showModal('抢单成功', '恭喜您抢到订单 #' + orderId + '！<br><br>请及时联系用户确认服务详情。');
        }
        
        // 订单详情
        function showOrderDetail(orderId) {
            document.getElementById('modal-title').textContent = '订单 #' + orderId + ' 详情';
            document.getElementById('modal-body').innerHTML = `
                <div class="order-card" style="margin: 0;">
                    <div class="order-header">
                        <span style="font-weight: 600;">全天陪诊</span>
                        <span style="background: linear-gradient(135deg, #f093fb, #f5576c); color: white; padding: 4px 10px; border-radius: 15px; font-size: 12px;">¥268.00</span>
                    </div>
                    <div class="order-info">🏥 上海市第一人民医院</div>
                    <div class="order-info">📍 静安区延长中路301号</div>
                    <div class="order-info">👤 就诊人：李四</div>
                    <div class="order-info">📱 电话：138****8888</div>
                    <div class="order-info">📅 服务时间：2024-04-25 09:00</div>
                    <div class="order-info">💊 病情备注：常规体检</div>
                </div>
                <div style="margin-top: 20px;">
                    <button class="btn btn-primary" style="width: 100%;" onclick="closeModal(); grabOrder('${orderId}')">立即抢单</button>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 筛选订单
        function filterOrders(status) {
            document.querySelectorAll('.order-tab').forEach(t => t.classList.remove('active'));
            event.target.classList.add('active');
            showModal('订单筛选', '已切换到 ' + status + ' 订单列表');
        }
        
        // 到院签到
        function showCheckin() {
            document.getElementById('modal-title').textContent = '到院签到';
            document.getElementById('modal-body').innerHTML = `
                <div class="checkin-map">📍</div>
                <div class="checkin-info">
                    <div class="checkin-row">
                        <span class="checkin-label">当前位置</span>
                        <span class="checkin-value">上海市第一人民医院 附近</span>
                    </div>
                    <div class="checkin-row">
                        <span class="checkin-label">签到时间</span>
                        <span class="checkin-value">2024-04-25 08:55</span>
                    </div>
                    <div class="checkin-row">
                        <span class="checkin-label">订单编号</span>
                        <span class="checkin-value">#20240423001</span>
                    </div>
                </div>
                <button class="btn btn-primary" style="width: 100%;" onclick="closeModal(); showModal('签到成功', '签到成功！请开始服务。')">确认签到</button>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 评价列表
        function showReviews() {
            document.getElementById('modal-title').textContent = '我的评价';
            document.getElementById('modal-body').innerHTML = `
                <div style="background: #f8f9fa; border-radius: 15px; padding: 20px; text-align: center; margin-bottom: 15px;">
                    <div style="font-size: 32px; color: #ff9800;">⭐⭐⭐⭐⭐</div>
                    <div style="font-size: 24px; font-weight: 600; color: #f5576c; margin: 10px 0;">4.9</div>
                    <div style="font-size: 13px; color: #999;">共 328 条评价，好评率 98%</div>
                </div>
                <div class="review-card">
                    <div class="review-header">
                        <div class="review-avatar">👤</div>
                        <div>
                            <div class="review-user">李四</div>
                            <div class="review-time">2024-04-23</div>
                        </div>
                        <div class="review-rating" style="margin-left: auto;">⭐⭐⭐⭐⭐</div>
                    </div>
                    <div class="review-content">服务非常专业，全程陪同，检查项目多亏有陪诊师帮忙排队，非常贴心！</div>
                </div>
                <div class="review-card">
                    <div class="review-header">
                        <div class="review-avatar" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">👤</div>
                        <div>
                            <div class="review-user">王五</div>
                            <div class="review-time">2024-04-20</div>
                        </div>
                        <div class="review-rating" style="margin-left: auto;">⭐⭐⭐⭐⭐</div>
                    </div>
                    <div class="review-content">赵姐人很好，很有耐心，帮我取号、排队、取药，省了很多时间，推荐！</div>
                </div>
                <div class="review-card">
                    <div class="review-header">
                        <div class="review-avatar" style="background: linear-gradient(135deg, #43e97b, #38f9d7);">👤</div>
                        <div>
                            <div class="review-user">孙七</div>
                            <div class="review-time">2024-04-18</div>
                        </div>
                        <div class="review-rating" style="margin-left: auto;">⭐⭐⭐⭐☆</div>
                    </div>
                    <div class="review-content">服务不错，就是医院人太多了，整体很满意，下次还选这位陪诊师。</div>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 消息列表
        function showMessages() {
            document.getElementById('modal-title').textContent = '消息通知';
            document.getElementById('modal-body').innerHTML = `
                <div class="message-item">
                    <div class="message-icon">📋</div>
                    <div class="message-content">
                        <div class="message-title">新订单提醒</div>
                        <div class="message-desc">您有新的订单等待抢单，全天陪诊，¥268</div>
                        <div class="message-time">刚刚</div>
                    </div>
                    <div class="message-unread"></div>
                </div>
                <div class="message-item">
                    <div class="message-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">💰</div>
                    <div class="message-content">
                        <div class="message-title">收益到账</div>
                        <div class="message-desc">订单 #20240420001 完成，收入 ¥268.00 已到账</div>
                        <div class="message-time">10分钟前</div>
                    </div>
                    <div class="message-unread"></div>
                </div>
                <div class="message-item">
                    <div class="message-icon" style="background: linear-gradient(135deg, #43e97b, #38f9d7);">📢</div>
                    <div class="message-content">
                        <div class="message-title">系统公告</div>
                        <div class="message-desc">五一假期服务须知，请提前查看...</div>
                        <div class="message-time">昨天</div>
                    </div>
                </div>
                <div class="message-item">
                    <div class="message-icon" style="background: linear-gradient(135deg, #a18cd1, #fbc2eb);">⭐</div>
                    <div class="message-content">
                        <div class="message-title">获得好评</div>
                        <div class="message-desc">用户李四对您的服务进行了5星评价</div>
                        <div class="message-time">昨天</div>
                    </div>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 帮助中心
        function showHelp() {
            document.getElementById('modal-title').textContent = '帮助中心';
            document.getElementById('modal-body').innerHTML = `
                <div class="help-item" onclick="showModal('接单规则', '1. 抢单后需在10分钟内联系用户确认<br>2. 按时到院签到<br>3. 服务过程中保持沟通<br>4. 服务完成后上传凭证')">
                    <span class="help-question">📋 接单规则</span>
                    <span class="help-arrow">›</span>
                </div>
                <div class="help-item" onclick="showModal('服务规范', '1. 提前了解就诊信息<br>2. 准时到达医院<br>3. 全程陪同就诊人<br>4. 帮助取号、排队、缴费等<br>5. 服务结束后上传凭证')">
                    <span class="help-question">📝 服务规范</span>
                    <span class="help-arrow">›</span>
                </div>
                <div class="help-item" onclick="showModal('常见问题', 'Q: 如何提高抢单成功率？<br>A: 开启接单状态，保持在线<br><br>Q: 订单取消怎么办？<br>A: 联系客服处理<br><br>Q: 如何申请提现？<br>A: 进入收益中心申请')">
                    <span class="help-question">❓ 常见问题</span>
                    <span class="help-arrow">›</span>
                </div>
                <div class="help-item" onclick="showModal('联系客服', '客服电话：400-888-8888<br>工作时间：9:00-21:00')">
                    <span class="help-question">📞 联系客服</span>
                    <span class="help-arrow">›</span>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
    </script>
</body>
</html>