编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户端小程序 - 陪护陪诊</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .phone-container {
            max-width: 420px;
            margin: 0 auto;
            background: #fff;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .phone-header-bar {
            height: 30px;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .phone-notch {
            width: 120px;
            height: 25px;
            background: #000;
            border-radius: 20px;
        }
        .app-content {
            min-height: calc(100vh - 50px);
            display: flex;
            flex-direction: column;
        }
        .screen-view {
            display: none;
            flex: 1;
            padding-bottom: 70px;
        }
        .screen-view.active { display: block; }
        
        /* 首页 */
        .home-header {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 15px;
        }
        .location-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            margin-bottom: 12px;
        }
        .search-bar {
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-bar input {
            flex: 1;
            background: transparent;
            border: none;
            color: white;
            font-size: 14px;
            outline: none;
        }
        .search-bar input::placeholder { color: rgba(255,255,255,0.7); }
        .banner {
            background: linear-gradient(135deg, #ffecd2, #fcb69f);
            margin: 15px;
            border-radius: 15px;
            padding: 20px;
            color: #333;
        }
        .banner h3 { font-size: 16px; margin-bottom: 5px; }
        .banner p { font-size: 12px; opacity: 0.8; }
        .quick-call {
            background: #fff3f3;
            margin: 0 15px 15px;
            border-radius: 15px;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            border: 2px solid #ff6b6b;
        }
        .quick-call-icon {
            width: 50px;
            height: 50px;
            background: #ff6b6b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
        }
        .quick-call-text h4 { color: #ff6b6b; font-size: 14px; }
        .quick-call-text p { font-size: 12px; color: #666; margin-top: 3px; }
        .service-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 0 15px;
            margin-bottom: 15px;
        }
        .service-item {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 12px 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .service-item:hover {
            background: #e9ecef;
            transform: translateY(-2px);
        }
        .service-icon {
            width: 40px;
            height: 40px;
            margin: 0 auto 8px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .service-item span { font-size: 11px; color: #333; }
        .section-title {
            padding: 0 15px;
            margin-bottom: 12px;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .section-title a { font-size: 12px; color: #999; font-weight: normal; }
        .companion-list {
            padding: 0 15px;
        }
        .companion-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 12px;
            display: flex;
            gap: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .companion-card:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }
        .companion-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            flex-shrink: 0;
        }
        .companion-info { flex: 1; }
        .companion-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
display: flex;
            align-items: center;
            gap: 8px;
        }
        .companion-name .tag {
            background: #667eea;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
        }
        .companion-tags { display: flex; gap: 5px; margin-bottom: 5px; }
        .companion-tags span {
            background: #e3f2fd;
            color: #1976d2;
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        .companion-stats {
            font-size: 11px;
            color: #999;
            display: flex;
            gap: 15px;
        }
        .companion-rating {
            color: #ff9800;
        }
        .companion-price {
            text-align: right;
        }
        .companion-price .price {
            font-size: 18px;
            font-weight: 600;
            color: #ff6b6b;
        }
        .companion-price .unit {
            font-size: 11px;
            color: #999;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 420px;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            border-top: 1px solid #eee;
            z-index: 100;
        }
        .nav-item {
            text-align: center;
            font-size: 10px;
            color: #999;
            cursor: pointer;
            padding: 5px 15px;
            transition: all 0.3s;
        }
        .nav-item.active { color: #667eea; }
        .nav-item .icon {
            font-size: 22px;
            margin-bottom: 3px;
            display: block;
        }
        
        /* 模态框 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
        }
        .modal.show { display: flex; }
        .modal-content {
            background: white;
            border-radius: 20px;
            max-width: 420px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease;
        }
        @keyframes slideUp {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            background: white;
        }
        .modal-header h3 { font-size: 16px; color: #333; }
        .modal-close {
            width: 30px;
            height: 30px;
            border: none;
            background: #f0f0f0;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
        }
        .modal-body { padding: 20px; }
        
        /* 订单列表样式 */
        .order-tabs {
            display: flex;
            gap: 10px;
            padding: 15px;
            overflow-x: auto;
            background: #f8f9fa;
        }
        .order-tab {
            padding: 8px 16px;
            background: white;
            border-radius: 20px;
            font-size: 13px;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.3s;
        }
        .order-tab.active {
            background: #667eea;
            color: white;
        }
        .order-list { padding: 15px; }
        .order-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #ddd;
        }
        .order-id { font-weight: 600; color: #333; font-size: 14px; }
        .order-status {
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 12px;
        }
        .status-pending { background: #fff3cd; color: #856404; }
        .status-processing { background: #cce5ff; color: #004085; }
        .status-done { background: #d4edda; color: #155724; }
        .status-cancel { background: #f8d7da; color: #721c24; }
        .order-info {
            font-size: 13px;
            color: #666;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .order-actions {
            display: flex;
            gap: 10px;
            margin-top: 12px;
        }
        .btn {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
        }
        .btn-primary { background: #667eea; color: white; }
        .btn-outline { background: white; color: #667eea; border: 1px solid #667eea; }
        .btn-danger { background: #fff3f3; color: #ff6b6b; border: 1px solid #ff6b6b; }
        
        /* 个人中心 */
        .profile-header {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 30px 20px;
            text-align: center;
        }
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: white;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
        }
        .profile-name { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
        .profile-phone { font-size: 14px; opacity: 0.8; }
        .profile-stats {
            display: flex;
            justify-content: space-around;
            background: #f8f9fa;
            padding: 15px;
            margin: 0;
        }
        .stat-item {
            text-align: center;
            cursor: pointer;
        }
        .stat-value {
            font-size: 18px;
            font-weight: 600;
            color: #667eea;
        }
        .stat-label {
            font-size: 12px;
            color: #999;
            margin-top: 3px;
        }
        .menu-section {
            padding: 15px;
        }
        .menu-group {
            background: #f8f9fa;
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 15px;
        }
        .menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: all 0.3s;
        }
        .menu-item:last-child { border-bottom: none; }
        .menu-item:hover { background: #e9ecef; }
        .menu-icon {
            width: 35px;
            height: 35px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .menu-text { flex: 1; }
        .menu-title { font-size: 14px; color: #333; }
        .menu-desc { font-size: 11px; color: #999; margin-top: 2px; }
        .menu-arrow { color: #ccc; font-size: 18px; }
        
        /* 服务下单页 */
        .service-detail-header {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 20px;
            text-align: center;
        }
        .service-detail-icon {
            width: 70px;
            height: 70px;
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
        }
        .service-detail-title { font-size: 20px; font-weight: 600; margin-bottom: 5px; }
        .service-detail-price { font-size: 24px; font-weight: 600; }
        .service-detail-price span { font-size: 14px; }
        .form-section {
            padding: 20px;
        }
        .form-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-label {
            font-size: 13px;
            color: #666;
            margin-bottom: 5px;
            display: block;
        }
        .form-input, .form-select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            font-size: 14px;
            outline: none;
        }
        .form-input:focus, .form-select:focus { border-color: #667eea; }
        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            margin-top: 20px;
        }
        
        /* 陪诊师详情 */
        .companion-detail-header {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 20px;
            text-align: center;
        }
        .companion-detail-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: white;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }
        .companion-detail-name {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .companion-detail-rating {
            color: #ff9800;
            font-size: 18px;
            margin-bottom: 10px;
        }
        .companion-certifications {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .certification {
            background: rgba(255,255,255,0.2);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 12px;
        }
        .companion-stats-detail {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            background: #f8f9fa;
        }
        .stat-box {
            text-align: center;
        }
        .stat-box .num {
            font-size: 20px;
            font-weight: 600;
            color: #667eea;
        }
        .stat-box .text {
            font-size: 12px;
            color: #999;
            margin-top: 3px;
        }
        
        /* 优惠券 */
        .coupon-tabs {
            display: flex;
            gap: 5px;
            padding: 15px;
            background: white;
        }
        .coupon-tab {
            flex: 1;
            padding: 10px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        .coupon-tab.active {
            color: #667eea;
            border-bottom-color: #667eea;
        }
        .coupon-card {
            margin: 15px;
            display: flex;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 15px;
            overflow: hidden;
            color: white;
        }
        .coupon-left {
            padding: 20px;
            text-align: center;
            border-right: 1px dashed rgba(255,255,255,0.3);
        }
        .coupon-price {
            font-size: 32px;
            font-weight: 700;
        }
        .coupon-price span { font-size: 14px; }
        .coupon-limit { font-size: 11px; opacity: 0.8; margin-top: 5px; }
        .coupon-right {
            flex: 1;
            padding: 15px;
        }
        .coupon-title { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
        .coupon-desc { font-size: 12px; opacity: 0.8; margin-bottom: 10px; }
        .coupon-time { font-size: 11px; opacity: 0.7; }
        .coupon-use-btn {
            background: white;
            color: #667eea;
            border: none;
            padding: 6px 15px;
            border-radius: 15px;
            font-size: 12px;
            cursor: pointer;
        }
        
        /* 分销中心 */
        .share-header {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
            padding: 25px;
            text-align: center;
        }
        .share-code {
            width: 120px;
            height: 120px;
            background: white;
            margin: 15px auto;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }
        .share-btns {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 15px;
        }
        .share-btn {
            padding: 10px 20px;
            background: white;
            color: #f5576c;
            border: none;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
        }
        .share-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            padding: 15px;
        }
        .share-stat-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
        }
        .share-stat-card .value {
            font-size: 24px;
            font-weight: 700;
            color: #667eea;
        }
        .share-stat-card .label {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        
        /* 消息通知 */
        .message-list { padding: 15px; }
        .message-item {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 12px;
            display: flex;
            gap: 12px;
            cursor: pointer;
        }
        .message-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            flex-shrink: 0;
        }
        .message-content { flex: 1; }
        .message-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 5px;
        }
        .message-desc {
            font-size: 12px;
            color: #999;
            line-height: 1.4;
        }
        .message-time {
            font-size: 11px;
            color: #ccc;
            margin-top: 5px;
        }
        .message-unread {
            width: 8px;
            height: 8px;
            background: #ff6b6b;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 5px;
        }
        
        /* 就诊人管理 */
        .patient-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .patient-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
        .patient-info { flex: 1; }
        .patient-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 3px;
        }
        .patient-detail {
            font-size: 12px;
            color: #999;
        }
        .patient-default {
            background: #667eea;
            color: white;
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 10px;
        }
        .add-patient-btn {
            display: block;
            width: calc(100% - 30px);
            margin: 0 15px 15px;
            padding: 15px;
            background: #f8f9fa;
            border: 2px dashed #ddd;
            border-radius: 15px;
            text-align: center;
            color: #667eea;
            font-size: 14px;
            cursor: pointer;
        }
        
        /* 地址管理 */
        .address-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px;
            margin: 15px;
        }
        .address-info {
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
        }
        .address-user {
            font-size: 13px;
            color: #666;
            margin-bottom: 10px;
        }
        .address-actions {
            display: flex;
            gap: 15px;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }
        .address-action {
            font-size: 13px;
            color: #667eea;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 发票助手 */
        .invoice-apply-card {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            margin: 15px;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
        }
        .invoice-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }
        .invoice-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .invoice-desc {
            font-size: 13px;
            opacity: 0.8;
        }
        
        /* 收藏 */
        .favorite-tabs {
            display: flex;
            padding: 15px;
            gap: 10px;
            background: #f8f9fa;
        }
        .favorite-tab {
            flex: 1;
            padding: 10px;
            text-align: center;
            background: white;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        .favorite-tab.active {
            background: #667eea;
            color: white;
        }
        
        /* 商城 */
        .shop-banner {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            margin: 15px;
            border-radius: 15px;
            padding: 20px;
            color: white;
        }
        .shop-banner h3 { font-size: 18px; margin-bottom: 5px; }
        .shop-banner p { font-size: 13px; opacity: 0.9; }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding: 0 15px;
        }
        .product-card {
            background: #f8f9fa;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
        }
        .product-img {
            height: 120px;
            background: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }
        .product-info {
            padding: 12px;
        }
        .product-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        .product-price {
            color: #ff6b6b;
            font-weight: 600;
        }
        .product-price span { font-size: 12px; }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="phone-header-bar">
            <div class="phone-notch"></div>
        </div>
        <div class="app-content">
            
            <!-- 首页 -->
            <div class="screen-view active" id="screen-home">
                <div class="home-header">
                    <div class="location-bar" onclick="showModal('城市选择', '请选择服务城市')">
                        <span>📍</span>
                        <span>上海市</span>
                        <span>▼</span>
                    </div>
                    <div class="search-bar" onclick="showModal('搜索', '搜索医院、科室、服务项目')">
                        <span>🔍</span>
                        <input type="text" placeholder="搜索医院、科室、服务" readonly>
                    </div>
                </div>
                
                <div class="banner" onclick="showModal('活动详情', '新用户首单立减50元，快来预约吧！')">
                    <h3>🎉 新用户专享优惠</h3>
                    <p>首单立减50元，立即预约陪诊服务</p>
                </div>
                
                <div class="quick-call" onclick="showModal('急速预约', '请拨打热线：400-888-8888')">
                    <div class="quick-call-icon">📞</div>
                    <div class="quick-call-text">
                        <h4>急速预约电话</h4>
                        <p>一键拨号，紧急快速预约</p>
                    </div>
                    <div style="margin-left: auto; color: #ff6b6b; font-size: 20px;">›</div>
                </div>
                
                <div class="section-title">热门服务</div>
                <div class="service-grid">
                    <div class="service-item" onclick="switchTab('order')">
                        <div class="service-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">🏃</div>
                        <span>全天陪跑</span>
                    </div>
                    <div class="service-item" onclick="switchTab('order')">
                        <div class="service-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">⏰</div>
                        <span>半天陪诊</span>
                    </div>
                    <div class="service-item" onclick="switchTab('order')">
                        <div class="service-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">🚑</div>
                        <span>急诊夜间</span>
                    </div>
                    <div class="service-item" onclick="switchTab('order')">
                        <div class="service-icon" style="background: linear-gradient(135deg, #43e97b, #38f9d7);">💊</div>
                        <span>代办买药</span>
                    </div>
                    <div class="service-item" onclick="switchTab('order')">
                        <div class="service-icon" style="background: linear-gradient(135deg, #fa709a, #fee140);">📋</div>
                        <span>代办问诊</span>
                    </div>
                    <div class="service-item" onclick="switchTab('order')">
                        <div class="service-icon" style="background: linear-gradient(135deg, #a8edea, #fed6e3);">🌍</div>
                        <span>异地陪诊</span>
                    </div>
                    <div class="service-item" onclick="switchTab('order')">
                        <div class="service-icon" style="background: linear-gradient(135deg, #ff9a9e, #fecfef);">🩺</div>
                        <span>体检陪同</span>
                    </div>
                    <div class="service-item" onclick="switchTab('order')">
                        <div class="service-icon" style="background: linear-gradient(135deg, #a18cd1, #fbc2eb);">🏨</div>
                        <span>出入院</span>
                    </div>
                </div>
                
                <div class="section-title">
                    优选陪诊师
                    <a href="#" onclick="switchTab('profile')">查看全部 ›</a>
                </div>
                <div class="companion-list">
                    <div class="companion-card" onclick="showCompanionDetail('赵晓梅', 4.9, 328, 156, '上海市'))">
                        <div class="companion-avatar">👩</div>
                        <div class="companion-info">
                            <div class="companion-name">
                                赵晓梅
                                <span class="tag">金牌</span>
                            </div>
                            <div class="companion-tags">
                                <span>全天陪诊</span>
                                <span>急诊</span>
                            </div>
                            <div class="companion-stats">
                                <span class="companion-rating">⭐ 4.9</span>
                                <span>服务328次</span>
                                <span>1.2km</span>
                            </div>
                        </div>
                        <div class="companion-price">
                            <div class="price">¥268</div>
                            <div class="unit">起</div>
                        </div>
                    </div>
                    <div class="companion-card" onclick="showCompanionDetail('钱文静', 4.8, 256, 89, '上海市'))">
                        <div class="companion-avatar" style="background: linear-gradient(135deg, #f093fb, #f5576c);">👩</div>
                        <div class="companion-info">
                            <div class="companion-name">
                                钱文静
                                <span class="tag">银牌</span>
                            </div>
                            <div class="companion-tags">
                                <span>半天陪诊</span>
                                <span>体检</span>
                            </div>
                            <div class="companion-stats">
                                <span class="companion-rating">⭐ 4.8</span>
                                <span>服务256次</span>
                                <span>2.5km</span>
                            </div>
                        </div>
                        <div class="companion-price">
                            <div class="price">¥168</div>
                            <div class="unit">起</div>
                        </div>
                    </div>
                    <div class="companion-card" onclick="showCompanionDetail('孙丽华', 4.7, 198, 45, '上海市'))">
                        <div class="companion-avatar" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">👩</div>
                        <div class="companion-info">
                            <div class="companion-name">
                                孙丽华
                                <span class="tag">铜牌</span>
                            </div>
                            <div class="companion-tags">
                                <span>代取报告</span>
                                <span>代买药</span>
                            </div>
                            <div class="companion-stats">
                                <span class="companion-rating">⭐ 4.7</span>
                                <span>服务198次</span>
                                <span>3.8km</span>
                            </div>
                        </div>
                        <div class="companion-price">
                            <div class="price">¥98</div>
                            <div class="unit">起</div>
                        </div>
                    </div>
                </div>
                <div style="height: 20px;"></div>
            </div>
            
            <!-- 订单页 -->
            <div class="screen-view" id="screen-order">
                <div style="background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 20px; text-align: center;">
                    <div style="font-size: 18px; font-weight: 600;">我的订单</div>
                </div>
                <div class="order-tabs">
                    <div class="order-tab active" onclick="filterOrders('all')">全部</div>
                    <div class="order-tab" onclick="filterOrders('pending')">待支付</div>
                    <div class="order-tab" onclick="filterOrders('accepted')">待接单</div>
                    <div class="order-tab" onclick="filterOrders('processing')">进行中</div>
                    <div class="order-tab" onclick="filterOrders('done')">已完成</div>
                    <div class="order-tab" onclick="filterOrders('after')">售后</div>
                </div>
                <div class="order-list" id="orderList">
                    <div class="order-card">
                        <div class="order-header">
                            <span class="order-id">订单 #20240424001</span>
                            <span class="order-status status-processing">进行中</span>
                        </div>
                        <div class="order-info">🏥 上海市第一人民医院 | 全天陪诊</div>
                        <div class="order-info">👤 就诊人：李四 | 📅 2024-04-25 09:00</div>
                        <div class="order-info">👩‍⚕️ 陪诊师：赵晓梅 ⭐5.0</div>
                        <div class="order-info" style="color: #ff6b6b; font-weight: 600;">¥268.00</div>
                        <div class="order-actions">
                            <button class="btn btn-outline" onclick="showModal('订单详情', '订单详细信息展示中...')">查看详情</button>
                            <button class="btn btn-primary" onclick="showModal('联系陪诊师', '正在为您连接...')">联系陪诊师</button>
                        </div>
                    </div>
                    <div class="order-card">
                        <div class="order-header">
                            <span class="order-id">订单 #20240423005</span>
                            <span class="order-status status-done">已完成</span>
                        </div>
                        <div class="order-info">🏥 复旦大学附属华山医院 | 半天陪诊</div>
                        <div class="order-info">👤 就诊人：王五 | 📅 2024-04-23 14:00</div>
                        <div class="order-info">👩‍⚕️ 陪诊师：钱文静</div>
                        <div class="order-info" style="color: #ff6b6b; font-weight: 600;">¥168.00</div>
                        <div class="order-actions">
                            <button class="btn btn-outline" onclick="showModal('订单详情', '订单详细信息展示中...')">查看详情</button>
                            <button class="btn btn-primary" onclick="showModal('评价服务', '请对本次服务进行评价')">去评价</button>
                        </div>
                    </div>
                    <div class="order-card">
                        <div class="order-header">
                            <span class="order-id">订单 #20240422003</span>
                            <span class="order-status status-pending">待支付</span>
                        </div>
                        <div class="order-info">🏥 瑞金医院 | 代取报告</div>
                        <div class="order-info">👤 就诊人：孙七 | 📅 2024-04-22 10:00</div>
                        <div class="order-info" style="color: #ff6b6b; font-weight: 600;">¥58.00</div>
                        <div class="order-actions">
                            <button class="btn btn-outline" onclick="showModal('订单详情', '订单详细信息展示中...')">查看详情</button>
                            <button class="btn btn-primary" onclick="showModal('支付订单', '请选择支付方式')">立即支付</button>
                            <button class="btn btn-danger" onclick="showModal('取消订单', '确定要取消该订单吗？')">取消</button>
                        </div>
                    </div>
                    <div class="order-card">
                        <div class="order-header">
                            <span class="order-id">订单 #20240420001</span>
                            <span class="order-status status-done">已完成</span>
                        </div>
                        <div class="order-info">🏥 上海市第一人民医院 | 全天陪诊</div>
                        <div class="order-info">👤 就诊人：李四 | 📅 2024-04-20 09:00</div>
                        <div class="order-info">👩‍⚕️ 陪诊师：赵晓梅 | ⭐ 已评价</div>
                        <div class="order-info" style="color: #ff6b6b; font-weight: 600;">¥268.00</div>
                        <div class="order-actions">
                            <button class="btn btn-outline" onclick="showModal('订单详情', '订单详细信息展示中...')">查看详情</button>
                            <button class="btn btn-outline" onclick="showModal('申请发票', '申请电子发票')">开发票</button>
                        </div>
                    </div>
                </div>
                <div style="height: 20px;"></div>
            </div>
            
            <!-- 个人中心 -->
            <div class="screen-view" id="screen-profile">
                <div class="profile-header">
                    <div class="profile-avatar">👤</div>
                    <div class="profile-name">张三</div>
                    <div class="profile-phone">138****8888</div>
                </div>
                <div class="profile-stats">
                    <div class="stat-item" onclick="switchTab('order')">
                        <div class="stat-value">5</div>
                        <div class="stat-label">我的订单</div>
                    </div>
                    <div class="stat-item" onclick="showFavorites()">
                        <div class="stat-value">3</div>
                        <div class="stat-label">我的收藏</div>
                    </div>
                    <div class="stat-item" onclick="showCoupons()">
                        <div class="stat-value">2</div>
                        <div class="stat-label">优惠券</div>
                    </div>
                    <div class="stat-item" onclick="showDistribution()">
                        <div class="stat-value">¥128</div>
                        <div class="stat-label">我的佣金</div>
                    </div>
                </div>
                
                <div class="menu-section">
                    <div class="menu-group">
                        <div class="menu-item" onclick="showPatients()">
                            <div class="menu-icon" style="background: #e3f2fd;">👥</div>
                            <div class="menu-text">
                                <div class="menu-title">就诊人管理</div>
                                <div class="menu-desc">添加/编辑常用就诊人</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showAddresses()">
                            <div class="menu-icon" style="background: #fce4ec;">📍</div>
                            <div class="menu-text">
                                <div class="menu-title">地址管理</div>
                                <div class="menu-desc">管理收货地址</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showMessages()">
                            <div class="menu-icon" style="background: #fff3e0;">🔔</div>
                            <div class="menu-text">
                                <div class="menu-title">消息通知</div>
                                <div class="menu-desc">订单通知、系统公告</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                    </div>
                    
                    <div class="menu-group">
                        <div class="menu-item" onclick="showCoupons()">
                            <div class="menu-icon" style="background: #e8f5e9;">🎫</div>
                            <div class="menu-text">
                                <div class="menu-title">优惠券</div>
                                <div class="menu-desc">2张可用优惠券</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showDistribution()">
                            <div class="menu-icon" style="background: #f3e5f5;">💰</div>
                            <div class="menu-text">
                                <div class="menu-title">二级分销</div>
                                <div class="menu-desc">推广赚钱，邀请好友</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showInvoice()">
                            <div class="menu-icon" style="background: #e0f7fa;">📄</div>
                            <div class="menu-text">
                                <div class="menu-title">发票助手</div>
                                <div class="menu-desc">申请电子发票</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showFavorites()">
                            <div class="menu-icon" style="background: #fce4ec;">❤️</div>
                            <div class="menu-text">
                                <div class="menu-title">我的收藏</div>
                                <div class="menu-desc">收藏的陪诊师和服务</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                    </div>
                    
                    <div class="menu-group">
                        <div class="menu-item" onclick="showShop()">
                            <div class="menu-icon" style="background: #e8f5e9;">🛒</div>
                            <div class="menu-text">
                                <div class="menu-title">耗材商城</div>
                                <div class="menu-desc">医疗耗材、康复用品</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showModal('客服中心', '在线客服：400-888-8888')">
                            <div class="menu-icon" style="background: #e3f2fd;">💬</div>
                            <div class="menu-text">
                                <div class="menu-title">客服中心</div>
                                <div class="menu-desc">在线咨询、投诉建议</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showModal('企业微信', '添加客服企业微信')">
                            <div class="menu-icon" style="background: #f3e5f5;">🏢</div>
                            <div class="menu-text">
                                <div class="menu-title">企业微信</div>
                                <div class="menu-desc">添加专属客服</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                    </div>
                    
                    <div class="menu-group">
                        <div class="menu-item" onclick="showModal('服务协议', '用户协议、隐私政策、服务须知')">
                            <div class="menu-icon" style="background: #efebe9;">📋</div>
                            <div class="menu-text">
                                <div class="menu-title">服务协议</div>
                                <div class="menu-desc">用户协议、隐私政策</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showModal('关于我们', '陪护陪诊平台介绍')">
                            <div class="menu-icon" style="background: #e0f7fa;">ℹ️</div>
                            <div class="menu-text">
                                <div class="menu-title">关于我们</div>
                                <div class="menu-desc">平台介绍、联系方式</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showModal('设置', '头像昵称、手机绑定、密码设置')">
                            <div class="menu-icon" style="background: #eceff1;">⚙️</div>
                            <div class="menu-text">
                                <div class="menu-title">设置</div>
                                <div class="menu-desc">头像昵称、账号安全</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                        <div class="menu-item" onclick="showModal('退出登录', '确定退出当前账号？')" style="color: #ff6b6b;">
                            <div class="menu-icon" style="background: #ffebee;">🚪</div>
                            <div class="menu-text">
                                <div class="menu-title">退出登录</div>
                                <div class="menu-desc">安全退出当前账号</div>
                            </div>
                            <div class="menu-arrow">›</div>
                        </div>
                    </div>
                </div>
                <div style="height: 20px;"></div>
            </div>
            
        </div>
        
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item active" onclick="switchTab('home')">
                <span class="icon">🏠</span>
                首页
            </div>
            <div class="nav-item" onclick="switchTab('order')">
                <span class="icon">📋</span>
                订单
            </div>
            <div class="nav-item" onclick="switchTab('profile')">
                <span class="icon">👤</span>
                我的
            </div>
        </div>
    </div>
    
    <!-- 模态框 -->
    <div class="modal" id="modal">
        <div class="modal-content" id="modal-content">
            <div class="modal-header">
                <h3 id="modal-title">功能详情</h3>
                <button class="modal-close" onclick="closeModal()">×</button>
            </div>
            <div class="modal-body" id="modal-body"></div>
        </div>
    </div>

    <script>
        // 切换Tab
        function switchTab(tab) {
            document.querySelectorAll('.screen-view').forEach(v => v.classList.remove('active'));
            document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
            
            if (tab === 'home') {
                document.getElementById('screen-home').classList.add('active');
                document.querySelectorAll('.nav-item')[0].classList.add('active');
            } else if (tab === 'order') {
                document.getElementById('screen-order').classList.add('active');
                document.querySelectorAll('.nav-item')[1].classList.add('active');
            } else if (tab === 'profile') {
                document.getElementById('screen-profile').classList.add('active');
                document.querySelectorAll('.nav-item')[2].classList.add('active');
            }
        }
        
        // 显示模态框
        function showModal(title, content) {
            document.getElementById('modal-title').textContent = title;
            document.getElementById('modal-body').innerHTML = '<p style="text-align: center; color: #666; padding: 30px;">' + content + '</p>';
            document.getElementById('modal').classList.add('show');
        }
        
        // 关闭模态框
        function closeModal() {
            document.getElementById('modal').classList.remove('show');
        }
        
        // 点击模态框外部关闭
        document.getElementById('modal').addEventListener('click', function(e) {
            if (e.target === this) closeModal();
        });
        
        // 陪诊师详情
        function showCompanionDetail(name, rating, orders, distance, city) {
            document.getElementById('modal-title').textContent = '陪诊师详情';
            document.getElementById('modal-body').innerHTML = `
                <div class="companion-detail-header">
                    <div class="companion-detail-avatar">👩</div>
                    <div class="companion-detail-name">${name}</div>
                    <div class="companion-detail-rating">${'⭐'.repeat(Math.floor(rating))} ${rating}</div>
                    <div class="companion-certifications">
                        <span class="certification">✓ 身份认证</span>
                        <span class="certification">✓ 健康证</span>
                        <span class="certification">✓ 护士证</span>
                    </div>
                </div>
                <div class="companion-stats-detail">
                    <div class="stat-box">
                        <div class="num">${orders}</div>
                        <div class="text">服务次数</div>
                    </div>
                    <div class="stat-box">
                        <div class="num">${distance}km</div>
                        <div class="text">距离</div>
                    </div>
                    <div class="stat-box">
                        <div class="num">${city}</div>
                        <div class="text">服务城市</div>
                    </div>
                </div>
                <div style="padding: 15px;">
                    <div class="form-title">选择服务</div>
                    <div class="form-group">
                        <select class="form-select">
                            <option>全天陪诊 - ¥268</option>
                            <option>半天陪诊 - ¥168</option>
                            <option>2小时陪诊 - ¥98</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">选择日期</label>
                        <input type="date" class="form-input" value="2024-04-25">
                    </div>
                    <div class="form-group">
                        <label class="form-label">选择时间</label>
                        <select class="form-select">
                            <option>09:00</option>
                            <option>10:00</option>
                            <option>14:00</option>
                        </select>
                    </div>
                    <button class="submit-btn" onclick="closeModal(); showModal('预约成功', '已提交预约请求，等待陪诊师接单！');">立即预约</button>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 优惠券
        function showCoupons() {
            document.getElementById('modal-title').textContent = '我的优惠券';
            document.getElementById('modal-body').innerHTML = `
                <div class="coupon-tabs">
                    <div class="coupon-tab active">可用(2)</div>
                    <div class="coupon-tab">已使用</div>
                    <div class="coupon-tab">已过期</div>
                </div>
                <div class="coupon-card">
                    <div class="coupon-left">
                        <div class="coupon-price"><span>¥</span>50</div>
                        <div class="coupon-limit">满200可用</div>
                    </div>
                    <div class="coupon-right">
                        <div class="coupon-title">新用户专享券</div>
                        <div class="coupon-desc">首单立减，适用于全天陪诊</div>
                        <div class="coupon-time">有效期至 2024-05-31</div>
                    </div>
                </div>
                <div class="coupon-card" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
                    <div class="coupon-left">
                        <div class="coupon-price"><span>¥</span>20</div>
                        <div class="coupon-limit">无门槛</div>
                    </div>
                    <div class="coupon-right">
                        <div class="coupon-title">限时折扣券</div>
                        <div class="coupon-desc">全平台通用</div>
                        <div class="coupon-time">有效期至 2024-04-30</div>
                    </div>
                </div>
                <div style="padding: 15px; text-align: center;">
                    <button class="btn btn-outline" onclick="showModal('领取优惠券', '更多优惠券等你来领！')">领取更多</button>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 分销中心
        function showDistribution() {
            document.getElementById('modal-title').textContent = '二级分销';
            document.getElementById('modal-body').innerHTML = `
                <div class="share-header">
                    <div style="font-size: 14px; opacity: 0.8;">我的推广码</div>
                    <div class="share-code">📱</div>
                    <div>推广码：ABC123</div>
                    <div class="share-btns">
                        <button class="share-btn">分享微信</button>
                        <button class="share-btn">朋友圈</button>
                    </div>
                </div>
                <div class="share-stats-grid">
                    <div class="share-stat-card">
                        <div class="value">12</div>
                        <div class="label">一级好友</div>
                    </div>
                    <div class="share-stat-card">
                        <div class="value">28</div>
                        <div class="label">二级好友</div>
                    </div>
                    <div class="share-stat-card">
                        <div class="value">¥328</div>
                        <div class="label">累计佣金</div>
                    </div>
                    <div class="share-stat-card">
                        <div class="value">¥128</div>
                        <div class="label">可提现</div>
                    </div>
                </div>
                <div class="menu-group" style="margin: 15px;">
                    <div class="menu-item" onclick="showModal('分销规则', '一级好友下单返5%，二级好友下单返2%')">
                        <div class="menu-icon" style="background: #e3f2fd;">📖</div>
                        <div class="menu-text">
                            <div class="menu-title">分销规则</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    <div class="menu-item" onclick="showModal('我的好友', '好友列表展示')">
                        <div class="menu-icon" style="background: #e8f5e9;">👥</div>
                        <div class="menu-text">
                            <div class="menu-title">我的好友</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    <div class="menu-item" onclick="showModal('佣金提现', '绑定微信/银行卡申请提现')">
                        <div class="menu-icon" style="background: #fff3e0;">💰</div>
                        <div class="menu-text">
                            <div class="menu-title">佣金提现</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 就诊人管理
        function showPatients() {
            document.getElementById('modal-title').textContent = '就诊人管理';
            document.getElementById('modal-body').innerHTML = `
                <div class="patient-card">
                    <div class="patient-avatar">👤</div>
                    <div class="patient-info">
                        <div class="patient-name">李四 <span class="patient-default">默认</span></div>
                        <div class="patient-detail">男 | 45岁 | 138****8888</div>
                        <div class="patient-detail">身份证：310***********2345</div>
                    </div>
                </div>
                <div class="patient-card">
                    <div class="patient-avatar" style="background: linear-gradient(135deg, #f093fb, #f5576c);">👤</div>
                    <div class="patient-info">
                        <div class="patient-name">王五</div>
                        <div class="patient-detail">女 | 32岁 | 139****6666</div>
                        <div class="patient-detail">身份证：320***********6789</div>
                    </div>
                </div>
                <div class="patient-card">
                    <div class="patient-avatar" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">👤</div>
                    <div class="patient-info">
                        <div class="patient-name">孙七</div>
                        <div class="patient-detail">男 | 28岁 | 137****5555</div>
                        <div class="patient-detail">身份证：330***********9012</div>
                    </div>
                </div>
                <button class="add-patient-btn" onclick="showModal('添加就诊人', '请填写就诊人信息')">+ 添加就诊人</button>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 地址管理
        function showAddresses() {
            document.getElementById('modal-title').textContent = '地址管理';
            document.getElementById('modal-body').innerHTML = `
                <div class="address-card">
                    <div class="address-user">
                        <span style="font-weight: 600; margin-right: 10px;">李四</span>
                        <span>138****8888</span>
                        <span class="patient-default" style="margin-left: 10px;">默认</span>
                    </div>
                    <div class="address-info">上海市静安区延长中路301号</div>
                    <div class="address-actions">
                        <div class="address-action">✏️ 编辑</div>
                        <div class="address-action" style="color: #ff6b6b;">🗑️ 删除</div>
                    </div>
                </div>
                <div class="address-card">
                    <div class="address-user">
                        <span style="font-weight: 600; margin-right: 10px;">王五</span>
                        <span>139****6666</span>
                    </div>
                    <div class="address-info">上海市浦东新区世纪大道100号</div>
                    <div class="address-actions">
                        <div class="address-action">设为默认</div>
                        <div class="address-action">✏️ 编辑</div>
                        <div class="address-action" style="color: #ff6b6b;">🗑️ 删除</div>
                    </div>
                </div>
                <button class="add-patient-btn" onclick="showModal('添加地址', '请填写收货地址')">+ 添加新地址</button>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 消息通知
        function showMessages() {
            document.getElementById('modal-title').textContent = '消息通知';
            document.getElementById('modal-body').innerHTML = `
                <div class="message-list">
                    <div class="message-item">
                        <div class="message-icon">📋</div>
                        <div class="message-content">
                            <div class="message-title">订单已接单</div>
                            <div class="message-desc">您的订单 #20240424001 已被陪诊师赵晓梅接单，请注意查看。</div>
                            <div class="message-time">10分钟前</div>
                        </div>
                        <div class="message-unread"></div>
                    </div>
                    <div class="message-item">
                        <div class="message-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">🎉</div>
                        <div class="message-content">
                            <div class="message-title">优惠券到账</div>
                            <div class="message-desc">恭喜获得新用户专享50元优惠券，满200可用。</div>
                            <div class="message-time">1小时前</div>
                        </div>
                        <div class="message-unread"></div>
                    </div>
                    <div class="message-item">
                        <div class="message-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">📢</div>
                        <div class="message-content">
                            <div class="message-title">系统公告</div>
                            <div class="message-desc">平台服务升级通知：为提供更好的服务体验...</div>
                            <div class="message-time">昨天</div>
                        </div>
                    </div>
                    <div class="message-item">
                        <div class="message-icon" style="background: linear-gradient(135deg, #43e97b, #38f9d7);">⏰</div>
                        <div class="message-content">
                            <div class="message-title">服务提醒</div>
                            <div class="message-desc">您预约的陪诊服务将于明天9:00开始，请保持手机畅通。</div>
                            <div class="message-time">昨天</div>
                        </div>
                    </div>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 发票助手
        function showInvoice() {
            document.getElementById('modal-title').textContent = '发票助手';
            document.getElementById('modal-body').innerHTML = `
                <div class="invoice-apply-card">
                    <div class="invoice-icon">📄</div>
                    <div class="invoice-title">申请开票</div>
                    <div class="invoice-desc">已完成订单可申请电子普通发票</div>
                </div>
                <div class="form-section">
                    <div class="form-group">
                        <label class="form-label">发票类型</label>
                        <select class="form-select">
                            <option>电子普通发票</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">发票抬头</label>
                        <input type="text" class="form-input" placeholder="请输入发票抬头">
                    </div>
                    <div class="form-group">
                        <label class="form-label">税号</label>
                        <input type="text" class="form-input" placeholder="请输入税号（选填）">
                    </div>
                    <div class="form-group">
                        <label class="form-label">接收邮箱</label>
                        <input type="email" class="form-input" placeholder="请输入邮箱地址">
                    </div>
                    <button class="submit-btn" onclick="showModal('申请成功', '发票申请已提交，预计1-3个工作日开具')">提交申请</button>
                </div>
                <div style="padding: 15px;">
                    <div class="form-title">历史发票</div>
                    <div class="order-card" style="margin: 0;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <div style="font-weight: 600;">电子普通发票</div>
                                <div style="font-size: 12px; color: #999;">2024-04-20 | ¥268.00</div>
                            </div>
                            <button class="btn btn-outline" style="padding: 6px 12px;">查看</button>
                        </div>
                    </div>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 我的收藏
        function showFavorites() {
            document.getElementById('modal-title').textContent = '我的收藏';
            document.getElementById('modal-body').innerHTML = `
                <div class="favorite-tabs">
                    <div class="favorite-tab active">陪诊师</div>
                    <div class="favorite-tab">服务</div>
                </div>
                <div class="companion-list" style="padding: 15px;">
                    <div class="companion-card">
                        <div class="companion-avatar">👩</div>
                        <div class="companion-info">
                            <div class="companion-name">赵晓梅 <span class="tag">金牌</span></div>
                            <div class="companion-stats">
                                <span class="companion-rating">⭐ 4.9</span>
                                <span>服务328次</span>
                            </div>
                        </div>
                    </div>
                    <div class="companion-card">
                        <div class="companion-avatar" style="background: linear-gradient(135deg, #f093fb, #f5576c);">👩</div>
                        <div class="companion-info">
                            <div class="companion-name">钱文静 <span class="tag">银牌</span></div>
                            <div class="companion-stats">
                                <span class="companion-rating">⭐ 4.8</span>
                                <span>服务256次</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 耗材商城
        function showShop() {
            document.getElementById('modal-title').textContent = '耗材商城';
            document.getElementById('modal-body').innerHTML = `
                <div class="shop-banner">
                    <h3>🛒 医用耗材专区</h3>
                    <p>品质保障，价格实惠</p>
                </div>
                <div class="product-grid">
                    <div class="product-card" onclick="showModal('商品详情', '一次性医用口罩 50只装')">
                        <div class="product-img">😷</div>
                        <div class="product-info">
                            <div class="product-name">一次性医用口罩 50只装</div>
                            <div class="product-price">¥<span>29.9</span></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showModal('商品详情', '酒精消毒湿巾 80抽')">
                        <div class="product-img">🧻</div>
                        <div class="product-info">
                            <div class="product-name">酒精消毒湿巾 80抽</div>
                            <div class="product-price">¥<span>19.9</span></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showModal('商品详情', '医用纱布绷带套装')">
                        <div class="product-img">🩹</div>
                        <div class="product-info">
                            <div class="product-name">医用纱布绷带套装</div>
                            <div class="product-price">¥<span>35.0</span></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showModal('商品详情', '便携式药盒')">
                        <div class="product-img">💊</div>
                        <div class="product-info">
                            <div class="product-name">便携式分装药盒</div>
                            <div class="product-price">¥<span>15.8</span></div>
                        </div>
                    </div>
                </div>
                <div style="padding: 15px;">
                    <button class="btn btn-primary" style="width: 100%;">查看全部商品</button>
                </div>
            `;
            document.getElementById('modal').classList.add('show');
        }
        
        // 筛选订单
        function filterOrders(status) {
            document.querySelectorAll('.order-tab').forEach(t => t.classList.remove('active'));
            event.target.classList.add('active');
            showModal('订单筛选', '已切换到 ' + status + ' 订单列表');
        }
    </script>
</body>
</html>