自助棋牌�?/title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> <script src="/config.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding-bottom: 80px; } .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; color: white; } .header-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; } .location-info h1 { font-size: 22px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .location-info .address { font-size: 14px; opacity: 0.9; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: opacity 0.3s; } .location-info .address:hover { opacity: 1; } .location-info .address .distance { background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 10px; font-size: 12px; } .header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .action-btn { background: rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 15px; font-size: 12px; cursor: pointer; transition: background 0.3s; white-space: nowrap; } .action-btn:hover { background: rgba(255,255,255,0.3); } .header-features { display: flex; gap: 10px; flex-wrap: wrap; } /* 快捷操作按钮 */ .quick-actions { display: flex; gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.2); } .quick-action-btn { flex: 1; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; padding: 12px 8px; color: white; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 4px; } .quick-action-btn:hover { background: rgba(255,255,255,0.25); transform: translateY(-2px); } .quick-action-btn .icon { font-size: 20px; } /* 底部导航 */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: white; display: flex; justify-content: space-around; padding: 10px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 100; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 5px 20px; color: #999; text-decoration: none; } .nav-item.active { color: #667eea; } .nav-icon { font-size: 22px; } .nav-text { font-size: 11px; } .feature-tag { background: rgba(255,255,255,0.15); padding: 4px 10px; border-radius: 12px; font-size: 12px; display: flex; align-items: center; gap: 4px; } /* 导航选项样式 */ .nav-option { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.3s; } .nav-option:hover { background: #f8f9fa; } .nav-option:last-child { border-bottom: none; } .nav-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 13px; font-weight: 700; margin-right: 15px; flex-shrink: 0; } .nav-info { flex: 1; } .nav-name { font-size: 16px; font-weight: 500; color: #333; margin-bottom: 4px; } .nav-desc { font-size: 13px; color: #999; } .nav-arrow { color: #ccc; font-size: 18px; } /* 相片册样�?*/ .photo-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 20px; max-height: 70vh; overflow-y: auto; } .photo-item { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .photo-item img { width: 100%; height: 150px; object-fit: cover; } .photo-caption { padding: 10px; text-align: center; font-size: 13px; color: #666; background: #f8f9fa; } /* 到店指引样式 */ .guide-content { display: flex; flex-direction: column; gap: 15px; } .guide-item { display: flex; gap: 15px; padding: 15px; background: #f8f9fa; border-radius: 12px; } .guide-icon { font-size: 28px; width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .guide-text h4 { font-size: 15px; color: #333; margin-bottom: 5px; } .guide-text p { font-size: 13px; color: #666; margin-bottom: 3px; } .container { max-width: 600px; margin: 0 auto; padding: 20px; } .weekend-banner { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 12px 20px; border-radius: 12px; margin-bottom: 20px; text-align: center; font-size: 14px; box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .room-card { background: white; border-radius: 20px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; } .room-card:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0,0,0,0.15); } .room-image { width: 100%; height: 220px; display: flex; align-items: flex-end; justify-content: flex-start; color: white; position: relative; overflow: hidden; } .room-image-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); z-index: 1; } .room-name-overlay { position: relative; z-index: 2; font-size: 24px; font-weight: 700; padding: 20px; text-shadow: 2px 2px 8px rgba(0,0,0,0.5); } .room-info { padding: 20px; } .room-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .room-name { font-size: 20px; font-weight: 700; color: #333; } .room-type { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; } .room-prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; } .price-item { background: #f8f9fa; padding: 12px; border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.3s; border: 2px solid transparent; } .price-item:hover { border-color: #667eea; background: #f0f4ff; } .price-item .label { font-size: 12px; color: #666; margin-bottom: 4px; } .price-item .value { font-size: 18px; font-weight: 700; color: #ff6b6b; } .price-item .value small { font-size: 12px; color: #999; font-weight: 400; } .room-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid #eee; } .status-badge { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; } .status-wrapper { display: flex; align-items: center; gap: 10px; } .end-time-badge { background: rgba(255, 255, 255, 0.9); color: #ff6b6b; padding: 6px 12px; border-radius: 15px; font-size: 12px; font-weight: 600; border: 1px solid #ff6b6b; } .status-available { background: #d4edda; color: #155724; } .status-available::before { content: ''; width: 8px; height: 8px; background: #28a745; border-radius: 50%; animation: blink 2s infinite; } .status-occupied { background: #f8d7da; color: #721c24; } .status-occupied::before { content: ''; width: 8px; height: 8px; background: #dc3545; border-radius: 50%; } .status-cleaning { background: #fff3cd; color: #856404; } .status-cleaning::before { content: ''; width: 8px; height: 8px; background: #ffc107; border-radius: 50%; animation: blink 1s infinite; } .status-maintenance { background: #e2e3e5; color: #383d41; } .status-maintenance::before { content: ''; width: 8px; height: 8px; background: #6c757d; border-radius: 50%; } .status-reserved { background: #cce5ff; color: #004085; } .status-reserved::before { content: ''; width: 8px; height: 8px; background: #007bff; border-radius: 50%; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* 房间状态遮�?*/ .room-status-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 3; border-radius: 20px 20px 0 0; } .room-status-overlay.occupied { background: rgba(220, 53, 69, 0.85); } .room-status-overlay.cleaning { background: rgba(255, 193, 7, 0.85); } .room-status-overlay.maintenance { background: rgba(108, 117, 125, 0.85); } .room-status-overlay.reserved { background: rgba(0, 123, 255, 0.85); } .room-status-text { color: white; font-size: 24px; font-weight: 700; text-shadow: 2px 2px 8px rgba(0,0,0,0.3); padding: 10px 30px; border: 3px solid white; border-radius: 12px; } .room-status-overlay.cleaning .room-status-text { color: #856404; border-color: #856404; text-shadow: none; } .book-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px 28px; border-radius: 25px; font-size: 15px; font-weight: 500; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } .book-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); } .book-btn:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; transform: none; } /* 24小时时间�?- 新样�?*/ .timeline-new { margin: 15px 0 10px; padding: 10px 0; border-top: 1px solid #eee; } .timeline-progress { position: relative; height: 16px; background: #f5f5f5; border-radius: 2px; margin-bottom: 8px; overflow: hidden; } .progress-segment { position: absolute; top: 2px; bottom: 2px; background: #28a745; border-radius: 2px; } .progress-segment.current { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .timeline-hours { display: flex; padding: 0; position: relative; height: 20px; } .hour-label { font-size: 11px; color: #666; text-align: center; position: absolute; transform: translateX(-50%); white-space: nowrap; } .hour-label.current { color: #667eea; font-weight: 700; } .hour-label.next-day { color: #999; font-size: 10px; } .loading { text-align: center; padding: 60px 20px; color: white; } .loading-spinner { width: 50px; height: 50px; border: 4px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; } @keyframes spin { to { transform: rotate(360deg); } } .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); display: flex; justify-content: space-around; padding: 10px 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 100; } .tab-item { text-align: center; color: #999; font-size: 12px; padding: 5px 20px; cursor: pointer; transition: color 0.3s; } .tab-item.active { color: #667eea; } .tab-icon { font-size: 24px; margin-bottom: 4px; } .error-message { text-align: center; padding: 40px 20px; color: white; } .error-message button { margin-top: 20px; padding: 12px 30px; background: white; color: #667eea; border: none; border-radius: 25px; font-size: 15px; cursor: pointer; font-weight: 500; } /* 弹窗样式 */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: none; align-items: flex-end; justify-content: center; z-index: 1000; padding: 0; overflow-y: auto; } .modal-overlay.active { display: flex; } /* 锁定背景滚动 */ body.modal-open { overflow: hidden; position: fixed; width: 100%; height: 100%; } .modal-content { background: white; border-radius: 20px 20px 0 0; width: 100%; max-width: 600px; max-height: 85vh; overflow-y: auto; animation: modalSlideUp 0.3s ease; margin: 0 auto; } @media (min-width: 600px) { .modal-content { border-radius: 20px; margin: auto; } } @keyframes modalSlideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 20px 20px 0 0; } .modal-header h3 { font-size: 18px; margin-bottom: 5px; } .modal-header p { font-size: 14px; opacity: 0.9; } .modal-body { padding: 20px; } .form-group { margin-bottom: 20px; } .form-label { display: block; margin-bottom: 8px; color: #666; font-size: 14px; font-weight: 500; } .form-select { width: 100%; padding: 14px; border: 2px solid #e8e8e8; border-radius: 12px; font-size: 16px; font-family: inherit; background: white; cursor: pointer; } .form-select:focus { outline: none; border-color: #667eea; } .time-display { background: #f8f9fa; border-radius: 12px; padding: 16px; margin-bottom: 20px; } .time-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; } .time-row:last-child { margin-bottom: 0; padding-top: 10px; border-top: 1px dashed #ddd; font-weight: 700; font-size: 16px; color: #333; } .price-highlight { color: #ff6b6b; font-size: 24px; font-weight: 700; } .modal-footer { padding: 0 20px 20px; display: flex; gap: 12px; } .btn { flex: 1; padding: 14px; border-radius: 12px; font-size: 16px; font-weight: 500; cursor: pointer; border: none; transition: all 0.3s; } .btn-secondary { background: #f0f0f0; color: #666; } .btn-secondary:hover { background: #e0e0e0; } .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } </style> </head> <body> <div class="header"> <div class="header-top"> <div class="location-info"> <h1>🎲 自助棋牌�?/h1> <p class="address" onclick="showNavigation()"> <span id="storeAddress">📍 加载�?..</span> <span class="distance" id="storeDistance">距您 --</span> </p> </div> <div class="header-actions"> <span class="action-btn" onclick="showEnvironment()">环境</span> <span class="action-btn" onclick="showGuide()">到店指引 ></span> <span class="action-btn" onclick="connectWifi()">门店WiFi</span> </div> </div> <div class="header-features"> <span class="feature-tag">🏪 24小时营业</span> <span class="feature-tag">🚗 有停车位</span> <span class="feature-tag">📶 免费Wi-Fi</span> <span class="feature-tag">🔊 智能语音</span> </div> <div class="quick-actions"> <div class="quick-action-btn" onclick="openDoor()"> <span class="icon">🚪</span> <span>到店开�?/span> </div> <div class="quick-action-btn" onclick="renewOrder()"> <span class="icon">⏱️</span> <span>续单</span> </div> <div class="quick-action-btn" onclick="recharge()"> <span class="icon">💎</span> <span>特惠充�?/span> </div> </div> </div> <div class="container" id="app"> <div class="loading"> <div class="loading-spinner"></div> <div>正在加载房间信息...</div> </div> </div> <div class="tab-bar"> <div class="tab-item active" onclick="showHome()"> <div class="tab-icon">🏠</div> <div>首页</div> </div> <div class="tab-item" onclick="showOrders()"> <div class="tab-icon">📋</div> <div>订单</div> </div> <div class="tab-item" onclick="showProfile()"> <div class="tab-icon">👤</div> <div>我的</div> </div> </div>  <div class="modal-overlay" id="navModal"> <div class="modal-content" style="max-width: 320px;"> <div class="modal-header"> <h3>选择导航应用</h3> <p id="navStoreName">加载�?..</p> </div> <div class="modal-body" style="padding: 0;"> <div class="nav-option" onclick="openMap('amap')"> <div class="nav-icon" style="background: #0091ff;">高德</div> <div class="nav-info"> <div class="nav-name">高德地图</div> <div class="nav-desc">推荐 · 精准导航</div> </div> <div class="nav-arrow">></div> </div> <div class="nav-option" onclick="openMap('baidu')"> <div class="nav-icon" style="background: #2932e1;">百度</div> <div class="nav-info"> <div class="nav-name">百度地图</div> <div class="nav-desc">智能路线规划</div> </div> <div class="nav-arrow">></div> </div> <div class="nav-option" onclick="openMap('tencent')"> <div class="nav-icon" style="background: #00b86b;">腾讯</div> <div class="nav-info"> <div class="nav-name">腾讯地图</div> <div class="nav-desc">微信一键导�?/div> </div> <div class="nav-arrow">></div> </div> </div> <div class="modal-footer" style="padding: 15px;"> <button class="btn btn-secondary" onclick="closeNavModal()" style="width: 100%;">取消</button> </div> </div> </div>  <div class="modal-overlay" id="environmentModal"> <div class="modal-content" style="max-width: 90%; max-height: 90vh;"> <div class="modal-header"> <h3>🏠 店铺环境</h3> <button onclick="closeEnvironmentModal()" style="background: none; border: none; font-size: 24px; cursor: pointer;">×</button> </div> <div class="modal-body" style="padding: 0;"> <div class="photo-gallery"> <div class="photo-item"> <img src="image/store/entrance.jpg" alt="店铺门头" onerror="this.src='https://via.placeholder.com/300x200?text=店铺门头'"> <p class="photo-caption">店铺门头</p> </div> <div class="photo-item"> <img src="image/store/lobby.jpg" alt="大厅环境" onerror="this.src='https://via.placeholder.com/300x200?text=大厅环境'"> <p class="photo-caption">大厅环境</p> </div> <div class="photo-item"> <img src="image/store/room1.jpg" alt="棋牌�?" onerror="this.src='https://via.placeholder.com/300x200?text=棋牌�?'"> <p class="photo-caption">棋牌�?壹雀天和</p> </div> <div class="photo-item"> <img src="image/store/room2.jpg" alt="棋牌�?" onerror="this.src='https://via.placeholder.com/300x200?text=棋牌�?'"> <p class="photo-caption">棋牌�?贰发顺发</p> </div> <div class="photo-item"> <img src="image/store/room3.jpg" alt="棋牌�?" onerror="this.src='https://via.placeholder.com/300x200?text=棋牌�?'"> <p class="photo-caption">棋牌�?叁连金杠</p> </div> <div class="photo-item"> <img src="image/store/facility.jpg" alt="设施配套" onerror="this.src='https://via.placeholder.com/300x200?text=设施配套'"> <p class="photo-caption">设施配套</p> </div> </div> </div> </div> </div>  <div class="modal-overlay" id="guideModal"> <div class="modal-content" style="max-width: 400px;"> <div class="modal-header"> <h3>📍 到店指引</h3> <button onclick="closeGuideModal()" style="background: none; border: none; font-size: 24px; cursor: pointer;">×</button> </div> <div class="modal-body"> <div class="guide-content"> <div class="guide-item"> <div class="guide-icon">🏢</div> <div class="guide-text"> <h4>店铺位置</h4> <p>广州市番禺区市桥街道桥兴大道160�?05�?/p> <p style="font-size: 12px; color: #666;">四个朋友·自助棋牌(桥兴大道天和�?</p> </div> </div> <div class="guide-item"> <div class="guide-icon">🚇</div> <div class="guide-text"> <h4>地铁出行</h4> <p>3号线市桥站C出口</p> <p style="font-size: 12px; color: #666;">出站后步行约800米，�?0分钟</p> </div> </div> <div class="guide-item"> <div class="guide-icon">🚌</div> <div class="guide-text"> <h4>公交出行</h4> <p>桥兴大道站：�?路、番5路、番11�?/p> <p style="font-size: 12px; color: #666;">下车后步行约200�?/p> </div> </div> <div class="guide-item"> <div class="guide-icon">🚗</div> <div class="guide-text"> <h4>自驾停车</h4> <p>大厦地下停车�?/p> <p style="font-size: 12px; color: #666;">�?小时免费，超�?�?小时</p> </div> </div> <div class="guide-item"> <div class="guide-icon">📞</div> <div class="guide-text"> <h4>联系电话</h4> <p>18022324102</p> <p style="font-size: 12px; color: #666;">找不到位置可电话咨询</p> </div> </div> </div> <div style="margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 8px;"> <p style="font-size: 13px; color: #666; text-align: center;"> 💡 建议提前10分钟到店，以便顺利找到房�? </p> </div> </div> <div class="modal-footer"> <button class="btn btn-primary" onclick="openNavigation()" style="width: 100%;">🧭 开始导�?/button> </div> </div> </div>  <div class="modal-overlay" id="wifiModal"> <div class="modal-content" style="max-width: 360px;"> <div class="modal-header"> <h3>📶 门店WiFi</h3> <button onclick="closeWifiModal()" style="background: none; border: none; font-size: 24px; cursor: pointer;">×</button> </div> <div class="modal-body" style="text-align: center;"> <div class="wifi-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 16px; margin-bottom: 20px;"> <div style="font-size: 48px; margin-bottom: 15px;">📶</div> <h4 style="font-size: 20px; margin-bottom: 10px;">免费WiFi</h4> <div style="background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px; margin: 15px 0;"> <p style="font-size: 14px; margin-bottom: 8px;">WiFi名称</p> <p style="font-size: 24px; font-weight: bold; font-family: monospace;">Mahjong-Guest</p> </div> <div style="background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px;"> <p style="font-size: 14px; margin-bottom: 8px;">WiFi密码</p> <p style="font-size: 24px; font-weight: bold; font-family: monospace;">88888888</p> </div> </div> <div class="wifi-steps" style="text-align: left;"> <h4 style="margin-bottom: 15px; color: #333;">连接步骤�?/h4> <div class="step-item" style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 10px; background: #f8f9fa; border-radius: 8px;"> <span style="background: #667eea; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;">1</span> <p style="font-size: 13px; color: #666;">打开手机WiFi设置</p> </div> <div class="step-item" style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 10px; background: #f8f9fa; border-radius: 8px;"> <span style="background: #667eea; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;">2</span> <p style="font-size: 13px; color: #666;">选择WiFi�?strong>Mahjong-Guest</strong></p> </div> <div class="step-item" style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 10px; background: #f8f9fa; border-radius: 8px;"> <span style="background: #667eea; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;">3</span> <p style="font-size: 13px; color: #666;">输入密码�?strong>88888888</strong></p> </div> <div class="step-item" style="display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: #f8f9fa; border-radius: 8px;"> <span style="background: #667eea; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;">4</span> <p style="font-size: 13px; color: #666;">连接成功后即可免费上�?/p> </div> </div> <div style="margin-top: 20px; padding: 15px; background: #e8f5e9; border-radius: 8px;"> <p style="font-size: 13px; color: #2e7d32;"> �?连接WiFi后可使用店内智能语音助手 </p> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="copyWifiPassword()" style="width: 100%;">📋 复制密码</button> </div> </div> </div>  <div class="modal-overlay" id="quickBookModal"> <div class="modal-content"> <div class="modal-header"> <h3 id="modalRoomName">房间名称</h3> <p id="modalPackageInfo">套餐信息</p> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">📅 选择日期</label> <select class="form-select" id="modalDate">  </select> </div> <div class="form-group"> <label class="form-label">�?开始时�?/label> <select class="form-select" id="modalStartTime">  </select> </div> <div class="form-group"> <label class="form-label">🏁 结束时间</label> <div class="form-select" id="modalEndTimeDisplay" style="background: #f5f5f5; color: #666; cursor: not-allowed;"> --:-- </div> </div> <div class="time-display"> <div class="time-row"> <span>结束时间</span> <span id="modalEndTime">--:--</span> </div> <div class="time-row"> <span>预约时长</span> <span id="modalDuration">--</span> </div> <div class="time-row"> <span>合计金额</span> <span class="price-highlight" id="modalPrice">¥0</span> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal()">取消</button> <button class="btn btn-primary" onclick="confirmBooking()">确认预约</button> </div> </div> </div>  <div class="modal-overlay" id="customBookModal"> <div class="modal-content"> <div class="modal-header"> <h3 id="customModalRoomName">房间名称</h3> <p>自定义时长预�?/p> </div> <div class="modal-body"> <div class="form-group"> <label class="form-label">📅 选择日期</label> <select class="form-select" id="customModalDate">  </select> </div> <div class="form-group"> <label class="form-label">�?开始时�?/label> <select class="form-select" id="customModalStartTime">  </select> </div> <div class="form-group"> <label class="form-label">⏱️ 预约时长</label> <select class="form-select" id="customModalDuration"> <option value="1">1小时</option> <option value="2">2小时</option> <option value="3">3小时</option> <option value="4" selected>4小时</option> <option value="5">5小时</option> <option value="6">6小时</option> <option value="7">7小时</option> <option value="8">8小时</option> <option value="9">9小时</option> <option value="10">10小时</option> </select> </div> <div class="form-group"> <label class="form-label">🏁 结束时间</label> <div class="form-select" id="customModalEndTimeDisplay" style="background: #f5f5f5; color: #666; cursor: not-allowed;"> --:-- </div> </div> <div class="time-display"> <div class="time-row"> <span>结束时间</span> <span id="customModalEndTime">--:--</span> </div> <div class="time-row"> <span>单价</span> <span id="customModalUnitPrice">¥0/�?/span> </div> <div class="time-row"> <span>合计金额</span> <span class="price-highlight" id="customModalPrice">¥0</span> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeCustomModal()">取消</button> <button class="btn btn-primary" onclick="confirmCustomBooking()">确认预约</button> </div> </div> </div> <script> // API_BASE已通过config.js全局配置 let roomsData = []; let currentRoom = null; let currentPackage = null; let storeInfo = null; // 加载店铺信息 async function loadStoreInfo() { // 临时硬编码店铺信息（解决数据库字符集问题�? storeInfo = { name: '四个朋友·自助棋牌(桥兴大道天和�?', address: '广州市番禺区市桥街道桥兴大道160�?05�?, phone: '18022324102', lat: '22.9385', lng: '113.3842' }; // 更新页面显示的店铺信�? document.getElementById('storeAddress').textContent = '📍 ' + storeInfo.name; document.getElementById('navStoreName').textContent = storeInfo.name; // 如果有经纬度，计算距�? if (storeInfo.lat && storeInfo.lng && navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { const distance = calculateDistance( position.coords.latitude, position.coords.longitude, parseFloat(storeInfo.lat), parseFloat(storeInfo.lng) ); document.getElementById('storeDistance').textContent = `距您 ${distance}`; }, () => { document.getElementById('storeDistance').textContent = ''; } ); } else { document.getElementById('storeDistance').textContent = ''; } } // 计算两点间距�? function calculateDistance(lat1, lng1, lat2, lng2) { const R = 6371; // 地球半径 km const dLat = (lat2 - lat1) * Math.PI / 180; const dLng = (lng2 - lng1) * Math.PI / 180; const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLng/2) * Math.sin(dLng/2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); const distance = R * c; if (distance < 1) { return Math.round(distance * 1000) + 'm'; } else { return distance.toFixed(1) + 'km'; } } // 房间图片映射 const roomImages = { '壹雀天和': 'image/壹雀天和/1.jpg', '贰发顺发': 'image/贰发顺发/1.jpg', '叁连金杠': 'image/叁连金杠/1.jpg', '肆喜临门': 'image/肆喜临门/1.jpg', '伍福聚宝': 'image/伍福聚宝/1.jpg', '陆通八�?: 'image/陆通八�?1.jpg', '柒彩雀�?: 'image/柒彩雀�?1.jpg', '捌方来财': 'image/捌方来财/1.jpg', '玖运长红': 'image/玖运长红/1.jpg' }; // 加载房间列表 async function loadRooms() { try { const res = await fetch(`${API_BASE}/rooms`); const data = await res.json(); if (data.success) { roomsData = data.data; renderRooms(data.data, data.isWeekend); } else { showError('加载房间数据失败'); } } catch (error) { console.error('加载房间失败:', error); showError('网络连接失败，请检查网络后重试'); } } // 渲染房间列表 function renderRooms(rooms, isWeekend) { let html = ''; if (isWeekend) { html += '<div class="weekend-banner">📢 周末愉快！所有套餐价格已上调10�?/div>'; } rooms.forEach(room => { // 房间状态配�? const statusConfig = { 'available': { class: 'status-available', text: '可预�?, overlay: '', overlayText: '' }, 'occupied': { class: 'status-occupied', text: '使用�?, overlay: 'occupied', overlayText: '使用�? }, 'cleaning': { class: 'status-cleaning', text: '清洁�?, overlay: 'cleaning', overlayText: '清洁�? }, 'maintenance': { class: 'status-maintenance', text: '维护�?, overlay: 'maintenance', overlayText: '维护�? }, 'reserved': { class: 'status-reserved', text: '已预�?, overlay: 'reserved', overlayText: '已预�? } }; const config = statusConfig[room.status] || statusConfig['available']; const btnDisabled = room.status !== 'available' ? 'disabled' : ''; const imageUrl = roomImages[room.name] || ''; // 状态遮�? const overlayHtml = config.overlay ? ` <div class="room-status-overlay ${config.overlay}"> <span class="room-status-text">${config.overlayText}</span> </div> ` : ''; // 使用中的房间显示结束时间 let endTimeHtml = ''; if (room.status === 'occupied' && room.currentOrder) { const endTime = new Date(room.currentOrder.endTime); const endTimeStr = `${endTime.getHours().toString().padStart(2, '0')}:${endTime.getMinutes().toString().padStart(2, '0')}`; endTimeHtml = `<span class="end-time-badge">${endTimeStr}结束</span>`; } html += ` <div class="room-card"> <div class="room-image" style="background-image: url('${imageUrl}'); background-size: cover; background-position: center;"> <div class="room-image-overlay"></div> ${overlayHtml} <span class="room-name-overlay">${room.name}</span> </div> <div class="room-info"> <div class="room-header"> <span class="room-name">${room.name}</span> <span class="room-type">${room.type}</span> </div> <div class="room-prices"> <div class="price-item" onclick="quickBook(${room.id}, '4h', ${room.package4h}, event)" ${btnDisabled}> <div class="label">4小时套餐</div> <div class="value">¥${room.package4h}</div> </div> <div class="price-item" onclick="quickBook(${room.id}, '5h', ${room.package5h}, event)" ${btnDisabled}> <div class="label">5小时套餐</div> <div class="value">¥${room.package5h}</div> </div> <div class="price-item" onclick="quickBook(${room.id}, '8h', ${room.package8h}, event)" ${btnDisabled}> <div class="label">8小时套餐</div> <div class="value">¥${room.package8h}</div> </div> <div class="price-item" onclick="quickBookCustom(${room.id}, event)" ${btnDisabled}> <div class="label">其他时长</div> <div class="value"><small>自定�?/small></div> </div> </div>  <div class="timeline-new"> <div class="timeline-progress" id="timeline-progress-${room.id}">  </div> <div class="timeline-hours" id="timeline-hours-${room.id}">  </div> </div> <div class="room-footer"> <div class="status-wrapper"> <span class="status-badge ${config.class}">${config.text}</span> ${endTimeHtml} </div> <button class="book-btn" ${btnDisabled} onclick="window.location.href='booking.html?roomId=${room.id}'">查看详情</button> </div> </div> </div> `; }); document.getElementById('app').innerHTML = html; // 生成时间�?- 使用setTimeout确保DOM已更�? setTimeout(() => { rooms.forEach(room => { generateTimeline(room.id); }); }, 0); } // 生成24小时时间�?- 新样�? function generateTimeline(roomId) { const progressEl = document.getElementById(`timeline-progress-${roomId}`); const hoursEl = document.getElementById(`timeline-hours-${roomId}`); if (!progressEl || !hoursEl) return; // 防止重复生成 - 检查是否已生成�? if (progressEl.getAttribute('data-generated') === 'true') return; progressEl.setAttribute('data-generated', 'true'); const now = new Date(); const currentHour = now.getHours(); // 1. 生成已预约时间段（绿色条）和刻度�? let progressHtml = ''; const occupiedRanges = []; if (roomId === 1) { occupiedRanges.push({ start: 14, end: 21 }); // 壹雀天和 } else if (roomId === 2) { occupiedRanges.push({ start: 10, end: 14 }); // 贰发顺发 } else if (roomId === 3) { occupiedRanges.push({ start: 20, end: 24 }); // 叁连金杠 } occupiedRanges.forEach(range => { const startPercent = (range.start / 24) * 100; const widthPercent = ((range.end - range.start) / 24) * 100; progressHtml += `<div class="progress-segment" style="left: ${startPercent}%; width: ${widthPercent}%;"></div>`; }); // 添加当前时间指示�? const currentPercent = (currentHour / 24) * 100; progressHtml += `<div class="progress-segment current" style="left: ${currentPercent}%; width: 4.17%;"></div>`; progressEl.innerHTML = progressHtml; // 3. 生成小时数字（参考样图样式） let hoursHtml = ''; for (let i = 0; i < 24; i++) { const hour = (currentHour + i) % 24; const leftPercent = (i / 23) * 100; // 均匀分布�?-100%之间 let displayText; if (hour === 0) { displayText = '次日'; } else { displayText = hour.toString(); } const isCurrent = i === 0; const isNextDay = hour === 0; hoursHtml += `<div class="hour-label ${isCurrent ? 'current' : ''} ${isNextDay ? 'next-day' : ''}" style="left: ${leftPercent}%;">${displayText}</div>`; } hoursEl.innerHTML = hoursHtml; } // 从时间轴快速预�? function quickBookFromTimeline(roomId, hour, event) { event.stopPropagation(); console.log(`预约房间${roomId}�?{hour}:00时段`); } // 快速预�? function quickBook(roomId, packageType, price, event) { event.stopPropagation(); currentRoom = roomsData.find(r => r.id === roomId); currentPackage = { type: packageType, price: price }; // 设置弹窗信息 document.getElementById('modalRoomName').textContent = currentRoom.name; const packageNames = { '4h': '4小时套餐', '5h': '5小时套餐', '8h': '8小时套餐' }; document.getElementById('modalPackageInfo').textContent = `${packageNames[packageType]} · ¥${price}`; // 初始化日期选择 initModalDate(); // 初始化时间选择 initModalTime(); // 更新显示 updateModalTime(); // 显示弹窗并锁定背景滚�? document.getElementById('quickBookModal').classList.add('active'); document.body.classList.add('modal-open'); } // 初始化弹窗日�? function initModalDate() { const select = document.getElementById('modalDate'); const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; const today = new Date(); let html = ''; for (let i = 0; i < 7; i++) { const date = new Date(today); date.setDate(today.getDate() + i); const dayName = i === 0 ? '今天' : days[date.getDay()]; const dateStr = date.toISOString().split('T')[0]; const displayDate = `${date.getMonth() + 1}�?{date.getDate()}日`; html += `<option value="${dateStr}">${dayName} (${displayDate})</option>`; } select.innerHTML = html; } // 初始化弹窗时�? function initModalTime() { const select = document.getElementById('modalStartTime'); let html = ''; for (let i = 0; i < 24; i++) { const hour = i.toString().padStart(2, '0'); html += `<option value="${i}">${hour}:00</option>`; } select.innerHTML = html; // 默认选择当前时间 const now = new Date(); select.value = now.getHours(); // 监听变化 select.addEventListener('change', updateModalTime); } // 更新弹窗时间显示 function updateModalTime() { const startTime = parseInt(document.getElementById('modalStartTime').value); let hours = 4; if (currentPackage.type === '5h') hours = 5; if (currentPackage.type === '8h') hours = 8; const endTime = startTime + hours; const packageNames = { '4h': '4小时', '5h': '5小时', '8h': '8小时' }; const endTimeStr = `${endTime.toString().padStart(2, '0')}:00`; // 更新结束时间显示（只读字段） document.getElementById('modalEndTimeDisplay').textContent = endTimeStr; // 更新底部汇总区�? document.getElementById('modalEndTime').textContent = endTimeStr; document.getElementById('modalDuration').textContent = packageNames[currentPackage.type]; document.getElementById('modalPrice').textContent = `¥${currentPackage.price}`; } // 关闭弹窗 function closeModal() { document.getElementById('quickBookModal').classList.remove('active'); document.body.classList.remove('modal-open'); } // 确认预约 async function confirmBooking() { const date = document.getElementById('modalDate').value; const startHour = document.getElementById('modalStartTime').value; let hours = 4; if (currentPackage.type === '5h') hours = 5; if (currentPackage.type === '8h') hours = 8; const startTime = `${startHour.padStart(2, '0')}:00`; const endTime = `${(parseInt(startHour) + hours).toString().padStart(2, '0')}:00`; try { const res = await fetch(`${API_BASE}/orders/create`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ roomId: currentRoom.id, bookingDate: date, startTime, endTime, packageType: currentPackage.type, userId: 1 }) }); const data = await res.json(); if (data.success) { window.location.href = `pay.html?orderId=${data.data.orderId}&amount=${data.data.totalAmount}`; } else { alert(data.message || '创建订单失败'); } } catch (error) { console.error('提交订单失败:', error); alert('提交订单失败，请重试'); } } // 显示错误 function showError(message) { document.getElementById('app').innerHTML = ` <div class="error-message"> <div style="font-size: 48px; margin-bottom: 20px;">😔</div> <div style="font-size: 18px; margin-bottom: 10px;">${message}</div> <button onclick="location.reload()">重新加载</button> </div> `; } // 显示首页 function showHome() { location.reload(); } // 显示订单 function showOrders() { window.location.href = 'orders.html'; } // 显示个人中心 function showProfile() { window.location.href = 'profile.html'; } // 查看环境 - 相片�? function showEnvironment() { document.getElementById('environmentModal').classList.add('active'); } function closeEnvironmentModal() { document.getElementById('environmentModal').classList.remove('active'); } // 到店指引 - 图文指引 function showGuide() { document.getElementById('guideModal').classList.add('active'); } function closeGuideModal() { document.getElementById('guideModal').classList.remove('active'); } // 连接WiFi - 图文介绍 function connectWifi() { document.getElementById('wifiModal').classList.add('active'); } function closeWifiModal() { document.getElementById('wifiModal').classList.remove('active'); } // 复制WiFi密码 function copyWifiPassword() { const password = '88888888'; if (navigator.clipboard) { navigator.clipboard.writeText(password).then(() => { alert('密码已复制到剪贴�?); }); } else { // 兼容旧浏览器 const input = document.createElement('input'); input.value = password; document.body.appendChild(input); input.select(); document.execCommand('copy'); document.body.removeChild(input); alert('密码已复制到剪贴�?); } } // 到店开�? function openDoor() { // 检查是否有进行中的订单 const activeOrder = checkActiveOrder(); if (activeOrder) { // 调用开锁API unlockDoor(activeOrder.roomId); } else { alert('您没有进行中的订单，请先预约房间'); } } // 检查是否有进行中的订单 async function checkActiveOrder() { try { const res = await fetch(`${API_BASE}/orders/active?userId=1`); const data = await res.json(); if (data.success && data.data) { return data.data; } return null; } catch (error) { console.error('检查订单失�?', error); return null; } } // 远程开�? async function unlockDoor(roomId) { try { const res = await fetch(`${API_BASE}/rooms/${roomId}/unlock`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId: 1 }) }); const data = await res.json(); if (data.success) { alert('🚪 门锁已开启，请尽快进入房�?); } else { alert('开锁失败：' + data.message); } } catch (error) { console.error('开锁失�?', error); alert('开锁失败，请重�?); } } // 续单 function renewOrder() { // 跳转到订单页面进行续�? window.location.href = 'orders.html?action=renew'; } // 特惠充�? function recharge() { // 跳转到充值页�? window.location.href = 'recharge.html'; } // 显示导航选择 function showNavigation() { document.getElementById('navModal').classList.add('active'); document.body.classList.add('modal-open'); } // 关闭导航弹窗 function closeNavModal() { document.getElementById('navModal').classList.remove('active'); document.body.classList.remove('modal-open'); } // 打开地图导航 function openMap(type) { const address = '广州市南沙区东涌镇培贤东�?3号晋隆大�?; const lat = '22.8933'; // 纬度 const lng = '113.4765'; // 经度 let url = ''; switch(type) { case 'amap': // 高德地图 url = `https://uri.amap.com/navigation?to=${lng},${lat},${encodeURIComponent(address)}&mode=car&policy=1`; break; case 'baidu': // 百度地图 url = `http://api.map.baidu.com/direction?destination=latlng:${lat},${lng}|name:${encodeURIComponent(address)}&mode=driving&output=html`; break; case 'tencent': // 腾讯地图 url = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${encodeURIComponent(address)}&tocoord=${lat},${lng}&referer=myapp`; break; } if (url) { window.open(url, '_blank'); closeNavModal(); } } // 点击遮罩关闭导航弹窗 document.getElementById('navModal').addEventListener('click', function(e) { if (e.target === this) { closeNavModal(); } }); // 点击遮罩关闭弹窗 document.getElementById('quickBookModal').addEventListener('click', function(e) { if (e.target === this) { closeModal(); } }); document.getElementById('customBookModal').addEventListener('click', function(e) { if (e.target === this) { closeCustomModal(); } }); // 自定义时长快速预�? function quickBookCustom(roomId, event) { event.stopPropagation(); currentRoom = roomsData.find(r => r.id === roomId); // 设置弹窗信息 document.getElementById('customModalRoomName').textContent = currentRoom.name; document.getElementById('customModalUnitPrice').textContent = `¥${currentRoom.hourlyPrice}/时`; // 初始化日期选择 initCustomModalDate(); // 初始化时间选择 initCustomModalTime(); // 监听时长变化 document.getElementById('customModalDuration').addEventListener('change', updateCustomModalTime); document.getElementById('customModalStartTime').addEventListener('change', updateCustomModalTime); // 更新显示 updateCustomModalTime(); // 显示弹窗并锁定背景滚�? document.getElementById('customBookModal').classList.add('active'); document.body.classList.add('modal-open'); } // 初始化自定义弹窗日期 function initCustomModalDate() { const select = document.getElementById('customModalDate'); const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; const today = new Date(); let html = ''; for (let i = 0; i < 7; i++) { const date = new Date(today); date.setDate(today.getDate() + i); const dayName = i === 0 ? '今天' : days[date.getDay()]; const dateStr = date.toISOString().split('T')[0]; const displayDate = `${date.getMonth() + 1}�?{date.getDate()}日`; html += `<option value="${dateStr}">${dayName} (${displayDate})</option>`; } select.innerHTML = html; } // 初始化自定义弹窗时间 function initCustomModalTime() { const select = document.getElementById('customModalStartTime'); let html = ''; for (let i = 0; i < 24; i++) { const hour = i.toString().padStart(2, '0'); html += `<option value="${i}">${hour}:00</option>`; } select.innerHTML = html; // 默认选择当前时间 const now = new Date(); select.value = now.getHours(); } // 更新自定义弹窗时间显�? function updateCustomModalTime() { const startTime = parseInt(document.getElementById('customModalStartTime').value); const hours = parseInt(document.getElementById('customModalDuration').value); const endTime = startTime + hours; const totalPrice = (currentRoom.hourlyPrice * hours).toFixed(1); const endTimeStr = `${endTime.toString().padStart(2, '0')}:00`; // 更新结束时间显示（只读字段） document.getElementById('customModalEndTimeDisplay').textContent = endTimeStr; // 更新底部汇总区域的结束时间 document.getElementById('customModalEndTime').textContent = endTimeStr; document.getElementById('customModalPrice').textContent = `¥${totalPrice}`; } // 关闭自定义弹�? function closeCustomModal() { document.getElementById('customBookModal').classList.remove('active'); document.body.classList.remove('modal-open'); } // 确认自定义预�? async function confirmCustomBooking() { const date = document.getElementById('customModalDate').value; const startHour = document.getElementById('customModalStartTime').value; const hours = parseInt(document.getElementById('customModalDuration').value); const startTime = `${startHour.padStart(2, '0')}:00`; const endTime = `${(parseInt(startHour) + hours).toString().padStart(2, '0')}:00`; try { const res = await fetch(`${API_BASE}/orders/create`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ roomId: currentRoom.id, bookingDate: date, startTime, endTime, packageType: 'hourly', userId: 1 }) }); const data = await res.json(); if (data.success) { window.location.href = `pay.html?orderId=${data.data.orderId}&amount=${data.data.totalAmount}`; } else { alert(data.message || '创建订单失败'); } } catch (error) { console.error('提交订单失败:', error); alert('提交订单失败，请重试'); } } // 页面加载完成后执�? document.addEventListener('DOMContentLoaded', () => { loadStoreInfo(); loadRooms(); }); </script>  <div class="bottom-nav"> <a href="index.html" class="nav-item active"> <span class="nav-icon">🏠</span> <span class="nav-text">首页</span> </a> <a href="orders.html" class="nav-item"> <span class="nav-icon">📋</span> <span class="nav-text">订单</span> </a> <a href="profile.html" class="nav-item"> <span class="nav-icon">👤</span> <span class="nav-text">我的</span> </a> </div> </body> </html>