编辑页面

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; -webkit-tap-highlight-color: transparent; }
        :root {
            --primary: #4F46E5; --primary-light: #818CF8; --success: #10B981; --warning: #F59E0B; --danger: #EF4444;
            --bg: #F8FAFC; --card: #FFFFFF; --text: #1E293B; --text-secondary: #64748B; --border: #E2E8F0;
        }
        body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', Helvetica, Arial, sans-serif; background: var(--bg); min-height: 100vh; color: var(--text); max-width: 430px; margin: 0 auto; }

        /* iPhone顶部 */
        .iphone-header { background: linear-gradient(135deg, var(--primary), var(--primary-light)); padding: 47px 20px 20px; color: #fff; position: sticky; top: 0; z-index: 100; }
        .iphone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 120px; height: 28px; background: #000; border-radius: 20px; }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .header-title { font-size: 18px; font-weight: 600; }
        .header-icon { font-size: 18px; cursor: pointer; }

        /* 统计卡片 - 全高度等高展示 */
        .stats-container { display: flex; gap: 10px; padding: 0 16px; margin-top: -20px; position: relative; z-index: 10; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .stats-container::-webkit-scrollbar { display: none; }
        .stat-card { flex: 1; min-width: 80px; max-width: 100px; background: var(--card); border-radius: 20px; padding: 24px 10px 20px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.12); border: 1px solid rgba(255,255,255,0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .stat-number { font-size: 36px; font-weight: 800; color: var(--primary); line-height: 1; }
        .stat-number.warning { color: var(--warning); } .stat-number.success { color: var(--success); } .stat-number.danger { color: var(--danger); }
        .stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 10px; font-weight: 600; white-space: nowrap; }
        .stat-trend { font-size: 11px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 2px; font-weight: 500; white-space: nowrap; }
        .trend-up { color: var(--success); } .trend-down { color: var(--danger); }

        /* 内容区 */
        .content { padding: 16px; padding-bottom: 90px; }

        /* 订单来源Tab - 一级联动 */
        .source-tabs { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 4px; }
        .source-tabs::-webkit-scrollbar { display: none; }
        .source-tab { padding: 10px 18px; background: var(--card); border-radius: 22px; font-size: 13px; white-space: nowrap; cursor: pointer; border: 1.5px solid var(--border); transition: all 0.25s ease; display: flex; align-items: center; gap: 8px; }
        .source-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 16px rgba(79,70,229,0.35); }
        .source-tab .badge { background: var(--danger); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 10px; min-width: 18px; text-align: center; }
        .source-tab.active .badge { background: #fff; color: var(--primary); }

        /* 订单卡片 */
        .order-card { background: var(--card); border-radius: 20px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        .order-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); }
        .order-source { display: flex; align-items: center; gap: 10px; }
        .source-logo { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
        .logo-meituan { background: #FFD100; color: #1a1a1a; } .logo-douyin { background: #161823; color: #fff; } .logo-xiang { background: var(--success); color: #fff; }
        .order-source-name { font-size: 14px; font-weight: 600; color: var(--text); }
        .order-id { font-size: 11px; color: var(--text-secondary); }
        .order-time { font-size: 11px; color: var(--text-secondary); }

        .order-main { padding: 18px; }
        .room-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
        .room-name { font-size: 17px; font-weight: 700; color: var(--text); }
        .room-price { font-size: 20px; font-weight: 800; color: var(--danger); }

        .order-details { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); margin-bottom: 14px; }
        .detail-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
        .detail-icon { font-size: 15px; }

        /* 来源特有信息 - 美团/抖音不同样式 */
        .source-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; }
        .badge-mt-group { background: #FFF7E6; color: #FA8C16; } .badge-mt-seg { background: #E6F7FF; color: #1677FF; }
        .badge-dy-live { background: #FFF0F5; color: #EB2778; } .badge-dy-search { background: #F0FFF0; color: #00C853; }
        .badge-other { background: #F3F4F6; color: var(--text-secondary); }

        .order-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

        .guest-row { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--border); }
        .guest-info { display: flex; align-items: center; gap: 12px; }
        .guest-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #E0E7FF, #C7D2FE); display: flex; align-items: center; justify-content: center; font-size: 22px; }
        .guest-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
        .guest-tag { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
        .tag-vip { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; } .tag-new { background: #FEF2F2; color: #DC2626; }
        .guest-phone { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

        .status-badge { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; }
        .status-pending { background: #FEF3C7; color: #B45309; } .status-confirmed { background: #DBEAFE; color: #1D4ED8; }
        .status-checked-in { background: #D1FAE5; color: #047857; } .status-checked-out { background: #F1F5F9; color: #64748B; }

        .order-actions { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
        .btn { padding: 10px 20px; border-radius: 22px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; }
        .btn:active { transform: scale(0.95); opacity: 0.9; }
        .btn-outline { background: var(--card); color: var(--primary); border: 1.5px solid var(--primary); }
        .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(79,70,229,0.35); }

        /* 底部导航 */
        .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--card); display: flex; justify-content: space-around; padding: 10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)); box-shadow: 0 -4px 20px rgba(0,0,0,0.06); z-index: 100; }
        .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; padding: 6px 20px; }
        .nav-item.active { color: var(--primary); } .nav-icon { font-size: 22px; } .nav-label { font-size: 10px; font-weight: 600; }

        /* 房间页 */
        .room-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        .room-card { background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        .room-img { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
        .room-content { padding: 14px; }
        .room-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
        .room-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
        .room-status { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
        .room-available { background: #D1FAE5; color: #047857; } .room-occupied { background: #FEF3C7; color: #B45309; } .room-cleaning { background: #DBEAFE; color: #1D4ED8; }

        /* 统计页 */
        .stat-section { background: var(--card); border-radius: 20px; padding: 20px; margin-bottom: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        .section-title { font-size: 16px; font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
        .section-icon { font-size: 20px; }
        .stat-row { display: flex; gap: 12px; }
        .stat-box { flex: 1; background: var(--bg); border-radius: 14px; padding: 16px 10px; text-align: center; }
        .stat-box-value { font-size: 24px; font-weight: 800; color: var(--primary); }
        .stat-box-value.warning { color: var(--warning); } .stat-box-value.success { color: var(--success); }
        .stat-box-label { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }

        .bar-chart { display: flex; align-items: flex-end; justify-content: space-between; height: 120px; padding: 10px 0; gap: 6px; }
        .bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .bar { width: 100%; max-width: 36px; border-radius: 6px 6px 0 0; }
        .bar-label { font-size: 11px; color: var(--text-secondary); }

        .func-list { background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        .func-item { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.2s; }
        .func-item:last-child { border-bottom: none; } .func-item:active { background: var(--bg); }
        .func-left { display: flex; align-items: center; gap: 14px; }
        .func-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .func-icon.blue { background: #DBEAFE; } .func-icon.green { background: #D1FAE5; } .func-icon.yellow { background: #FEF3C7; } .func-icon.purple { background: #EDE9FE; }
        .func-title { font-size: 15px; font-weight: 600; } .func-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
        .func-arrow { color: var(--text-secondary); font-size: 14px; }

        /* 我的页 */
        .profile-header { background: linear-gradient(135deg, var(--primary), var(--primary-light)); padding: 35px 20px; color: #fff; text-align: center; }
        .profile-avatar { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 14px; border: 3px solid rgba(255,255,255,0.3); }
        .profile-name { font-size: 20px; font-weight: 700; } .profile-id { font-size: 12px; opacity: 0.8; margin-top: 5px; }
        .profile-stats { display: flex; justify-content: center; gap: 35px; margin-top: 22px; }
        .profile-stat-value { font-size: 22px; font-weight: 800; } .profile-stat-label { font-size: 11px; opacity: 0.8; margin-top: 5px; }

        /* 弹窗 */
        .modal-overlay { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; height: 100%; background: rgba(0,0,0,0.4); display: none; align-items: flex-end; z-index: 200; }
        .modal-overlay.active { display: flex; animation: fadeIn 0.2s ease; }
        .modal-sheet { background: var(--card); border-radius: 24px 24px 0 0; width: 100%; max-height: 80vh; overflow-y: auto; }
        .modal-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 12px auto; }
        .modal-header { padding: 0 20px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .modal-title { font-size: 18px; font-weight: 700; } .modal-close { font-size: 26px; color: var(--text-secondary); cursor: pointer; }
        .modal-body { padding: 20px; }

        .room-select-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .room-option { padding: 16px; border: 2px solid var(--border); border-radius: 16px; cursor: pointer; transition: all 0.2s; }
        .room-option.selected { border-color: var(--primary); background: #EEF2FF; } .room-option.disabled { opacity: 0.5; }
        .room-option-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
        .room-option-info { font-size: 12px; color: var(--text-secondary); }

        .form-group { margin-bottom: 18px; }
        .form-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; display: block; }
        .form-input { width: 100%; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 14px; font-size: 14px; outline: none; background: var(--bg); }
        .form-input:focus { border-color: var(--primary); background: var(--card); }
        .form-row { display: flex; gap: 14px; } .form-row .form-group { flex: 1; }
        .btn-full { width: 100%; padding: 16px; border-radius: 16px; font-size: 16px; font-weight: 700; }

        .page { display: none; } .page.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .modal-sheet { animation: slideUp 0.3s ease; }
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: #fff; padding: 16px 32px; border-radius: 14px; font-size: 15px; z-index: 300; animation: toastIn 0.3s ease; }
        @keyframes toastIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

        /* 二级联动状态 */
        .source-tab .sub-count { font-size: 10px; color: var(--text-secondary); }
        .source-tab.active .sub-count { color: rgba(255,255,255,0.8); }
    </style>
</head>
<body>
    <!-- 订单页面 -->
    <div id="orderPage" class="page active">
        <div class="iphone-header">
            <div class="iphone-notch"></div>
            <div class="header-content">
                <div class="header-icon"></div>
                <div class="header-title">订单中心</div>
                <div class="header-icon">🔔</div>
            </div>
        </div>

        <!-- 统计卡片 - 调整高度 -->
        <div class="stats-container">
            <div class="stat-card" onclick="filterByStatus('all', this)" style="cursor:pointer;">
                <div class="stat-number">28</div>
                <div class="stat-label">今日订单</div>
                <div class="stat-trend trend-up">↑ 12%</div>
            </div>
            <div class="stat-card" onclick="filterByStatus('pending', this)" style="cursor:pointer;">
                <div class="stat-number warning">5</div>
                <div class="stat-label">待入住</div>
                <div class="stat-trend trend-down">↓ 2</div>
            </div>
            <div class="stat-card" onclick="filterByStatus('checked-in', this)" style="cursor:pointer;">
                <div class="stat-number success">18</div>
                <div class="stat-label">已入住</div>
                <div class="stat-trend trend-up">↑ 5</div>
            </div>
            <div class="stat-card" onclick="filterByStatus('checked-out', this)" style="cursor:pointer;">
                <div class="stat-number danger">2</div>
                <div class="stat-label">离店</div>
                <div class="stat-trend">-</div>
            </div>
        </div>

        <div class="content">
            <!-- 一级来源Tab -->
            <div class="source-tabs" id="sourceTabs">
                <div class="source-tab active" data-source="all" onclick="filterOrders('all', this)">全部<span class="badge">28</span></div>
                <div class="source-tab" data-source="meituan" onclick="filterOrders('meituan', this)">美团<span class="badge">12</span><span class="sub-count">散客5/团队7</span></div>
                <div class="source-tab" data-source="douyin" onclick="filterOrders('douyin', this)">抖音<span class="badge">10</span><span class="sub-count">直播5/搜索5</span></div>
                <div class="source-tab" data-source="other" onclick="filterOrders('other', this)">其他<span class="badge">6</span></div>
            </div>

            <!-- 订单列表 -->
            <div id="orderList">
                <!-- 美团散客订单 -->
                <div class="order-card" data-source="meituan" data-type="solo">
                    <div class="order-top">
                        <div class="order-source">
                            <div class="source-logo logo-meituan">M</div>
                            <div>
                                <div class="order-source-name">美团民宿</div>
                                <div class="order-id">订单号：MT20240423001</div>
                            </div>
                        </div>
                        <div class="order-time">10分钟前</div>
                    </div>
                    <div class="order-main">
                        <div class="room-row">
                            <div class="room-name">星空观景大床房</div>
                            <div class="room-price">¥288</div>
                        </div>
                        <div class="order-tag-row">
                            <span class="source-badge badge-mt-seg">散客</span>
                            <span class="source-badge badge-other">无早</span>
                        </div>
                        <div class="order-details">
                            <div class="detail-item"><span class="detail-icon">📅</span> 04-23 至 04-25</div>
                            <div class="detail-item"><span class="detail-icon">🛏️</span> 2晚</div>
                            <div class="detail-item"><span class="detail-icon">👤</span> 2人</div>
                            <div class="detail-item"><span class="detail-icon">🕐</span> 14:00入住</div>
                        </div>
                        <div class="guest-row">
                            <div class="guest-info">
                                <div class="guest-avatar">👨</div>
                                <div>
                                    <div class="guest-name">张先生 <span class="guest-tag tag-new">新客</span></div>
                                    <div class="guest-phone">138****8888</div>
                                </div>
                            </div>
                            <span class="status-badge status-pending">待入住</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button class="btn btn-outline" onclick="openRoomSelect()">选择房间</button>
                        <button class="btn btn-primary" onclick="openCheckIn()">办理入住</button>
                    </div>
                </div>

                <!-- 美团团队订单 -->
                <div class="order-card" data-source="meituan" data-type="group">
                    <div class="order-top">
                        <div class="order-source">
                            <div class="source-logo logo-meituan">M</div>
                            <div>
                                <div class="order-source-name">美团民宿</div>
                                <div class="order-id">订单号：MT20240423002</div>
                            </div>
                        </div>
                        <div class="order-time">30分钟前</div>
                    </div>
                    <div class="order-main">
                        <div class="room-row">
                            <div class="room-name">山景双床房 ×3间</div>
                            <div class="room-price">¥1,014</div>
                        </div>
                        <div class="order-tag-row">
                            <span class="source-badge badge-mt-group">团队</span>
                            <span class="source-badge badge-mt-seg">含早</span>
                            <span class="source-badge badge-other">可开发票</span>
                        </div>
                        <div class="order-details">
                            <div class="detail-item"><span class="detail-icon">📅</span> 04-23 至 04-26</div>
                            <div class="detail-item"><span class="detail-icon">🛏️</span> 3晚</div>
                            <div class="detail-item"><span class="detail-icon">👥</span> 6人3间</div>
                            <div class="detail-item"><span class="detail-icon">🕐</span> 12:00入住</div>
                        </div>
                        <div class="guest-row">
                            <div class="guest-info">
                                <div class="guest-avatar">👨‍👩‍👧</div>
                                <div>
                                    <div class="guest-name">王总 <span class="guest-tag tag-vip">VIP</span></div>
                                    <div class="guest-phone">团体负责人 | 139****9999</div>
                                </div>
                            </div>
                            <span class="status-badge status-pending">待入住</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button class="btn btn-outline" onclick="openRoomSelect()">批量排房</button>
                        <button class="btn btn-primary" onclick="openCheckIn()">办理入住</button>
                    </div>
                </div>

                <!-- 抖音直播订单 -->
                <div class="order-card" data-source="douyin" data-type="live">
                    <div class="order-top">
                        <div class="order-source">
                            <div class="source-logo logo-douyin">🎵</div>
                            <div>
                                <div class="order-source-name">抖音民宿</div>
                                <div class="order-id">订单号：DY20240423003</div>
                            </div>
                        </div>
                        <div class="order-time">25分钟前</div>
                    </div>
                    <div class="order-main">
                        <div class="room-row">
                            <div class="room-name">地中海亲子套房</div>
                            <div class="room-price">¥458</div>
                        </div>
                        <div class="order-tag-row">
                            <span class="source-badge badge-dy-live">直播间</span>
                            <span class="source-badge badge-other">专属价</span>
                            <span class="source-badge badge-other">赠送水果</span>
                        </div>
                        <div class="order-details">
                            <div class="detail-item"><span class="detail-icon">📅</span> 04-23 至 04-26</div>
                            <div class="detail-item"><span class="detail-icon">🛏️</span> 3晚</div>
                            <div class="detail-item"><span class="detail-icon">👤</span> 3人</div>
                            <div class="detail-item"><span class="detail-icon">📱</span>抖音券-50</div>
                        </div>
                        <div class="guest-row">
                            <div class="guest-info">
                                <div class="guest-avatar">👩</div>
                                <div>
                                    <div class="guest-name">李女士 <span class="guest-tag tag-vip">VIP</span></div>
                                    <div class="guest-phone">159****6666</div>
                                </div>
                            </div>
                            <span class="status-badge status-pending">待入住</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button class="btn btn-outline" onclick="openRoomSelect()">选择房间</button>
                        <button class="btn btn-primary" onclick="openCheckIn()">办理入住</button>
                    </div>
                </div>

                <!-- 抖音搜索订单 -->
                <div class="order-card" data-source="douyin" data-type="search">
                    <div class="order-top">
                        <div class="order-source">
                            <div class="source-logo logo-douyin">🎵</div>
                            <div>
                                <div class="order-source-name">抖音民宿</div>
                                <div class="order-id">订单号：DY20240423004</div>
                            </div>
                        </div>
                        <div class="order-time">45分钟前</div>
                    </div>
                    <div class="order-main">
                        <div class="room-row">
                            <div class="room-name">日式榻榻米</div>
                            <div class="room-price">¥218</div>
                        </div>
                        <div class="order-tag-row">
                            <span class="source-badge badge-dy-search">搜索</span>
                            <span class="source-badge badge-other">无早</span>
                        </div>
                        <div class="order-details">
                            <div class="detail-item"><span class="detail-icon">📅</span> 04-23 至 04-24</div>
                            <div class="detail-item"><span class="detail-icon">🛏️</span> 1晚</div>
                            <div class="detail-item"><span class="detail-icon">👤</span> 1人</div>
                            <div class="detail-item"><span class="detail-icon">🕐</span> 15:00入住</div>
                        </div>
                        <div class="guest-row">
                            <div class="guest-info">
                                <div class="guest-avatar">🧑</div>
                                <div>
                                    <div class="guest-name">王先生</div>
                                    <div class="guest-phone">177****3333</div>
                                </div>
                            </div>
                            <span class="status-badge status-confirmed">已排房</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button class="btn btn-primary" onclick="openCheckIn()">办理入住</button>
                    </div>
                </div>

                <!-- 外享订单 -->
                <div class="order-card" data-source="other" data-type="other">
                    <div class="order-top">
                        <div class="order-source">
                            <div class="source-logo logo-xiang">🍃</div>
                            <div>
                                <div class="order-source-name">外享民宿</div>
                                <div class="order-id">订单号：WX20240423005</div>
                            </div>
                        </div>
                        <div class="order-time">2小时前</div>
                    </div>
                    <div class="order-main">
                        <div class="room-row">
                            <div class="room-name">海景套房</div>
                            <div class="room-price">¥568</div>
                        </div>
                        <div class="order-tag-row">
                            <span class="source-badge badge-other">外享专享</span>
                            <span class="source-badge badge-other">含双早</span>
                        </div>
                        <div class="order-details">
                            <div class="detail-item"><span class="detail-icon">📅</span> 04-23 至 04-27</div>
                            <div class="detail-item"><span class="detail-icon">🛏️</span> 4晚</div>
                            <div class="detail-item"><span class="detail-icon">👤</span> 2人</div>
                            <div class="detail-item"><span class="detail-icon">🕐</span> 14:00入住</div>
                        </div>
                        <div class="guest-row">
                            <div class="guest-info">
                                <div class="guest-avatar">👨‍✈️</div>
                                <div>
                                    <div class="guest-name">陈先生 <span class="guest-tag tag-vip">VIP</span></div>
                                    <div class="guest-phone">186****7777</div>
                                </div>
                            </div>
                            <span class="status-badge status-checked-in">已入住</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button class="btn btn-outline" onclick="showToast('退房结算中...')">退房结算</button>
                    </div>
                </div>

                <!-- 携程订单 -->
                <div class="order-card" data-source="other" data-type="other">
                    <div class="order-top">
                        <div class="order-source">
                            <div class="source-logo" style="background:#00B0FF;color:#fff;font-size:11px;">携</div>
                            <div>
                                <div class="order-source-name">携程民宿</div>
                                <div class="order-id">订单号：CT20240423006</div>
                            </div>
                        </div>
                        <div class="order-time">3小时前</div>
                    </div>
                    <div class="order-main">
                        <div class="room-row">
                            <div class="room-name">樱花主题房</div>
                            <div class="room-price">¥328</div>
                        </div>
                        <div class="order-tag-row">
                            <span class="source-badge badge-other">携程专享</span>
                            <span class="source-badge badge-other">积分抵扣</span>
                        </div>
                        <div class="order-details">
                            <div class="detail-item"><span class="detail-icon">📅</span> 04-23 至 04-24</div>
                            <div class="detail-item"><span class="detail-icon">🛏️</span> 1晚</div>
                            <div class="detail-item"><span class="detail-icon">👤</span> 2人</div>
                            <div class="detail-item"><span class="detail-icon">🕐</span> 14:00入住</div>
                        </div>
                        <div class="guest-row">
                            <div class="guest-info">
                                <div class="guest-avatar">👩‍💼</div>
                                <div>
                                    <div class="guest-name">赵女士</div>
                                    <div class="guest-phone">155****5555</div>
                                </div>
                            </div>
                            <span class="status-badge status-checked-in">已入住</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        <button class="btn btn-outline" onclick="showToast('退房结算中...')">退房结算</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 房间页面 -->
    <div id="roomPage" class="page">
        <div class="iphone-header">
            <div class="iphone-notch"></div>
            <div class="header-content">
                <div class="header-icon" onclick="switchTab(0)">←</div>
                <div class="header-title">房间管理</div>
                <div class="header-icon">➕</div>
            </div>
        </div>
        <div class="stats-container">
            <div class="stat-card" onclick="filterRoomStatus('available', this)"><div class="stat-number success">12</div><div class="stat-label">可入住</div></div>
            <div class="stat-card" onclick="filterRoomStatus('occupied', this)"><div class="stat-number warning">8</div><div class="stat-label">已入住</div></div>
            <div class="stat-card" onclick="filterRoomStatus('cleaning', this)"><div class="stat-number">3</div><div class="stat-label">清洁中</div></div>
            <div class="stat-card" onclick="filterRoomStatus('repair', this)"><div class="stat-number danger">2</div><div class="stat-label">维修中</div></div>
        </div>
        <div class="content">
            <div class="source-tabs" id="roomTabs">
                <div class="source-tab active" onclick="filterRoomStatus('all', this)">全部房间</div>
                <div class="source-tab" onclick="filterRoomStatus('available', this)">可入住</div>
                <div class="source-tab" onclick="filterRoomStatus('occupied', this)">已入住</div>
                <div class="source-tab" onclick="filterRoomStatus('cleaning', this)">清洁中</div>
            </div>
            <div class="room-grid">
                <div class="room-card" data-status="available"><div class="room-img" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0);">🛏️</div><div class="room-content"><div class="room-title">星空观景大床房</div><div class="room-desc">2层 | 35㎡ | 1.8m大床</div><span class="room-status room-available">可入住</span></div></div>
                <div class="room-card" data-status="available"><div class="room-img" style="background:linear-gradient(135deg,#FEF3C7,#FDE68A);">🛋️</div><div class="room-content"><div class="room-title">地中海亲子套房</div><div class="room-desc">3层 | 50㎡ | 1.5m双床</div><span class="room-status room-available">可入住</span></div></div>
                <div class="room-card" data-status="occupied"><div class="room-img" style="background:linear-gradient(135deg,#DBEAFE,#BFDBFE);">🗼</div><div class="room-content"><div class="room-title">日式榻榻米</div><div class="room-desc">1层 | 28㎡ | 榻榻米</div><span class="room-status room-occupied">已入住</span></div></div>
                <div class="room-card" data-status="cleaning"><div class="room-img" style="background:linear-gradient(135deg,#FCE7F3,#FBCFE8);">🌸</div><div class="room-content"><div class="room-title">樱花主题房</div><div class="room-desc">2层 | 32㎡ | 1.5m大床</div><span class="room-status room-cleaning">清洁中</span></div></div>
                <div class="room-card" data-status="occupied"><div class="room-img" style="background:linear-gradient(135deg,#E0E7FF,#C7D2FE);">🏔️</div><div class="room-content"><div class="room-title">山景双床房</div><div class="room-desc">4层 | 40㎡ | 1.2m双床</div><span class="room-status room-occupied">已入住</span></div></div>
                <div class="room-card" data-status="available"><div class="room-img" style="background:linear-gradient(135deg,#D1FAE5,#99F6E4);">🌊</div><div class="room-content"><div class="room-title">海景套房</div><div class="room-desc">5层 | 60㎡ | 1.8m大床</div><span class="room-status room-available">可入住</span></div></div>
            </div>
        </div>
    </div>

    <!-- 统计页面 -->
    <div id="statsPage" class="page">
        <div class="iphone-header">
            <div class="iphone-notch"></div>
            <div class="header-content">
                <div class="header-icon">📅</div>
                <div class="header-title">数据统计</div>
                <div class="header-icon">📤</div>
            </div>
        </div>
        <div class="content">
            <div class="stat-section">
                <div class="section-title"><span class="section-icon">📊</span> 今日概览</div>
                <div class="stat-row">
                    <div class="stat-box" onclick="jumpToOrders('all')" style="cursor:pointer;"><div class="stat-box-value success">¥3,580</div><div class="stat-box-label">今日营收</div></div>
                    <div class="stat-box" onclick="jumpToOrders('all')" style="cursor:pointer;"><div class="stat-box-value">28</div><div class="stat-box-label">订单数</div></div>
                    <div class="stat-box" onclick="jumpToOrders('checked-in')" style="cursor:pointer;"><div class="stat-box-value">20</div><div class="stat-box-label">入住数</div></div>
                </div>
                <div class="stat-row" style="margin-top:12px;">
                    <div class="stat-box" onclick="jumpToOrders('pending')" style="cursor:pointer;"><div class="stat-box-value warning">85%</div><div class="stat-box-label">入住率</div></div>
                    <div class="stat-box" style="cursor:default;"><div class="stat-box-value success">4.8</div><div class="stat-box-label">好评率</div></div>
                    <div class="stat-box" style="cursor:default;"><div class="stat-box-value">¥128</div><div class="stat-box-label">均价</div></div>
                </div>
            </div>
            <div class="stat-section">
                <div class="section-title"><span class="section-icon">📱</span> 订单来源分布</div>
                <div class="stat-row">
                    <div class="stat-box" onclick="jumpToOrdersBySource('meituan')" style="cursor:pointer;"><div class="stat-box-value" style="color:#FFD100;">43%</div><div class="stat-box-label">美团 12单</div></div>
                    <div class="stat-box" onclick="jumpToOrdersBySource('douyin')" style="cursor:pointer;"><div class="stat-box-value" style="color:#000;">36%</div><div class="stat-box-label">抖音 10单</div></div>
                    <div class="stat-box" onclick="jumpToOrdersBySource('other')" style="cursor:pointer;"><div class="stat-box-value success">21%</div><div class="stat-box-label">其他 6单</div></div>
                </div>
            </div>
            <div class="stat-section">
                <div class="section-title"><span class="section-icon">📈</span> 近7天趋势</div>
                <div class="bar-chart">
                    <div class="bar-item">
                        <div style="font-size:13px;font-weight:700;color:var(--primary);">¥2,200</div>
                        <div class="bar" style="height:55px;background:var(--primary);"></div>
                        <span class="bar-label">周一</span>
                    </div>
                    <div class="bar-item">
                        <div style="font-size:13px;font-weight:700;color:var(--primary);">¥2,800</div>
                        <div class="bar" style="height:70px;background:var(--primary);"></div>
                        <span class="bar-label">周二</span>
                    </div>
                    <div class="bar-item">
                        <div style="font-size:13px;font-weight:700;color:var(--primary);">¥2,000</div>
                        <div class="bar" style="height:50px;background:var(--primary);"></div>
                        <span class="bar-label">周三</span>
                    </div>
                    <div class="bar-item">
                        <div style="font-size:13px;font-weight:700;color:var(--primary);">¥3,200</div>
                        <div class="bar" style="height:80px;background:var(--primary);"></div>
                        <span class="bar-label">周四</span>
                    </div>
                    <div class="bar-item">
                        <div style="font-size:13px;font-weight:700;color:var(--primary);">¥2,600</div>
                        <div class="bar" style="height:65px;background:var(--primary);"></div>
                        <span class="bar-label">周五</span>
                    </div>
                    <div class="bar-item">
                        <div style="font-size:13px;font-weight:700;color:var(--success);">¥3,600</div>
                        <div class="bar" style="height:90px;background:var(--success);"></div>
                        <span class="bar-label">周六</span>
                    </div>
                    <div class="bar-item">
                        <div style="font-size:13px;font-weight:700;color:var(--warning);">¥3,000</div>
                        <div class="bar" style="height:75px;background:var(--warning);"></div>
                        <span class="bar-label">周日</span>
                    </div>
                </div>
            </div>
            <div class="func-list">
                <div class="func-item" onclick="showToast('价格日历')"><div class="func-left"><div class="func-icon blue">📅</div><div><div class="func-title">价格日历</div><div class="func-desc">批量设置房价</div></div></div><span class="func-arrow">></span></div>
                <div class="func-item" onclick="showToast('房态同步中...')"><div class="func-left"><div class="func-icon green">🔄</div><div><div class="func-title">房态同步</div><div class="func-desc">同步美团/抖音房态</div></div></div><span class="func-arrow">></span></div>
                <div class="func-item" onclick="showToast('智能排单规则')"><div class="func-left"><div class="func-icon yellow">🤖</div><div><div class="func-title">智能排单规则</div><div class="func-desc">空房优先/连住优先</div></div></div><span class="func-arrow">></span></div>
                <div class="func-item" onclick="showToast('导出报表')"><div class="func-left"><div class="func-icon purple">📊</div><div><div class="func-title">财务报表</div><div class="func-desc">查看/导出营收报表</div></div></div><span class="func-arrow">></span></div>
            </div>
        </div>
    </div>

    <!-- 我的页面 -->
    <div id="myPage" class="page">
        <div class="profile-header">
            <div class="profile-avatar">🏠</div>
            <div class="profile-name">清雅居民宿</div>
            <div class="profile-id">ID: MS888888</div>
            <div class="profile-stats">
                <div class="profile-stat"><div class="profile-stat-value">25</div><div class="profile-stat-label">房间数</div></div>
                <div class="profile-stat"><div class="profile-stat-value">85%</div><div class="profile-stat-label">入住率</div></div>
                <div class="profile-stat"><div class="profile-stat-value">4.8</div><div class="profile-stat-label">评分</div></div>
            </div>
        </div>
        <div class="content">
            <div class="func-list">
                <div class="func-item" onclick="showToast('渠道管理')"><div class="func-left"><div class="func-icon blue">🔗</div><div><div class="func-title">渠道管理</div><div class="func-desc">美团/抖音/携程</div></div></div><span class="func-arrow">></span></div>
                <div class="func-item" onclick="showToast('房型管理')"><div class="func-left"><div class="func-icon green">🛏️</div><div><div class="func-title">房型管理</div><div class="func-desc">添加/编辑房型</div></div></div><span class="func-arrow">></span></div>
                <div class="func-item" onclick="showToast('入住规则')"><div class="func-left"><div class="func-icon yellow">📋</div><div><div class="func-title">入住规则</div><div class="func-desc">入住时间/人数限制</div></div></div><span class="func-arrow">></span></div>
                <div class="func-item" onclick="showToast('消息通知')"><div class="func-left"><div class="func-icon purple">🔔</div><div><div class="func-title">消息通知</div><div class="func-desc">订单/异常提醒</div></div></div><span class="func-arrow">></span></div>
            </div>
            <div class="func-list" style="margin-top:16px;">
                <div class="func-item" onclick="showToast('帮助中心')"><div class="func-left"><div class="func-icon blue">❓</div><div><div class="func-title">帮助中心</div><div class="func-desc">使用指南/常见问题</div></div></div><span class="func-arrow">></span></div>
                <div class="func-item" onclick="showToast('联系客服')"><div class="func-left"><div class="func-icon green">📞</div><div><div class="func-title">联系客服</div><div class="func-desc">7x24小时在线</div></div></div><span class="func-arrow">></span></div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item active" onclick="switchTab(0)"><div class="nav-icon">📋</div><div class="nav-label">订单</div></div>
        <div class="nav-item" onclick="switchTab(1)"><div class="nav-icon">🛏️</div><div class="nav-label">房间</div></div>
        <div class="nav-item" onclick="switchTab(2)"><div class="nav-icon">📊</div><div class="nav-label">统计</div></div>
        <div class="nav-item" onclick="switchTab(3)"><div class="nav-icon">👤</div><div class="nav-label">我的</div></div>
    </div>

    <!-- 选择房间弹窗 -->
    <div class="modal-overlay" id="roomModal">
        <div class="modal-sheet">
            <div class="modal-handle"></div>
            <div class="modal-header"><div class="modal-title">选择房间</div><div class="modal-close" onclick="closeModal('roomModal')">×</div></div>
            <div class="modal-body">
                <p style="font-size:13px;color:var(--text-secondary);margin-bottom:14px;">符合入住要求的空房（4间）</p>
                <div class="room-select-grid">
                    <div class="room-option selected" onclick="selectRoom(this)"><div class="room-option-title">101 星空观景大床房</div><div class="room-option-info">2层 | 35㎡ | 1.8m大床</div></div>
                    <div class="room-option" onclick="selectRoom(this)"><div class="room-option-title">201 亲子套房</div><div class="room-option-info">3层 | 50㎡ | 1.5m双床</div></div>
                    <div class="room-option" onclick="selectRoom(this)"><div class="room-option-title">301 海景套房</div><div class="room-option-info">5层 | 60㎡ | 1.8m大床</div></div>
                    <div class="room-option disabled"><div class="room-option-title">102 日式榻榻米</div><div class="room-option-info">已入住</div></div>
                </div>
                <button class="btn btn-primary btn-full" onclick="confirmRoom()">确认排房</button>
            </div>
        </div>
    </div>

    <!-- 入住办理弹窗 -->
    <div class="modal-overlay" id="checkInModal">
        <div class="modal-sheet">
            <div class="modal-handle"></div>
            <div class="modal-header"><div class="modal-title">办理入住</div><div class="modal-close" onclick="closeModal('checkInModal')">×</div></div>
            <div class="modal-body">
                <div class="form-group"><label class="form-label">入住人信息</label><input type="text" class="form-input" value="张先生 138****8888" readonly></div>
                <div class="form-row">
                    <div class="form-group"><label class="form-label">房号</label><input type="text" class="form-input" value="101" readonly></div>
                    <div class="form-group"><label class="form-label">房型</label><input type="text" class="form-input" value="星空观景大床房" readonly></div>
                </div>
                <div class="form-row">
                    <div class="form-group"><label class="form-label">入住日期</label><input type="text" class="form-input" value="2024-04-23" readonly></div>
                    <div class="form-group"><label class="form-label">离店日期</label><input type="text" class="form-input" value="2024-04-25" readonly></div>
                </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>
                <button class="btn btn-primary btn-full" onclick="confirmCheckIn()">确认入住</button>
            </div>
        </div>
    </div>

    <script>
        // Tab切换
        function switchTab(index) {
            const navItems = document.querySelectorAll('.nav-item');
            const pages = ['orderPage', 'roomPage', 'statsPage', 'myPage'];
            navItems.forEach((item, i) => item.classList.toggle('active', i === index));
            pages.forEach((page, i) => document.getElementById(page).classList.toggle('active', i === index));
            window.scrollTo(0, 0);
        }

        // 数据穿透 - 状态筛选
        function filterByStatus(status, el) {
            document.querySelectorAll('.stat-card').forEach(c => c.style.outline = 'none');
            el.style.outline = '2px solid var(--primary)';
            
            const cards = document.querySelectorAll('.order-card');
            let count = 0;
            cards.forEach(card => {
                const badge = card.querySelector('.status-badge');
                let cardStatus = '';
                if (badge.classList.contains('status-pending')) cardStatus = 'pending';
                else if (badge.classList.contains('status-confirmed')) cardStatus = 'pending';
                else if (badge.classList.contains('status-checked-in')) cardStatus = 'checked-in';
                else if (badge.classList.contains('status-checked-out')) cardStatus = 'checked-out';
                
                if (status === 'all' || cardStatus === status) {
                    card.style.display = 'block';
                    count++;
                } else {
                    card.style.display = 'none';
                }
            });
            
            document.querySelectorAll('#sourceTabs .source-tab').forEach(t => t.classList.remove('active'));
            document.querySelector('#sourceTabs .source-tab').classList.add('active');
            
            var statusText = status === 'all' ? '全部' : (status === 'pending' ? '待入住' : (status === 'checked-in' ? '已入住' : '离店'));
            showToast(statusText + '订单 (' + count + '单)');
        }

        // 统计页数据穿透 - 按状态跳转到订单页
        function jumpToOrders(status) {
            switchTab(0);
            setTimeout(function() {
                filterByStatus(status, document.querySelectorAll('.stat-card')[0]);
                showToast('已跳转到订单列表');
            }, 100);
        }

        // 统计页数据穿透 - 按来源跳转到订单页
        function jumpToOrdersBySource(source) {
            switchTab(0);
            setTimeout(function() {
                filterOrders(source, document.querySelector('[data-source="' + source + '"]'));
                showToast('已筛选 ' + (source === 'meituan' ? '美团' : (source === 'douyin' ? '抖音' : '其他')) + ' 订单');
            }, 100);
        }

        // 房间状态筛选
        function filterRoomStatus(status, el) {
            // 高亮当前选中的元素
            if (el.classList.contains('source-tab')) {
                document.querySelectorAll('#roomTabs .source-tab').forEach(t => t.classList.remove('active'));
                el.classList.add('active');
            } else if (el.classList.contains('stat-card')) {
                document.querySelectorAll('#roomPage .stat-card').forEach(c => c.style.outline = 'none');
                el.style.outline = '2px solid var(--primary)';
            }
            
            const cards = document.querySelectorAll('.room-card');
            let count = 0;
            cards.forEach(card => {
                if (status === 'all' || card.dataset.status === status) {
                    card.style.display = 'block';
                    count++;
                } else {
                    card.style.display = 'none';
                }
            });
            
            var statusText = status === 'all' ? '全部房间' : (status === 'available' ? '可入住' : (status === 'occupied' ? '已入住' : (status === 'cleaning' ? '清洁中' : '维修中')));
            showToast(statusText + ' (' + count + '间)');
        }

        // 一级联动 - 来源筛选
        function filterOrders(source, el) {
            if (el && el.classList.contains('source-tab')) {
                document.querySelectorAll('#sourceTabs .source-tab').forEach(t => t.classList.remove('active'));
                el.classList.add('active');
            }
            document.querySelectorAll('.stat-card').forEach(c => c.style.outline = 'none');
            
            const cards = document.querySelectorAll('.order-card');
            cards.forEach(card => {
                if (source === 'all') {
                    card.style.display = 'block';
                } else {
                    card.style.display = card.dataset.source === source ? 'block' : 'none';
                }
            });
        }

        // 弹窗
        function openRoomSelect() { document.getElementById('roomModal').classList.add('active'); }
        function openCheckIn() { document.getElementById('checkInModal').classList.add('active'); }
        function closeModal(id) { document.getElementById(id).classList.remove('active'); }

        function selectRoom(el) {
            document.querySelectorAll('.room-option:not(.disabled)').forEach(opt => opt.classList.remove('selected'));
            el.classList.add('selected');
        }

        function confirmRoom() { closeModal('roomModal'); showToast('已成功排房！'); }
        function confirmCheckIn() { closeModal('checkInModal'); showToast('入住办理成功！'); }

        function showToast(msg) {
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = msg;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 1800);
        }

        // 点击遮罩关闭
        document.querySelectorAll('.modal-overlay').forEach(modal => {
            modal.addEventListener('click', function(e) { if (e.target === this) this.classList.remove('active'); });
        });
    </script>
</body>
</html>