Orienteering
/
mobile_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ColorMapRun SDK 全功能测试台</title>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #f0f2f5; display: flex; gap: 20px; }
        .sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; height: 90vh; overflow-y: auto; padding-right: 10px; }
        .main { flex: 1; display: flex; flex-direction: column; height: 90vh; }
        
        h2, h3 { margin-top: 0; color: #333; }
        h3 { font-size: 16px; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 2px solid #007aff; display: inline-block; }
        
        .group { margin-bottom: 20px; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .group-title { font-weight: bold; margin-bottom: 10px; color: #555; }
        
        .btn-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
        button { padding: 8px 12px; font-size: 13px; border: 1px solid #ddd; background: #fff; border-radius: 4px; cursor: pointer; text-align: left; transition: all 0.2s; }
        button:hover { background: #f0f8ff; border-color: #007aff; color: #007aff; }
        button.active { background: #007aff; color: white; border-color: #007aff; }
        
        .log-area { flex: 1; background: #1e1e1e; color: #0f0; padding: 15px; border-radius: 8px; font-family: 'Consolas', monospace; font-size: 13px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; line-height: 1.5; }
        .log-entry { margin-bottom: 10px; border-bottom: 1px dashed #444; padding-bottom: 5px; }
        .log-time { color: #888; font-size: 11px; }
        .log-label { color: #fff; font-weight: bold; }
        .log-error { color: #ff4d4f; }
    </style>

    <!-- SDK -->
    <script src="./mock_flutter.js"></script> <!-- 确保 mock_flutter.js 在 bridge.js 和 api.js 之前引入，以便正确模拟全局对象 -->
    <script src="./bridge.js"></script>
    <script src="./api.js"></script>
</head>
<body>

    <div class="sidebar">
        <h2>SDK 测试台</h2>
        <div style="font-size: 12px; color: #666; margin-bottom: 10px;">当前环境: <span id="envInfo">检测中...</span></div>
        <button onclick="clearLog()" style="text-align: center; margin-bottom: 10px;">🗑️ 清空日志</button>

        <!-- App Bridge -->
        <div class="group">
            <div class="group-title">📱 App 交互 (Bridge)</div>
            <div class="btn-grid">
                <button onclick="run('Bridge.openMap(latitude, longitude, name)', Bridge.openMap, 39.9, 116.4, '北京')">打开地图</button>
                <button onclick="run('Bridge.openMatch(id, type)', Bridge.openMatch, MOCK_MCID, 1)">打开赛事详情</button>
                <button onclick="run('Bridge.openActivityList(id, mapName)', Bridge.openActivityList, 202, '奥体')">打开活动列表</button>
                <button onclick="run('Bridge.shareWx({title, url, image, scene})', Bridge.shareWx, {title:'Demo分享', url:location.href, image:'https://picsum.photos/100/100'})">微信分享</button>
                <button onclick="run('Bridge.launchWxMini(username, path)', Bridge.launchWxMini, 'gh_bea09156da8d', 'pages/index/index')">打开小程序</button>
                <button onclick="run('Bridge.saveImage(base64Str)', Bridge.saveImage, 'data:image/png;base64,iVBORw0KGgoAAA...')">保存图片</button>
                <button onclick="run('Bridge.back()', Bridge.back)">返回上一页</button>
                <button onclick="run('Bridge.toHome()', Bridge.toHome)">返回App首页</button>
                <button onclick="run('Bridge.toLogin()', Bridge.toLogin)">跳转登录</button>
                <button onclick="run('Bridge.setTitle(title)', Bridge.setTitle, '新标题')">设置标题</button>
                <button onclick="getToken()">获取 Token (Bridge)</button>
            </div>
        </div>

        <!-- API: Config -->
        <div class="group">
            <div class="group-title">1. 配置与基础</div>
            <div class="btn-grid">
                <button onclick="api('API.getCardBase(ecId, pageName)', API.getCardBase, MOCK_ECID, 'index')">getCardBase</button>
                <button onclick="api('API.getCardConfig(ecId, pageName)', API.getCardConfig, MOCK_ECID, 'index')">getCardConfig</button>
                <button onclick="api('API.getUserConfig(ecId, pageName)', API.getUserConfig, MOCK_ECID, 'index')">getUserConfig</button>
            </div>
        </div>

        <!-- API: Activity -->
        <div class="group">
            <div class="group-title">2. 活动与报名</div>
            <div class="btn-grid">
                <button onclick="api('API.getCardDetail(ecId)', API.getCardDetail, MOCK_ECID)">getCardDetail</button>
                <button onclick="api('API.getMatchRsDetail(ecId)', API.getMatchRsDetail, MOCK_ECID)">getMatchRsDetail</button>
                <button onclick="api('API.getUserJoinStatus(ecId)', API.getUserJoinStatus, MOCK_ECID)">getUserJoinStatus</button>
                <button onclick="api('API.isNewUserInCardComp(ecId)', API.isNewUserInCardComp, MOCK_ECID)">isNewUserInCardComp</button>
                <button onclick="api('API.getOnlineMcSignUpDetail(ecId)', API.getOnlineMcSignUpDetail, MOCK_ECID)">getOnlineMcSignUpDetail</button>
                <button onclick="api('API.signUpOnline(mcId, coiId, selectTeam, nickName)', API.signUpOnline, MOCK_MCID, 0, 0, '测试用户')">signUpOnline (报名)</button>
                <button onclick="api('API.isAllowMcSignUp(ecId)', API.isAllowMcSignUp, MOCK_ECID)">isAllowMcSignUp</button>
            </div>
        </div>

        <!-- API: Rank -->
        <div class="group">
            <div class="group-title">3. 排名与成就</div>
            <div class="btn-grid">
                <button onclick="api('API.getRankDetail(mcIdListStr, mcType, dispArrStr)', API.getRankDetail, String(MOCK_MCID), 1, 'total')">getRankDetail</button>
                <button onclick="api('API.getUserCurrentRank(ecId)', API.getUserCurrentRank, MOCK_ECID)">getUserCurrentRank</button>
                <button onclick="api('API.getCurrentMonthlyChallenge()', API.getCurrentMonthlyChallenge)">getCurrentMonthlyChallenge</button>
                <button onclick="api('API.getMonthlyChallenge()', API.getMonthlyChallenge)">getMonthlyChallenge</button>
                <button onclick="api('API.getMonthRankDetail()', API.getMonthRankDetail)">getMonthRankDetail</button>
                <button onclick="api('API.getAchievement()', API.getAchievement)">getAchievement</button>
                <button onclick="api('API.getCompStatistic(ecId)', API.getCompStatistic, MOCK_ECID)">getCompStatistic</button>
            </div>
        </div>

        <!-- API: Exchange -->
        <div class="group">
            <div class="group-title">4. 积分与兑换</div>
            <div class="btn-grid">
                <button onclick="api('API.getScore(ecId)', API.getScore, MOCK_ECID)">getScore</button>
                <button onclick="api('API.getGoodsList(ecId)', API.getGoodsList, MOCK_ECID)">getGoodsList</button>
                <button onclick="api('API.getGoodsDetail(goodsId)', API.getGoodsDetail, 1)">getGoodsDetail</button>
                <button onclick="api('API.exchangeGoods(ecId, goodsId)', API.exchangeGoods, MOCK_ECID, 1)">exchangeGoods</button>
                <button onclick="api('API.getExchangeList(ecId)', API.getExchangeList, MOCK_ECID)">getExchangeList</button>
                <button onclick="api('API.getExchangeDetail(ecId, exchangeId)', API.getExchangeDetail, MOCK_ECID, 1)">getExchangeDetail</button>
            </div>
        </div>

        <!-- API: Message -->
        <div class="group">
            <div class="group-title">5. 消息与通知</div>
            <div class="btn-grid">
                <button onclick="api('API.getUnReadMessages(relationId, relationType)', API.getUnReadMessages, MOCK_ECID, 2)">getUnReadMessages</button>
                <button onclick="api('API.readMessage(mqIdListStr)', API.readMessage, '1,2,3')">readMessage</button>
                <button onclick="api('API.getWarnMessage(ecId)', API.getWarnMessage, MOCK_ECID)">getWarnMessage</button>
            </div>
        </div>

        <!-- API: Cert -->
        <div class="group">
            <div class="group-title">6. 电子证书</div>
            <div class="btn-grid">
                <button onclick="api('API.getCertStyle(ecId)', API.getCertStyle, MOCK_ECID)">getCertStyle</button>
                <button onclick="api('API.getUserBaseInCertificate(ecId)', API.getUserBaseInCertificate, MOCK_ECID)">getUserBaseInCertificate</button>
                <button onclick="api('API.createCertificate({ecId, certStyleId, ...})', API.createCertificate, {ecId:MOCK_ECID, certStyleId:1, userName:'测试用户'})">createCertificate</button>
            </div>
        </div>

        <!-- API: Other -->
        <div class="group">
            <div class="group-title">7. 其他</div>
            <div class="btn-grid">
                <button onclick="api('API.getUserInfo()', API.getUserInfo)">getUserInfo</button>
                <button onclick="api('API.getMapList(ecId)', API.getMapList, MOCK_ECID)">getMapList</button>
                <button onclick="api('API.getGrids(ecId)', API.getGrids, MOCK_ECID)">getGrids</button>
            </div>
        </div>
    </div>

    <div class="main">
        <h3>执行日志</h3>
        <div class="log-area" id="log">
            <div class="log-entry" style="color: #aaa;">等待操作...</div>
        </div>
    </div>

    <script>
        var TOKEN = '96ba3c924394934f7d30fa869a94ce0d'; 
        var MOCK_ECID = 1; // 模拟卡片/活动ID (ecId)
        var MOCK_MCID = 101; // 模拟赛事ID (mcId)

        var isLocal = window.location.protocol === 'file:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
        
        document.getElementById('envInfo').innerText = isLocal ? '本地开发 (Mock ON)' : '生产环境';

        // 初始化 API SDK
        API.init({
            token: TOKEN,
            useMock: isLocal
        });

        // ===========================================
        // 日志功能
        // ===========================================
        function log(label, data, isError = false) {
            var el = document.getElementById('log');
            var div = document.createElement('div');
            div.className = 'log-entry';
            var time = new Date().toLocaleTimeString();
            var content = typeof data === 'object' ? JSON.stringify(data, null, 2) : data;
            div.innerHTML = `<div class="log-time">[${time}]</div><div class="log-label ${isError?'log-error':''}">${label}</div><div>${content}</div>`;
            el.prepend(div);
        }

        function clearLog() {
            document.getElementById('log').innerHTML = '';
        }

        // ===========================================
        // Bridge 调用通用函数
        // fnDesc: Bridge 方法的描述字符串，如 'Bridge.openMap(latitude, longitude, name)'
        // fn: 实际要调用的 Bridge 方法
        // ...args: 实际参数
        // ===========================================
        function run(fnDesc, fn, ...args) {
            log('调用 ' + fnDesc, '参数: ' + JSON.stringify(args));
            fn.apply(Bridge, args);
        }

        function getToken() {
            log('调用 Bridge.getToken', '等待 App 回调 Token...');
            Bridge.onToken(function(t) {
                log('✅ Bridge 回调成功', 'Token: ' + t);
            });
            Bridge.getToken();
        }

        // ===========================================
        // API 调用通用函数
        // fnDesc: API 方法的描述字符串，如 'API.getCardDetail(ecId)'
        // fn: 实际要调用的 API 方法
        // ...args: 实际参数
        // ===========================================
        function api(fnDesc, fn, ...args) {
            log('请求 ' + fnDesc, '实际参数: ' + JSON.stringify(args));
            
            fn.apply(API, args)
                .then(function(res) {
                    log('✅ 成功', res);
                })
                .catch(function(err) {
                    log('❌ 失败', err.message || err, true);
                });
        }
    </script>
</body>
</html>