Orienteering
/
mobile_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<!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, sans-serif; background-color: #f7f8fa; }
        .header { background: linear-gradient(135deg, #FF9500, #FFCC00); color: white; padding: 20px; padding-top: 40px; text-align: center; }
        .my-rank-box { background: rgba(255,255,255,0.2); padding: 15px; border-radius: 10px; margin-top: 20px; display: flex; justify-content: space-between; align-items: center; }
        
        .list-container { padding: 15px; margin-top: -20px; }
        .rank-item { background: white; border-radius: 12px; padding: 15px; margin-bottom: 10px; display: flex; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .rank-num { width: 30px; font-size: 18px; font-weight: bold; color: #999; text-align: center; margin-right: 10px; }
        .rank-num.top3 { color: #FF9500; font-size: 22px; }
        .avatar { width: 40px; height: 40px; border-radius: 50%; background: #eee; margin-right: 15px; object-fit: cover; }
        .info { flex: 1; }
        .name { font-weight: bold; font-size: 16px; color: #333; }
        .score { font-weight: bold; color: #FF9500; font-size: 18px; }
        .unit { font-size: 12px; color: #999; margin-left: 4px; }

        .loading { text-align: center; padding: 20px; color: #999; }
        .back-btn { position: absolute; top: 20px; left: 20px; color: white; font-size: 24px; cursor: pointer; }
    </style>

    <script src="./mock_flutter.js"></script>
    <script src="./bridge.js"></script>
    <script src="./api.js"></script>
</head>
<body>

    <div class="header">
        <div class="back-btn" onclick="Bridge.back()">←</div>
        <h2>实时排行榜</h2>
        <div class="my-rank-box">
            <div>我的排名</div>
            <div style="font-size: 24px; font-weight: bold;" id="myRankNum">--</div>
        </div>
    </div>

    <div class="list-container" id="list">
        <div class="loading">正在加载排名数据...</div>
    </div>

    <script>
        var TOKEN = '96ba3c924394934f7d30fa869a94ce0d';
        // 模拟参数
        var MC_ID = '1001'; // 假设的赛事ID
        var MC_TYPE = 1;

        // 检测是否本地开发环境
        var isLocal = window.location.protocol === 'file:' || 
                      window.location.hostname === 'localhost' || 
                      window.location.hostname === '127.0.0.1';

        API.init({ 
            token: TOKEN,
            useMock: isLocal // 本地开发自动开启 Mock
        });

        // 1. 并行请求：我的排名 + 总榜单
        Promise.all([
            API.getUserCurrentRank(0), // ecId=0 示例
            API.getRankDetail(MC_ID, MC_TYPE, 'total') // 获取总榜
        ]).then(function(results) {
            var myRankData = results[0];
            var rankListData = results[1];

            // 渲染我的排名
            document.getElementById('myRankNum').innerText = myRankData.rankNum > 0 ? myRankData.rankNum : '未上榜';

            // 渲染列表
            // 注意：这里假设后端返回的 structure 是 { totalRankRs: [...] }
            // 根据之前的分析，API 返回的数据结构可能需要适配
            var list = rankListData.totalRankRs || []; 
            renderList(list);

        }).catch(function(err) {
            console.error(err);
            document.getElementById('list').innerHTML = '<div class="loading">加载失败，请重试<br>' + err.message + '</div>';
        });

        function renderList(list) {
            if (!list || list.length === 0) {
                // 如果没有真实数据，为了演示效果，生成假数据
                list = generateMockData();
            }

            var html = '';
            list.forEach(function(item, index) {
                var rank = index + 1;
                var isTop3 = rank <= 3 ? 'top3' : '';
                var avatarUrl = item.headUrl || 'https://via.placeholder.com/40?text=' + item.nickName.charAt(0);
                
                html += `
                <div class="rank-item">
                    <div class="rank-num ${isTop3}">${rank}</div>
                    <img src="${avatarUrl}" class="avatar">
                    <div class="info">
                        <div class="name">${item.nickName}</div>
                    </div>
                    <div class="score">${item.score}<span class="unit">分</span></div>
                </div>`;
            });
            document.getElementById('list').innerHTML = html;
        }

        // 生成模拟数据 (仅当 API 无数据时使用)
        function generateMockData() {
            return [
                { nickName: '张三', score: 9800, headUrl: '' },
                { nickName: '李四', score: 9500, headUrl: '' },
                { nickName: '王五', score: 8900, headUrl: '' },
                { nickName: '赵六', score: 8200, headUrl: '' },
                { nickName: '运动小达人', score: 7800, headUrl: '' },
            ];
        }
    </script>
</body>
</html>