编辑页面

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>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        :root {
            --primary: #07C160; --primary-light: #10B981;
            --accent: #FF6B00; --warn: #FF9500; --danger: #FA5151;
            --text: #333; --text-secondary: #666; --text-light: #999;
            --bg: #F7F7F7; --white: #FFF; --border: #EBEEF0;
        }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }

        /* 手机框架 */
        .phone-frame { max-width: 390px; margin: 0 auto; background: var(--white); min-height: 100vh; position: relative; box-shadow: 0 0 60px rgba(0,0,0,0.15); }
        .status-bar { height: 44px; background: var(--primary); display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 500; }
        .tab-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 390px; background: var(--white); border-top: 1px solid var(--border); display: flex; padding: 6px 0; padding-bottom: env(safe-area-inset-bottom, 6px); z-index: 100; }
        .tab-item { flex: 1; text-align: center; padding: 4px 0; cursor: pointer; position: relative; }
        .tab-item i { font-size: 22px; display: block; margin-bottom: 2px; }
        .tab-item span { font-size: 10px; color: var(--text-light); }
        .tab-item.active i, .tab-item.active span { color: var(--primary); }
        .tab-badge { position: absolute; top: 0; right: 20px; background: var(--danger); color: white; font-size: 10px; padding: 1px 5px; border-radius: 10px; min-width: 16px; text-align: center; }

        /* 页面容器 */
        .page { display: none; min-height: calc(100vh - 83px); padding-bottom: 20px; }
        .page.active { display: block; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* 首页 */
        .home-header { background: linear-gradient(135deg, var(--primary) 0%, #06A953 100%); padding: 20px; color: white; }
        .home-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .home-title { font-size: 20px; font-weight: 600; }
        .home-search { background: rgba(255,255,255,0.2); border-radius: 20px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .home-search input { background: none; border: none; color: white; flex: 1; font-size: 14px; outline: none; }
        .home-search input::placeholder { color: rgba(255,255,255,0.7); }
        .home-search i { color: rgba(255,255,255,0.7); }
        .home-banner { background: white; border-radius: 12px; padding: 16px; margin: -10px 16px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        .banner-info { display: flex; justify-content: space-between; align-items: center; }
        .banner-text h3 { font-size: 16px; color: var(--text); margin-bottom: 4px; }
        .banner-text p { font-size: 12px; color: var(--text-light); }
        .banner-btn { background: var(--primary); color: white; padding: 8px 16px; border-radius: 20px; font-size: 12px; }

        /* 服务入口 */
        .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 16px; margin-bottom: 16px; }
        .service-item { text-align: center; cursor: pointer; }
        .service-icon { width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .service-name { font-size: 12px; color: var(--text); }
        .service-item .badge { font-size: 10px; color: white; padding: 2px 6px; border-radius: 10px; margin-left: 4px; }

        /* 内容区块 */
        .content-section { background: var(--white); margin: 0 16px 16px; border-radius: 12px; padding: 16px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .section-title { font-size: 16px; font-weight: 600; }
        .section-more { font-size: 12px; color: var(--text-light); display: flex; align-items: center; }
        .section-more i { font-size: 14px; }

        /* 短剧列表 */
        .drama-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
        .drama-item { min-width: 100px; cursor: pointer; }
        .drama-cover { width: 100px; height: 140px; border-radius: 8px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
        .drama-cover i { font-size: 32px; color: white; }
        .drama-tag { position: absolute; top: 8px; left: 8px; background: rgba(255,0,0,0.8); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; }
        .drama-title { font-size: 13px; color: var(--text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .drama-meta { font-size: 11px; color: var(--text-light); }

        /* 订单卡片 */
        .order-card { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
        .order-card:last-child { border-bottom: none; }
        .order-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .order-info { flex: 1; }
        .order-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
        .order-meta { font-size: 12px; color: var(--text-light); }
        .order-right { text-align: right; }
        .order-price { font-size: 14px; font-weight: 600; color: var(--text); }
        .order-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 4px; }
        .status-success { background: #E8F8EF; color: #07C160; }
        .status-processing { background: #E8F4FF; color: #007AFF; }
        .status-pending { background: #FFF4E8; color: #FF9500; }

        /* 商家卡片 */
        .shop-card { display: flex; gap: 12px; padding: 12px; background: var(--white); border-radius: 12px; margin-bottom: 12px; cursor: pointer; }
        .shop-logo { width: 80px; height: 80px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
        .shop-info { flex: 1; overflow: hidden; }
        .shop-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .shop-meta { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
        .shop-tags { display: flex; gap: 6px; flex-wrap: wrap; }
        .shop-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
        .tag-red { background: #FFECEC; color: #FA5151; }
        .tag-green { background: #E8F8EF; color: #07C160; }
        .shop-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
        .shop-price { font-size: 12px; color: var(--text-light); }
        .shop-dist { font-size: 11px; color: var(--text-light); }

        /* 充电站卡片 */
        .station-card { background: var(--white); border-radius: 12px; padding: 16px; margin-bottom: 12px; cursor: pointer; }
        .station-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
        .station-name { font-size: 15px; font-weight: 600; }
        .station-avail { color: var(--primary); font-size: 13px; }
        .station-address { font-size: 12px; color: var(--text-light); margin-bottom: 12px; display: flex; align-items: center; gap: 4px; }
        .station-footer { display: flex; justify-content: space-between; align-items: center; }
        .station-price { color: var(--accent); font-size: 16px; font-weight: 600; }
        .station-btn { background: var(--primary); color: white; padding: 8px 20px; border-radius: 20px; font-size: 13px; border: none; cursor: pointer; }

        /* 用户中心 */
        .user-header { background: linear-gradient(135deg, var(--primary) 0%, #06A953 100%); padding: 30px 20px; color: white; }
        .user-info { display: flex; align-items: center; gap: 16px; }
        .user-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .user-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
        .user-vip { font-size: 12px; opacity: 0.8; }
        .user-stats { display: flex; margin-top: 20px; }
        .user-stat { flex: 1; text-align: center; }
        .user-stat-value { font-size: 18px; font-weight: 600; }
        .user-stat-label { font-size: 11px; opacity: 0.8; margin-top: 4px; }

        /* 菜单网格 */
        .menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); margin-top: 16px; border-radius: 12px; overflow: hidden; }
        .menu-item { background: var(--white); padding: 16px 8px; text-align: center; cursor: pointer; }
        .menu-item i { font-size: 24px; display: block; margin-bottom: 6px; }
        .menu-item span { font-size: 12px; color: var(--text); }

        /* 积分卡片 */
        .points-card { background: linear-gradient(135deg, #FF9500 0%, #FF6B00 100%); border-radius: 12px; padding: 20px; color: white; margin: 16px; }
        .points-value { font-size: 32px; font-weight: 700; }
        .points-desc { font-size: 12px; opacity: 0.9; margin-top: 4px; }
        .points-action { background: white; color: #FF6B00; padding: 8px 20px; border-radius: 20px; font-size: 13px; border: none; margin-top: 12px; cursor: pointer; }

        /* 充值弹窗 */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: flex-end; justify-content: center; }
        .modal-overlay.active { display: flex; }
        .modal { background: var(--white); width: 390px; border-radius: 16px 16px 0 0; padding: 24px; animation: slideUp 0.3s ease; }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-title { font-size: 18px; font-weight: 600; }
        .modal-close { width: 28px; height: 28px; background: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
        .amount-item { padding: 16px; border: 2px solid var(--border); border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.2s; }
        .amount-item.selected { border-color: var(--primary); background: #E8F8EF; }
        .amount-value { font-size: 18px; font-weight: 600; color: var(--text); }
        .amount-gift { font-size: 11px; color: var(--primary); margin-top: 4px; }
        .pay-btn { width: 100%; padding: 14px; background: var(--primary); color: white; border: none; border-radius: 24px; font-size: 16px; cursor: pointer; }

        /* Toast */
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: white; padding: 16px 24px; border-radius: 8px; font-size: 14px; z-index: 300; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
        .toast.show { opacity: 1; }

        /* 充电中状态 */
        .charging-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 150; align-items: center; justify-content: center; flex-direction: column; color: white; }
        .charging-overlay.active { display: flex; }
        .charging-icon { font-size: 80px; color: var(--primary); animation: pulse 2s infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } }
        .charging-text { font-size: 18px; margin-top: 20px; }
        .charging-info { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,0.7); }
        .charging-stop { margin-top: 30px; background: var(--danger); color: white; padding: 14px 40px; border: none; border-radius: 24px; font-size: 16px; cursor: pointer; }

        /* 导航栏 */
        .nav-bar { display: flex; align-items: center; padding: 12px 16px; background: var(--white); border-bottom: 1px solid var(--border); }
        .nav-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; }
        .nav-right { width: 32px; }

        /* 空状态 */
        .empty-state { text-align: center; padding: 60px 20px; }
        .empty-icon { font-size: 60px; color: var(--border); margin-bottom: 16px; }
        .empty-text { color: var(--text-light); font-size: 14px; }
        
        /* 快捷入口 */
        .quick-links { display: flex; gap: 8px; padding: 12px 16px; background: var(--bg); overflow-x: auto; }
        .quick-link { display: flex; align-items: center; gap: 6px; background: var(--white); padding: 8px 12px; border-radius: 20px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; cursor: pointer; transition: all 0.2s; }
        .quick-link:hover { background: var(--primary); color: white; }
        .quick-link i { font-size: 14px; }
        
        /* 积分余额小卡片 */
        .mini-balance { display: flex; gap: 12px; padding: 8px 16px; background: var(--white); border-bottom: 1px solid var(--border); }
        .mini-balance-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
        .mini-balance-item span { font-weight: 600; color: var(--text); }
        
        /* 关联推荐 */
        .related-actions { padding: 12px 16px; }
        .related-title { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
        .related-title i { color: var(--primary); }
        .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .related-card { background: var(--white); border-radius: 10px; padding: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.2s; }
        .related-card:hover { transform: scale(1.02); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .related-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }
        .related-text { flex: 1; }
        .related-name { font-size: 13px; font-weight: 500; }
        .related-desc { font-size: 11px; color: var(--text-light); }
        
        /* 积分抵扣提示 */
        .points-tip { background: linear-gradient(135deg, #FFF8E6 0%, #FFF4D6 100%); border: 1px solid #FFE566; border-radius: 8px; padding: 10px 12px; margin: 12px 16px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #B8860B; }
        .points-tip i { font-size: 16px; }
        
        /* 油品选择器 */
        .fuel-tabs { display: flex; gap: 8px; padding: 0 16px; margin-bottom: 12px; overflow-x: auto; }
        .fuel-tab { padding: 10px 16px; border-radius: 20px; white-space: nowrap; font-size: 13px; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; background: var(--bg); color: var(--text-secondary); }
        .fuel-tab.active { background: #FFF5E6; border-color: #FF9500; color: #FF9500; font-weight: 600; }
        .fuel-tab:hover:not(.active) { background: var(--bg); }
        
        /* 油品详情卡片 */
        .fuel-detail-card { background: linear-gradient(135deg, #FF9500 0%, #FF6B00 100%); border-radius: 12px; padding: 16px; margin: 0 16px 16px; color: white; }
        .fuel-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .fuel-detail-type { font-size: 24px; font-weight: 700; }
        .fuel-detail-price { font-size: 28px; font-weight: 700; }
        .fuel-detail-price small { font-size: 14px; }
        .fuel-detail-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
        .fuel-tag { background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 12px; font-size: 11px; }
        .fuel-detail-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
        .fuel-info-item { background: rgba(255,255,255,0.15); padding: 10px; border-radius: 8px; }
        .fuel-info-label { font-size: 11px; opacity: 0.8; margin-bottom: 2px; }
        .fuel-info-value { font-size: 14px; font-weight: 600; }
        
        /* 加油站油品列表 */
        .station-fuel-list { margin-top: 12px; }
        .station-fuel-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); }
        .station-fuel-item:first-child { border-top: none; }
        .station-fuel-name { font-size: 14px; font-weight: 500; }
        .station-fuel-desc { font-size: 11px; color: var(--text-light); margin-top: 2px; }
        .station-fuel-price { font-size: 16px; font-weight: 600; color: #FF9500; }
        .station-fuel-btn { background: #FF9500; color: white; border: none; padding: 8px 16px; border-radius: 16px; font-size: 12px; cursor: pointer; }
    </style>
</head>
<body>
<div class="phone-frame">
    <!-- 状态栏 -->
    <div class="status-bar">一站式服务</div>

    <!-- ===== 首页 ===== -->
    <div class="page active" id="page-home">
        <div class="home-header">
            <div class="home-header-top">
                <div class="home-title">一站式服务</div>
                <i class="ri-notification-3-line" style="font-size: 22px; cursor: pointer;" onclick="showPage('notice')"></i>
            </div>
            <div class="home-search">
                <i class="ri-search-line"></i>
                <input type="text" placeholder="搜索商家、服务、商品">
            </div>
        </div>

        <div class="home-banner" onclick="showPage('notice')">
            <div class="banner-info">
                <div class="banner-text">
                    <h3>新用户首充返20%</h3>
                    <p>充电/加油首单满50元返20%</p>
                </div>
                <div class="banner-btn">立即领取</div>
            </div>
        </div>

        <div class="service-grid">
            <div class="service-item" onclick="showPage('charging')">
                <div class="service-icon" style="background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: white;"><i class="ri-flashlight-line"></i></div>
                <div class="service-name">充电</div>
            </div>
            <div class="service-item" onclick="showPage('oil')">
                <div class="service-icon" style="background: linear-gradient(135deg, #FF9500 0%, #FF6B00 100%); color: white;"><i class="ri-gas-station-line"></i></div>
                <div class="service-name">加油</div>
            </div>
            <div class="service-item" onclick="showPage('food')">
                <div class="service-icon" style="background: linear-gradient(135deg, #FA5151 0%, #D93A3A 100%); color: white;"><i class="ri-basketball-line"></i></div>
                <div class="service-name">外卖</div>
            </div>
            <div class="service-item" onclick="showPage('express')">
                <div class="service-icon" style="background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%); color: white;"><i class="ri-truck-line"></i></div>
                <div class="service-name">快递</div>
            </div>
            <div class="service-item" onclick="showPage('drama')">
                <div class="service-icon" style="background: linear-gradient(135deg, #FF2D55 0%, #C71E3A 100%); color: white;"><i class="ri-film-line"></i></div>
                <div class="service-name">短剧</div>
                <span class="badge" style="background: #FF2D55;">免费</span>
            </div>
            <div class="service-item" onclick="showPage('life')">
                <div class="service-icon" style="background: linear-gradient(135deg, #AF52DE 0%, #8B21AB 100%); color: white;"><i class="ri-home-4-line"></i></div>
                <div class="service-name">生活</div>
            </div>
            <div class="service-item" onclick="showPage('rewards')">
                <div class="service-icon" style="background: linear-gradient(135deg, #FFD60A 0%, #E5C100 100%); color: #333;"><i class="ri-gift-line"></i></div>
                <div class="service-name">奖励</div>
            </div>
            <div class="service-item" onclick="showPage('user')">
                <div class="service-icon" style="background: linear-gradient(135deg, #5856D6 0%, #3634A3 100%); color: white;"><i class="ri-user-line"></i></div>
                <div class="service-name">我的</div>
            </div>
        </div>

        <div class="content-section">
            <div class="section-header">
                <div class="section-title">免费短剧 · 赚积分</div>
                <div class="section-more" onclick="showPage('drama')">更多 <i class="ri-arrow-right-s-line"></i></div>
            </div>
            <div class="drama-scroll" id="home-drama-list"></div>
        </div>

        <div class="content-section">
            <div class="section-header">
                <div class="section-title">最近订单</div>
                <div class="section-more" onclick="showPage('orders')">全部 <i class="ri-arrow-right-s-line"></i></div>
            </div>
            <div id="home-order-list"></div>
        </div>
    </div>

    <!-- ===== 充电页 ===== -->
    <div class="page" id="page-charging">
        <div class="nav-bar">
            <div class="nav-back" onclick="showPage('home')"><i class="ri-arrow-left-s-line" style="font-size: 24px;"></i></div>
            <div class="nav-title">充电服务</div>
            <div class="nav-right"></div>
        </div>
        <div class="mini-balance">
            <div class="mini-balance-item"><i class="ri-coins-line" style="color: #FF9500;"></i> 余额: <span id="charging-balance">¥128.50</span></div>
            <div class="mini-balance-item"><i class="ri-gift-line" style="color: #07C160;"></i> 积分: <span id="charging-points">2,568</span></div>
        </div>
        <div style="padding: 16px;">
            <div style="background: linear-gradient(135deg, #10B981 0%, #059669 100%); border-radius: 12px; padding: 20px; color: white; margin-bottom: 16px;">
                <div style="font-size: 14px; opacity: 0.9;">附近充电站</div>
                <div style="font-size: 28px; font-weight: 700; margin: 8px 0;">12 个</div>
                <div style="font-size: 12px; opacity: 0.8;">空闲桩位 86 个</div>
            </div>
            <div id="charging-list"></div>
            <div class="related-actions">
                <div class="related-title"><i class="ri-lightbulb-line"></i> 充完电饿了？试试这些</div>
                <div class="related-grid">
                    <div class="related-card" onclick="showPage('food'); setTimeout(() => orderFood('湘菜馆·正宗湖南菜'), 300)">
                        <div class="related-icon" style="background: #FA5151;"><i class="ri-restaurant-2-line"></i></div>
                        <div class="related-text">
                            <div class="related-name">点外卖</div>
                            <div class="related-desc">用积分抵现金</div>
                        </div>
                    </div>
                    <div class="related-card" onclick="showPage('drama')">
                        <div class="related-icon" style="background: #FF2D55;"><i class="ri-film-line"></i></div>
                        <div class="related-text">
                            <div class="related-name">看短剧</div>
                            <div class="related-desc">等待时赚积分</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== 加油页 ===== -->
    <div class="page" id="page-oil">
        <div class="nav-bar">
            <div class="nav-back" onclick="showPage('home')"><i class="ri-arrow-left-s-line" style="font-size: 24px;"></i></div>
            <div class="nav-title">加油服务</div>
            <div class="nav-right"></div>
        </div>
        <div class="mini-balance">
            <div class="mini-balance-item"><i class="ri-wallet-line" style="color: #07C160;"></i> 余额: <span id="oil-balance">¥128.50</span></div>
            <div class="mini-balance-item"><i class="ri-ticket-line" style="color: #FF9500;"></i> 优惠券: <span id="oil-coupons">5</span>张</div>
        </div>
        <div style="padding: 16px 0;">
            <div class="points-tip" style="margin: 0 16px 12px;"><i class="ri-error-warning-line"></i> 加油满200元返10%积分，可用于外卖/快递抵扣</div>
            
            <!-- 油品选择器 -->
            <div class="fuel-tabs">
                <div class="fuel-tab active" onclick="selectFuel(this, 92)">
                    <i class="ri-fire-line"></i> 92# ¥7.22
                </div>
                <div class="fuel-tab" onclick="selectFuel(this, 95)">
                    <i class="ri-fire-line"></i> 95# ¥7.85
                </div>
                <div class="fuel-tab" onclick="selectFuel(this, 98)">
                    <i class="ri-fire-line"></i> 98# ¥8.50
                </div>
            </div>
            
            <!-- 油品详情卡片 -->
            <div class="fuel-detail-card" id="fuel-detail-card">
                <div class="fuel-detail-header">
                    <div class="fuel-detail-type">92# 汽油</div>
                    <div class="fuel-detail-price"><small>¥</small><span id="fuel-current-price">7.22</span><small>/升</small></div>
                </div>
                <div class="fuel-detail-tags">
                    <span class="fuel-tag">🚗 经济实惠</span>
                    <span class="fuel-tag">⚡ 适合小排量</span>
                    <span class="fuel-tag">🏠 日常代步</span>
                </div>
                <div class="fuel-detail-info">
                    <div class="fuel-info-item">
                        <div class="fuel-info-label">今日油价</div>
                        <div class="fuel-info-value" id="fuel-today-price">¥7.22/升</div>
                    </div>
                    <div class="fuel-info-item">
                        <div class="fuel-info-label">较上周</div>
                        <div class="fuel-info-value" style="color: #90EE90;">↓ ¥0.05</div>
                    </div>
                    <div class="fuel-info-item">
                        <div class="fuel-info-label">密度</div>
                        <div class="fuel-info-value">0.725 g/cm³</div>
                    </div>
                    <div class="fuel-info-item">
                        <div class="fuel-info-label">辛烷值</div>
                        <div class="fuel-info-value">92 RON</div>
                    </div>
                </div>
            </div>
            
            <div id="oil-list"></div>
            
            <div class="related-actions">
                <div class="related-title"><i class="ri-hand-heart-line"></i> 推荐组合优惠</div>
                <div class="related-grid">
                    <div class="related-card" onclick="showPage('rewards')">
                        <div class="related-icon" style="background: #5856D6;"><i class="ri-gift-line"></i></div>
                        <div class="related-text">
                            <div class="related-name">查看奖励</div>
                            <div class="related-desc">加油返现记录</div>
                        </div>
                    </div>
                    <div class="related-card" onclick="showRecharge()">
                        <div class="related-icon" style="background: #07C160;"><i class="ri-wallet-line"></i></div>
                        <div class="related-text">
                            <div class="related-name">充值钱包</div>
                            <div class="related-desc">充100送15积分</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== 外卖页 ===== -->
    <div class="page" id="page-food">
        <div class="nav-bar">
            <div class="nav-back" onclick="showPage('home')"><i class="ri-arrow-left-s-line" style="font-size: 24px;"></i></div>
            <div class="nav-title">外卖服务</div>
            <div class="nav-right"></div>
        </div>
        <div class="mini-balance">
            <div class="mini-balance-item"><i class="ri-coins-line" style="color: #FF9500;"></i> 积分: <span id="food-points">2,568</span></div>
            <div class="mini-balance-item"><i class="ri-ticket-line" style="color: #FA5151;"></i> 可抵: <span id="food-discount">¥25.68</span></div>
        </div>
        <div style="padding: 16px;">
            <div class="points-tip"><i class="ri-star-line"></i> 您有 <strong>5</strong> 张优惠券，下单时自动抵扣</div>
            <div id="food-list"></div>
            <div class="related-actions">
                <div class="related-title"><i class="ri-truck-line"></i> 猜你需要</div>
                <div class="related-grid">
                    <div class="related-card" onclick="showPage('express')">
                        <div class="related-icon" style="background: #007AFF;"><i class="ri-truck-line"></i></div>
                        <div class="related-text">
                            <div class="related-name">取快递</div>
                            <div class="related-desc">待取件 2件</div>
                        </div>
                    </div>
                    <div class="related-card" onclick="showPage('drama')">
                        <div class="related-icon" style="background: #FF2D55;"><i class="ri-film-line"></i></div>
                        <div class="related-text">
                            <div class="related-name">看短剧</div>
                            <div class="related-desc">边吃边看赚积分</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== 快递页 ===== -->
    <div class="page" id="page-express">
        <div class="nav-bar">
            <div class="nav-back" onclick="showPage('home')"><i class="ri-arrow-left-s-line" style="font-size: 24px;"></i></div>
            <div class="nav-title">快递服务</div>
            <div class="nav-right"></div>
        </div>
        <div class="mini-balance">
            <div class="mini-balance-item"><i class="ri-coins-line" style="color: #FF9500;"></i> 积分: <span id="express-points">2,568</span></div>
            <div class="mini-balance-item"><i class="ri-gift-line" style="color: #5856D6;"></i> 快递积分: <span id="express-exp-points">156</span></div>
        </div>
        <div style="padding: 16px;">
            <div class="points-tip"><i class="ri-medal-line"></i> 寄件可得积分，10积分抵1元运费</div>
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;">
                <div style="background: var(--white); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;" onclick="showPage('express-query')">
                    <i class="ri-file-search-line" style="font-size: 28px; color: #007AFF;"></i>
                    <div style="font-size: 12px; margin-top: 8px;">查快递</div>
                </div>
                <div style="background: var(--white); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;">
                    <i class="ri-inbox-archive-line" style="font-size: 28px; color: #07C160;"></i>
                    <div style="font-size: 12px; margin-top: 8px;">取件码</div>
                </div>
                <div style="background: var(--white); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;" onclick="showPage('express-send')">
                    <i class="ri-truck-line" style="font-size: 28px; color: #FF9500;"></i>
                    <div style="font-size: 12px; margin-top: 8px;">寄快递</div>
                </div>
                <div style="background: var(--white); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;">
                    <i class="ri-map-pin-line" style="font-size: 28px; color: #AF52DE;"></i>
                    <div style="font-size: 12px; margin-top: 8px;">附近驿站</div>
                </div>
            </div>
            <div class="content-section" style="margin: 0;">
                <div class="section-header">
                    <div class="section-title">待取快递 <span style="color: #FA5151; font-size: 13px;" id="express-pending-count">2件</span></div>
                </div>
                <div id="express-list"></div>
            </div>
            <div class="related-actions">
                <div class="related-title"><i class="ri-fire-line"></i> 热门活动</div>
                <div class="related-grid">
                    <div class="related-card" onclick="showPage('charging')">
                        <div class="related-icon" style="background: #10B981;"><i class="ri-flashlight-line"></i></div>
                        <div class="related-text">
                            <div class="related-name">去充电</div>
                            <div class="related-desc">充完电顺便取件</div>
                        </div>
                    </div>
                    <div class="related-card" onclick="showPage('rewards')">
                        <div class="related-icon" style="background: #5856D6;"><i class="ri-gift-line"></i></div>
                        <div class="related-text">
                            <div class="related-name">查看奖励</div>
                            <div class="related-desc">快递积分可提现</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== 短剧页 ===== -->
    <div class="page" id="page-drama">
        <div class="nav-bar">
            <div class="nav-back" onclick="showPage('home')"><i class="ri-arrow-left-s-line" style="font-size: 24px;"></i></div>
            <div class="nav-title">免费短剧</div>
            <div class="nav-right"></div>
        </div>
        <div class="mini-balance">
            <div class="mini-balance-item"><i class="ri-coins-line" style="color: #FF9500;"></i> 总积分: <span id="drama-points-top">2,568</span></div>
            <div class="mini-balance-item"><i class="ri-shield-check-line" style="color: #07C160;"></i> 可抵: <span id="drama-discount-top">¥25.68</span></div>
        </div>
        <div style="padding: 16px;">
            <div style="display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto;">
                <span style="background: #FF2D55; color: white; padding: 8px 16px; border-radius: 20px; white-space: nowrap;">全部</span>
                <span style="background: var(--bg); padding: 8px 16px; border-radius: 20px; white-space: nowrap; color: var(--text-secondary);">甜宠</span>
                <span style="background: var(--bg); padding: 8px 16px; border-radius: 20px; white-space: nowrap; color: var(--text-secondary);">都市</span>
                <span style="background: var(--bg); padding: 8px 16px; border-radius: 20px; white-space: nowrap; color: var(--text-secondary);">悬疑</span>
                <span style="background: var(--bg); padding: 8px 16px; border-radius: 20px; white-space: nowrap; color: var(--text-secondary);">玄幻</span>
            </div>
            <div class="content-section" style="margin: 0;">
                <div class="section-header">
                    <div class="section-title">热门推荐</div>
                </div>
                <div class="drama-scroll" id="drama-full-list"></div>
            </div>
            <div style="background: linear-gradient(135deg, #FF9500 0%, #FF6B00 100%); border-radius: 12px; padding: 20px; color: white; margin-top: 16px;">
                <div style="display: flex; align-items: center; gap: 12px;">
                    <i class="ri-coins-line" style="font-size: 40px;"></i>
                    <div>
                        <div style="font-size: 18px; font-weight: 600;">当前积分: <span id="drama-points">2,568</span></div>
                        <div style="font-size: 12px; opacity: 0.9; margin-top: 4px;">看剧10分钟得10积分，可抵现金</div>
                    </div>
                </div>
                <button onclick="startWatchDrama()" style="width: 100%; margin-top: 16px; background: white; color: #FF6B00; padding: 12px; border: none; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer;">
                    <i class="ri-play-line"></i> 开始看剧赚积分
                </button>
            </div>
            <div class="related-actions">
                <div class="related-title"><i class="ri-exchange-funds-line"></i> 积分用途</div>
                <div class="related-grid">
<div class="related-card" onclick="showPage('food')">
                        <div class="related-icon" style="background: #FA5151;"><i class="ri-restaurant-2-line"></i></div>
                        <div class="related-text">
                            <div class="related-name">外卖抵扣</div>
                            <div class="related-desc">最高抵30%</div>
                        </div>
                    </div>
                    <div class="related-card" onclick="showPage('express')">
                        <div class="related-icon" style="background: #007AFF;"><i class="ri-truck-line"></i></div>
                        <div class="related-text">
                            <div class="related-name">快递抵扣</div>
                            <div class="related-desc">10积分抵1元</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== 奖励页 ===== -->
    <div class="page" id="page-rewards">
        <div class="nav-bar">
            <div class="nav-back" onclick="showPage('home')"><i class="ri-arrow-left-s-line" style="font-size: 24px;"></i></div>
            <div class="nav-title">我的奖励</div>
            <div class="nav-right"></div>
        </div>
        <div style="padding: 16px;">
            <div style="background: linear-gradient(135deg, #5856D6 0%, #3634A3 100%); border-radius: 12px; padding: 24px; color: white; margin-bottom: 16px;">
                <div style="font-size: 12px; opacity: 0.9;">本月累计返现</div>
                <div style="font-size: 36px; font-weight: 700; margin: 8px 0;" id="reward-total">¥58.60</div>
                <div style="font-size: 12px; opacity: 0.8;">已到账余额，可直接提现</div>
            </div>
            <div style="display: flex; gap: 12px; margin-bottom: 16px;">
                <div style="flex: 1; background: var(--white); border-radius: 12px; padding: 16px; text-align: center;">
                    <div style="font-size: 20px; font-weight: 600; color: #07C160;" id="invite-count">5</div>
                    <div style="font-size: 12px; color: var(--text-light);">邀请人数</div>
                </div>
                <div style="flex: 1; background: var(--white); border-radius: 12px; padding: 16px; text-align: center;">
                    <div style="font-size: 20px; font-weight: 600;" id="coupon-count">8</div>
                    <div style="font-size: 12px; color: var(--text-light);">优惠券</div>
                </div>
            </div>
            <div class="content-section" style="margin: 0;">
                <div class="section-header">
                    <div class="section-title">邀请记录</div>
                </div>
                <div id="invite-list"></div>
            </div>
            <button onclick="inviteFriends()" style="width: 100%; margin-top: 16px; background: linear-gradient(135deg, #07C160 0%, #06A953 100%); color: white; padding: 14px; border: none; border-radius: 24px; font-size: 16px; cursor: pointer;">
                <i class="ri-share-line"></i> 邀请好友得返现
            </button>
        </div>
    </div>

    <!-- ===== 用户中心 ===== -->
    <div class="page" id="page-user">
        <div class="user-header">
            <div class="user-info">
                <div class="user-avatar"><i class="ri-user-3-line"></i></div>
                <div>
                    <div class="user-name" id="user-name">用户张三</div>
                    <div class="user-vip">VIP会员 · ID: 100001</div>
                </div>
            </div>
            <div class="user-stats">
                <div class="user-stat">
                    <div class="user-stat-value" id="user-balance">¥128.50</div>
                    <div class="user-stat-label">余额</div>
                </div>
                <div class="user-stat">
                    <div class="user-stat-value" id="user-points">2,568</div>
                    <div class="user-stat-label">积分</div>
                </div>
                <div class="user-stat">
                    <div class="user-stat-value" id="user-coupons">5</div>
                    <div class="user-stat-label">优惠券</div>
                </div>
            </div>
        </div>

        <div class="menu-grid">
            <div class="menu-item" onclick="showPage('orders')">
                <i class="ri-file-list-3-line" style="color: #007AFF;"></i>
                <span>我的订单</span>
            </div>
            <div class="menu-item" onclick="showRecharge()">
                <i class="ri-wallet-line" style="color: #07C160;"></i>
                <span>钱包充值</span>
            </div>
            <div class="menu-item" onclick="showPage('rewards')">
                <i class="ri-ticket-line" style="color: #FF9500;"></i>
                <span>优惠券</span>
            </div>
            <div class="menu-item" onclick="showPage('drama')">
                <i class="ri-coins-line" style="color: #FFD60A;"></i>
                <span>积分记录</span>
            </div>
            <div class="menu-item">
                <i class="ri-bill-line" style="color: #5856D6;"></i>
                <span>发票申请</span>
            </div>
            <div class="menu-item">
                <i class="ri-share-circle-line" style="color: #AF52DE;"></i>
                <span>邀请好友</span>
            </div>
            <div class="menu-item">
                <i class="ri-settings-3-line" style="color: #8E8E93;"></i>
                <span>设置</span>
            </div>
            <div class="menu-item">
                <i class="ri-customer-service-2-line" style="color: #007AFF;"></i>
                <span>帮助客服</span>
            </div>
        </div>
    </div>

    <!-- ===== 订单页 ===== -->
    <div class="page" id="page-orders">
        <div class="nav-bar">
            <div class="nav-back" onclick="showPage('home')"><i class="ri-arrow-left-s-line" style="font-size: 24px;"></i></div>
            <div class="nav-title">我的订单</div>
            <div class="nav-right"></div>
        </div>
        <div style="padding: 16px;">
            <div style="display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto;">
                <span style="background: var(--primary); color: white; padding: 8px 16px; border-radius: 20px; white-space: nowrap;">全部</span>
                <span style="background: var(--bg); padding: 8px 16px; border-radius: 20px; white-space: nowrap; color: var(--text-secondary);">充电</span>
                <span style="background: var(--bg); padding: 8px 16px; border-radius: 20px; white-space: nowrap; color: var(--text-secondary);">加油</span>
                <span style="background: var(--bg); padding: 8px 16px; border-radius: 20px; white-space: nowrap; color: var(--text-secondary);">外卖</span>
            </div>
            <div id="orders-list"></div>
        </div>
    </div>

    <!-- ===== 通知页 ===== -->
    <div class="page" id="page-notice">
        <div class="nav-bar">
            <div class="nav-back" onclick="showPage('home')"><i class="ri-arrow-left-s-line" style="font-size: 24px;"></i></div>
            <div class="nav-title">消息通知</div>
            <div class="nav-right"></div>
        </div>
        <div style="padding: 16px;">
            <div class="content-section" style="margin: 0; cursor: pointer;">
                <div style="display: flex; align-items: center; gap: 12px;">
                    <div style="width: 44px; height: 44px; background: linear-gradient(135deg, #10B981 0%, #059669 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;"><i class="ri-flashlight-line"></i></div>
                    <div style="flex: 1;">
                        <div style="font-weight: 600; margin-bottom: 4px;">充电返现到账通知</div>
                        <div style="font-size: 12px; color: var(--text-light);">您于04-22在国家电网充电站消费¥28.50，返现¥2.85已到账</div>
                        <div style="font-size: 11px; color: var(--text-light); margin-top: 4px;">2小时前</div>
                    </div>
                </div>
            </div>
            <div class="content-section" style="margin-top: 12px; cursor: pointer;">
                <div style="display: flex; align-items: center; gap: 12px;">
                    <div style="width: 44px; height: 44px; background: linear-gradient(135deg, #FF9500 0%, #FF6B00 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;"><i class="ri-gift-line"></i></div>
                    <div style="flex: 1;">
                        <div style="font-weight: 600; margin-bottom: 4px;">新人专享礼包</div>
                        <div style="font-size: 12px; color: var(--text-light);">您已获得5张优惠券，最高可抵¥50</div>
                        <div style="font-size: 11px; color: var(--text-light); margin-top: 4px;">1天前</div>
                    </div>
                </div>
            </div>
            <div class="content-section" style="margin-top: 12px; cursor: pointer;">
                <div style="display: flex; align-items: center; gap: 12px;">
                    <div style="width: 44px; height: 44px; background: linear-gradient(135deg, #FF2D55 0%, #C71E3A 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;"><i class="ri-film-line"></i></div>
                    <div style="flex: 1;">
                        <div style="font-weight: 600; margin-bottom: 4px;">短剧更新提醒</div>
                        <div style="font-size: 12px; color: var(--text-light);">《甜宠总裁》已更新至第32集，点击查看</div>
                        <div style="font-size: 11px; color: var(--text-light); margin-top: 4px;">3天前</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item active" onclick="showPage('home')" id="tab-home">
            <i class="ri-home-4-fill"></i>
            <span>首页</span>
        </div>
        <div class="tab-item" onclick="showPage('orders')" id="tab-orders">
            <i class="ri-file-list-3-line"></i>
            <span>订单</span>
            <span class="tab-badge" id="tab-badge" style="display: none;">0</span>
        </div>
        <div class="tab-item" onclick="showPage('rewards')" id="tab-rewards">
            <i class="ri-gift-line"></i>
            <span>奖励</span>
        </div>
        <div class="tab-item" onclick="showPage('user')" id="tab-user">
            <i class="ri-user-3-line"></i>
            <span>我的</span>
        </div>
    </div>
</div>

<!-- 充值弹窗 -->
<div class="modal-overlay" id="recharge-modal">
    <div class="modal">
        <div class="modal-header">
            <div class="modal-title">充值余额</div>
            <div class="modal-close" onclick="closeRecharge()"><i class="ri-close-line"></i></div>
        </div>
        <div class="amount-grid">
            <div class="amount-item" onclick="selectAmount(this, 50)">
                <div class="amount-value">¥50</div>
                <div class="amount-gift">送5积分</div>
            </div>
            <div class="amount-item selected" onclick="selectAmount(this, 100)">
                <div class="amount-value">¥100</div>
                <div class="amount-gift">送15积分</div>
            </div>
            <div class="amount-item" onclick="selectAmount(this, 200)">
                <div class="amount-value">¥200</div>
                <div class="amount-gift">送40积分</div>
            </div>
            <div class="amount-item" onclick="selectAmount(this, 500)">
                <div class="amount-value">¥500</div>
                <div class="amount-gift">送120积分</div>
            </div>
            <div class="amount-item" onclick="selectAmount(this, 1000)">
                <div class="amount-value">¥1000</div>
                <div class="amount-gift">送300积分</div>
            </div>
            <div class="amount-item" onclick="selectAmount(this, 2000)">
                <div class="amount-value">¥2000</div>
                <div class="amount-gift">送800积分</div>
            </div>
        </div>
        <button class="pay-btn" onclick="confirmRecharge()">微信支付 ¥100</button>
    </div>
</div>

<!-- 充电中弹窗 -->
<div class="charging-overlay" id="charging-overlay">
    <i class="ri-flashlight-line charging-icon"></i>
    <div class="charging-text">充电中...</div>
    <div class="charging-info">已充 0.00 度 · ¥0.00</div>
    <button class="charging-stop" onclick="stopCharging()">结束充电</button>
</div>

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

<script>
// ===== 全局状态 =====
const state = {
    user: {
        name: '用户张三',
        balance: 128.50,
        points: 2568,
        coupons: 5,
        vipLevel: 'VIP'
    },
    orders: [
        { id: 'CH001', type: 'charging', name: '国家电网充电站', amount: 28.50, status: 'success', time: '14:30', reward: 2.85, icon: 'ri-flashlight-line', color: '#10B981' },
        { id: 'OIL001', type: 'oil', name: '中石油加油站(南山站)', amount: 256.00, status: 'success', time: '10:20', reward: 25.60, icon: 'ri-gas-station-line', color: '#FF9500' },
        { id: 'FD001', type: 'food', name: '湘菜馆·正宗湖南菜', amount: 68.00, status: 'processing', time: '12:30', reward: 0, icon: 'ri-basketball-line', color: '#FA5151' }
    ],
    chargingOrders: [],
    pendingExpress: [
        { id: 'SF1234567890', code: '3-2-1056', company: '顺丰速运' },
        { id: 'YT9876543210', code: '1-5-2034', company: '圆通速递' }
    ],
    dramas: [
        { id: 1, title: '甜宠总裁', eps: 32, score: 8.6, cover: '#667eea' },
        { id: 2, title: '都市逆袭', eps: 48, score: 9.1, cover: '#f093fb' },
        { id: 3, title: '悬疑探案', eps: 16, score: 8.9, cover: '#4facfe' },
        { id: 4, title: '穿越王妃', eps: 24, score: 8.4, cover: '#fa709a' }
    ],
    shops: [
        { id: 1, name: '湘菜馆·正宗湖南菜', rating: 4.8, sales: 2356, time: 30, tags: ['首减15', '满39减10'] },
        { id: 2, name: '麦当劳(南山店)', rating: 4.9, sales: 5689, time: 25, tags: ['满69减20'] },
        { id: 3, name: '喜茶(万象城店)', rating: 4.7, sales: 1234, time: 35, tags: ['新品推荐'] }
    ],
    stations: [
        { id: 1, name: '国家电网充电站(科技园店)', avail: '8/12', price: '¥1.2/度', address: '福田区科技园南区12号' },
        { id: 2, name: '特来电充电站(商业广场)', avail: '5/8', price: '¥1.35/度', address: '南山区商业中心B2层' },
        { id: 3, name: '星星充电(小区店)', avail: '3/6', price: '¥1.15/度', address: '宝安区桃源居3期' }
    ],
    oilStations: [
        { id: 1, name: '中石油加油站(南山站)', discount: '优惠¥0.3/升', address: '南山区南海大道2005号', prices: { 92: 6.92, 95: 7.55, 98: 8.20 } },
        { id: 2, name: '中石化加油站(福田站)', discount: '会员日95折', address: '福田区福华路188号', prices: { 92: 6.85, 95: 7.45, 98: 8.10 } }
    ],
    fuelTypes: {
        92: { name: '92# 汽油', price: 7.22, desc: '经济实惠，适合小排量', tags: ['经济实惠', '小排量', '日常代步'], density: '0.725 g/cm³', ron: '92 RON', weeklyChange: -0.05 },
        95: { name: '95# 汽油', price: 7.85, desc: '主流选择，兼容性好', tags: ['主流选择', '兼容性好', '适合SUV'], density: '0.737 g/cm³', ron: '95 RON', weeklyChange: -0.03 },
        98: { name: '98# 汽油', price: 8.50, desc: '高端品质，动力更强', tags: ['高端品质', '动力强劲', '豪华车型'], density: '0.748 g/cm³', ron: '98 RON', weeklyChange: 0.02 }
    },
    selectedFuel: 92
};

// ===== 页面切换 =====
function showPage(pageId) {
    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    document.getElementById('page-' + pageId).classList.add('active');
    
    // 更新Tab状态
    document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
    const tab = document.getElementById('tab-' + pageId);
    if (tab) tab.classList.add('active');
    
    // 渲染对应页面数据
    switch(pageId) {
        case 'home': renderHomePage(); break;
        case 'orders': renderOrdersPage(); break;
        case 'charging': renderChargingPage(); break;
        case 'oil': renderOilPage(); break;
        case 'food': renderFoodPage(); break;
        case 'express': renderExpressPage(); break;
        case 'drama': renderDramaPage(); break;
        case 'user': renderUserPage(); break;
        case 'rewards': renderRewardsPage(); break;
    }
}

// ===== 首页渲染 =====
function renderHomePage() {
    // 短剧列表
    const dramaList = document.getElementById('home-drama-list');
    dramaList.innerHTML = state.dramas.map(d => `
        <div class="drama-item" onclick="playDrama(${d.id}, '${d.title}')">
            <div class="drama-cover" style="background: linear-gradient(135deg, ${d.cover} 0%, ${d.cover}99 100%);">
                <i class="ri-film-line"></i>
                <span class="drama-tag">免费</span>
            </div>
            <div class="drama-title">${d.title}</div>
            <div class="drama-meta">${d.eps}集 · ${d.score}分</div>
        </div>
    `).join('');

    // 订单列表
    const orderList = document.getElementById('home-order-list');
    orderList.innerHTML = state.orders.slice(0, 3).map(o => `
        <div class="order-card" onclick="showPage('orders')">
            <div class="order-icon" style="background: ${o.color}20; color: ${o.color};">
                <i class="${o.icon}"></i>
            </div>
            <div class="order-info">
                <div class="order-name">${o.name}</div>
                <div class="order-meta">${o.id} · ${o.time}</div>
            </div>
            <div class="order-right">
                <div class="order-price">¥${o.amount}</div>
                ${o.reward > 0 ? `<div style="font-size: 11px; color: #07C160;">+¥${o.reward}返现</div>` : ''}
                <span class="order-status ${o.status === 'success' ? 'status-success' : 'status-processing'}">${o.status === 'success' ? '已完成' : '进行中'}</span>
            </div>
        </div>
    `).join('');

    // 更新待处理数量
    updateTabBadge();
}

// ===== 充电页渲染 =====
function renderChargingPage() {
    // 更新余额积分显示
    document.getElementById('charging-balance').textContent = '¥' + state.user.balance.toFixed(2);
    document.getElementById('charging-points').textContent = state.user.points.toLocaleString();
    
    const list = document.getElementById('charging-list');
    list.innerHTML = state.stations.map(s => `
        <div class="station-card" onclick="startCharging('${s.name}')">
            <div class="station-header">
                <div class="station-name">${s.name}</div>
                <div class="station-avail">空闲 ${s.avail}</div>
            </div>
            <div class="station-address"><i class="ri-map-pin-line"></i> ${s.address}</div>
            <div class="station-footer">
                <div class="station-price">${s.price}</div>
                <button class="station-btn">扫码充电</button>
            </div>
        </div>
    `).join('');
}

// ===== 加油页渲染 =====
function renderOilPage() {
    // 更新余额优惠券显示
    document.getElementById('oil-balance').textContent = '¥' + state.user.balance.toFixed(2);
    document.getElementById('oil-coupons').textContent = state.user.coupons;
    
    // 更新油品详情
    updateFuelDetail(state.selectedFuel);
    
    // 更新加油站列表
    const list = document.getElementById('oil-list');
    list.innerHTML = state.oilStations.map(s => `
        <div class="content-section" style="margin: 0 16px 12px;">
            <div class="section-header">
                <div class="station-name" style="font-size: 15px; font-weight: 600;">${s.name}</div>
                ${s.discount ? `<span style="color: #FA5151; font-size: 12px;">${s.discount}</span>` : ''}
            </div>
            <div class="station-address" style="font-size: 12px; color: var(--text-light); margin-bottom: 12px;"><i class="ri-map-pin-line"></i> ${s.address}</div>
            <div class="station-fuel-list">
                ${[92, 95, 98].map(grade => `
                    <div class="station-fuel-item">
                        <div>
                            <div class="station-fuel-name">${grade}#</div>
                            <div class="station-fuel-desc">${state.fuelTypes[grade].desc}</div>
                        </div>
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <div class="station-fuel-price">¥${s.prices[grade]}/升</div>
                            <button class="station-fuel-btn" onclick="startOilWithGrade('${s.name}', ${grade}, ${s.prices[grade]})">加油</button>
                        </div>
                    </div>
                `).join('')}
            </div>
        </div>
    `).join('');
}

// 更新油品详情
function updateFuelDetail(grade) {
    const fuel = state.fuelTypes[grade];
    state.selectedFuel = grade;
    
    // 更新价格显示
    document.getElementById('fuel-current-price').textContent = fuel.price.toFixed(2);
    
    // 更新油品详情卡片
    const card = document.getElementById('fuel-detail-card');
    card.innerHTML = `
        <div class="fuel-detail-header">
            <div class="fuel-detail-type">${fuel.name}</div>
            <div class="fuel-detail-price"><small>¥</small>${fuel.price.toFixed(2)}<small>/升</small></div>
        </div>
        <div class="fuel-detail-tags">
            ${fuel.tags.map(t => `<span class="fuel-tag">${t}</span>`).join('')}
        </div>
        <div class="fuel-detail-info">
            <div class="fuel-info-item">
                <div class="fuel-info-label">今日油价</div>
                <div class="fuel-info-value">¥${fuel.price.toFixed(2)}/升</div>
            </div>
            <div class="fuel-info-item">
                <div class="fuel-info-label">较上周</div>
                <div class="fuel-info-value" style="color: ${fuel.weeklyChange < 0 ? '#90EE90' : '#FFB6C1'};">
                    ${fuel.weeklyChange > 0 ? '↑' : '↓'} ¥${Math.abs(fuel.weeklyChange).toFixed(2)}
                </div>
            </div>
            <div class="fuel-info-item">
                <div class="fuel-info-label">密度</div>
                <div class="fuel-info-value">${fuel.density}</div>
            </div>
            <div class="fuel-info-item">
                <div class="fuel-info-label">辛烷值</div>
                <div class="fuel-info-value">${fuel.ron}</div>
            </div>
        </div>
    `;
    
    // 更新标签选中状态
    document.querySelectorAll('.fuel-tab').forEach(tab => {
        tab.classList.remove('active');
        if (tab.textContent.includes(grade + '#')) {
            tab.classList.add('active');
        }
    });
}

// 选择油品
function selectFuel(el, grade) {
    updateFuelDetail(grade);
}

// ===== 外卖页渲染 =====
function renderFoodPage() {
    // 更新积分显示
    document.getElementById('food-points').textContent = state.user.points.toLocaleString();
    document.getElementById('food-discount').textContent = '¥' + (state.user.points / 100).toFixed(2);
    
    const list = document.getElementById('food-list');
    list.innerHTML = state.shops.map(s => `
        <div class="shop-card" onclick="orderFood('${s.name}')">
            <div class="shop-logo" style="background: linear-gradient(135deg, #FA5151 0%, #D93A3A 100%); color: white;">
                <i class="ri-restaurant-2-line"></i>
            </div>
            <div class="shop-info">
                <div class="shop-name">${s.name}</div>
                <div class="shop-meta">⭐${s.rating} · 月售${s.sales}单 · ${s.time}分钟</div>
                <div class="shop-tags">
                    ${s.tags.map(t => `<span class="shop-tag ${t.includes('减') ? (t.includes('15') || t.includes('20')) ? 'tag-red' : 'tag-green' : ''}">${t}</span>`).join('')}
                </div>
            </div>
        </div>
    `).join('');
}

// ===== 快递页渲染 =====
function renderExpressPage() {
    // 更新积分显示
    document.getElementById('express-points').textContent = state.user.points.toLocaleString();
    document.getElementById('express-exp-points').textContent = state.user.expressPoints || 156;
    
    document.getElementById('express-pending-count').textContent = state.pendingExpress.length + '件';
    const list = document.getElementById('express-list');
    if (state.pendingExpress.length === 0) {
        list.innerHTML = `
            <div style="text-align: center; padding: 30px; color: var(--text-light);">
                <i class="ri-checkbox-circle-line" style="font-size: 40px; color: #07C160;"></i>
                <div style="margin-top: 10px;">暂无待取快递</div>
            </div>
        `;
    } else {
        list.innerHTML = state.pendingExpress.map(e => `
            <div class="order-card">
                <div class="order-icon" style="background: #007AFF20; color: #007AFF;">
                    <i class="ri-box-3-line"></i>
                </div>
                <div class="order-info">
                    <div class="order-name">${e.company} ${e.id}</div>
                    <div class="order-meta">取件码: <span style="font-weight: 600; color: #007AFF;">${e.code}</span></div>
                </div>
                <button onclick="pickupExpress('${e.id}')" style="background: #007AFF; color: white; border: none; padding: 8px 16px; border-radius: 16px; font-size: 12px; cursor: pointer;">取件</button>
            </div>
        `).join('');
    }
}

// ===== 短剧页渲染 =====
function renderDramaPage() {
    // 更新积分显示
    document.getElementById('drama-points').textContent = state.user.points.toLocaleString();
    document.getElementById('drama-points-top').textContent = state.user.points.toLocaleString();
    document.getElementById('drama-discount-top').textContent = '¥' + (state.user.points / 100).toFixed(2);
    
    const list = document.getElementById('drama-full-list');
    list.innerHTML = state.dramas.map(d => `
        <div class="drama-item" onclick="playDrama(${d.id}, '${d.title}')">
            <div class="drama-cover" style="background: linear-gradient(135deg, ${d.cover} 0%, ${d.cover}99 100%);">
                <i class="ri-film-line"></i>
                <span class="drama-tag">免费</span>
            </div>
            <div class="drama-title">${d.title}</div>
            <div class="drama-meta">${d.eps}集 · ${d.score}分</div>
        </div>
    `).join('');
}

// ===== 用户中心渲染 =====
function renderUserPage() {
    document.getElementById('user-name').textContent = state.user.name;
    document.getElementById('user-balance').textContent = '¥' + state.user.balance.toFixed(2);
    document.getElementById('user-points').textContent = state.user.points.toLocaleString();
    document.getElementById('user-coupons').textContent = state.user.coupons;
}

// ===== 订单页渲染 =====
function renderOrdersPage() {
    const list = document.getElementById('orders-list');
    if (state.orders.length === 0) {
        list.innerHTML = `
            <div class="empty-state">
                <i class="ri-file-list-3-line empty-icon"></i>
                <div class="empty-text">暂无订单</div>
            </div>
        `;
        return;
    }
    list.innerHTML = state.orders.map(o => `
        <div class="order-card">
            <div class="order-icon" style="background: ${o.color}20; color: ${o.color};">
                <i class="${o.icon}"></i>
            </div>
            <div class="order-info">
                <div class="order-name">${o.name}</div>
                <div class="order-meta">${o.id} · ${o.time}</div>
            </div>
            <div class="order-right">
                <div class="order-price">¥${o.amount}</div>
                ${o.reward > 0 ? `<div style="font-size: 11px; color: #07C160;">+¥${o.reward}返现</div>` : ''}
                <span class="order-status ${o.status === 'success' ? 'status-success' : 'status-processing'}">${o.status === 'success' ? '已完成' : '进行中'}</span>
            </div>
        </div>
    `).join('');
}

// ===== 奖励页渲染 =====
function renderRewardsPage() {
    const totalReward = state.orders.reduce((sum, o) => sum + o.reward, 0);
    document.getElementById('reward-total').textContent = '¥' + totalReward.toFixed(2);
    document.getElementById('invite-count').textContent = Math.floor(totalReward / 5);
    document.getElementById('coupon-count').textContent = state.user.coupons;
    
    const list = document.getElementById('invite-list');
    list.innerHTML = `
        <div class="order-card">
            <div class="order-icon" style="background: #07C16020; color: #07C160;">
                <i class="ri-user-add-line"></i>
            </div>
            <div class="order-info">
                <div class="order-name">新用户 小明</div>
                <div class="order-meta">2026-04-20 15:30 注册</div>
            </div>
            <div style="color: #07C160; font-weight: 600;">+¥5.00</div>
        </div>
        <div class="order-card">
            <div class="order-icon" style="background: #07C16020; color: #07C160;">
                <i class="ri-user-add-line"></i>
            </div>
            <div class="order-info">
                <div class="order-name">新用户 小红</div>
                <div class="order-meta">2026-04-18 10:15 注册</div>
            </div>
            <div style="color: #07C160; font-weight: 600;">+¥5.00</div>
        </div>
    `;
}

// ===== 功能联动操作 =====

// 充电
function startCharging(name) {
    showModal('开始充电', `确定在 <strong>${name}</strong> 开始充电吗？<br><br>💡 充电期间可观看短剧赚积分`, () => {
        const newOrder = {
            id: 'CH' + Date.now().toString().slice(-6),
            type: 'charging',
            name: name,
            amount: 0,
            status: 'processing',
            time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
            reward: 0,
            icon: 'ri-flashlight-line',
            color: '#10B981'
        };
        state.orders.unshift(newOrder);
        state.chargingOrders.push(newOrder);
        showToast('充电已开始');
        showPage('home');
        updateTabBadge();
        startChargingAnimation();
    });
}

function startChargingAnimation() {
    const overlay = document.getElementById('charging-overlay');
    overlay.classList.add('active');
    let kwh = 0, cost = 0;
    const interval = setInterval(() => {
        kwh += 0.1;
        cost = kwh * 1.2;
        overlay.querySelector('.charging-info').textContent = `已充 ${kwh.toFixed(2)} 度 · ¥${cost.toFixed(2)}`;
    }, 1000);
    overlay.dataset.interval = interval;
}

function stopCharging() {
    const overlay = document.getElementById('charging-overlay');
    clearInterval(overlay.dataset.interval);
    overlay.classList.remove('active');
    
    if (state.chargingOrders.length > 0) {
        const order = state.chargingOrders.shift();
        order.amount = Math.round((Math.random() * 50 + 20) * 100) / 100;
        order.status = 'success';
        order.reward = Math.round(order.amount * 0.1 * 100) / 100;
        const earnedPoints = Math.floor(order.reward * 10);
        state.user.points += earnedPoints;
        
        // 显示跨页面联动提示
        showCrossPageToast(`充电完成！¥${order.amount} +${earnedPoints}积分`, () => {
            showPage('rewards');
        });
    }
    updateTabBadge();
}

// 跨页面联动提示
function showCrossPageToast(msg, callback) {
    const toast = document.createElement('div');
    toast.className = 'modal-overlay active';
    toast.innerHTML = `
        <div class="modal" style="border-radius: 16px; text-align: center;">
            <div style="font-size: 48px; margin-bottom: 12px;">🎉</div>
            <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">${msg}</div>
            <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 16px;">查看积分明细</div>
            <div style="display: flex; gap: 10px;">
                <button onclick="this.closest('.modal-overlay').remove(); showToast('充电返现到账')" style="flex: 1; padding: 12px; background: var(--bg); border: none; border-radius: 24px; font-size: 14px; cursor: pointer;">稍后</button>
                <button onclick="this.closest('.modal-overlay').remove(); callback ? callback() : showPage('rewards')" style="flex: 1; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 24px; font-size: 14px; cursor: pointer;">查看</button>
            </div>
        </div>
    `;
    document.body.appendChild(toast);
}

// 加油
function startOil(name) {
    showModal('开始加油', `确定在 <strong>${name}</strong> 加油吗？<br><br>92# ¥7.22/升<br>⛽ 满200返10%积分`, () => {
        const amount = parseFloat((Math.random() * 200 + 100).toFixed(2));
        const reward = Math.round(amount * 0.1 * 100) / 100;
        const earnedPoints = Math.floor(reward * 10);
        const newOrder = {
            id: 'OIL' + Date.now().toString().slice(-6),
            type: 'oil',
            name: name,
            amount: amount,
            status: 'success',
            time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
            reward: reward,
            icon: 'ri-gas-station-line',
            color: '#FF9500'
        };
        state.orders.unshift(newOrder);
        state.user.points += earnedPoints;
        updateTabBadge();
        
        showCrossPageToast(`加油完成！¥${amount} 返现¥${reward.toFixed(2)} +${earnedPoints}积分`, () => {
            showPage('rewards');
        });
    });
}

// 外卖
function orderFood(name) {
    const discountAmount = Math.min(state.user.coupons, 1) * 5;
    showModal('外卖下单', `在 <strong>${name}</strong> 下单<br><br>${discountAmount > 0 ? '✅ 已使用1张优惠券抵扣 ¥5' : '📝 暂无优惠券可用'}`, () => {
        const amount = parseFloat((Math.random() * 50 + 30).toFixed(2));
        const finalAmount = Math.max(amount - discountAmount, 0);
        const earnedPoints = Math.floor(finalAmount * 5);
        const newOrder = {
            id: 'FD' + Date.now().toString().slice(-6),
            type: 'food',
            name: name,
            amount: finalAmount,
            status: 'success',
            time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
            reward: finalAmount * 0.05,
            icon: 'ri-basketball-line',
            color: '#FA5151'
        };
        state.orders.unshift(newOrder);
        state.user.coupons = Math.max(state.user.coupons - 1, 0);
        state.user.points += earnedPoints;
        updateTabBadge();
        
        showCrossPageToast(`下单成功！支付 ¥${finalAmount} +${earnedPoints}积分`, () => {
            showPage('drama');
        });
    });
}

// 快递取件
function pickupExpress(id) {
    const earnedPoints = Math.floor(Math.random() * 20) + 10;
    showModal('确认取件', `确认取走快递 <strong>${id}</strong>？<br><br>🎁 取件成功 +${earnedPoints}积分`, () => {
        state.pendingExpress = state.pendingExpress.filter(e => e.id !== id);
        state.user.points += earnedPoints;
        state.user.expressPoints = (state.user.expressPoints || 156) + earnedPoints;
        showCrossPageToast(`取件成功！+${earnedPoints}积分`, () => {
            showPage('rewards');
        });
        renderExpressPage();
    });
}

// 短剧观看
function playDrama(id, title) {
    showModal('播放短剧', `正在播放：<strong>${title}</strong><br><br>每观看10分钟得10积分<br>🎬 看完整集额外奖励20积分`, () => {
        const earned = Math.floor(Math.random() * 30) + 10;
        state.user.points += earned;
        showCrossPageToast(`观看完成！+${earned}积分，可抵 ¥${(state.user.points / 100).toFixed(2)}`, () => {
            showPage('food');
        });
        renderDramaPage();
    });
}

function startWatchDrama() {
    showModal('看剧赚积分', `观看短剧可获得积分奖励<br><br><strong>规则：</strong><br>• 每观看10分钟 = 10积分<br>• 100积分可抵 ¥1<br><br>⚡ 当前积分可抵 ¥${(state.user.points / 100).toFixed(2)}`, () => {
        const earned = Math.floor(Math.random() * 50) + 20;
        state.user.points += earned;
        showCrossPageToast(`获得 ${earned} 积分！`, () => {
            showPage('rewards');
        });
        renderDramaPage();
    });
}

// 邀请好友
function inviteFriends() {
    showModal('邀请好友', `分享您的邀请码给好友<br><br><strong>ZSANGLM</strong><br><br>好友注册得 ¥5<br>好友首单再得 ¥10`, () => {
        showToast('邀请链接已复制');
    });
}

// 充值
let selectedAmount = 100;
function showRecharge() {
    document.getElementById('recharge-modal').classList.add('active');
}

function closeRecharge() {
    document.getElementById('recharge-modal').classList.remove('active');
}

function selectAmount(el, amount) {
    document.querySelectorAll('.amount-item').forEach(i => i.classList.remove('selected'));
    el.classList.add('selected');
    selectedAmount = amount;
    document.querySelector('.pay-btn').textContent = '微信支付 ¥' + amount;
}

function confirmRecharge() {
    const giftPoints = Math.floor(selectedAmount * 0.15);
    state.user.balance += selectedAmount;
    state.user.points += giftPoints;
    closeRecharge();
    
    showCrossPageToast(`充值成功！¥${selectedAmount} 到账 +${giftPoints}积分`, () => {
        showPage('oil');
    });
    renderUserPage();
}

// 通用弹窗
function showModal(title, content, callback) {
    const modal = document.createElement('div');
    modal.className = 'modal-overlay active';
    modal.innerHTML = `
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">${title}</div>
                <div class="modal-close" onclick="this.closest('.modal-overlay').remove()"><i class="ri-close-line"></i></div>
            </div>
            <div style="text-align: center; color: var(--text-secondary); margin-bottom: 20px;">${content}</div>
            <button class="pay-btn" style="background: var(--primary);">确定</button>
        </div>
    `;
    modal.querySelector('.pay-btn').onclick = () => {
        modal.remove();
        if (callback) callback();
    };
    modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
    document.body.appendChild(modal);
}

// Toast
function showToast(msg) {
    const toast = document.getElementById('toast');
    toast.textContent = msg;
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), 2500);
}

// 更新Tab徽章
function updateTabBadge() {
    const processing = state.orders.filter(o => o.status === 'processing').length;
    const badge = document.getElementById('tab-badge');
    if (processing > 0) {
        badge.textContent = processing;
        badge.style.display = 'block';
    } else {
        badge.style.display = 'none';
    }
}

// 初始化
renderHomePage();
</script>

</body>
</html>