编辑页面

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, 'Helvetica Neue', Arial, sans-serif;
            background: #f5f5f5;
            max-width: 414px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
        }
        .page {
            display: none;
            min-height: 100vh;
            padding-bottom: 60px;
        }
        .page.active {
            display: block;
        }
        /* 状态栏 */
        .status-bar {
            background: linear-gradient(135deg, #3B82F6, #2563EB);
            color: #fff;
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
        }
        /* 头部 */
        .header {
            background: linear-gradient(135deg, #3B82F6, #2563EB);
            color: #fff;
            padding: 16px;
        }
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        .user-detail h2 {
            font-size: 18px;
            font-weight: 600;
        }
        .user-detail p {
            font-size: 13px;
            opacity: 0.9;
            margin-top: 4px;
        }
        .certified-badge {
            background: #10B981;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
        }
        .header-stats {
            display: flex;
            justify-content: space-around;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(255,255,255,0.2);
        }
        .stat-item {
            text-align: center;
        }
        .stat-item .num {
            font-size: 20px;
            font-weight: 700;
        }
        .stat-item .label {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 4px;
        }
        /* 订单卡片 */
        .order-section {
            padding: 16px;
        }
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
        }
        .order-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
            overflow-x: auto;
            padding-bottom: 4px;
        }
        .order-tab {
            padding: 8px 16px;
            background: #fff;
            border-radius: 20px;
            font-size: 13px;
            color: #666;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid #e5e5e5;
        }
        .order-tab.active {
            background: #3B82F6;
            color: #fff;
            border-color: #3B82F6;
        }
        .order-card {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: transform 0.2s;
        }
        .order-card:active {
            transform: scale(0.98);
        }
        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .order-type {
            background: #EEF2FF;
            color: #3B82F6;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        .order-status {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 4px;
        }
        .status-pending {
            background: #FEF3C7;
            color: #D97706;
        }
        .status-service {
            background: #DBEAFE;
            color: #2563EB;
        }
        .status-done {
            background: #D1FAE5;
            color: #059669;
        }
        .order-info {
            font-size: 14px;
            color: #666;
            line-height: 1.8;
        }
        .order-info span {
            color: #333;
            font-weight: 500;
        }
        .order-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #f0f0f0;
        }
        .order-price {
            color: #EF4444;
            font-size: 16px;
            font-weight: 600;
        }
        .order-actions {
            display: flex;
            gap: 8px;
        }
        .btn {
            padding: 6px 16px;
            border-radius: 16px;
            font-size: 13px;
            cursor: pointer;
            border: none;
        }
        .btn-primary {
            background: #3B82F6;
            color: #fff;
        }
        .btn-outline {
            background: #fff;
            color: #3B82F6;
            border: 1px solid #3B82F6;
        }
        .btn-success {
            background: #10B981;
            color: #fff;
        }
        /* 快捷入口 */
        .quick-entry {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            padding: 0 16px;
        }
        .entry-item {
            background: #fff;
            border-radius: 12px;
            padding: 16px 8px;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .entry-item:active {
            transform: scale(0.95);
        }
        .entry-icon {
            width: 40px;
            height: 40px;
            margin: 0 auto 8px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .entry-item span {
            font-size: 12px;
            color: #666;
        }
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            max-width: 414px;
            width: 100%;
            background: #fff;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 100;
        }
        .nav-item {
            text-align: center;
            cursor: pointer;
            padding: 4px 16px;
        }
        .nav-item svg {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
        }
        .nav-item span {
            font-size: 11px;
            color: #999;
        }
        .nav-item.active span {
            color: #3B82F6;
        }
        .nav-item.active svg {
            color: #3B82F6;
        }
        /* 页面标题栏 */
        .page-header {
            background: #fff;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #f0f0f0;
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .back-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .page-title {
            font-size: 17px;
            font-weight: 600;
            color: #333;
        }
        .page-content {
            padding: 16px;
        }
        /* 订单详情页 */
        .detail-card {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
        }
        .detail-title {
            font-size: 14px;
            color: #999;
            margin-bottom: 8px;
        }
        .detail-content {
            font-size: 15px;
            color: #333;
            line-height: 1.6;
        }
        .patient-card {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .patient-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #EEF2FF;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3B82F6;
            font-size: 20px;
        }
        .patient-info h4 {
            font-size: 16px;
            color: #333;
        }
        .patient-info p {
            font-size: 13px;
            color: #999;
            margin-top: 4px;
        }
        /* 个人中心 */
        .profile-header {
            background: linear-gradient(135deg, #3B82F6, #2563EB);
            color: #fff;
            padding: 24px 16px;
        }
        .profile-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .profile-avatar {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }
        .profile-detail h2 {
            font-size: 20px;
            margin-bottom: 4px;
        }
        .profile-detail p {
            font-size: 13px;
            opacity: 0.8;
        }
        .profile-menu {
            padding: 16px;
        }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px;
            background: #fff;
            border-radius: 12px;
            margin-bottom: 12px;
            cursor: pointer;
        }
        .menu-item:active {
            background: #f9f9f9;
        }
        .menu-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
        }
        .menu-text {
            flex: 1;
            font-size: 15px;
            color: #333;
        }
        .menu-arrow {
            color: #ccc;
            font-size: 14px;
        }
        /* 收益页 */
        .earnings-card {
            background: linear-gradient(135deg, #3B82F6, #2563EB);
            color: #fff;
            padding: 24px;
            border-radius: 16px;
            margin-bottom: 16px;
        }
        .earnings-total {
            text-align: center;
        }
        .earnings-total .label {
            font-size: 14px;
            opacity: 0.8;
        }
        .earnings-total .amount {
            font-size: 36px;
            font-weight: 700;
            margin: 8px 0;
        }
        .earnings-total .amount small {
            font-size: 16px;
        }
        .earnings-actions {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }
        .earnings-actions button {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            font-size: 15px;
            border: none;
            cursor: pointer;
        }
        .btn-withdraw {
            background: rgba(255,255,255,0.2);
            color: #fff;
        }
        .earnings-detail {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
        }
        .detail-item {
            display: flex;
            justify-content: space-between;
            padding: 16px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .detail-item:last-child {
            border-bottom: none;
        }
        .detail-item .label {
            color: #666;
            font-size: 14px;
        }
        .detail-item .value {
            color: #333;
            font-size: 14px;
            font-weight: 500;
        }
        /* 弹窗 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            z-index: 200;
            justify-content: center;
            align-items: flex-end;
        }
        .modal-overlay.active {
            display: flex;
        }
        .modal-content {
            background: #fff;
            width: 100%;
            max-width: 414px;
            border-radius: 16px 16px 0 0;
            padding: 20px;
            animation: slideUp 0.3s ease;
        }
        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        .modal-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .modal-header h3 {
            font-size: 18px;
            color: #333;
        }
        .modal-body {
            margin-bottom: 20px;
        }
        .form-item {
            margin-bottom: 16px;
        }
        .form-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            font-size: 15px;
            outline: none;
        }
        .form-input:focus {
            border-color: #3B82F6;
        }
        .modal-footer {
            display: flex;
            gap: 12px;
        }
        .modal-footer button {
            flex: 1;
            padding: 14px;
            border-radius: 8px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        .btn-cancel {
            background: #f5f5f5;
            color: #666;
        }
        .btn-confirm {
            background: #3B82F6;
            color: #fff;
        }
        /* 新订单弹窗 */
        .new-order-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 300;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .new-order-modal.active {
            display: flex;
        }
        .new-order-content {
            background: #fff;
            border-radius: 16px;
            width: 100%;
            max-width: 360px;
            overflow: hidden;
            animation: scaleIn 0.3s ease;
        }
        @keyframes scaleIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .new-order-header {
            background: linear-gradient(135deg, #F59E0B, #D97706);
            color: #fff;
            padding: 16px;
            text-align: center;
        }
        .new-order-header h3 {
            font-size: 18px;
            margin-bottom: 4px;
        }
        .new-order-header p {
            font-size: 13px;
            opacity: 0.9;
        }
        .new-order-body {
            padding: 16px;
        }
        .new-order-info {
            background: #FEF3C7;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 16px;
        }
        .new-order-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 14px;
        }
        .new-order-row .label {
            color: #666;
        }
        .new-order-row .value {
            color: #333;
            font-weight: 500;
        }
        .new-order-footer {
            display: flex;
            gap: 12px;
            padding: 16px;
            border-top: 1px solid #f0f0f0;
        }
        .new-order-footer button {
            flex: 1;
            padding: 14px;
            border-radius: 8px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        /* 打卡页面 */
        .checkin-map {
            height: 200px;
            background: #e5e5e5;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            margin-bottom: 16px;
            border-radius: 12px;
        }
        .checkin-btn {
            width: 100%;
            padding: 16px;
            background: #10B981;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            cursor: pointer;
        }
        /* 提现页 */
        .withdraw-balance {
            background: linear-gradient(135deg, #3B82F6, #2563EB);
            color: #fff;
            padding: 24px;
            text-align: center;
            border-radius: 16px 16px 0 0;
        }
        .withdraw-balance .label {
            font-size: 14px;
            opacity: 0.8;
        }
        .withdraw-balance .amount {
            font-size: 32px;
            font-weight: 700;
            margin-top: 8px;
        }
        .withdraw-form {
            background: #fff;
            padding: 20px;
            border-radius: 0 0 16px 16px;
        }
        .withdraw-input {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .withdraw-input span {
            font-size: 24px;
            color: #333;
            margin-right: 8px;
        }
        .withdraw-input input {
            flex: 1;
            border: none;
            font-size: 28px;
            outline: none;
        }
        .bank-card {
            display: flex;
            align-items: center;
            padding: 16px;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        .bank-icon {
            width: 40px;
            height: 40px;
            background: #3B82F6;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            margin-right: 12px;
        }
        .bank-info {
            flex: 1;
        }
        .bank-info h4 {
            font-size: 15px;
            color: #333;
        }
        .bank-info p {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }
        /* 消息列表 */
        .message-item {
            display: flex;
            padding: 16px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        .message-item:active {
            background: #f9f9f9;
        }
        .message-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #EEF2FF;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: #3B82F6;
            font-size: 20px;
        }
        .message-content {
            flex: 1;
        }
        .message-title {
            font-size: 15px;
            color: #333;
            font-weight: 500;
        }
        .message-desc {
            font-size: 13px;
            color: #999;
            margin-top: 4px;
        }
        .message-time {
            font-size: 12px;
            color: #ccc;
        }
        /* 订单状态步骤 */
        .order-steps {
            background: #fff;
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 16px;
        }
        .step-item {
            display: flex;
            margin-bottom: 16px;
            position: relative;
        }
        .step-item:last-child {
            margin-bottom: 0;
        }
        .step-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #D1FAE5;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #059669;
            font-size: 12px;
            margin-right: 12px;
            flex-shrink: 0;
        }
        .step-dot.pending {
            background: #FEF3C7;
            color: #D97706;
        }
        .step-content h4 {
            font-size: 14px;
            color: #333;
        }
        .step-content p {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }
        /* 设置页面 */
        .settings-group {
            background: #fff;
            border-radius: 12px;
            margin-bottom: 16px;
            overflow: hidden;
        }
        .settings-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        .settings-item:last-child {
            border-bottom: none;
        }
        .settings-item:active {
            background: #f9f9f9;
        }
        .settings-icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
            color: #666;
        }
        .settings-text {
            flex: 1;
            font-size: 15px;
            color: #333;
        }
        .settings-arrow {
            color: #ccc;
        }
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }
        .empty-state svg {
            width: 80px;
            height: 80px;
            margin-bottom: 16px;
            color: #ddd;
        }
        .empty-state p {
            font-size: 14px;
        }
        /* Toast提示 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.8);
            color: #fff;
            padding: 16px 32px;
            border-radius: 8px;
            font-size: 15px;
            z-index: 400;
            display: none;
        }
        .toast.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        /* 列表项 */
        .list-item {
            display: flex;
            align-items: center;
            padding: 16px;
            background: #fff;
            border-radius: 12px;
            margin-bottom: 12px;
            cursor: pointer;
        }
        .list-item:active {
            background: #f9f9f9;
        }
        .list-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 20px;
        }
        .list-content {
            flex: 1;
        }
        .list-content h4 {
            font-size: 15px;
            color: #333;
        }
        .list-content p {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }
        .list-arrow {
            color: #ccc;
        }
        /* 金额显示 */
        .money {
            color: #EF4444;
            font-weight: 600;
        }
        .money-green {
            color: #10B981;
        }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div id="page-home" class="page active">
        <div class="status-bar">
            <span>9:41</span>
            <span><svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3C7.46 3 3.34 4.78.29 7.67c-.18.18-.29.43-.29.71s.11.53.29.71l2.48 2.48c.18.18.43.29.71.29s.53-.11.71-.29l1.48-1.48A9.9 9.9 0 0 0 12 5c2.76 0 5.26 1.12 7.07 2.93l1.48 1.48c.18.18.43.29.71.29s.53-.11.71-.29l2.48-2.48c.18-.18.29-.43.29-.71s-.11-.53-.29-.71C20.66 4.78 16.54 3 12 3z"/></svg></span>
        </div>
        <div class="header">
            <div class="header-top">
                <div class="header-info">
                    <div class="avatar">👤</div>
                    <div class="user-detail">
                        <h2>张明 <span class="certified-badge">已认证</span></h2>
                        <p>在线 · 可接单</p>
                    </div>
                </div>
                <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
            </div>
            <div class="header-stats">
                <div class="stat-item">
                    <div class="num">128</div>
                    <div class="label">累计服务</div>
                </div>
                <div class="stat-item">
                    <div class="num">4.9</div>
                    <div class="label">评分</div>
                </div>
                <div class="stat-item">
                    <div class="num">¥3,860</div>
                    <div class="label">本月收入</div>
                </div>
            </div>
        </div>

        <div class="order-section">
            <div class="section-title">接单大厅</div>
            
            <!-- 订单类型标签 -->
            <div class="order-tabs" style="margin-bottom: 12px;">
                <div class="order-tab active" onclick="switchHomeTab(this, 'all')">全部</div>
                <div class="order-tab" onclick="switchHomeTab(this, 'grab')">抢单大厅</div>
                <div class="order-tab" onclick="switchHomeTab(this, 'system')">系统分配</div>
                <div class="order-tab" onclick="switchHomeTab(this, 'appoint')">预约上门</div>
            </div>
            
            <!-- 抢单订单 -->
            <div class="order-card" data-type="grab" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type" style="background: #FEE2E2; color: #DC2626;">抢单</span>
                    <span class="order-status status-pending">待接单</span>
                </div>
                <div class="order-info">
                    <p><span>服务：</span>全天陪诊</p>
                    <p><span>医院：</span>北京市第一医院</p>
                    <p><span>时间：</span>今天 14:00-18:00</p>
                    <p><span>患者：</span>王先生 58岁</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥288</span>
                    <div class="order-actions">
                        <button class="btn btn-primary" onclick="event.stopPropagation(); acceptOrder()">立即抢单</button>
                    </div>
                </div>
            </div>

            <!-- 系统派单 -->
            <div class="order-card" data-type="system" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type" style="background: #DBEAFE; color: #2563EB;">系统派单</span>
                    <span class="order-status status-service">服务中</span>
                </div>
                <div class="order-info">
                    <p><span>服务：</span>半天陪诊</p>
                    <p><span>医院：</span>协和医院</p>
                    <p><span>患者：</span>李女士 45岁</p>
<p><span>服务时间：</span>上午 08:00-12:00</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥168</span>
                    <div class="order-actions">
                        <button class="btn btn-success" onclick="event.stopPropagation(); showPage('checkin')">服务签到</button>
                    </div>
                </div>
            </div>

            <!-- 预约上门单 -->
            <div class="order-card" data-type="appoint" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type" style="background: #D1FAE5; color: #059669;">预约上门</span>
                    <span class="order-status status-pending">待上门</span>
                </div>
                <div class="order-info">
                    <p><span>服务：</span>上门陪诊</p>
                    <p><span>地址：</span>朝阳区建国路88号</p>
                    <p><span>患者：</span>张先生 62岁</p>
                    <p><span>预约时间：</span>明天 09:00</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥358</span>
                    <div class="order-actions">
                        <button class="btn btn-outline" onclick="event.stopPropagation(); showToast('已确认上门')">确认上门</button>
                    </div>
                </div>
            </div>

            <!-- 再添加一些示例订单 -->
            <div class="order-card" data-type="grab" onclick="showPage('order-detail')" style="display:none;">
                <div class="order-header">
                    <span class="order-type" style="background: #FEE2E2; color: #DC2626;">抢单</span>
                    <span class="order-status status-pending">待接单</span>
                </div>
                <div class="order-info">
                    <p><span>服务：</span>半天陪诊</p>
                    <p><span>医院：</span>中日友好医院</p>
                    <p><span>时间：</span>明天 09:00-13:00</p>
                    <p><span>患者：</span>赵女士 35岁</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥158</span>
                    <div class="order-actions">
                        <button class="btn btn-primary" onclick="event.stopPropagation(); acceptOrder()">立即抢单</button>
                    </div>
                </div>
            </div>

            <div class="order-card" data-type="system" onclick="showPage('order-detail')" style="display:none;">
                <div class="order-header">
                    <span class="order-type" style="background: #DBEAFE; color: #2563EB;">系统派单</span>
                    <span class="order-status status-done">已完成</span>
                </div>
                <div class="order-info">
                    <p><span>服务：</span>全天陪诊</p>
                    <p><span>医院：</span>北京医院</p>
                    <p><span>患者：</span>孙先生 68岁</p>
<p><span>服务时间：</span>昨天 08:00-18:00</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥328</span>
                    <div class="order-actions">
                        <button class="btn btn-outline" onclick="event.stopPropagation(); showToast('已完成服务')">查看详情</button>
                    </div>
                </div>
            </div>

            <div class="order-card" data-type="appoint" onclick="showPage('order-detail')" style="display:none;">
                <div class="order-header">
                    <span class="order-type" style="background: #D1FAE5; color: #059669;">预约上门</span>
                    <span class="order-status status-pending">待上门</span>
                </div>
                <div class="order-info">
                    <p><span>服务：</span>VIP陪诊</p>
                    <p><span>地址：</span>海淀区中关村大街1号</p>
                    <p><span>患者：</span>周女士 52岁</p>
                    <p><span>预约时间：</span>后天 14:00</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥488</span>
                    <div class="order-actions">
                        <button class="btn btn-outline" onclick="event.stopPropagation(); showToast('已确认预约')">确认预约</button>
                    </div>
                </div>
            </div>

            <!-- 更多订单入口 -->
            <div style="text-align: center; padding: 16px 0;">
                <span style="color: #3B82F6; font-size: 14px; cursor: pointer;" onclick="showPage('orders')">查看全部订单 ></span>
            </div>
        </div>

        <div class="quick-access" style="padding: 0 16px 16px;">
            <div class="section-title">快捷服务</div>
            <div class="quick-entry">
                <div class="entry-item" onclick="showPage('earnings')">
                    <div class="entry-icon" style="background: #EEF2FF; color: #3B82F6;">💰</div>
                    <span>我的收益</span>
                </div>
                <div class="entry-item" onclick="showPage('messages')">
                    <div class="entry-icon" style="background: #FEF3C7; color: #D97706;">📨</div>
                    <span>消息通知</span>
                </div>
                <div class="entry-item" onclick="showPage('checkin')">
                    <div class="entry-icon" style="background: #D1FAE5; color: #059669;">📍</div>
                    <span>服务签到</span>
                </div>
                <div class="entry-item" onclick="showPage('settings')">
                    <div class="entry-icon" style="background: #FCE7F3; color: #DB2777;">⚙️</div>
                    <span>设置</span>
                </div>
            </div>
        </div>

        <div class="bottom-nav">
            <div class="nav-item active" onclick="showPage('home')">
                <svg fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="showPage('orders')">
                <svg fill="currentColor" viewBox="0 0 24 24"><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="nav-item" onclick="showPage('earnings')">
                <svg fill="currentColor" viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>
                <span>收益</span>
            </div>
            <div class="nav-item" onclick="showPage('profile')">
                <svg fill="currentColor" viewBox="0 0 24 24"><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 id="page-orders" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <span class="page-title">我的订单</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="order-section" style="padding-top: 12px;">
            <div class="order-tabs">
                <div class="order-tab active" onclick="switchOrderTab(this, 'all')">全部</div>
                <div class="order-tab" onclick="switchOrderTab(this, 'pending')">待接单</div>
                <div class="order-tab" onclick="switchOrderTab(this, 'service')">服务中</div>
                <div class="order-tab" onclick="switchOrderTab(this, 'done')">已完成</div>
                <div class="order-tab" onclick="switchOrderTab(this, 'cancelled')">已取消</div>
            </div>

            <!-- 待接单订单 -->
            <div class="order-card order-item" data-status="pending" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type">全天陪诊</span>
                    <span class="order-status status-pending">待接单</span>
                </div>
                <div class="order-info">
                    <p><span>医院：</span>北京市第一医院</p>
                    <p><span>时间：</span>今天 14:00-18:00</p>
                    <p><span>患者：</span>王先生 58岁</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥288</span>
                    <div class="order-actions">
                        <button class="btn btn-primary">立即接单</button>
                    </div>
                </div>
            </div>

            <div class="order-card order-item" data-status="pending" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type">半天陪诊</span>
                    <span class="order-status status-pending">待接单</span>
                </div>
                <div class="order-info">
                    <p><span>医院：</span>中日友好医院</p>
                    <p><span>时间：</span>明天 09:00-12:00</p>
                    <p><span>患者：</span>张女士 35岁</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥168</span>
                    <div class="order-actions">
                        <button class="btn btn-primary">立即接单</button>
                    </div>
                </div>
            </div>

            <!-- 服务中订单 -->
            <div class="order-card order-item" data-status="service" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type">半天陪诊</span>
                    <span class="order-status status-service">服务中</span>
                </div>
                <div class="order-info">
                    <p><span>医院：</span>协和医院</p>
                    <p><span>时间：</span>上午 08:00-12:00</p>
                    <p><span>患者：</span>李女士 45岁</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥168</span>
                    <div class="order-actions">
                        <button class="btn btn-success" onclick="event.stopPropagation(); showPage('checkin')">服务签到</button>
                    </div>
                </div>
            </div>

            <!-- 已完成订单 -->
            <div class="order-card order-item" data-status="done" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type">代取药品</span>
                    <span class="order-status status-done">已完成</span>
                </div>
                <div class="order-info">
                    <p><span>医院：</span>中日友好医院</p>
                    <p><span>完成时间：</span>2024-01-14 16:20</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥88</span>
                    <div class="order-actions">
                        <button class="btn btn-outline">查看详情</button>
                    </div>
                </div>
            </div>

            <div class="order-card order-item" data-status="done" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type">夜间陪诊</span>
                    <span class="order-status status-done">已完成</span>
                </div>
                <div class="order-info">
                    <p><span>医院：</span>北京大学第一医院</p>
                    <p><span>完成时间：</span>2024-01-13 22:30</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥328</span>
                    <div class="order-actions">
                        <button class="btn btn-outline">查看详情</button>
                    </div>
                </div>
            </div>

            <div class="order-card order-item" data-status="done" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type">代取报告</span>
                    <span class="order-status status-done">已完成</span>
                </div>
                <div class="order-info">
                    <p><span>医院：</span>北京大学第三医院</p>
                    <p><span>完成时间：</span>2024-01-12 15:45</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥68</span>
                    <div class="order-actions">
                        <button class="btn btn-outline">查看详情</button>
                    </div>
                </div>
            </div>

            <!-- 已取消订单 -->
            <div class="order-card order-item" data-status="cancelled" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type">全天陪诊</span>
                    <span class="order-status" style="background: #FEE2E2; color: #DC2626;">已取消</span>
                </div>
                <div class="order-info">
                    <p><span>医院：</span>北京积水潭医院</p>
                    <p><span>取消时间：</span>2024-01-11 10:30</p>
                    <p><span>取消原因：</span>用户主动取消</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥298</span>
                    <div class="order-actions">
                        <button class="btn btn-outline">查看详情</button>
                    </div>
                </div>
            </div>

            <div class="order-card order-item" data-status="cancelled" onclick="showPage('order-detail')">
                <div class="order-header">
                    <span class="order-type">半天陪诊</span>
                    <span class="order-status" style="background: #FEE2E2; color: #DC2626;">已取消</span>
                </div>
                <div class="order-info">
                    <p><span>医院：</span>北京天坛医院</p>
                    <p><span>取消时间：</span>2024-01-08 14:20</p>
                    <p><span>取消原因：</span>系统改派</p>
                </div>
                <div class="order-footer">
                    <span class="order-price">¥158</span>
                    <div class="order-actions">
                        <button class="btn btn-outline">查看详情</button>
                    </div>
                </div>
            </div>

            <!-- 无订单提示 -->
            <div class="empty-order-tip" style="display: none; text-align: center; padding: 40px 20px; color: #999;">
                <div style="font-size: 48px; margin-bottom: 12px;">📋</div>
                <p style="font-size: 14px;">暂无此类订单</p>
            </div>
        </div>

        <div class="bottom-nav">
            <div class="nav-item" onclick="showPage('home')">
                <svg fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                <span>首页</span>
            </div>
            <div class="nav-item active" onclick="showPage('orders')">
                <svg fill="currentColor" viewBox="0 0 24 24"><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="nav-item" onclick="showPage('earnings')">
                <svg fill="currentColor" viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>
                <span>收益</span>
            </div>
            <div class="nav-item" onclick="showPage('profile')">
                <svg fill="currentColor" viewBox="0 0 24 24"><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 id="page-order-detail" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <span class="page-title">订单详情</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="order-steps">
                <div class="step-item">
                    <div class="step-dot">✓</div>
                    <div class="step-content">
                        <h4>订单已创建</h4>
                        <p>2024-01-15 09:30</p>
                    </div>
                </div>
                <div class="step-item">
                    <div class="step-dot pending">●</div>
                    <div class="step-content">
                        <h4>等待陪诊师接单</h4>
                        <p>预计30分钟内接单</p>
                    </div>
                </div>
                <div class="step-item">
                    <div class="step-dot pending">○</div>
                    <div class="step-content">
                        <h4>服务签到</h4>
                        <p>到达医院后签到</p>
                    </div>
                </div>
                <div class="step-item">
                    <div class="step-dot pending">○</div>
                    <div class="step-content">
                        <h4>服务中</h4>
                        <p>陪诊服务进行中</p>
                    </div>
                </div>
                <div class="step-item">
                    <div class="step-dot pending">○</div>
                    <div class="step-content">
                        <h4>服务完成</h4>
                        <p>确认服务完成后结算</p>
                    </div>
                </div>
            </div>

            <div class="detail-card">
                <div class="detail-title">服务信息</div>
                <div class="detail-content">
                    <p><strong>服务类型：</strong>全天陪诊</p>
                    <p><strong>服务时间：</strong>2024-01-15 14:00-18:00</p>
                    <p><strong>服务费用：</strong><span class="money">¥288</span></p>
                </div>
            </div>

            <div class="detail-card">
                <div class="detail-title">医院信息</div>
                <div class="detail-content">
                    <p><strong>医院名称：</strong>北京市第一医院</p>
                    <p><strong>医院地址：</strong>东城区长安街88号</p>
                    <p><strong>科室：</strong>内科门诊</p>
                </div>
            </div>

            <div class="detail-card">
                <div class="detail-title">患者信息</div>
                <div class="patient-card">
                    <div class="patient-avatar">👤</div>
                    <div class="patient-info">
                        <h4>王先生</h4>
                        <p>男 · 58岁 · 138****8888</p>
                    </div>
                </div>
                <div style="margin-top: 12px; font-size: 14px; color: #666;">
                    <p><strong>病史摘要：</strong>高血压病史5年，糖尿病史3年</p>
                    <p><strong>过敏史：</strong>青霉素</p>
                    <p><strong>特殊需求：</strong>需要轮椅服务</p>
                </div>
            </div>

            <div class="detail-card">
                <div class="detail-title">备注信息</div>
                <div class="detail-content">
                    <p>患者今日做CT检查，需要提前到窗口排队取号</p>
                </div>
            </div>

            <div style="display: flex; gap: 12px; margin-top: 20px;">
                <button class="btn btn-outline" style="flex: 1; padding: 14px; border-radius: 8px;">联系客户</button>
                <button class="btn btn-primary" style="flex: 1; padding: 14px; border-radius: 8px;" onclick="acceptOrder()">接单</button>
            </div>
        </div>
    </div>

    <!-- 收益页 -->
    <div id="page-earnings" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <span class="page-title">我的收益</span>
            <div style="width: 32px;"></div>
        </div>
        <div style="padding: 16px;">
            <div class="earnings-card">
                <div class="earnings-total">
                    <div class="label">可提现金额（元）</div>
                    <div class="amount">¥2,680<span style="font-size: 14px;">.00</span></div>
                    <p style="font-size: 13px; opacity: 0.8;">本月收入 ¥3,860 · 待结算 ¥1,180</p>
                </div>
                <div class="earnings-actions">
                    <button class="btn-withdraw" onclick="showPage('withdraw')">立即提现</button>
                    <button class="btn-withdraw" style="background: transparent; border: 1px solid rgba(255,255,255,0.5);" onclick="showPage('withdraw-record')">提现记录</button>
                </div>
            </div>

            <div class="earnings-detail">
                <div class="detail-item">
                    <span class="label">今日收入</span>
                    <span class="value money-green">+¥288</span>
                </div>
                <div class="detail-item">
                    <span class="label">本周收入</span>
                    <span class="value money-green">+¥856</span>
                </div>
                <div class="detail-item">
                    <span class="label">本月收入</span>
                    <span class="value money-green">+¥3,860</span>
                </div>
                <div class="detail-item">
                    <span class="label">累计收入</span>
                    <span class="value">¥28,650</span>
                </div>
                <div class="detail-item">
                    <span class="label">累计提现</span>
                    <span class="value">¥25,970</span>
                </div>
            </div>

            <div style="margin-top: 16px;">
                <div class="section-title">近期收益明细</div>
                <div class="detail-card" style="padding: 12px 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <div style="font-size: 14px; color: #333;">全天陪诊 - 北京市第一医院</div>
                            <div style="font-size: 12px; color: #999; margin-top: 4px;">2024-01-15 14:00</div>
                        </div>
                        <span class="money-green">+¥288</span>
                    </div>
                </div>
                <div class="detail-card" style="padding: 12px 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <div style="font-size: 14px; color: #333;">半天陪诊 - 协和医院</div>
                            <div style="font-size: 12px; color: #999; margin-top: 4px;">2024-01-14 08:00</div>
                        </div>
                        <span class="money-green">+¥168</span>
                    </div>
                </div>
                <div class="detail-card" style="padding: 12px 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <div style="font-size: 14px; color: #333;">代取药品 - 中日友好医院</div>
                            <div style="font-size: 12px; color: #999; margin-top: 4px;">2024-01-14 16:00</div>
                        </div>
                        <span class="money-green">+¥88</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom-nav">
            <div class="nav-item" onclick="showPage('home')">
                <svg fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="showPage('orders')">
                <svg fill="currentColor" viewBox="0 0 24 24"><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="nav-item active" onclick="showPage('earnings')">
                <svg fill="currentColor" viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>
                <span>收益</span>
            </div>
            <div class="nav-item" onclick="showPage('profile')">
                <svg fill="currentColor" viewBox="0 0 24 24"><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 id="page-withdraw" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('earnings')">←</div>
            <span class="page-title">提现</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="withdraw-balance">
            <div class="label">可提现金额</div>
            <div class="amount">¥2,680.00</div>
        </div>
        <div class="withdraw-form">
            <div class="form-item">
                <div class="form-label">提现金额</div>
                <div class="withdraw-input">
                    <span>¥</span>
                    <input type="number" class="form-input" placeholder="请输入提现金额" value="2680">
                </div>
                <p style="font-size: 12px; color: #999; margin-top: 8px;">
                    温馨提示：提现将在1-3个工作日到账
                </p>
            </div>

            <div class="form-item">
                <div class="form-label">到账银行卡</div>
                <div class="bank-card">
                    <div class="bank-icon">🏦</div>
                    <div class="bank-info">
                        <h4>中国工商银行(***4567)</h4>
                        <p>单笔限额5万，每日限额10万</p>
                    </div>
                    <span style="color: #ccc;">›</span>
                </div>
            </div>

            <button class="btn btn-primary" style="width: 100%; padding: 16px; border-radius: 12px; font-size: 16px; margin-top: 16px;" onclick="showToast('提现申请已提交')">确认提现</button>
        </div>
    </div>

    <!-- 提现记录页 -->
    <div id="page-withdraw-record" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('earnings')">←</div>
            <span class="page-title">提现记录</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="detail-card">
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <div>
                        <div style="font-size: 15px; color: #333;">¥1,500.00</div>
                        <div style="font-size: 12px; color: #999; margin-top: 4px;">2024-01-10 14:30</div>
                    </div>
                    <span style="color: #10B981; font-size: 14px;">已到账</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <div>
                        <div style="font-size: 15px; color: #333;">¥2,000.00</div>
                        <div style="font-size: 12px; color: #999; margin-top: 4px;">2024-01-05 09:15</div>
                    </div>
                    <span style="color: #10B981; font-size: 14px;">已到账</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;">
                    <div>
                        <div style="font-size: 15px; color: #333;">¥800.00</div>
                        <div style="font-size: 12px; color: #999; margin-top: 4px;">2023-12-28 16:45</div>
                    </div>
                    <span style="color: #10B981; font-size: 14px;">已到账</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 消息通知页 -->
    <div id="page-messages" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <span class="page-title">消息通知</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="message-item">
                <div class="message-icon" style="background: #D1FAE5;">📋</div>
                <div class="message-content">
                    <div class="message-title">新订单提醒</div>
                    <div class="message-desc">您有新的陪诊订单，请及时处理</div>
                </div>
                <div class="message-time">刚刚</div>
            </div>
            <div class="message-item">
                <div class="message-icon" style="background: #DBEAFE;">💰</div>
<div class="message-content">
                    <div class="message-title">收益到账通知</div>
                    <div class="message-desc">您的陪诊收益¥288已到账</div>
                </div>
                <div class="message-time">10分钟前</div>
            </div>
            <div class="message-item">
                <div class="message-icon" style="background: #FEF3C7;">📅</div>
                <div class="message-content">
                    <div class="message-title">服务提醒</div>
                    <div class="message-desc">您今天的陪诊服务将于2小时后开始</div>
                </div>
                <div class="message-time">1小时前</div>
            </div>
            <div class="message-item">
                <div class="message-icon" style="background: #EEF2FF;">⭐</div>
                <div class="message-content">
                    <div class="message-title">客户评价</div>
                    <div class="message-desc">客户对您的服务给予了5星好评</div>
                </div>
                <div class="message-time">昨天</div>
            </div>
            <div class="message-item">
                <div class="message-icon" style="background: #FCE7F3;">🏦</div>
                <div class="message-content">
                    <div class="message-title">提现到账通知</div>
                    <div class="message-desc">您的提现申请¥1,500已到账</div>
                </div>
                <div class="message-time">3天前</div>
            </div>
        </div>
    </div>

    <!-- 服务签到页 -->
    <div id="page-checkin" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <span class="page-title">服务签到</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="detail-card">
                <div class="detail-title">当前服务</div>
                <div class="detail-content">
<p><strong>服务类型：</strong>半天陪诊</p>
                    <p><strong>患者：</strong>李女士 45岁</p>
                    <p><strong>医院：</strong>协和医院</p>
                    <p><strong>服务地址：</strong>北京市东城区帅府园1号</p>
                </div>
            </div>

            <div class="checkin-map">
                <div style="text-align: center;">
                    <div style="font-size: 40px; margin-bottom: 8px;">📍</div>
                    <div style="color: #999;">点击开启定位</div>
                </div>
            </div>

            <div class="detail-card">
                <div class="detail-title">签到信息</div>
                <div class="detail-content">
                    <p><strong>当前定位：</strong>协和医院门诊楼</p>
                    <p><strong>距离目标：</strong>约50米</p>
                    <p><strong>签到时间：</strong>自动获取</p>
                </div>
            </div>

            <button class="checkin-btn" onclick="showToast('签到成功，服务已开始')">确认签到</button>
        </div>
    </div>

    <!-- 个人中心页 -->
    <div id="page-profile" class="page">
        <div class="profile-header">
            <div class="profile-info">
                <div class="profile-avatar">👤</div>
                <div class="profile-detail">
                    <h2>张明</h2>
                    <p>已认证陪诊师 · 5年经验</p>
                    <p style="font-size: 12px; margin-top: 4px;">服务评分 4.9 · 128次服务</p>
                </div>
            </div>
        </div>

        <div class="profile-menu">
            <div class="menu-item" onclick="showPage('profile-info')">
                <div class="menu-icon" style="background: #EEF2FF; color: #3B82F6;">👤</div>
                <span class="menu-text">个人信息</span>
                <span class="menu-arrow">›</span>
            </div>
            <div class="menu-item" onclick="showPage('qualification')">
                <div class="menu-icon" style="background: #D1FAE5; color: #059669;">📜</div>
                <span class="menu-text">资质管理</span>
                <span class="menu-arrow">›</span>
            </div>
            <div class="menu-item" onclick="showPage('service-area')">
                <div class="menu-icon" style="background: #FEF3C7; color: #D97706;">🗺️</div>
                <span class="menu-text">服务区域</span>
                <span class="menu-arrow">›</span>
            </div>
            <div class="menu-item" onclick="showPage('settings')">
                <div class="menu-icon" style="background: #FCE7F3; color: #DB2777;">⚙️</div>
                <span class="menu-text">设置</span>
                <span class="menu-arrow">›</span>
            </div>
        </div>

        <div class="profile-menu">
            <div class="menu-item" onclick="showPage('promotion')">
                <div class="menu-icon" style="background: #DBEAFE; color: #2563EB;">📢</div>
                <span class="menu-text">推广中心</span>
                <span class="menu-arrow">›</span>
            </div>
            <div class="menu-item" onclick="showPage('messages')">
                <div class="menu-icon" style="background: #FEE2E2; color: #DC2626;">📨</div>
                <span class="menu-text">消息通知</span>
                <span class="menu-arrow">›</span>
            </div>
            <div class="menu-item" onclick="showPage('help')">
                <div class="menu-icon" style="background: #E0E7FF; color: #4F46E5;">❓</div>
                <span class="menu-text">帮助与反馈</span>
                <span class="menu-arrow">›</span>
            </div>
        </div>

        <div class="bottom-nav">
            <div class="nav-item" onclick="showPage('home')">
                <svg fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="showPage('orders')">
                <svg fill="currentColor" viewBox="0 0 24 24"><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="nav-item" onclick="showPage('earnings')">
                <svg fill="currentColor" viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>
                <span>收益</span>
            </div>
            <div class="nav-item active" onclick="showPage('profile')">
                <svg fill="currentColor" viewBox="0 0 24 24"><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 id="page-profile-info" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('profile')">←</div>
            <span class="page-title">个人信息</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="settings-group">
                <div class="settings-item">
                    <span class="settings-text">头像</span>
                    <div style="display: flex; align-items: center;">
                        <div style="width: 48px; height: 48px; border-radius: 50%; background: #EEF2FF; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px;">👤</div>
                        <span class="settings-arrow">›</span>
                    </div>
                </div>
                <div class="settings-item">
                    <span class="settings-text">姓名</span>
                    <span style="color: #999; margin-right: 8px;">张明</span>
                    <span class="settings-arrow">›</span>
                </div>
                <div class="settings-item">
                    <span class="settings-text">手机号</span>
                    <span style="color: #999; margin-right: 8px;">138****8888</span>
                    <span class="settings-arrow">›</span>
                </div>
            </div>

            <div class="settings-group">
                <div class="settings-item">
                    <span class="settings-text">身份证号</span>
                    <span style="color: #999; margin-right: 8px;">110***********1234</span>
                </div>
                <div class="settings-item">
                    <span class="settings-text">从业年限</span>
                    <span style="color: #999; margin-right: 8px;">5年</span>
                    <span class="settings-arrow">›</span>
                </div>
                <div class="settings-item">
                    <span class="settings-text">擅长领域</span>
                    <span style="color: #999; margin-right: 8px;">内科、儿科</span>
                    <span class="settings-arrow">›</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 资质管理页 -->
    <div id="page-qualification" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('profile')">←</div>
            <span class="page-title">资质管理</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="detail-card" style="text-align: center; padding: 24px;">
                <div style="width: 60px; height: 60px; margin: 0 auto 12px; background: #D1FAE5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px;">✓</div>
                <h3 style="font-size: 16px; color: #333; margin-bottom: 8px;">已通过资质认证</h3>
                <p style="font-size: 13px; color: #999;">认证有效期至 2025-12-31</p>
            </div>

            <div class="section-title" style="margin-top: 20px;">资质证书</div>
            <div class="list-item">
                <div class="list-icon" style="background: #EEF2FF; color: #3B82F6;">🪪</div>
                <div class="list-content">
                    <h4>身份证</h4>
                    <p>有效期至 2028-03-15</p>
                </div>
                <span style="color: #10B981; font-size: 12px;">已认证</span>
            </div>
            <div class="list-item">
                <div class="list-icon" style="background: #D1FAE5; color: #059669;">🏥</div>
                <div class="list-content">
                    <h4>健康证明</h4>
                    <p>有效期至 2024-06-30</p>
                </div>
                <span style="color: #10B981; font-size: 12px;">已认证</span>
            </div>
            <div class="list-item">
                <div class="list-icon" style="background: #FEF3C7; color: #D97706;">📋</div>
                <div class="list-content">
                    <h4>陪诊师资格证书</h4>
                    <p>证书编号：PC2023001234</p>
                </div>
                <span style="color: #10B981; font-size: 12px;">已认证</span>
            </div>

            <button class="btn btn-outline" style="width: 100%; margin-top: 20px; padding: 14px; border-radius: 8px;">更新资质证书</button>
        </div>
    </div>

    <!-- 服务区域页 -->
    <div id="page-service-area" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('profile')">←</div>
            <span class="page-title">服务区域</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="detail-card">
                <div class="detail-title">当前服务区域</div>
                <div class="detail-content">
                    <p><strong>北京市</strong></p>
                    <p>东城区、西城区、朝阳区、海淀区</p>
                </div>
            </div>

            <div class="section-title" style="margin-top: 20px;">可服务医院</div>
            <div class="list-item">
                <div class="list-icon" style="background: #EEF2FF; color: #3B82F6;">🏥</div>
                <div class="list-content">
                    <h4>北京协和医院</h4>
                    <p>东城区帅府园1号</p>
                </div>
            </div>
            <div class="list-item">
                <div class="list-icon" style="background: #EEF2FF; color: #3B82F6;">🏥</div>
                <div class="list-content">
                    <h4>北京市第一医院</h4>
                    <p>东城区长安街88号</p>
                </div>
            </div>
            <div class="list-item">
                <div class="list-icon" style="background: #EEF2FF; color: #3B82F6;">🏥</div>
                <div class="list-content">
                    <h4>北京大学第三医院</h4>
                    <p>海淀区花园北路49号</p>
                </div>
            </div>

            <button class="btn btn-outline" style="width: 100%; margin-top: 20px; padding: 14px; border-radius: 8px;">编辑服务区域</button>
        </div>
    </div>

    <!-- 设置页 -->
    <div id="page-settings" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('profile')">←</div>
            <span class="page-title">设置</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="settings-group">
                <div class="settings-item">
                    <span class="settings-text">账号设置</span>
                    <span class="settings-arrow">›</span>
                </div>
                <div class="settings-item">
                    <span class="settings-text">消息通知</span>
                    <span class="settings-arrow">›</span>
                </div>
                <div class="settings-item">
                    <span class="settings-text">隐私设置</span>
                    <span class="settings-arrow">›</span>
                </div>
            </div>

            <div class="settings-group">
                <div class="settings-item">
                    <span class="settings-text">可服务时段</span>
                    <span class="settings-arrow">›</span>
                </div>
                <div class="settings-item">
                    <span class="settings-text">服务报价</span>
                    <span class="settings-arrow">›</span>
                </div>
                <div class="settings-item">
                    <span class="settings-text">银行卡管理</span>
                    <span class="settings-arrow">›</span>
                </div>
            </div>

            <div class="settings-group">
                <div class="settings-item">
                    <span class="settings-text">清除缓存</span>
                    <span class="settings-arrow">›</span>
                </div>
                <div class="settings-item">
                    <span class="settings-text">检查更新</span>
                    <span class="settings-arrow">›</span>
                </div>
                <div class="settings-item">
                    <span class="settings-text">关于我们</span>
                    <span class="settings-arrow">›</span>
                </div>
            </div>

            <button class="btn btn-outline" style="width: 100%; margin-top: 24px; padding: 14px; border-radius: 8px; color: #EF4444; border-color: #EF4444;">退出登录</button>
        </div>
    </div>

    <!-- 推广中心页 -->
    <div id="page-promotion" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('profile')">←</div>
            <span class="page-title">推广中心</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="earnings-card">
                <div class="earnings-total">
                    <div class="label">累计推广佣金</div>
                    <div class="amount">¥1,280</div>
                </div>
                <div class="earnings-actions">
                    <button class="btn-withdraw" onclick="showPage('promotion-withdraw')">立即提现</button>
                </div>
            </div>

            <div class="section-title">分销数据概览</div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;">
                <div class="detail-card" style="text-align: center; cursor: pointer;" onclick="showPage('level1-list')">
                    <div style="font-size: 28px; color: #3B82F6; font-weight: 700;">3</div>
                    <div style="font-size: 13px; color: #666; margin-top: 4px;">一级人数</div>
                    <div style="font-size: 11px; color: #999; margin-top: 4px;">点击查看详情 →</div>
                </div>
                <div class="detail-card" style="text-align: center; cursor: pointer;" onclick="showPage('level2-list')">
                    <div style="font-size: 28px; color: #10B981; font-weight: 700;">5</div>
                    <div style="font-size: 13px; color: #666; margin-top: 4px;">二级人数</div>
                    <div style="font-size: 11px; color: #999; margin-top: 4px;">点击查看详情 →</div>
                </div>
            </div>

            <div class="detail-card">
                <div class="detail-item">
                    <span class="label">本月一级佣金</span>
                    <span class="value money-green">+¥180</span>
                </div>
                <div class="detail-item">
                    <span class="label">本月二级佣金</span>
                    <span class="value money-green">+¥140</span>
                </div>
                <div class="detail-item">
                    <span class="label">累计佣金</span>
                    <span class="value">¥1,280</span>
                </div>
            </div>

            <div class="section-title" style="margin-top: 20px;">推广海报</div>
            <div class="detail-card" style="text-align: center;">
                <div style="background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 12px; padding: 40px 20px; color: #fff;">
                    <div style="font-size: 48px; margin-bottom: 12px;">🏥</div>
                    <h3 style="font-size: 18px; margin-bottom: 8px;">陪诊师招募中</h3>
                    <p style="font-size: 14px; opacity: 0.9;">轻松兼职，高额回报</p>
                    <div style="margin-top: 16px; padding: 12px; background: rgba(255,255,255,0.2); border-radius: 8px;">扫码加入</div>
                </div>
                <button class="btn btn-primary" style="width: 100%; margin-top: 16px; padding: 14px; border-radius: 8px;">保存海报</button>
            </div>

            <div class="section-title" style="margin-top: 20px;">佣金记录</div>
            <div class="list-item" onclick="showPage('commission-record')">
                <div class="list-icon" style="background: #D1FAE5; color: #059669;">💰</div>
                <div class="list-content">
                    <h4>佣金明细</h4>
                    <p>查看所有佣金收入记录</p>
                </div>
                <span class="list-arrow">›</span>
            </div>
            <div class="list-item" onclick="showPage('promotion-rules')">
                <div class="list-icon" style="background: #FEF3C7; color: #D97706;">📋</div>
                <div class="list-content">
                    <h4>分销规则</h4>
                    <p>了解分销佣金计算方式</p>
                </div>
                <span class="list-arrow">›</span>
            </div>
        </div>
    </div>

    <!-- 一级分销列表页 -->
    <div id="page-level1-list" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('promotion')">←</div>
            <span class="page-title">一级分销</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="earnings-card" style="margin-bottom: 16px;">
                <div class="earnings-total">
                    <div class="label">一级人数</div>
                    <div class="amount" style="font-size: 28px;">3 <small style="font-size: 14px;">人</small></div>
                    <p style="font-size: 13px; opacity: 0.8;">本月带来佣金 ¥180</p>
                </div>
            </div>

            <div class="section-title">一级下线列表</div>
            <div class="list-item">
                <div style="width: 48px; height: 48px; border-radius: 50%; background: #EEF2FF; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px;">👤</div>
                <div class="list-content">
                    <h4>王小明</h4>
                    <p>手机：138****1234 · 加入时间：2024-01-10</p>
                    <p style="color: #10B981;">本月贡献佣金：¥80</p>
                </div>
            </div>
            <div class="list-item">
                <div style="width: 48px; height: 48px; border-radius: 50%; background: #EEF2FF; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px;">👤</div>
                <div class="list-content">
                    <h4>李小红</h4>
                    <p>手机：139****5678 · 加入时间：2024-01-05</p>
                    <p style="color: #10B981;">本月贡献佣金：¥60</p>
                </div>
            </div>
            <div class="list-item">
                <div style="width: 48px; height: 48px; border-radius: 50%; background: #EEF2FF; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px;">👤</div>
                <div class="list-content">
                    <h4>赵小强</h4>
                    <p>手机：137****9012 · 加入时间：2023-12-28</p>
                    <p style="color: #10B981;">本月贡献佣金：¥40</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 二级分销列表页 -->
    <div id="page-level2-list" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('promotion')">←</div>
            <span class="page-title">二级分销</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="earnings-card" style="margin-bottom: 16px;">
                <div class="earnings-total">
                    <div class="label">二级人数</div>
                    <div class="amount" style="font-size: 28px;">5 <small style="font-size: 14px;">人</small></div>
                    <p style="font-size: 13px; opacity: 0.8;">本月带来佣金 ¥140</p>
                </div>
            </div>

            <div class="section-title">二级下线列表</div>
            <div class="list-item">
                <div style="width: 48px; height: 48px; border-radius: 50%; background: #D1FAE5; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px;">👤</div>
                <div class="list-content">
                    <h4>孙小丽 <span style="font-size: 11px; color: #666;">（上级：王小明）</span></h4>
                    <p>手机：136****3456 · 加入时间：2024-01-12</p>
                    <p style="color: #10B981;">本月贡献佣金：¥35</p>
                </div>
            </div>
            <div class="list-item">
                <div style="width: 48px; height: 48px; border-radius: 50%; background: #D1FAE5; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px;">👤</div>
                <div class="list-content">
                    <h4>周小华 <span style="font-size: 11px; color: #666;">（上级：李小红）</span></h4>
                    <p>手机：135****7890 · 加入时间：2024-01-08</p>
                    <p style="color: #10B981;">本月贡献佣金：¥28</p>
                </div>
            </div>
            <div class="list-item">
                <div style="width: 48px; height: 48px; border-radius: 50%; background: #D1FAE5; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px;">👤</div>
                <div class="list-content">
                    <h4>吴小强 <span style="font-size: 11px; color: #666;">（上级：赵小强）</span></h4>
                    <p>手机：134****2345 · 加入时间：2024-01-03</p>
                    <p style="color: #10B981;">本月贡献佣金：¥25</p>
                </div>
            </div>
            <div class="list-item">
                <div style="width: 48px; height: 48px; border-radius: 50%; background: #D1FAE5; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px;">👤</div>
                <div class="list-content">
                    <h4>郑小敏 <span style="font-size: 11px; color: #666;">（上级：王小明）</span></h4>
                    <p>手机：133****6789 · 加入时间：2023-12-25</p>
                    <p style="color: #10B981;">本月贡献佣金：¥22</p>
                </div>
            </div>
            <div class="list-item">
                <div style="width: 48px; height: 48px; border-radius: 50%; background: #D1FAE5; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px;">👤</div>
                <div class="list-content">
                    <h4>陈小伟 <span style="font-size: 11px; color: #666;">（上级：李小红）</span></h4>
                    <p>手机：132****0123 · 加入时间：2023-12-20</p>
                    <p style="color: #10B981;">本月贡献佣金：¥30</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 佣金记录页 -->
    <div id="page-commission-record" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('promotion')">←</div>
            <span class="page-title">佣金记录</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="order-tabs" style="margin-bottom: 16px;">
                <div class="order-tab active">全部</div>
                <div class="order-tab">一级佣金</div>
                <div class="order-tab">二级佣金</div>
            </div>
            <div class="detail-card">
                <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <div>
                        <div style="font-size: 14px; color: #333;">一级佣金 - 王小明推荐</div>
                        <div style="font-size: 12px; color: #999; margin-top: 4px;">2024-01-15 14:30</div>
                    </div>
                    <span class="money-green">+¥80</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <div>
                        <div style="font-size: 14px; color: #333;">二级佣金 - 孙小丽推荐</div>
                        <div style="font-size: 12px; color: #999; margin-top: 4px;">2024-01-14 10:20</div>
                    </div>
                    <span class="money-green">+¥35</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <div>
                        <div style="font-size: 14px; color: #333;">一级佣金 - 李小红推荐</div>
                        <div style="font-size: 12px; color: #999; margin-top: 4px;">2024-01-12 16:45</div>
                    </div>
                    <span class="money-green">+¥60</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <div>
                        <div style="font-size: 14px; color: #333;">二级佣金 - 周小华推荐</div>
                        <div style="font-size: 12px; color: #999; margin-top: 4px;">2024-01-10 09:15</div>
                    </div>
                    <span class="money-green">+¥28</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 12px 0;">
                    <div>
                        <div style="font-size: 14px; color: #333;">一级佣金 - 赵小强推荐</div>
                        <div style="font-size: 12px; color: #999; margin-top: 4px;">2024-01-08 11:30</div>
                    </div>
                    <span class="money-green">+¥40</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 分销规则页 -->
    <div id="page-promotion-rules" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('promotion')">←</div>
            <span class="page-title">分销规则</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="detail-card">
                <div class="detail-title">佣金计算规则</div>
                <div class="detail-content">
                    <p><strong>一级佣金：</strong>直接推荐陪诊师入驻，享受其服务收入的 <span style="color: #3B82F6; font-weight: 600;">10%</span> 作为佣金</p>
                    <p style="margin-top: 12px;"><strong>二级佣金：</strong>间荐陪诊师（由一级推荐入驻），享受其服务收入的 <span style="color: #10B981; font-weight: 600;">5%</span> 作为佣金</p>
                </div>
            </div>

            <div class="detail-card">
                <div class="detail-title">佣金示例</div>
                <div class="detail-content">
                    <p>假设您推荐了陪诊师A，A的服务费为288元/单</p>
                    <p style="margin-top: 8px;">• A完成1单，您获得一级佣金：<span class="money-green">288 × 10% = ¥28.8</span></p>
                    <p style="margin-top: 8px;">• 如果A推荐了陪诊师B，B完成1单，您获得二级佣金：<span class="money-green">288 × 5% = ¥14.4</span></p>
                    <p style="margin-top: 8px;">• A获得一级佣金：<span class="money-green">288 × 10% = ¥28.8</span></p>
                </div>
            </div>

            <div class="detail-card">
                <div class="detail-title">提现规则</div>
                <div class="detail-content">
                    <p>• 佣金满100元即可申请提现</p>
                    <p>• 提现申请审核后1-3个工作日到账</p>
                    <p>• 支持绑定银行卡提现</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 推广佣金提现页 -->
    <div id="page-promotion-withdraw" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('promotion')">←</div>
            <span class="page-title">推广佣金提现</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="withdraw-balance">
            <div class="label">可提现金额</div>
            <div class="amount">¥1,280.00</div>
        </div>
        <div class="withdraw-form">
            <div class="form-item">
                <div class="form-label">提现金额</div>
                <div class="withdraw-input">
<span>¥</span>
                    <input type="number" class="form-input" placeholder="请输入提现金额" value="1280">
                </div>
                <p style="font-size: 12px; color: #999; margin-top: 8px;">最低提现金额：¥100</p>
            </div>

            <div class="form-item">
                <div class="form-label">到账银行卡</div>
                <div class="bank-card">
                    <div class="bank-icon">🏦</div>
                    <div class="bank-info">
                        <h4>中国工商银行(***4567)</h4>
                        <p>单笔限额5万，每日限额10万</p>
                    </div>
                    <span style="color: #ccc;">›</span>
                </div>
            </div>

            <button class="btn btn-primary" style="width: 100%; padding: 16px; border-radius: 12px; font-size: 16px; margin-top: 16px;" onclick="showToast('推广佣金提现申请已提交'); showPage('promotion')">确认提现</button>
        </div>
    </div>

    <!-- 帮助与反馈页 -->
    <div id="page-help" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('profile')">←</div>
            <span class="page-title">帮助与反馈</span>
            <div style="width: 32px;"></div>
        </div>
        <div class="page-content">
            <div class="section-title">常见问题</div>
            <div class="list-item" onclick="toggleAnswer(this)">
                <div class="list-content">
                    <h4>如何成为认证陪诊师？</h4>
                </div>
                <span class="list-arrow">∨</span>
            </div>
            <div class="list-item" onclick="toggleAnswer(this)">
                <div class="list-content">
                    <h4>订单完成后如何结算？</h4>
                </div>
                <span class="list-arrow">∨</span>
            </div>
            <div class="list-item" onclick="toggleAnswer(this)">
                <div class="list-content">
                    <h4>提现需要多长时间到账？</h4>
                </div>
                <span class="list-arrow">∨</span>
            </div>
            <div class="list-item" onclick="toggleAnswer(this)">
                <div class="list-content">
                    <h4>如何设置服务区域？</h4>
                </div>
                <span class="list-arrow">∨</span>
            </div>

            <button class="btn btn-outline" style="width: 100%; margin-top: 24px; padding: 14px; border-radius: 8px;">联系客服</button>
        </div>
    </div>

    <!-- 新订单弹窗 -->
    <div id="new-order-modal" class="new-order-modal">
        <div class="new-order-content">
            <div class="new-order-header">
                <h3>🔔 新订单提醒</h3>
                <p>您有新的陪诊订单</p>
            </div>
            <div class="new-order-body">
                <div class="new-order-info">
                    <div class="new-order-row">
                        <span class="label">服务类型</span>
                        <span class="value">全天陪诊</span>
                    </div>
                    <div class="new-order-row">
                        <span class="label">服务医院</span>
                        <span class="value">北京市第一医院</span>
                    </div>
                    <div class="new-order-row">
                        <span class="label">服务时间</span>
                        <span class="value">今天 14:00-18:00</span>
                    </div>
                    <div class="new-order-row">
                        <span class="label">订单金额</span>
                        <span class="value" style="color: #EF4444; font-weight: 600;">¥288</span>
                    </div>
                </div>
            </div>
            <div class="new-order-footer">
                <button style="background: #f5f5f5; color: #666;" onclick="closeNewOrder()">稍后处理</button>
                <button style="background: #3B82F6; color: #fff;" onclick="closeNewOrder(); showPage('order-detail')">立即查看</button>
            </div>
        </div>
    </div>

    <!-- Toast提示 -->
    <div id="toast" class="toast"></div>

    <script>
        // 页面切换
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById('page-' + pageId).classList.add('active');
            window.scrollTo(0, 0);
        }

        // 订单标签切换
        function switchTab(element, type) {
            document.querySelectorAll('.order-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            element.classList.add('active');
        }

        // 首页接单大厅标签切换
        function switchHomeTab(element, type) {
            // 切换标签样式
            document.querySelectorAll('#page-home .order-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            element.classList.add('active');

            // 筛选订单卡片
            const orderCards = document.querySelectorAll('#page-home .order-section .order-card');
            orderCards.forEach(card => {
                if (type === 'all') {
                    card.style.display = 'block';
                } else if (card.dataset.type === type) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // 订单标签切换
        function switchOrderTab(element, status) {
            // 切换标签样式
            document.querySelectorAll('#page-orders .order-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            element.classList.add('active');

            // 筛选订单
            const orders = document.querySelectorAll('#page-orders .order-item');
            const emptyTip = document.querySelector('#page-orders .empty-order-tip');

            if (status === 'all') {
                orders.forEach(order => order.style.display = 'block');
            } else {
                let visibleCount = 0;
                orders.forEach(order => {
                    if (order.dataset.status === status) {
                        order.style.display = 'block';
                        visibleCount++;
                    } else {
                        order.style.display = 'none';
                    }
                });
                // 显示空状态提示
                if (visibleCount === 0 && emptyTip) {
                    emptyTip.style.display = 'block';
                } else if (emptyTip) {
                    emptyTip.style.display = 'none';
                }
            }
        }

        // 接单
        function acceptOrder() {
            showToast('接单成功，请准时到达服务地点');
        }

        // 关闭新订单弹窗
        function closeNewOrder() {
            document.getElementById('new-order-modal').classList.remove('active');
        }

        // 显示Toast
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('active');
            setTimeout(() => {
                toast.classList.remove('active');
            }, 2000);
        }

        // 展开/收起答案
        function toggleAnswer(element) {
            const arrow = element.querySelector('.list-arrow');
            if (arrow.textContent === '∨') {
                arrow.textContent = '∧';
            } else {
                arrow.textContent = '∨';
            }
        }

        // 模拟新订单通知（3秒后自动弹出）
        setTimeout(() => {
            document.getElementById('new-order-modal').classList.add('active');
        }, 3000);

        // 更新时间显示（模拟）
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.querySelector('.status-bar span:first-child').textContent = hours + ':' + minutes;
        }
        updateTime();
        setInterval(updateTime, 60000);
    </script>
</body>
</html>