Orienteering
/
mobile_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
							<!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: white; padding-bottom: 80px; }
        .hero { width: 100%; height: 240px; background: #ddd url('https://via.placeholder.com/400x240/34c759/ffffff?text=Running') center/cover; position: relative; }
        .back-btn { position: absolute; top: 40px; left: 20px; width: 36px; height: 36px; background: rgba(0,0,0,0.4); border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; backdrop-filter: blur(4px); }
        
        .container { padding: 20px; }
        .title { font-size: 26px; font-weight: bold; margin-bottom: 10px; color: #333; }
        .info-row { display: flex; margin-bottom: 15px; align-items: center; color: #666; font-size: 14px; }
        .icon { margin-right: 8px; }

        .desc-box { margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; }
        .desc-title { font-weight: bold; font-size: 18px; margin-bottom: 10px; }
        .desc-text { line-height: 1.6; color: #666; font-size: 15px; }

        .bottom-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: white; border-top: 1px solid #eee; padding: 10px 20px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; }
        .status-text { font-size: 12px; color: #999; }
        .btn { width: 100%; padding: 14px; border-radius: 30px; text-align: center; color: white; font-weight: bold; font-size: 18px; cursor: pointer; border: none; transition: background 0.3s; }
        
        .btn-blue { background: #007aff; box-shadow: 0 4px 12px rgba(0,122,255,0.3); }
        .btn-blue:active { background: #005bb5; }
        
        .btn-green { background: #34c759; box-shadow: 0 4px 12px rgba(52,199,89,0.3); }
        .btn-green:active { background: #248a3d; }

        .btn-disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }
    </style>

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

    <div class="hero">
        <div class="back-btn" onclick="Bridge.back()">←</div>
    </div>

    <div class="container">
        <div class="title" id="eventName">加载中...</div>
        
        <div class="info-row">
            <span class="icon">🕒</span>
            <span id="eventTime">--</span>
        </div>
        <div class="info-row">
            <span class="icon">📍</span>
            <span>全国线上活动</span>
        </div>

        <div class="desc-box">
            <div class="desc-title">活动简介</div>
            <div class="desc-text">
                这是一场激动人心的线上挑战赛！无论你在哪里，只要迈开双腿，就能参与其中。<br><br>
                <b>参赛规则：</b><br>
                1. 点击下方按钮报名。<br>
                2. 使用 App 记录运动轨迹。<br>
                3. 完赛后获得电子证书。
            </div>
        </div>
    </div>

    <div class="bottom-bar">
        <button id="actionBtn" class="btn btn-disabled" onclick="handleAction()">加载状态...</button>
    </div>

    <script>
        var TOKEN = '96ba3c924394934f7d30fa869a94ce0d';
        var EC_ID = 0; // 卡片ID
        var MC_ID = 101; // 赛事ID (用于报名)

        var state = {
            isJoin: false,
            isLoading: true
        };

        // 检测是否本地开发环境
        var isLocal = window.location.protocol === 'file:' || 
                      window.location.hostname === 'localhost' || 
                      window.location.hostname === '127.0.0.1';
        
        API.init({ 
            token: TOKEN,
            useMock: isLocal // 本地开发自动开启 Mock
        });

        // 初始化页面
        initPage();

        function initPage() {
            // 1. 获取活动详情
            API.getCardDetail(EC_ID).then(function(data) {
                document.getElementById('eventName').innerText = data.mcName || '演示活动：线上马拉松';
                // 简单格式化时间，真实项目建议用 momentjs 或 tools
                document.getElementById('eventTime').innerText = '活动时间: 近期有效'; 
            }).catch(function(err) {
                console.warn('详情加载失败(可能用mock数据)', err);
                document.getElementById('eventName').innerText = '演示活动：线上马拉松';
            });

            // 2. 检查报名状态
            checkJoinStatus();
        }

        function checkJoinStatus() {
            setBtnLoading(true);
            API.getUserJoinStatus(EC_ID).then(function(data) {
                state.isJoin = data.isJoin;
                updateBtnState();
            }).catch(function(err) {
                console.error(err);
                alert('获取报名状态失败');
                // 默认未报名
                state.isJoin = false;
                updateBtnState();
            });
        }

        function updateBtnState() {
            var btn = document.getElementById('actionBtn');
            state.isLoading = false;
            btn.className = state.isJoin ? 'btn btn-green' : 'btn btn-blue';
            btn.innerText = state.isJoin ? '已报名，进入比赛' : '立即报名';
        }

        function setBtnLoading(loading) {
            state.isLoading = loading;
            var btn = document.getElementById('actionBtn');
            if (loading) {
                btn.className = 'btn btn-disabled';
                btn.innerText = '处理中...';
            }
        }

        function handleAction() {
            if (state.isLoading) return;

            if (state.isJoin) {
                // 已报名 -> 进入比赛 (调用 Bridge 打开原生页面)
                Bridge.openMatch(MC_ID, 1); // type=1 普通活动
            } else {
                // 未报名 -> 执行报名
                doSignUp();
            }
        }

        function doSignUp() {
            if (!confirm('确定要报名参加这个活动吗？')) return;

            setBtnLoading(true);
            
            API.signUpOnline(MC_ID).then(function(res) {
                alert('🎉 报名成功！');
                // 刷新状态
                checkJoinStatus();
            }).catch(function(err) {
                setBtnLoading(false);
                console.error(err);
                // Mock 模式下 API 可能会失败（没有真实后端），我们模拟成功
                if (window.location.protocol === 'file:') {
                    alert('🎉 报名成功！(Mock模式)');
                    state.isJoin = true;
                    updateBtnState();
                } else {
                    alert('报名失败: ' + err.message);
                }
            });
        }
    </script>
</body>
</html>