编辑页面

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;
        }
        
        .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; background: #e8f5e9; padding: 4px 10px; border-radius: 12px; }
        .order-status.urgent { color: #ff5722; background: #fff3e0; }
        
        .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-hospital { font-size: 12px; color: #666; margin-top: 4px; }
        
        .order-tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
        .order-tag { font-size: 11px; color: #666; background: #f5f5f5; padding: 4px 10px; border-radius: 10px; }
        
        .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: 18px; font-weight: 600; }
        .order-action { background: #4CAF50; color: white; border: none; padding: 10px 24px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        .order-action.gray { background: #e0e0e0; color: #666; }
        
        /* 底部标签栏 */
        .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; }
        
        /* 接单页面 */
        .take-order-tabs {
            display: flex; background: white; padding: 12px 16px;
            gap: 24px; border-bottom: 1px solid #f0f0f0;
        }
        .take-order-tab { font-size: 14px; color: #666; padding-bottom: 8px; cursor: pointer; }
        .take-order-tab.active { color: #4CAF50; border-bottom: 2px solid #4CAF50; }
        
        /* 订单页面 */
        .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; }
        
        /* 陪诊师信息 */
        .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; }
        
        /* 模态框 */
        .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; }
        
        /* 空状态 */
        .empty-state { text-align: center; padding: 60px 20px; }
        .empty-icon { font-size: 60px; }
        .empty-text { font-size: 14px; color: #999; margin-top: 16px; }
        
        /* 收入卡片 */
        .income-card { background: linear-gradient(135deg, #8fcf8f, #7ec87e); color: white; margin: 12px; border-radius: 12px; padding: 20px; text-align: center; }
        .income-title { font-size: 14px; opacity: 0.9; }
        .income-amount { font-size: 32px; font-weight: 600; margin: 8px 0; }
        .income-btn { background: white; color: #4CAF50; border: none; padding: 10px 30px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        
        /* 消息列表 */
        .msg-card { background: white; border-radius: 12px; margin: 12px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
        .msg-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; }
        .msg-content { flex: 1; }
        .msg-title { font-size: 14px; font-weight: 600; color: #333; }
        .msg-text { font-size: 12px; color: #999; margin-top: 4px; line-height: 1.4; }
        .msg-time { font-size: 11px; color: #ccc; }
        .msg-badge { width: 8px; height: 8px; background: #ff5722; border-radius: 50%; position: absolute; top: 8px; right: 8px; }
        
        /* 服务统计 */
        .stat-card { background: white; border-radius: 12px; margin: 12px; padding: 16px; }
        .stat-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
        .stat-row:last-child { border-bottom: none; }
        .stat-row-label { font-size: 14px; color: #666; }
        .stat-row-value { font-size: 14px; color: #333; font-weight: 600; }
        .stat-row-value.green { color: #4CAF50; }
        
        /* 认证状态 */
        .cert-status { background: white; border-radius: 12px; margin: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; }
        .cert-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .cert-icon.passed { background: #e8f5e9; }
        .cert-icon.pending { background: #fff3e0; }
        .cert-info { flex: 1; }
        .cert-title { font-size: 15px; font-weight: 600; color: #333; }
        .cert-desc { font-size: 12px; color: #999; margin-top: 4px; }
        .cert-action { font-size: 13px; color: #4CAF50; }
    </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">当前有 5 个新订单等待接单</div>
                <button class="banner-btn" onclick="goPage('orders')">立即查看</button>
            </div>
            <div class="banner-icon">📋</div>
        </div>
        
        <div class="section">
            <div class="section-title" onclick="goPage('orders')">待接单 ></div>
            
            <div class="order-card">
                <div class="order-header">
                    <span class="order-no">订单号: 20260422001</span>
                    <span class="order-status urgent">紧急</span>
                </div>
                <div class="order-info">
                    <div class="order-icon">🚶</div>
                    <div class="order-detail">
                        <div class="order-service">全程陪诊</div>
                        <div class="order-time">今天 14:00-16:00</div>
                        <div class="order-hospital">上海市第一人民医院 · 骨科</div>
                    </div>
                </div>
                <div class="order-tags">
                    <span class="order-tag">女性客户</span>
                    <span class="order-tag">65岁以下</span>
                </div>
                <div class="order-footer">
                    <div class="order-price">收入 <strong>¥198</strong></div>
                    <button class="order-action" onclick="acceptOrder(1)">立即抢单</button>
                </div>
            </div>

            <div class="order-card">
                <div class="order-header">
                    <span class="order-no">订单号: 20260422002</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">明天 全天</div>
                        <div class="order-hospital">瑞金医院 · 内科</div>
                    </div>
                </div>
                <div class="order-tags">
                    <span class="order-tag">男性客户</span>
                    <span class="order-tag">70岁以下</span>
                </div>
                <div class="order-footer">
                    <div class="order-price">收入 <strong>¥268</strong></div>
                    <button class="order-action" onclick="acceptOrder(2)">立即抢单</button>
                </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('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('msg')">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></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="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">订单号: 20260418001</span>
                    <span class="order-status" style="background:#e0e0e0;color:#666;">已完成</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 gray">已完成</button>
                </div>
            </div>
            
            <div class="order-card">
                <div class="order-header">
                    <span class="order-no">订单号: 20260415002</span>
                    <span class="order-status" style="background:#e0e0e0;color:#666;">已完成</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月15日 · 中山医院</div>
                    </div>
                </div>
                <div class="order-footer">
                    <div class="order-price">收入 <strong>¥98</strong></div>
                    <button class="order-action gray">已完成</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 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('msg')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></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="msgPage">
        <div class="header">← 消息中心</div>
        
        <div class="msg-card" onclick="goPage('msgDetail')">
            <div class="msg-avatar">📋</div>
            <div class="msg-content">
                <div class="msg-title">新订单提醒</div>
                <div class="msg-text">您有一个新的陪诊订单，上海市第一人民医院，请及时接单</div>
                <div class="msg-time">10分钟前</div>
            </div>
        </div>
        
        <div class="msg-card" onclick="goPage('msgDetail')">
            <div class="msg-avatar">💰</div>
            <div class="msg-content">
                <div class="msg-title">收入到账通知</div>
                <div class="msg-text">您的订单 #20260418001 已完成，收入 ¥268 已到账</div>
                <div class="msg-time">2小时前</div>
            </div>
        </div>
        
        <div class="msg-card" onclick="goPage('msgDetail')">
            <div class="msg-avatar">⭐</div>
            <div class="msg-content">
                <div class="msg-title">客户评价</div>
                <div class="msg-text">客户对您的服务评价了5星，服务很满意！</div>
                <div class="msg-time">昨天</div>
            </div>
        </div>
        
        <div class="msg-card" onclick="goPage('msgDetail')">
            <div class="msg-avatar">📢</div>
            <div class="msg-content">
                <div class="msg-title">系统通知</div>
                <div class="msg-text">恭喜您完成本月第20单，荣获"服务之星"称号！</div>
                <div class="msg-time">3天前</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('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('msg')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></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: 88888888</div>
                </div>
            </div>
            <div class="my-stats">
                <div class="stat-item"><div class="stat-num">20</div><div class="stat-label">完成订单</div></div>
                <div class="stat-item"><div class="stat-num">¥4,536</div><div class="stat-label">累计收入</div></div>
                <div class="stat-item"><div class="stat-num">4.9</div><div class="stat-label">服务评分</div></div>
            </div>
        </div>
        
        <div class="cert-status">
            <div class="cert-icon passed">✓</div>
            <div class="cert-info">
                <div class="cert-title">已认证陪诊师</div>
                <div class="cert-desc">认证有效期至 2027-04-21</div>
            </div>
        </div>
        
        <div class="income-card">
            <div class="income-title">可提现余额（元）</div>
            <div class="income-amount">¥1,280.00</div>
            <button class="income-btn" onclick="showWithdrawModal()">立即提现</button>
        </div>
        
        <div class="my-menu">
            <div class="menu-item" onclick="goPage('wallet')">
                <div class="menu-icon">💰</div>
                <div class="menu-text">我的钱包</div>
                <div class="menu-arrow">> 余额 ¥1,280</div>
            </div>
            <div class="menu-item" onclick="goPage('statistics')">
                <div class="menu-icon">📊</div>
                <div class="menu-text">服务统计</div>
                <div class="menu-arrow">></div>
            </div>
            <div class="menu-item" onclick="goPage('schedule')">
                <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('cert')">
                <div class="menu-icon">📝</div>
                <div class="menu-text">认证信息</div>
                <div class="menu-arrow">> 已认证</div>
            </div>
            <div class="menu-item" onclick="goPage('skill')">
                <div class="menu-icon">🏆</div>
                <div class="menu-text">技能认证</div>
                <div class="menu-arrow">></div>
            </div>
            <div class="menu-item" onclick="goPage('serviceArea')">
                <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">
                <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('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('msg')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></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="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">138****8888</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">就诊人年龄</span>
                    <span class="detail-value">58岁</span>
                </div>
            </div>
            
            <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 class="detail-item">
                    <span class="detail-label">就诊地址</span>
                    <span class="detail-value">上海市静安区延长路301号</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 class="detail-item">
                    <span class="detail-label">服务费用</span>
                    <span class="detail-value" style="color:#4CAF50;font-weight:600;">¥198.00</span>
                </div>
            </div>
            
            <div style="display:flex;gap:12px;padding:0 12px;">
                <button style="flex:1;background:#e0e0e0;color:#666;border:none;padding:14px;border-radius:8px;font-size:14px;cursor:pointer;" onclick="goPage('orders')">返回</button>
                <button style="flex:1;background:#4CAF50;color:white;border:none;padding:14px;border-radius:8px;font-size:14px;cursor:pointer;" onclick="completeOrder()">完成服务</button>
            </div>
        </div>
    </div>

    <!-- ==================== 服务统计 ==================== -->
    <div class="page" id="statisticsPage">
        <div class="header" onclick="goPage('my')">← 服务统计</div>
        
        <div class="stat-card">
            <div style="font-size:15px;font-weight:600;color:#333;margin-bottom:12px;">本月数据</div>
            <div class="stat-row">
                <span class="stat-row-label">完成订单</span>
                <span class="stat-row-value green">20 单</span>
            </div>
            <div class="stat-row">
                <span class="stat-row-label">服务时长</span>
                <span class="stat-row-value">48 小时</span>
            </div>
            <div class="stat-row">
                <span class="stat-row-label">累计收入</span>
                <span class="stat-row-value green">¥4,536</span>
            </div>
            <div class="stat-row">
                <span class="stat-row-label">客户好评率</span>
                <span class="stat-row-value green">98%</span>
            </div>
        </div>
        
        <div class="stat-card">
            <div style="font-size:15px;font-weight:600;color:#333;margin-bottom:12px;">服务类型分布</div>
            <div class="stat-row">
                <span class="stat-row-label">全程陪诊</span>
                <span class="stat-row-value">12 单</span>
            </div>
            <div class="stat-row">
                <span class="stat-row-label">医院陪护</span>
                <span class="stat-row-value">5 单</span>
            </div>
            <div class="stat-row">
                <span class="stat-row-label">就医接送</span>
                <span class="stat-row-value">3 单</span>
            </div>
        </div>
    </div>

    <!-- ==================== 提现模态框 ==================== -->
    <div class="modal-overlay" id="withdrawModal">
        <div class="modal-content">
            <div class="modal-close" onclick="closeModal()">×</div>
            <div class="modal-title">提现</div>
            <div style="text-align:center;margin-bottom:20px;">
                <div style="font-size:14px;color:#666;">可提现余额</div>
                <div style="font-size:32px;font-weight:600;color:#4CAF50;margin-top:8px;">¥1,280.00</div>
            </div>
            <div class="form-group">
                <label class="form-label">提现金额</label>
                <input type="number" class="form-input" placeholder="请输入提现金额" value="1280">
            </div>
            <div class="form-group">
                <label class="form-label">到账账户</label>
                <select class="form-input">
                    <option>建设银行 **** 6688</option>
                    <option>工商银行 **** 2233</option>
                    <option>微信零钱</option>
                </select>
            </div>
            <div style="font-size:12px;color:#999;margin-top:8px;">预计1-3个工作日到账</div>
            <button class="form-btn" onclick="submitWithdraw()">确认提现</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 acceptOrder(id) {
            if (confirm('确定接受此订单吗？')) {
                alert('抢单成功！请准时到达服务地点');
                goPage('orders');
            }
        }

        function completeOrder() {
            if (confirm('确定完成此服务吗？')) {
                alert('服务已完成，收入将结算到您的账户');
                goPage('orders');
            }
        }

        function showWithdrawModal() {
            document.getElementById('withdrawModal').classList.add('show');
        }

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

        function submitWithdraw() {
            alert('提现申请已提交，预计1-3个工作日到账');
            closeModal();
        }

        document.getElementById('withdrawModal').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>