编辑页面

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; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; max-width: 414px; margin: 0 auto; position: relative; overflow-x: hidden; }
        
        /* 页面容器 */
        .page { display: none; min-height: 100vh; padding-bottom: 60px; background: #f5f5f5; }
        .page.active { display: block; }
        
        /* 头部 */
        .header { background: linear-gradient(135deg, #4A7C59 0%, #5a9c6a 100%); color: #fff; padding: 12px 16px; position: sticky; top: 0; z-index: 100; }
        .header h1 { font-size: 18px; font-weight: 500; text-align: center; }
        .header .back-btn { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; }
        
        /* 轮播图 */
        .banner { width: 100%; height: 160px; position: relative; overflow: hidden; background: linear-gradient(135deg, #4A7C59, #2d5a3f); display: flex; flex-direction: column; justify-content: center; padding: 20px; }
        .banner-title { font-size: 24px; color: #fff; font-weight: bold; }
        .banner-sub { font-size: 14px; color: #FFD93D; margin-top: 8px; }
        .banner-desc { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 4px; }
        
        /* 快捷入口 */
        .quick-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; background: #fff; margin-top: -20px; margin-left: 16px; margin-right: 16px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); position: relative; z-index: 10; }
        .quick-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.2s; }
        .quick-item:active { transform: scale(0.95); }
        .quick-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .quick-icon.book { background: linear-gradient(135deg, #FF6B6B 0%, #ee5a5a 100%); }
        .quick-icon.order { background: linear-gradient(135deg, #4ECDC4 0%, #3dbdb5 100%); }
        .quick-icon.member { background: linear-gradient(135deg, #FFD93D 0%, #f0c735 100%); }
        .quick-icon.mall { background: linear-gradient(135deg, #A29BFE 0%, #8f8cf0 100%); }
        .quick-icon.activity { background: linear-gradient(135deg, #FF6B9D 0%, #ee5a8c 100%); }
        .quick-text { font-size: 12px; color: #333; }
        
        /* 推荐商品 */
        .section { padding: 16px; }
        .section-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
        .section-title .more { font-size: 12px; color: #999; }
        .product-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .product-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.2s; }
        .product-card:active { transform: scale(0.98); }
        .product-card img { width: 100%; height: 120px; object-fit: cover; background: #f5f5f5; }
        .product-info { padding: 10px; }
        .product-name { font-size: 14px; color: #333; margin-bottom: 6px; }
        .product-price { font-size: 16px; color: #FF6B6B; font-weight: 600; }
        .product-price span { font-size: 12px; color: #999; margin-left: 6px; }
        
        /* 门店公告 */
        .notice { background: #fff; margin: 0 16px; padding: 12px 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
        .notice:active { background: #f9f9f9; }
        .notice-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #FF6B6B 0%, #ee5a5a 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex-shrink: 0; }
        .notice-content { flex: 1; }
        .notice-title { font-size: 14px; color: #333; font-weight: 500; }
        .notice-desc { font-size: 12px; color: #999; margin-top: 2px; }
        
        /* 底部导航 */
        .tab-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; height: 60px; background: #fff; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 -2px 12px rgba(0,0,0,0.08); z-index: 1000; }
        .tab-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 8px 20px; transition: all 0.2s; }
        .tab-icon { font-size: 22px; }
        .tab-text { font-size: 10px; color: #999; }
        .tab-item.active .tab-icon { color: #4A7C59; }
        .tab-item.active .tab-text { color: #4A7C59; }
        
        /* 子页面通用 */
        .sub-page { display: none; min-height: 100vh; background: #f5f5f5; padding-bottom: 80px; }
        .sub-page.active { display: block; }
        
        /* 门店展示 */
        .store-info { background: #fff; padding: 16px; }
        .store-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
        .store-imgs img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; background: #f0f0f0; }
        .store-detail { display: flex; flex-direction: column; gap: 12px; }
        .store-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
        .store-item:active { background: #f9f9f9; }
        .store-item:last-child { border: none; }
        .store-icon { width: 40px; height: 40px; background: #f0f0f0; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
        .store-text { flex: 1; }
        .store-name { font-size: 14px; color: #333; }
        .store-desc { font-size: 12px; color: #999; margin-top: 2px; }
        .store-arrow { color: #ccc; font-size: 14px; }
        
        /* 订单Tab */
        .order-tabs { display: flex; background: #fff; padding: 12px 16px; gap: 24px; border-bottom: 1px solid #f0f0f0; overflow-x: auto; }
        .order-tab { font-size: 14px; color: #666; padding-bottom: 8px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
        .order-tab.active { color: #4A7C59; border-color: #4A7C59; font-weight: 500; }
        .order-list { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
        .order-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.2s; }
        .order-card:active { transform: scale(0.98); }
        .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .order-num { font-size: 14px; color: #333; }
        .order-status { font-size: 14px; color: #FF6B6B; }
        .order-items { font-size: 13px; color: #666; margin-bottom: 12px; }
        .order-footer { display: flex; justify-content: space-between; align-items: center; }
        .order-time { font-size: 12px; color: #999; }
        .order-price { font-size: 16px; color: #333; font-weight: 600; }
        
        /* 我的Tab */
        .user-header { background: linear-gradient(135deg, #4A7C59 0%, #5a9c6a 100%); padding: 24px 16px; color: #fff; }
        .user-info { display: flex; align-items: center; gap: 16px; }
        .user-avatar { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; }
        .user-detail { flex: 1; }
        .user-name { font-size: 18px; font-weight: 500; margin-bottom: 4px; }
        .user-level { font-size: 12px; background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 12px; display: inline-block; }
        .user-stats { display: flex; justify-content: space-around; margin-top: 20px; text-align: center; }
        .stat-item { flex: 1; cursor: pointer; }
        .stat-item:active { opacity: 0.8; }
        .stat-num { font-size: 20px; font-weight: 600; }
        .stat-label { font-size: 12px; opacity: 0.8; margin-top: 4px; }
        
        .menu-section { background: #fff; margin-top: 12px; }
        .menu-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
        .menu-item:active { background: #f9f9f9; }
        .menu-item:last-child { border: none; }
        .menu-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; flex-shrink: 0; }
        .menu-text { flex: 1; font-size: 15px; color: #333; display: flex; align-items: center; }
        .menu-arrow { color: #ccc; font-size: 14px; }
        .menu-reddot { background: #FF6B6B; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; margin-left: 8px; }
        
        /* 包间预订 */
        .booking-date { background: #fff; padding: 16px; }
        .date-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .date-title { font-size: 16px; font-weight: 600; color: #333; }
        .date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center; }
        .date-day { font-size: 12px; color: #999; }
        .date-num { font-size: 14px; color: #333; padding: 8px 0; border-radius: 8px; cursor: pointer; margin-top: 4px; transition: all 0.2s; }
        .date-num:active { background: #e8f5e9; }
        .date-num.selected { background: #4A7C59; color: #fff; }
        .date-num.disabled { color: #ccc; cursor: not-allowed; }
        
        .time-slots { background: #fff; padding: 16px; margin-top: 12px; }
        .slot-title { font-size: 14px; color: #333; margin-bottom: 12px; }
        .slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .slot-item { padding: 12px 8px; text-align: center; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
        .slot-item:active { transform: scale(0.98); }
        .slot-item.selected { border-color: #4A7C59; background: #e8f5e9; color: #4A7C59; }
        .slot-time { font-size: 14px; font-weight: 500; }
        .slot-price { font-size: 12px; margin-top: 4px; }
        
        .room-types { padding: 16px; }
        .room-card { background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all 0.2s; border: 2px solid transparent; }
        .room-card:active { transform: scale(0.98); }
        .room-card img { width: 100%; height: 140px; object-fit: cover; background: #f5f5f5; }
        .room-info { padding: 12px; }
        .room-name { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 6px; }
        .room-desc { font-size: 12px; color: #999; margin-bottom: 8px; }
        .room-price { font-size: 18px; color: #FF6B6B; font-weight: 600; }
        .room-price span { font-size: 12px; color: #999; font-weight: normal; text-decoration: line-through; margin-left: 8px; }
        .room-card.selected { border: 2px solid #4A7C59; }
        
        .booking-btn { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 382px; z-index: 100; }
        .booking-btn button { width: 100%; height: 48px; background: linear-gradient(135deg, #4A7C59 0%, #5a9c6a 100%); color: #fff; border: none; border-radius: 24px; font-size: 16px; font-weight: 500; cursor: pointer; }
        .booking-btn button:active { opacity: 0.9; }
        
        /* 商品点单 */
        .search-bar { padding: 12px 16px; background: #fff; }
        .search-input { display: flex; align-items: center; background: #f5f5f5; border-radius: 20px; padding: 10px 16px; gap: 8px; cursor: pointer; }
        .search-input input { flex: 1; border: none; background: transparent; font-size: 14px; outline: none; pointer-events: none; }
        
        .category-tabs { display: flex; background: #fff; padding: 0 16px; overflow-x: auto; }
        .category-tab { padding: 12px 16px; font-size: 14px; color: #666; white-space: nowrap; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.2s; }
        .category-tab.active { color: #4A7C59; border-color: #4A7C59; font-weight: 500; }
        
        .food-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
        .food-item { display: flex; background: #fff; border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
        .food-item:active { transform: scale(0.99); }
        .food-item img { width: 100px; height: 100px; object-fit: cover; flex-shrink: 0; background: #f5f5f5; }
        .food-detail { flex: 1; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
        .food-name { font-size: 15px; color: #333; font-weight: 500; }
        .food-desc { font-size: 12px; color: #999; margin-top: 4px; }
        .food-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
        .food-price { font-size: 16px; color: #FF6B6B; font-weight: 600; }
        .food-add { width: 28px; height: 28px; background: #4A7C59; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: transform 0.2s; }
        .food-add:active { transform: scale(1.1); }
        
        /* 购物车 */
        .cart-bar { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; height: 56px; background: #333; display: flex; align-items: center; padding: 0 16px; gap: 12px; z-index: 900; cursor: pointer; }
        .cart-icon { position: relative; font-size: 28px; color: #fff; }
        .cart-badge { position: absolute; top: -4px; right: -8px; background: #FF6B6B; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
        .cart-info { flex: 1; }
        .cart-price { color: #fff; font-size: 18px; font-weight: 600; }
        .cart-btn { background: #4A7C59; color: #fff; padding: 12px 24px; border-radius: 24px; font-size: 14px; cursor: pointer; transition: opacity 0.2s; }
        .cart-btn:active { opacity: 0.8; }
        
        .cart-detail { position: fixed; bottom: 116px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; background: #fff; border-radius: 16px 16px 0 0; padding: 16px; z-index: 950; display: none; max-height: 60vh; overflow-y: auto; }
        .cart-detail.show { display: block; }
        .cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .cart-title { font-size: 16px; font-weight: 600; }
        .cart-clear { font-size: 13px; color: #999; cursor: pointer; }
        .cart-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
        .cart-item:last-child { border: none; }
        .cart-item-name { flex: 1; font-size: 14px; }
        .cart-item-price { color: #FF6B6B; font-size: 14px; margin-right: 16px; }
        .cart-item-count { display: flex; align-items: center; gap: 12px; }
        .count-btn { width: 24px; height: 24px; border: 1px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: all 0.2s; }
        .count-btn:active { background: #f0f0f0; }
        .count-num { width: 30px; text-align: center; font-size: 14px; }
        
        /* 会员中心 */
        .member-card { background: linear-gradient(135deg, #4A7C59 0%, #2d5a3f 100%); margin: 16px; border-radius: 16px; padding: 20px; color: #fff; }
        .member-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
        .member-avatar { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .member-name { font-size: 18px; font-weight: 500; }
        .member-level-bar { background: rgba(255,255,255,0.2); height: 8px; border-radius: 4px; margin-bottom: 8px; }
        .member-level-progress { background: #FFD93D; height: 100%; border-radius: 4px; width: 65%; }
        .member-level-text { font-size: 12px; opacity: 0.8; }
        .member-rights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; text-align: center; }
        .member-right { font-size: 11px; opacity: 0.9; }
        
        .member-menu { background: #fff; margin: 0 16px; border-radius: 12px; overflow: hidden; }
        .member-menu-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
        .member-menu-item:active { background: #f9f9f9; }
        .member-menu-item:last-child { border: none; }
        .member-menu-icon { width: 40px; height: 40px; background:#f5f5f5; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; flex-shrink: 0; }
        .member-menu-text { flex: 1; font-size: 15px; color: #333; }
        .member-menu-arrow { color: #ccc; }
        
        /* 充值页面 */
        .recharge-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
        .recharge-item { background: #fff; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
        .recharge-item:active { transform: scale(0.98); }
        .recharge-item.selected { border-color: #4A7C59; background: #e8f5e9; }
        .recharge-amount { font-size: 24px; font-weight: 600; color: #333; }
        .recharge-gift { font-size: 12px; color: #FF6B6B; margin-top: 8px; }
        .recharge-btn { margin: 16px; }
        .recharge-btn button { width: 100%; height: 48px; background: linear-gradient(135deg, #4A7C59 0%, #5a9c6a 100%); color: #fff; border: none; border-radius: 24px; font-size: 16px; font-weight: 500; cursor: pointer; }
        
        /* 积分商城 */
        .gift-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
        .gift-card { background: #fff; border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
        .gift-card:active { transform: scale(0.98); }
        .gift-card img { width: 100%; height: 140px; object-fit: cover; background: #f5f5f5; }
        .gift-info { padding: 12px; }
        .gift-name { font-size: 14px; color: #333; margin-bottom: 8px; }
        .gift-points { display: flex; align-items: center; gap: 4px; font-size: 16px; color: #FF6B6B; font-weight: 600; }
        .gift-exchange { padding: 8px 16px 16px; }
        .gift-exchange button { width: 100%; height: 36px; background: #4A7C59; color: #fff; border: none; border-radius: 18px; font-size: 14px; cursor: pointer; transition: opacity 0.2s; }
        .gift-exchange.disabled button { background: #ccc; }
        
        /* 优惠券 */
        .coupon-tabs { display: flex; background: #fff; padding: 12px 16px; gap: 24px; overflow-x: auto; }
        .coupon-tab { font-size: 14px; color: #666; padding-bottom: 8px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
        .coupon-tab.active { color: #4A7C59; border-color: #4A7C59; font-weight: 500; }
        .coupon-list { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
        .coupon-item { background: linear-gradient(135deg, #FF6B6B 0%, #ff8e8e 100%); border-radius: 12px; overflow: hidden; display: flex; color: #fff; cursor: pointer; transition: transform 0.2s; }
        .coupon-item:active { transform: scale(0.98); }
        .coupon-left { padding: 20px 16px; text-align: center; border-right: 1px dashed rgba(255,255,255,0.5); min-width: 90px; }
        .coupon-value { font-size: 28px; font-weight: 600; }
        .coupon-value span { font-size: 14px; }
        .coupon-limit { font-size: 12px; opacity: 0.8; margin-top: 4px; }
        .coupon-right { flex: 1; padding: 16px; display: flex; flex-direction: column; justify-content: center; }
        .coupon-name { font-size: 15px; font-weight: 500; }
        .coupon-desc { font-size: 12px; opacity: 0.8; margin-top: 4px; }
        .coupon-time { font-size: 11px; opacity: 0.7; margin-top: 8px; }
        
        /* 推荐返佣 */
        .invite-banner { background: linear-gradient(135deg, #4A7C59 0%, #2d5a3f 100%); margin: 16px; border-radius: 16px; padding: 24px; color: #fff; text-align: center; }
        .invite-title { font-size: 18px; margin-bottom: 16px; }
        .invite-code { font-size: 28px; font-weight: 600; letter-spacing: 4px; background: rgba(255,255,255,0.2); padding: 12px 24px; border-radius: 8px; display: inline-block; margin-bottom: 16px; }
        .invite-share { background: #FFD93D; color: #333; padding: 12px 32px; border-radius: 24px; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-block; transition: transform 0.2s; }
        .invite-share:active { transform: scale(0.95); }
        .invite-rules { background: #fff; margin: 0 16px; border-radius: 12px; padding: 16px; }
        .invite-rules h4 { font-size: 15px; color: #333; margin-bottom: 12px; }
        .invite-rule { font-size: 13px; color: #666; line-height: 1.8; }
        .commission-info { background: #fff; margin: 16px; border-radius: 12px; padding: 20px; }
        .commission-num { font-size: 32px; font-weight: 600; color: #FF6B6B; text-align: center; }
        .commission-label { font-size: 13px; color: #999; text-align: center; margin-top: 4px; }
        .commission-btns { display: flex; gap: 12px; margin-top: 16px; }
        .commission-btn { flex: 1; height: 44px; border-radius: 22px; font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.2s; }
        .commission-btn:active { opacity: 0.8; }
        .commission-btn.primary { background: #4A7C59; color: #fff; }
        .commission-btn.secondary { border: 1px solid #4A7C59; color: #4A7C59; }
        
        /* 评价 */
        .review-form { background: #fff; padding: 16px; }
        .review-score { margin-bottom: 20px; }
        .review-score-title { font-size: 14px; color: #333; margin-bottom: 12px; }
        .review-stars { display: flex; gap: 8px; }
        .review-star { font-size: 28px; color: #ddd; cursor: pointer; transition: transform 0.2s; }
        .review-star:active { transform: scale(1.2); }
        .review-star.active { color: #FFD93D; }
        .review-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .review-tag { padding: 8px 16px; background: #f5f5f5; border-radius: 16px; font-size: 13px; color: #666; cursor: pointer; transition: all 0.2s; }
        .review-tag.active { background: #e8f5e9; color: #4A7C59; }
        .review-content { margin-top: 16px; }
        .review-content textarea { width: 100%; height: 120px; border: 1px solid #ddd; border-radius: 12px; padding: 12px; font-size: 14px; resize: none; outline: none; }
        .review-submit { margin-top: 16px; }
        .review-submit button { width: 100%; height: 48px; background: #4A7C59; color: #fff; border: none; border-radius: 24px; font-size: 16px; cursor: pointer; }
        
        /* 订单确认 */
        .order-confirm { background: #fff; padding: 16px; }
        .confirm-address { display: flex; align-items: center; padding: 16px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .address-icon { width: 40px; height: 40px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; flex-shrink: 0; }
        .address-text { flex: 1; }
        .address-title { font-size: 15px; color: #333; margin-bottom: 4px; }
        .address-desc { font-size: 12px; color: #999; }
        .confirm-items { padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
        .confirm-item { display: flex; align-items: center; padding: 8px 0; }
        .confirm-item img { width: 50px; height: 50px; border-radius: 8px; margin-right: 12px; object-fit: cover; background: #f5f5f5; flex-shrink: 0; }
        .confirm-item-name { flex: 1; font-size: 14px; color: #333; }
        .confirm-item-price { font-size: 14px; color: #666; }
        .confirm-item-count { font-size: 12px; color: #999; margin-left: 8px; }
        .confirm-coupon { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .confirm-coupon-text { font-size: 14px; color: #333; }
        .confirm-coupon-arrow { color: #ccc; }
        .confirm-remark { padding: 16px 0; }
        .confirm-remark input { width: 100%; border: none; font-size: 14px; color: #999; outline: none; }
        .confirm-summary { padding: 16px; background: #fff; margin-top: 12px; }
        .summary-item { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: #666; }
        .summary-item.total { font-size: 16px; color: #333; font-weight: 600; }
        .summary-item.total span { color: #FF6B6B; }
        .confirm-pay { padding: 16px; background: #fff; margin-top: 12px; }
        .confirm-pay-title { font-size: 14px; color: #333; margin-bottom: 12px; }
        .pay-option { display: flex; align-items: center; padding: 12px 0; cursor: pointer; }
        .pay-radio { width: 20px; height: 20px; border: 2px solid #ddd; border-radius: 50%; margin-right: 12px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; flex-shrink: 0; }
        .pay-radio.selected { border-color: #4A7C59; }
        .pay-radio.selected::after { content: ''; width: 10px; height: 10px; background: #4A7C59; border-radius: 50%; }
        .pay-text { flex: 1; font-size: 14px; color: #333; }
        .pay-balance { font-size: 12px; color: #999; }
        .confirm-submit { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; padding: 16px; background: #fff; display: flex; align-items: center; gap: 16px; z-index: 100; }
        .confirm-total { flex: 1; }
        .confirm-total-price { font-size: 20px; color: #FF6B6B; font-weight: 600; }
        .confirm-total-btn { background: linear-gradient(135deg, #4A7C59 0%, #5a9c6a 100%); color: #fff; padding: 14px 32px; border-radius: 24px; font-size: 16px; font-weight: 500; cursor: pointer; }
        
        /* 支付成功 */
        .pay-success { text-align: center; padding: 40px 16px; background: #fff; min-height: calc(100vh - 56px); display: flex; flex-direction: column; justify-content: center; }
        .pay-success-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #4A7C59 0%, #5a9c6a 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 40px; color: #fff; }
        .pay-success-title { font-size: 20px; color: #333; font-weight: 600; margin-bottom: 8px; }
        .pay-success-desc { font-size: 14px; color: #999; }
        .pay-success-btns { display: flex; gap: 12px; margin-top: 32px; justify-content: center; }
        .pay-success-btn { padding: 12px 24px; border-radius: 24px; font-size: 14px; cursor: pointer; transition: opacity 0.2s; }
        .pay-success-btn:active { opacity: 0.8; }
        .pay-success-btn.primary { background: #4A7C59; color: #fff; }
        .pay-success-btn.secondary { border: 1px solid #ddd; color: #666; }
        
        /* 设置页面 */
        .settings-list { background: #fff; margin: 16px; border-radius: 12px; overflow: hidden; }
        .settings-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
        .settings-item:active { background: #f9f9f9; }
        .settings-item:last-child { border: none; }
        .settings-icon { width: 40px; height: 40px; background: #f5f5f5; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; flex-shrink: 0; }
        .settings-text { flex: 1; font-size: 15px; color: #333; }
        .settings-arrow { color: #ccc; }
        
        /* 商品详情 */
        .product-detail-img { width: 100%; height: 300px; object-fit: cover; background: #fff; }
        .product-detail-info { padding: 16px; background: #fff; margin-top: 12px; }
        .product-detail-price { font-size: 24px; color: #FF6B6B; font-weight: 600; margin-top: 12px; }
        .product-detail-price span { font-size: 14px; color: #999; font-weight: normal; text-decoration: line-through; margin-left: 8px; }
        .product-detail-sales { font-size: 13px; color: #999; margin-top: 8px; }
        .product-detail-desc { padding: 16px; background: #fff; margin-top: 12px; }
        .product-detail-desc-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; }
        .product-detail-desc-content { font-size: 14px; color: #666; line-height: 1.8; }
        .product-detail-action { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; padding: 12px 16px; background: #fff; display: flex; gap: 12px; z-index: 100; }
        .product-detail-collect { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #FF6B6B; border: 1px solid #FF6B6B; border-radius: 22px; height: 44px; cursor: pointer; }
        .product-detail-add { flex: 2; height: 44px; background: #4A7C59; color: #fff; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; }
        
        /* 积分明细 */
        .points-balance { background: #fff; padding: 20px; text-align: center; }
        .points-num { font-size: 36px; font-weight: 600; color: #FF6B6B; }
        .points-label { font-size: 14px; color: #999; margin-top: 4px; }
        
        /* Toast */
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: #fff; padding: 16px 32px; border-radius: 8px; font-size: 14px; z-index: 9999; display: none; white-space: nowrap; }
        .toast.show { display: block; animation: toastIn 0.3s ease; }
        @keyframes toastIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
        
        .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 800; display: none; }
        .mask.show { display: block; }
        
        /* 我的余额 */
        .balance-card { background: linear-gradient(135deg, #4A7C59 0%, #5a9c6a 100%); margin: 16px; border-radius: 16px; padding: 24px; color: #fff; text-align: center; }
        .balance-label { font-size: 14px; opacity: 0.9; }
        .balance-num { font-size: 36px; font-weight: 600; margin-top: 8px; }
        .balance-btns { display: flex; gap: 12px; margin-top: 16px; justify-content: center; }
        .balance-btn { padding: 10px 24px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        .balance-btn.primary { background: #FFD93D; color: #333; }
        .balance-btn.secondary { background: rgba(255,255,255,0.2); color: #fff; }
        .balance-record { background: #fff; margin: 16px; border-radius: 12px; padding: 16px; }
        .balance-record-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; }
        .balance-record-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
        .balance-record-item:last-child { border: none; }
        .balance-record-name { font-size: 14px; color: #333; }
        .balance-record-time { font-size: 12px; color: #999; margin-top: 4px; }
        .balance-record-amount { font-size: 16px; font-weight: 600; }
        .balance-record-amount.income { color: #4A7C59; }
        .balance-record-amount.expense { color: #FF6B6B; }
        
        /* 我的收藏 */
        .collect-list { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
        .collect-item { display: flex; background: #fff; border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
        .collect-item:active { transform: scale(0.98); }
        .collect-item img { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; background: #f5f5f5; }
        .collect-item-info { flex: 1; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
        .collect-item-name { font-size: 14px; color: #333; }
        .collect-item-price { font-size: 16px; color: #FF6B6B; font-weight: 600; }
        .collect-item-del { color: #999; font-size: 12px; }
        
        /* 我的优惠券 */
        .my-coupon-tabs { display: flex; background: #fff; padding: 12px 16px; }
        .my-coupon-tab { flex: 1; text-align: center; font-size: 14px; color: #666; padding-bottom: 8px; cursor: pointer; border-bottom: 2px solid transparent; }
        .my-coupon-tab.active { color: #4A7C59; border-color: #4A7C59; }
        
        /* 端午活动 */
        .activity-banner { width: 100%; height: 180px; object-fit: cover; background: linear-gradient(135deg, #4A7C59 0%, #2d5a3f 100%); display: flex; flex-direction: column; justify-content: center; padding: 20px; }
        .activity-banner-title { font-size: 22px; color: #fff; font-weight: bold; }
        .activity-banner-sub { font-size: 14px; color: #FFD93D; margin-top: 8px; }
        .activity-section { background: #fff; margin: 16px; border-radius: 12px; padding: 16px; }
        .activity-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 12px; }
        .activity-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
        .activity-item:last-child { border: none; }
        .activity-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
        .activity-text { flex: 1; }
        .activity-name { font-size: 14px; color: #333; }
        .activity-desc { font-size: 12px; color: #999; margin-top: 2px; }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div id="page-home" class="page active">
        <div class="header"><h1>茶香阁</h1></div>
        <div class="banner" onclick="goPage('activity')">
            <div class="banner-title">端午特惠 限时来袭</div>
            <div class="banner-sub">包间消费满500送精美茶具套装</div>
            <div class="banner-desc">活动时间：6月1日-6月10日</div>
        </div>
        <div class="quick-nav">
            <div class="quick-item" onclick="goPage('booking')">
                <div class="quick-icon book">📅</div><span class="quick-text">包间预订</span>
            </div>
            <div class="quick-item" onclick="goPage('order-food')">
                <div class="quick-icon order">🍵</div><span class="quick-text">扫码点单</span>
            </div>
            <div class="quick-item" onclick="goPage('member')">
                <div class="quick-icon member">👑</div><span class="quick-text">会员中心</span>
            </div>
            <div class="quick-item" onclick="goPage('mall')">
                <div class="quick-icon mall">🎁</div><span class="quick-text">积分商城</span>
            </div>
        </div>
        <div class="quick-nav" style="margin-top: 12px;">
            <div class="quick-item" onclick="goPage('coupon')">
                <div class="quick-icon activity">🎫</div><span class="quick-text">优惠券</span>
            </div>
            <div class="quick-item" onclick="goPage('invite')">
                <div class="quick-icon mall">🤝</div><span class="quick-text">推荐返佣</span>
            </div>
            <div class="quick-item" onclick="goPage('store-detail')">
                <div class="quick-icon book">🏪</div><span class="quick-text">门店介绍</span>
            </div>
            <div class="quick-item" onclick="goPage('activity')">
                <div class="quick-icon activity">🎉</div><span class="quick-text">端午活动</span>
            </div>
        </div>
        <div class="section">
            <div class="section-title">热门推荐<span class="more" onclick="goPage('order-food')">更多 ></span></div>
            <div class="product-list">
                <div class="product-card" onclick="goPage('product-detail')">
                    <img src="https://img06.weeecdn.com/item/image/999/251/17D807F6D354CFD4.jpeg" alt="铁观音" onerror="this.style.display='none'">
                    <div class="product-info">
                        <div class="product-name">铁观音礼盒装</div>
                        <div class="product-price">¥128 <span>月售326</span></div>
                    </div>
                </div>
                <div class="product-card" onclick="goPage('product-detail-2')">
                    <img src="https://img06.weeecdn.com/item/image/837/588/554F70EADA8C7EC0.jpeg" alt="龙井" onerror="this.style.display='none'">
                    <div class="product-info">
                        <div class="product-name">龙井特级绿茶</div>
                        <div class="product-price">¥98 <span>月售289</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="section-title">新品上架</div>
            <div class="product-list">
                <div class="product-card" onclick="goPage('product-detail-3')">
                    <img src="https://img06.weeecdn.com/item/image/820/428/55666400A979BE14.png.jpeg" alt="普洱" onerror="this.style.display='none'">
                    <div class="product-info">
                        <div class="product-name">普洱熟茶饼</div>
                        <div class="product-price">¥168 <span>月售156</span></div>
                    </div>
                </div>
                <div class="product-card" onclick="goPage('product-detail-4')">
                    <img src="https://www.ankerli.com/upload/image/202208/db084d43-b19d-48b5-972b-7dd152c68a4e_large.jpg" alt="茶具" onerror="this.style.display='none'">
                    <div class="product-info">
                        <div class="product-name">精品茶具套装</div>
                        <div class="product-price">¥388 <span>月售89</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="notice" onclick="goPage('activity')">
            <div class="notice-icon">📢</div>
            <div class="notice-content">
                <div class="notice-title">端午节活动火热进行中</div>
                <div class="notice-desc">包间消费满500送精美茶具套装</div>
            </div>
        </div>
        <div style="height: 20px;"></div>
    </div>
    
    <!-- 门店Tab页面 -->
    <div id="page-store" class="page">
        <div class="header"><h1>门店信息</h1></div>
        <div class="store-info">
            <div class="store-imgs">
                <img src="https://pic.shejiben.com/case/2019/11/05/20191105145951-a2bbc976-la.jpeg" alt="门店" onerror="this.style.display='none'">
                <img src="https://pic1.shejiben.com/case/2015/03/09/20150309144039-7cb03cd3-la.jpg" alt="环境" onerror="this.style.display='none'">
                <img src="https://www.ankerli.com/upload/image/202208/db084d43-b19d-48b5-972b-7dd152c68a4e_large.jpg" alt="茶具" onerror="this.style.display='none'">
            </div>
            <div class="store-detail">
                <div class="store-item" onclick="goPage('store-detail')">
                    <div class="store-icon">📍</div>
                    <div class="store-text">
                        <div class="store-name">茶香阁·建国门店</div>
                        <div class="store-desc">北京市朝阳区建国门外大街1号</div>
                    </div>
                    <div class="store-arrow">></div>
                </div>
                <div class="store-item" onclick="showToast('010-8888-6666')">
                    <div class="store-icon">📞</div>
                    <div class="store-text">
                        <div class="store-name">联系电话</div>
                        <div class="store-desc">010-8888-6666</div>
                    </div>
                    <div class="store-arrow">></div>
                </div>
                <div class="store-item" onclick="showToast('正在导航...')">
                    <div class="store-icon">🗺️</div>
                    <div class="store-text">
                        <div class="store-name">到店导航</div>
                        <div class="store-desc">距离您约1.2公里</div>
                    </div>
                    <div class="store-arrow">></div>
                </div>
                <div class="store-item" onclick="showToast('营业时间：9:00-22:00')">
                    <div class="store-icon">🕐</div>
                    <div class="store-text">
                        <div class="store-name">营业时间</div>
                        <div class="store-desc">周一至周日 9:00-22:00</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 订单Tab页面 -->
    <div id="page-orders" class="page">
        <div class="header"><h1>我的订单</h1></div>
        <div class="order-tabs">
            <div class="order-tab active" onclick="switchOrderTab(this)">全部</div>
            <div class="order-tab" onclick="switchOrderTab(this)">待支付</div>
            <div class="order-tab" onclick="switchOrderTab(this)">进行中</div>
            <div class="order-tab" onclick="switchOrderTab(this)">已完成</div>
        </div>
        <div class="order-list">
            <div class="order-card" onclick="goPage('order-detail')">
                <div class="order-header">
                    <div class="order-num">订单号：DD20260525001</div>
                    <div class="order-status">进行中</div>
                </div>
                <div class="order-items">铁观音礼盒 x1，普洱熟茶 x2</div>
                <div class="order-footer">
                    <div class="order-time">2026-05-25 14:30</div>
                    <div class="order-price">¥228.00</div>
                </div>
            </div>
            <div class="order-card" onclick="goPage('order-detail')">
                <div class="order-header">
                    <div class="order-num">订单号：DD20260523001</div>
                    <div class="order-status">已完成</div>
                </div>
                <div class="order-items">龙井绿茶 x1，茉莉花茶 x1</div>
                <div class="order-footer">
                    <div class="order-time">2026-05-23 10:15</div>
                    <div class="order-price">¥76.00</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 我的Tab页面 -->
    <div id="page-profile" class="page">
        <div class="user-header">
            <div class="user-info">
                <div class="user-avatar">👤</div>
                <div class="user-detail">
                    <div class="user-name">李先生</div>
                    <div class="user-level">黄金会员</div>
                </div>
            </div>
            <div class="user-stats">
                <div class="stat-item" onclick="goPage('my-points')">
                    <div class="stat-num">5,860</div>
                    <div class="stat-label">积分</div>
                </div>
                <div class="stat-item" onclick="goPage('my-coupon')">
                    <div class="stat-num">3</div>
                    <div class="stat-label">优惠券</div>
                </div>
                <div class="stat-item" onclick="goPage('my-collection')">
                    <div class="stat-num">8</div>
                    <div class="stat-label">收藏</div>
                </div>
            </div>
        </div>
        <div class="menu-section">
            <div class="menu-item" onclick="goPage('my-balance')">
                <div class="menu-icon" style="background:#FFF3E0;color:#FF9800;">💰</div>
                <div class="menu-text">我的余额</div>
                <div style="color:#FF6B6B;margin-right:8px;">¥1,280.00</div>
                <div class="menu-arrow">></div>
            </div>
            <div class="menu-item" onclick="goPage('my-booking')">
                <div class="menu-icon" style="background:#E3F2FD;color:#2196F3;">📅</div>
                <div class="menu-text">我的预约</div>
                <div class="menu-reddot">2</div>
                <div class="menu-arrow">></div>
            </div>
            <div class="menu-item" onclick="goPage('my-coupon')">
                <div class="menu-icon" style="background:#FCE4EC;color:#E91E63;">🎫</div>
                <div class="menu-text">优惠券</div>
                <div class="menu-arrow">></div>
            </div>
        </div>
        <div class="menu-section">
            <div class="menu-item" onclick="goPage('my-collection')">
                <div class="menu-icon" style="background:#FFF8E1;color:#FFC107;">⭐</div>
                <div class="menu-text">我的收藏</div>
                <div class="menu-arrow">></div>
            </div>
            <div class="menu-item" onclick="goPage('my-points')">
                <div class="menu-icon" style="background:#E8F5E9;color:#4CAF50;">🎯</div>
                <div class="menu-text">积分记录</div>
                <div class="menu-arrow">></div>
            </div>
            <div class="menu-item" onclick="goPage('my-address')">
                <div class="menu-icon" style="background:#EFEBE9;color:#795548;">📍</div>
                <div class="menu-text">收货地址</div>
                <div class="menu-arrow">></div>
            </div>
        </div>
        <div class="menu-section">
            <div class="menu-item" onclick="goPage('settings')">
                <div class="menu-icon" style="background:#ECEFF1;color:#607D8B;">⚙️</div>
                <div class="menu-text">设置</div>
                <div class="menu-arrow">></div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item active" onclick="switchTab('home')">
            <div class="tab-icon">🏠</div>
            <div class="tab-text">首页</div>
        </div>
        <div class="tab-item" onclick="switchTab('store')">
            <div class="tab-icon">🏪</div>
            <div class="tab-text">门店</div>
        </div>
        <div class="tab-item" onclick="switchTab('orders')">
            <div class="tab-icon">📋</div>
            <div class="tab-text">订单</div>
        </div>
        <div class="tab-item" onclick="switchTab('profile')">
            <div class="tab-icon">👤</div>
            <div class="tab-text">我的</div>
        </div>
    </div>
    
    <!-- 包间预订 -->
    <div id="sub-booking" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>包间预订</h1>
        </div>
        <div class="booking-date">
            <div class="date-header">
                <div class="date-title">选择日期</div>
                <div style="color:#4A7C59;font-size:14px;">2026年5月</div>
            </div>
            <div class="date-grid">
                <div class="date-day">日</div><div class="date-day">一</div><div class="date-day">二</div><div class="date-day">三</div><div class="date-day">四</div><div class="date-day">五</div><div class="date-day">六</div>
                <div class="date-num disabled">25</div><div class="date-num disabled">26</div><div class="date-num selected" onclick="selectDate(this)">27</div><div class="date-num" onclick="selectDate(this)">28</div><div class="date-num" onclick="selectDate(this)">29</div><div class="date-num" onclick="selectDate(this)">30</div><div class="date-num" onclick="selectDate(this)">31</div>
                <div class="date-num" onclick="selectDate(this)">1</div><div class="date-num" onclick="selectDate(this)">2</div><div class="date-num" onclick="selectDate(this)">3</div><div class="date-num" onclick="selectDate(this)">4</div><div class="date-num" onclick="selectDate(this)">5</div><div class="date-num" onclick="selectDate(this)">6</div><div class="date-num" onclick="selectDate(this)">7</div>
            </div>
        </div>
        <div class="time-slots">
            <div class="slot-title">选择时段</div>
            <div class="slot-grid">
                <div class="slot-item selected" onclick="selectSlot(this)">
                    <div class="slot-time">上午</div>
                    <div class="slot-price">¥88/小时</div>
                </div>
                <div class="slot-item" onclick="selectSlot(this)">
                    <div class="slot-time">下午</div>
                    <div class="slot-price">¥128/小时</div>
                </div>
                <div class="slot-item" onclick="selectSlot(this)">
                    <div class="slot-time">晚上</div>
                    <div class="slot-price">¥168/小时</div>
                </div>
            </div>
        </div>
        <div style="padding: 16px 16px 0; font-size: 16px; font-weight: 600; color: #333;">选择包间</div>
        <div class="room-types">
            <div class="room-card selected" onclick="selectRoom(this)">
                <img src="https://pic.shejiben.com/case/2015/03/09/20150309144039-7cb03cd3-la.jpg" alt="小包" onerror="this.style.display='none'">
                <div class="room-info">
                    <div class="room-name">小包</div>
                    <div class="room-desc">适合2-4人，精美茶具</div>
                    <div class="room-price">¥68/小时 <span>¥88</span></div>
                </div>
            </div>
            <div class="room-card" onclick="selectRoom(this)">
                <img src="https://pic1.shejiben.com/case/2019/11/05/20191105150001-df56c757-la.jpeg" alt="中包" onerror="this.style.display='none'">
                <div class="room-info">
                    <div class="room-name">中包</div>
                    <div class="room-desc">适合4-6人，独立空间</div>
                    <div class="room-price">¥128/小时 <span>¥168</span></div>
                </div>
            </div>
            <div class="room-card" onclick="selectRoom(this)">
                <img src="https://respic.3d66.com/coverimg/effect/ebed/e92fc52a319d68e2515dd30bef873d61.jpg" alt="VIP包间" onerror="this.style.display='none'">
                <div class="room-info">
                    <div class="room-name">VIP包间</div>
                    <div class="room-desc">适合8-10人，豪华配置</div>
                    <div class="room-price">¥288/小时 <span>¥388</span></div>
                </div>
            </div>
        </div>
        <div class="booking-btn"><button onclick="goPage('booking-success')">立即预订</button></div>
    </div>
    
    <!-- 商品点单 -->
    <div id="sub-order-food" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>扫码点单</h1>
        </div>
        <div class="search-bar">
            <div class="search-input">
                <span>🔍</span>
                <input type="text" placeholder="搜索茶叶、茶点" readonly>
            </div>
        </div>
        <div class="category-tabs">
            <div class="category-tab active" onclick="switchCategory(this, 'tea')">茶叶</div>
            <div class="category-tab" onclick="switchCategory(this, 'teaware')">茶具</div>
            <div class="category-tab" onclick="switchCategory(this, 'snacks')">茶点</div>
            <div class="category-tab" onclick="switchCategory(this, 'gifts')">礼盒</div>
        </div>
        <div class="food-list" id="foodList">
            <div class="food-item">
                <img src="https://img06.weeecdn.com/item/image/999/251/17D807F6D354CFD4.jpeg" alt="铁观音" onerror="this.parentElement.style.display='none'">
                <div class="food-detail">
                    <div>
                        <div class="food-name">铁观音</div>
                        <div class="food-desc">清香型，回甘悠长</div>
                    </div>
                    <div class="food-bottom">
                        <div class="food-price">¥48</div>
                        <div class="food-add" onclick="event.stopPropagation();addToCart('铁观音', 48)">+</div>
                    </div>
                </div>
            </div>
            <div class="food-item">
                <img src="https://img06.weeecdn.com/item/image/837/588/554F70EADA8C7EC0.jpeg" alt="龙井" onerror="this.parentElement.style.display='none'">
                <div class="food-detail">
                    <div>
                        <div class="food-name">龙井绿茶</div>
                        <div class="food-desc">清香淡雅，色泽翠绿</div>
                    </div>
                    <div class="food-bottom">
                        <div class="food-price">¥42</div>
                        <div class="food-add" onclick="event.stopPropagation();addToCart('龙井绿茶', 42)">+</div>
                    </div>
                </div>
            </div>
            <div class="food-item">
                <img src="https://img06.weeecdn.com/item/image/820/428/55666400A979BE14.png.jpeg" alt="普洱" onerror="this.parentElement.style.display='none'">
                <div class="food-detail">
                    <div>
                        <div class="food-name">普洱熟茶</div>
                        <div class="food-desc">醇厚甘甜，保健养胃</div>
                    </div>
                    <div class="food-bottom">
                        <div class="food-price">¥35</div>
                        <div class="food-add" onclick="event.stopPropagation();addToCart('普洱熟茶', 35)">+</div>
                    </div>
                </div>
            </div>
            <div class="food-item">
                <img src="https://img06.weeecdn.com/item/image/539/009/67E3361574946DA7.jpeg" alt="碧螺春" onerror="this.parentElement.style.display='none'">
                <div class="food-detail">
                    <div>
                        <div class="food-name">碧螺春</div>
                        <div class="food-desc">花果香浓郁</div>
                    </div>
                    <div class="food-bottom">
                        <div class="food-price">¥52</div>
                        <div class="food-add" onclick="event.stopPropagation();addToCart('碧螺春', 52)">+</div>
                    </div>
                </div>
            </div>
            <div class="food-item">
                <img src="https://tea-tao.com/cdn/shop/products/02_532482d7-974c-461f-ac78-75bf6ca1dcdb.jpg?v=1635228780" alt="大红袍" onerror="this.parentElement.style.display='none'">
                <div class="food-detail">
                    <div>
                        <div class="food-name">大红袍</div>
                        <div class="food-desc">岩茶之王，韵味十足</div>
                    </div>
                    <div class="food-bottom">
                        <div class="food-price">¥68</div>
                        <div class="food-add" onclick="event.stopPropagation();addToCart('大红袍', 68)">+</div>
                    </div>
                </div>
            </div>
            <div class="food-item">
                <img src="https://img06.weeecdn.com/item/image/852/988/C914B338A9E5AB8.jpeg" alt="茉莉花茶" onerror="this.parentElement.style.display='none'">
                <div class="food-detail">
                    <div>
                        <div class="food-name">茉莉花茶</div>
                        <div class="food-desc">芬芳馥郁</div>
                    </div>
                    <div class="food-bottom">
                        <div class="food-price">¥38</div>
                        <div class="food-add" onclick="event.stopPropagation();addToCart('茉莉花茶', 38)">+</div>
                    </div>
                </div>
            </div>
            <div class="food-item">
                <img src="https://img06.weeecdn.com/item/image/001/744/4A4BEC55805D482F.webp" alt="金骏眉" onerror="this.parentElement.style.display='none'">
                <div class="food-detail">
                    <div>
                        <div class="food-name">金骏眉</div>
                        <div class="food-desc">高端红茶，金毫显露</div>
                    </div>
                    <div class="food-bottom">
                        <div class="food-price">¥88</div>
                        <div class="food-add" onclick="event.stopPropagation();addToCart('金骏眉', 88)">+</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-bar" onclick="toggleCart()">
            <div class="cart-icon">🛒<div class="cart-badge" id="cartBadge">0</div></div>
            <div class="cart-info"><div class="cart-price" id="cartTotal">¥0.00</div></div>
            <div class="cart-btn" onclick="event.stopPropagation();goPage('order-confirm')">去结算</div>
        </div>
        <div class="cart-detail" id="cartDetail">
            <div class="cart-header">
                <div class="cart-title">购物车</div>
                <div class="cart-clear" onclick="clearCart()">清空</div>
            </div>
            <div id="cartItems"></div>
        </div>
    </div>
    
    <!-- 会员中心 -->
    <div id="sub-member" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>会员中心</h1>
        </div>
        <div class="member-card">
            <div class="member-header">
                <div class="member-avatar">👤</div>
                <div class="member-name">李先生</div>
            </div>
            <div class="member-level-bar"><div class="member-level-progress"></div></div>
            <div class="member-level-text">再消费 ¥2,000 即可升级为钻石会员</div>
            <div class="member-rights">
                <div class="member-right">9折<br>专享价</div>
                <div class="member-right">免费<br>停车</div>
                <div class="member-right">生日<br>礼包</div>
                <div class="member-right">专属<br>客服</div>
            </div>
        </div>
        <div class="member-menu">
            <div class="member-menu-item" onclick="goPage('recharge')">
                <div class="member-menu-icon">💳</div>
                <div class="member-menu-text">会员储值</div>
                <div class="member-menu-arrow">></div>
            </div>
            <div class="member-menu-item" onclick="goPage('my-points')">
                <div class="member-menu-icon">🎫</div>
                <div class="member-menu-text">积分记录</div>
                <div class="member-menu-arrow">></div>
            </div>
            <div class="member-menu-item" onclick="showToast('查看等级权益')">
                <div class="member-menu-icon">📊</div>
                <div class="member-menu-text">等级权益</div>
                <div class="member-menu-arrow">></div>
            </div>
            <div class="member-menu-item" onclick="showToast('查看消费记录')">
                <div class="member-menu-icon">📋</div>
                <div class="member-menu-text">消费记录</div>
                <div class="member-menu-arrow">></div>
            </div>
        </div>
    </div>
    
    <!-- 会员储值 -->
    <div id="sub-recharge" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>会员储值</h1>
        </div>
        <div style="background: #fff; padding: 20px; text-align: center;">
            <div style="font-size: 14px; color: #999;">当前余额</div>
            <div style="font-size: 36px; font-weight: 600; color: #333; margin-top: 8px;">¥1,280.00</div>
        </div>
        <div style="padding: 16px 16px 0; font-size: 16px; font-weight: 600; color: #333;">选择充值金额</div>
        <div class="recharge-options">
            <div class="recharge-item selected" onclick="selectRecharge(this)">
                <div class="recharge-amount">¥200</div><div class="recharge-gift">送20元</div>
            </div>
            <div class="recharge-item" onclick="selectRecharge(this)">
                <div class="recharge-amount">¥500</div><div class="recharge-gift">送80元</div>
            </div>
            <div class="recharge-item" onclick="selectRecharge(this)">
                <div class="recharge-amount">¥1,000</div><div class="recharge-gift">送200元</div>
            </div>
            <div class="recharge-item" onclick="selectRecharge(this)">
                <div class="recharge-amount">¥2,000</div><div class="recharge-gift">送500元</div>
            </div>
        </div>
        <div class="recharge-btn">
            <button onclick="goPage('recharge-success')">立即充值</button>
        </div>
    </div>
    
    <!-- 积分商城 -->
    <div id="sub-mall" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>积分商城</h1>
        </div>
        <div style="background: #FFF8E1; margin: 16px; border-radius: 12px; padding: 16px; text-align: center;">
            <div style="font-size: 24px; font-weight: 600; color: #FF6B6B;">5,860</div>
            <div style="font-size: 12px; color: #999; margin-top: 4px;">当前积分</div>
        </div>
        <div class="gift-grid">
            <div class="gift-card" onclick="goPage('exchange-teaset')">
                <img src="https://www.ankerli.com/upload/image/202208/db084d43-b19d-48b5-972b-7dd152c68a4e_large.jpg" alt="茶具套装" onerror="this.style.display='none'">
                <div class="gift-info">
                    <div class="gift-name">精美茶具套装</div>
                    <div class="gift-points">🎫 2000积分</div>
                </div>
                <div class="gift-exchange">
                    <button onclick="event.stopPropagation();goPage('exchange-success')">立即兑换</button>
                </div>
            </div>
            <div class="gift-card" onclick="goPage('exchange-tea')">
                <img src="https://img06.weeecdn.com/item/image/999/251/17D807F6D354CFD4.jpeg" alt="铁观音" onerror="this.style.display='none'">
                <div class="gift-info">
                    <div class="gift-name">铁观音礼盒</div>
                    <div class="gift-points">🎫 1500积分</div>
                </div>
                <div class="gift-exchange">
                    <button onclick="event.stopPropagation();goPage('exchange-success')">立即兑换</button>
                </div>
            </div>
            <div class="gift-card" onclick="goPage('exchange-cup')">
                <img src="https://img06.weeecdn.com/item/image/187/619/1A43EF3B484048E2.jpeg" alt="品茗杯" onerror="this.style.display='none'">
                <div class="gift-info">
                    <div class="gift-name">精品品茗杯</div>
                    <div class="gift-points">🎫 500积分</div>
                </div>
                <div class="gift-exchange">
                    <button onclick="event.stopPropagation();goPage('exchange-success')">立即兑换</button>
                </div>
            </div>
            <div class="gift-card">
                <img src="https://pic.shejiben.com/case/2015/03/09/20150309144039-7cb03cd3-la.jpg" alt="包间券" onerror="this.style.display='none'">
                <div class="gift-info">
                    <div class="gift-name">2小时包间券</div>
                    <div class="gift-points">🎫 3000积分</div>
                </div>
                <div class="gift-exchange disabled">
                    <button>积分不足</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 优惠券中心 -->
    <div id="sub-coupon" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>优惠券中心</h1>
        </div>
        <div class="coupon-tabs">
            <div class="coupon-tab active" onclick="switchCouponTab(this)">可用(3)</div>
            <div class="coupon-tab" onclick="switchCouponTab(this)">已使用(5)</div>
            <div class="coupon-tab" onclick="switchCouponTab(this)">已过期(2)</div>
        </div>
        <div class="coupon-list">
            <div class="coupon-item" onclick="showToast('优惠券已领取')">
                <div class="coupon-left">
                    <div class="coupon-value"><span>¥</span>20</div>
                    <div class="coupon-limit">满100可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-name">新人专享券</div>
                    <div class="coupon-desc">新用户首单专享优惠</div>
                    <div class="coupon-time">有效期至 2026-06-30</div>
                </div>
            </div>
            <div class="coupon-item" onclick="showToast('优惠券已领取')">
                <div class="coupon-left">
                    <div class="coupon-value"><span>¥</span>50</div>
                    <div class="coupon-limit">满300可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-name">生日福利券</div>
                    <div class="coupon-desc">祝您生日快乐</div>
                    <div class="coupon-time">有效期至 2026-06-15</div>
                </div>
            </div>
            <div class="coupon-item" onclick="showToast('优惠券已领取')">
                <div class="coupon-left">
<div class="coupon-value"><span>¥</span>30</div>
                    <div class="coupon-limit">满200可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-name">端午活动券</div>
                    <div class="coupon-desc">端午佳节限时优惠</div>
                    <div class="coupon-time">有效期至 2026-06-10</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 推荐返佣 -->
    <div id="sub-invite" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>推荐返佣</h1>
        </div>
        <div class="invite-banner">
            <div class="invite-title">邀请好友 注册即享优惠</div>
            <div class="invite-code">TS8888</div>
            <div class="invite-share" onclick="showToast('分享海报已生成')">分享海报给好友</div>
        </div>
        <div class="invite-rules">
            <h4>返佣规则</h4>
            <div class="invite-rule">• 每推荐1位好友注册并消费，您可获得消费金额10%的佣金奖励</div>
            <div class="invite-rule">• 佣金直接到账，可用于消费抵扣或提现</div>
            <div class="invite-rule">• 好友首次消费享8折优惠</div>
        </div>
        <div class="commission-info">
            <div class="commission-num">¥326.50</div>
            <div class="commission-label">累计佣金</div>
            <div class="commission-btns">
                <div class="commission-btn primary" onclick="showToast('已申请提现')">申请提现</div>
                <div class="commission-btn secondary" onclick="showToast('查看明细')">查看明细</div>
            </div>
        </div>
    </div>
    
    <!-- 设置 -->
    <div id="sub-settings" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>设置</h1>
        </div>
        <div class="settings-list">
            <div class="settings-item" onclick="showToast('编辑个人信息')">
                <div class="settings-icon">👤</div>
                <div class="settings-text">个人信息</div>
                <div class="settings-arrow">></div>
            </div>
            <div class="settings-item" onclick="showToast('消息通知设置')">
                <div class="settings-icon">🔔</div>
                <div class="settings-text">消息通知</div>
                <div class="settings-arrow">></div>
            </div>
            <div class="settings-item" onclick="showToast('账户安全设置')">
                <div class="settings-icon">🔐</div>
                <div class="settings-text">账户安全</div>
                <div class="settings-arrow">></div>
            </div>
            <div class="settings-item" onclick="goPage('my-address')">
                <div class="settings-icon">📍</div>
                <div class="settings-text">收货地址</div>
                <div class="settings-arrow">></div>
            </div>
        </div>
        <div class="settings-list">
            <div class="settings-item" onclick="showToast('查看用户协议')">
                <div class="settings-icon">📜</div>
                <div class="settings-text">用户协议</div>
                <div class="settings-arrow">></div>
            </div>
            <div class="settings-item" onclick="showToast('查看隐私政策')">
                <div class="settings-icon">🔏</div>
                <div class="settings-text">隐私政策</div>
                <div class="settings-arrow">></div>
            </div>
            <div class="settings-item" onclick="showToast('关于我们')">
                <div class="settings-icon">ℹ️</div>
                <div class="settings-text">关于我们</div>
                <div class="settings-arrow">></div>
            </div>
        </div>
        <div class="settings-list">
            <div class="settings-item" onclick="logout()" style="justify-content: center; color: #FF6B6B;">退出登录</div>
        </div>
    </div>
    
    <!-- 订单确认 -->
    <div id="sub-order-confirm" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>确认订单</h1>
        </div>
        <div class="order-confirm">
            <div class="confirm-address">
                <div class="address-icon">🏠</div>
                <div class="address-text">
                    <div class="address-title">茶香阁·建国门店</div>
                    <div class="address-desc">北京市朝阳区建国门外大街1号</div>
                </div>
            </div>
            <div class="confirm-items" id="confirmItems"></div>
            <div class="confirm-coupon" onclick="goPage('coupon')">
                <div class="confirm-coupon-text">使用优惠券</div>
                <div style="display: flex; align-items: center; gap: 8px;">
                    <span style="color: #FF6B6B; font-size: 14px;">-¥20</span>
                    <div class="confirm-coupon-arrow">></div>
                </div>
            </div>
            <div class="confirm-remark">
                <input type="text" placeholder="添加备注（口味、偏好等）">
            </div>
        </div>
        <div class="confirm-summary">
            <div class="summary-item"><span>商品金额</span><span id="summaryAmount">¥0.00</span></div>
            <div class="summary-item"><span>优惠金额</span><span style="color: #FF6B6B;">-¥20.00</span></div>
            <div class="summary-item"><span>余额抵扣</span><span style="color: #4A7C59;">-¥0.00</span></div>
            <div class="summary-item total"><span>合计</span><span id="totalAmount">¥0.00</span></div>
        </div>
        <div class="confirm-pay">
            <div class="confirm-pay-title">支付方式</div>
            <div class="pay-option" onclick="selectPay(this)">
                <div class="pay-radio selected"></div>
                <div class="pay-text">微信支付</div>
            </div>
            <div class="pay-option" onclick="selectPay(this)">
                <div class="pay-radio"></div>
                <div class="pay-text">余额支付</div>
                <div class="pay-balance">可用余额 ¥1,280.00</div>
            </div>
        </div>
        <div class="confirm-submit">
            <div class="confirm-total">
                <div class="confirm-total-price" id="submitTotal">¥0.00</div>
            </div>
            <div class="confirm-total-btn" onclick="goPage('pay-success')">立即支付</div>
        </div>
    </div>
    
    <!-- 支付成功 -->
    <div id="sub-pay-success" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="switchTab('home')">←</div>
            <h1>支付成功</h1>
        </div>
        <div class="pay-success">
            <div class="pay-success-icon">✓</div>
            <div class="pay-success-title">支付成功</div>
            <div class="pay-success-desc">订单已提交，请等待制作</div>
            <div class="pay-success-btns">
                <div class="pay-success-btn primary" onclick="switchTab('orders')">查看订单</div>
                <div class="pay-success-btn secondary" onclick="switchTab('home')">返回首页</div>
            </div>
        </div>
    </div>
    
    <!-- 预订成功 -->
    <div id="sub-booking-success" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="switchTab('home')">←</div>
            <h1>预订成功</h1>
        </div>
        <div class="pay-success">
            <div class="pay-success-icon">✓</div>
            <div class="pay-success-title">预订成功</div>
            <div class="pay-success-desc">请按时到店，出示预约码核销</div>
            <div style="margin-top: 24px; padding: 20px; background: #f5f5f5; border-radius: 12px;">
                <div style="font-size: 14px; color: #666; margin-bottom: 8px;">预约码</div>
                <div style="font-size: 28px; font-weight: 600; color: #333; letter-spacing: 4px;">BK20260526001</div>
            </div>
            <div class="pay-success-btns" style="margin-top: 24px;">
                <div class="pay-success-btn primary" onclick="switchTab('profile')">查看预约</div>
                <div class="pay-success-btn secondary" onclick="switchTab('home')">返回首页</div>
            </div>
        </div>
    </div>
    
    <!-- 充值成功 -->
    <div id="sub-recharge-success" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>充值成功</h1>
        </div>
        <div class="pay-success">
            <div class="pay-success-icon">✓</div>
            <div class="pay-success-title">充值成功</div>
            <div class="pay-success-desc">已成功充值 ¥220.00</div>
            <div style="margin-top: 24px;">
                <div style="font-size: 14px; color: #666;">当前余额</div>
                <div style="font-size: 32px; font-weight: 600; color: #333; margin-top: 8px;">¥1,500.00</div>
            </div>
            <div class="pay-success-btns" style="margin-top: 32px;">
                <div class="pay-success-btn secondary" onclick="goBack()">返回</div>
            </div>
        </div>
    </div>
    
    <!-- 兑换成功 -->
    <div id="sub-exchange-success" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>兑换成功</h1>
        </div>
        <div class="pay-success">
            <div class="pay-success-icon">✓</div>
            <div class="pay-success-title">兑换成功</div>
            <div class="pay-success-desc">请到店出示兑换码领取礼品</div>
            <div style="margin-top: 24px; padding: 20px; background: #f5f5f5; border-radius: 12px;">
                <div style="font-size: 14px; color: #666; margin-bottom: 8px;">兑换码</div>
                <div style="font-size: 28px; font-weight: 600; color: #333; letter-spacing: 4px;">EX20260525001</div>
            </div>
            <div class="pay-success-btns" style="margin-top: 24px;">
                <div class="pay-success-btn secondary" onclick="switchTab('home')">返回首页</div>
            </div>
        </div>
    </div>
    
    <!-- 商品详情 -->
    <div id="sub-product-detail" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>商品详情</h1>
        </div>
        <img class="product-detail-img" src="https://img06.weeecdn.com/item/image/999/251/17D807F6D354CFD4.jpeg" alt="铁观音" onerror="this.style.display='none'">
        <div class="product-detail-info">
            <div style="font-size: 20px; font-weight: 600; color: #333;">铁观音礼盒装</div>
            <div class="product-detail-price">¥128 <span>¥168</span></div>
            <div class="product-detail-sales">月销326 | 库存500</div>
        </div>
        <div class="product-detail-desc">
            <div class="product-detail-desc-title">商品详情</div>
            <div class="product-detail-desc-content">
                铁观音是中国传统名茶，属于青茶类。产于福建省泉州市安溪县西坪镇尧阳山脚下。<br><br>
                【产品特点】<br>
                • 香气浓郁，回甘悠长<br>
                • 汤色金黄透亮<br>
                • 叶底肥厚明亮<br><br>
                【包装】精美礼盒装，送礼自用两相宜
            </div>
        </div>
        <div class="product-detail-action">
            <div class="product-detail-collect" onclick="showToast('已收藏')">⭐ 收藏</div>
            <div class="product-detail-add" onclick="addToCart('铁观音礼盒装', 128); showToast('已加入购物车')">加入购物车</div>
        </div>
    </div>
    
    <!-- 端午活动 -->
    <div id="sub-activity" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>端午活动</h1>
        </div>
        <div class="activity-banner">
            <div class="activity-banner-title">端午特惠 限时来袭</div>
            <div class="activity-banner-sub">包间消费满500送精美茶具套装</div>
        </div>
        <div class="activity-section">
            <div class="activity-title">🎁 活动内容</div>
            <div class="activity-item">
                <div class="activity-icon" style="background:#FF6B6B;color:#fff;">1</div>
                <div class="activity-text">
                    <div class="activity-name">包间消费满500</div>
                    <div class="activity-desc">送精美茶具套装一套</div>
                </div>
            </div>
            <div class="activity-item">
                <div class="activity-icon" style="background:#4ECDC4;color:#fff;">2</div>
                <div class="activity-text">
                    <div class="activity-name">全场茶叶8折</div>
                    <div class="activity-desc">指定茶叶产品限时优惠</div>
                </div>
            </div>
            <div class="activity-item">
                <div class="activity-icon" style="background:#FFD93D;color:#333;">3</div>
                <div class="activity-text">
                    <div class="activity-name">充值双倍积分</div>
                    <div class="activity-desc">活动期间充值享受双倍积分</div>
                </div>
            </div>
        </div>
        <div class="activity-section">
            <div class="activity-title">📅 活动时间</div>
            <div style="font-size:14px;color:#666;line-height:1.8;">
                2026年6月1日 - 2026年6月10日<br>
                活动仅限北京地区门店参与
            </div>
        </div>
        <div style="padding:0 16px 16px;">
            <button onclick="goPage('booking'); showToast('请提前预订包间')" style="width:100%;height:48px;background:#4A7C59;color:#fff;border:none;border-radius:24px;font-size:16px;cursor:pointer;">立即预订</button>
        </div>
    </div>
    
    <!-- 我的预约 -->
    <div id="sub-my-booking" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>我的预约</h1>
        </div>
        <div class="order-tabs">
            <div class="order-tab active">待到店(2)</div>
            <div class="order-tab">已完成</div>
            <div class="order-tab">已取消</div>
        </div>
        <div class="order-list">
            <div class="order-card">
                <div class="order-header">
                    <div class="order-num">预约号：BK20260526001</div>
                    <div class="order-status">待到店</div>
                </div>
                <div class="order-items">小包 | 2026-05-26 下午</div>
                <div class="order-footer">
                    <div class="order-time">预约时间：2026-05-25 10:30</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 门店详情 -->
    <div id="sub-store-detail" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>门店详情</h1>
        </div>
        <img src="https://pic.shejiben.com/case/2019/11/05/20191105145951-a2bbc976-la.jpeg" alt="门店" style="width:100%;height:200px;object-fit:cover;" onerror="this.style.display='none'">
        <div class="store-info" style="margin-top:12px;">
            <div class="store-item">
                <div class="store-icon">📍</div>
                <div class="store-text">
                    <div class="store-name">茶香阁·建国门店</div>
                    <div class="store-desc">北京市朝阳区建国门外大街1号国贸大厦B1层</div>
                </div>
            </div>
            <div class="store-item" onclick="showToast('010-8888-6666')">
                <div class="store-icon">📞</div>
                <div class="store-text">
                    <div class="store-name">010-8888-6666</div>
                    <div class="store-desc">营业时间内随时咨询</div>
                </div>
            </div>
            <div class="store-item">
                <div class="store-icon">🕐</div>
                <div class="store-text">
                    <div class="store-name">营业时间</div>
                    <div class="store-desc">周一至周日 9:00-22:00</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 我的收藏 -->
    <div id="sub-my-collection" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>我的收藏</h1>
        </div>
        <div class="collect-list">
            <div class="collect-item" onclick="goPage('product-detail')">
                <img src="https://img06.weeecdn.com/item/image/999/251/17D807F6D354CFD4.jpeg" alt="铁观音" onerror="this.style.display='none'">
                <div class="collect-item-info">
                    <div class="collect-item-name">铁观音礼盒装</div>
                    <div class="collect-item-price">¥128</div>
                    <div class="collect-item-del" onclick="event.stopPropagation();showToast('已取消收藏')">取消收藏</div>
                </div>
            </div>
            <div class="collect-item" onclick="goPage('product-detail-2')">
                <img src="https://img06.weeecdn.com/item/image/837/588/554F70EADA8C7EC0.jpeg" alt="龙井" onerror="this.style.display='none'">
                <div class="collect-item-info">
                    <div class="collect-item-name">龙井特级绿茶</div>
                    <div class="collect-item-price">¥98</div>
                    <div class="collect-item-del" onclick="event.stopPropagation();showToast('已取消收藏')">取消收藏</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 我的余额 -->
    <div id="sub-my-balance" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>我的余额</h1>
        </div>
        <div class="balance-card">
            <div class="balance-label">账户余额</div>
            <div class="balance-num">¥1,280.00</div>
            <div class="balance-btns">
                <div class="balance-btn primary" onclick="goPage('recharge')">充值</div>
                <div class="balance-btn secondary" onclick="showToast('已申请提现')">提现</div>
            </div>
        </div>
        <div class="balance-record">
            <div class="balance-record-title">最近交易</div>
            <div class="balance-record-item">
                <div>
                    <div class="balance-record-name">会员充值</div>
                    <div class="balance-record-time">2026-05-20 15:30</div>
                </div>
                <div class="balance-record-amount income">+¥500.00</div>
            </div>
            <div class="balance-record-item">
                <div>
                    <div class="balance-record-name">商品消费</div>
                    <div class="balance-record-time">2026-05-18 14:20</div>
                </div>
                <div class="balance-record-amount expense">-¥128.00</div>
            </div>
        </div>
    </div>
    
    <!-- 积分明细 -->
    <div id="sub-my-points" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>积分记录</h1>
        </div>
        <div class="points-balance">
            <div class="points-num">5,860</div>
            <div class="points-label">可用积分</div>
        </div>
        <div class="balance-record">
            <div class="balance-record-title">积分明细</div>
            <div class="balance-record-item">
                <div>
                    <div class="balance-record-name">消费获得</div>
                    <div class="balance-record-time">2026-05-25 14:30</div>
                </div>
                <div class="balance-record-amount income">+128</div>
            </div>
            <div class="balance-record-item">
                <div>
                    <div class="balance-record-name">兑换茶具套装</div>
                    <div class="balance-record-time">2026-05-20 10:00</div>
                </div>
                <div class="balance-record-amount expense">-2000</div>
            </div>
        </div>
    </div>
    
    <!-- 我的优惠券 -->
    <div id="sub-my-coupon" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>我的优惠券</h1>
        </div>
        <div class="my-coupon-tabs">
            <div class="my-coupon-tab active">可用(3)</div>
            <div class="my-coupon-tab">已使用(5)</div>
            <div class="my-coupon-tab">已过期(2)</div>
        </div>
        <div class="coupon-list">
            <div class="coupon-item">
                <div class="coupon-left">
                    <div class="coupon-value"><span>¥</span>20</div>
                    <div class="coupon-limit">满100可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-name">新人专享券</div>
                    <div class="coupon-desc">新用户首单专享优惠</div>
                    <div class="coupon-time">有效期至 2026-06-30</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 订单详情 -->
    <div id="sub-order-detail" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>订单详情</h1>
        </div>
        <div style="background:#fff;padding:20px;">
            <div style="font-size:18px;font-weight:600;color:#333;margin-bottom:16px;">订单状态</div>
            <div style="display:flex;align-items:center;gap:12px;">
                <div style="width:40px;height:40px;background:#4A7C59;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;">✓</div>
                <div>
                    <div style="font-size:15px;color:#333;font-weight:500;">订单进行中</div>
                    <div style="font-size:12px;color:#999;margin-top:4px;">商家正在准备中</div>
                </div>
            </div>
        </div>
        <div style="background:#fff;margin-top:12px;padding:16px;">
            <div style="font-size:14px;color:#333;margin-bottom:12px;">订单信息</div>
            <div style="font-size:13px;color:#666;line-height:2;">
                订单号：DD20260525001<br>
                下单时间：2026-05-25 14:30<br>
                门店：茶香阁·建国门店
            </div>
        </div>
        <div style="background:#fff;margin-top:12px;padding:16px;">
            <div style="font-size:14px;color:#333;margin-bottom:12px;">商品清单</div>
            <div style="display:flex;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0;">
                <img src="https://img06.weeecdn.com/item/image/999/251/17D807F6D354CFD4.jpeg" style="width:50px;height:50px;border-radius:8px;margin-right:12px;object-fit:cover;" onerror="this.style.display='none'">
                <div style="flex:1;"><div style="font-size:14px;color:#333;">铁观音礼盒</div></div>
                <div style="font-size:14px;color:#666;">¥128 x1</div>
            </div>
        </div>
        <div style="padding:16px;">
            <button onclick="goPage('review')" style="width:100%;height:48px;background:#4A7C59;color:#fff;border:none;border-radius:24px;font-size:16px;cursor:pointer;">立即评价</button>
        </div>
    </div>
    
    <!-- 评价页面 -->
    <div id="sub-review" class="sub-page">
        <div class="header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h1>评价</h1>
        </div>
        <div class="review-form">
            <div class="review-score">
                <div class="review-score-title">服务评分</div>
                <div class="review-stars">
                    <div class="review-star active" onclick="setRating(1)">★</div>
                    <div class="review-star active" onclick="setRating(2)">★</div>
                    <div class="review-star active" onclick="setRating(3)">★</div>
                    <div class="review-star active" onclick="setRating(4)">★</div>
                    <div class="review-star" onclick="setRating(5)">★</div>
                </div>
            </div>
            <div class="review-score-title">选择标签</div>
            <div class="review-tags">
                <div class="review-tag active" onclick="toggleTag(this)">环境优雅</div>
                <div class="review-tag" onclick="toggleTag(this)">服务热情</div>
                <div class="review-tag" onclick="toggleTag(this)">茶叶新鲜</div>
                <div class="review-tag" onclick="toggleTag(this)">茶点美味</div>
                <div class="review-tag" onclick="toggleTag(this)">下次再来</div>
            </div>
            <div class="review-content">
                <textarea placeholder="分享您的用餐体验...">