Orienteering
/
mobile_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>彩图奔跑 - 首页</title>
    <style>
        body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #f7f8fa; }
        .header { background: #007aff; color: white; padding: 20px; padding-top: 40px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
        .user-info { display: flex; align-items: center; justify-content: space-between; }
        .score-box { text-align: center; background: rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 12px; backdrop-filter: blur(5px); }
        .score-num { font-size: 24px; font-weight: bold; }
        .section-title { margin: 20px; font-size: 18px; font-weight: bold; color: #333; }
        .card-list { padding: 0 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s; }
        .card:active { transform: scale(0.98); }
        .card-img { width: 100%; height: 100px; background-color: #eee; object-fit: cover; }
        .card-body { padding: 10px; }
        .card-title { font-size: 14px; font-weight: bold; margin-bottom: 5px; }
        .card-desc { font-size: 12px; color: #888; }
        .loading { text-align: center; margin-top: 50px; color: #999; }
    </style>

    <!-- SDK 引入 -->
    <script src="./mock_flutter.js"></script> <!-- 调试用，打包请删除 -->
    <script src="./bridge.js"></script>
    <script src="./api.js"></script>
</head>
<body>

    <div class="header">
        <div class="user-info">
            <div>
                <div style="font-size: 14px; opacity: 0.8;">欢迎回来</div>
                <div style="font-size: 20px; font-weight: bold;">运动达人</div>
            </div>
            <div class="score-box">
                <div style="font-size: 12px;">我的积分</div>
                <div class="score-num" id="scoreVal">--</div>
            </div>
        </div>
        <div style="margin-top: 20px; display: flex; gap: 10px;">
            <button onclick="location.href='rank.html'" style="flex: 1; background: rgba(255,255,255,0.2); border: 1px solid white; color: white; border-radius: 20px; padding: 8px;">🏆 排行榜</button>
            <button onclick="location.href='signup.html'" style="flex: 1; background: white; color: #007aff; border: none; border-radius: 20px; padding: 8px;">📝 去报名</button>
        </div>
    </div>

    <div class="section-title">热门活动</div>
    
    <div class="card-list" id="listContainer">
        <!-- 动态生成 -->
    </div>
    
    <div class="loading" id="loading">加载数据中...</div>

    <script>
        // 模拟 Token，真实环境请从 URL 获取: getUrlParam('token')
        var TOKEN = '96ba3c924394934f7d30fa869a94ce0d'; 

        // 1. 初始化
        // 增强本地环境检测：包含 file:, localhost, 127.0.0.1
        var isLocal = window.location.protocol === 'file:' || 
                      window.location.hostname === 'localhost' || 
                      window.location.hostname === '127.0.0.1';
        
        API.init({ 
            token: TOKEN,
            useMock: isLocal
        });

        // 2. 获取积分
        API.getScore(0).then(function(data) {
            document.getElementById('scoreVal').innerText = data.score;
        }).catch(function(err) {
            console.error('积分获取失败', err);
            document.getElementById('scoreVal').innerText = 'Err';
        });

        // 3. 模拟获取活动列表 (API中没有直接的活动列表接口，这里用静态数据模拟业务逻辑)
        var mockActivities = [
            { id: 101, name: '奥体中心定向赛', desc: '探索城市地标', img: 'https://via.placeholder.com/150/007aff/ffffff?text=Aoti' },
            { id: 102, name: '千佛山登山节', desc: '登高望远', img: 'https://via.placeholder.com/150/ff9500/ffffff?text=Mountain' },
            { id: 103, name: '大明湖健步走', desc: '湖畔漫步', img: 'https://via.placeholder.com/150/34c759/ffffff?text=Lake' },
            { id: 104, name: '校园寻宝', desc: '重返校园时光', img: 'https://via.placeholder.com/150/af52de/ffffff?text=School' }
        ];

        setTimeout(function() {
            document.getElementById('loading').style.display = 'none';
            renderList(mockActivities);
        }, 500);

        function renderList(list) {
            var html = '';
            list.forEach(function(item) {
                html += `
                <div class="card" onclick="goDetail(${item.id}, '${item.name}')">
                    <img src="${item.img}" class="card-img">
                    <div class="card-body">
                        <div class="card-title">${item.name}</div>
                        <div class="card-desc">${item.desc}</div>
                    </div>
                </div>`;
            });
            document.getElementById('listContainer').innerHTML = html;
        }

        function goDetail(id, name) {
            // 跳转到 H5 详情页 (演示页面间传参)
            window.location.href = `detail.html?id=${id}&name=${encodeURIComponent(name)}`;
        }
    </script>
</body>
</html>