Orienteering
/
mobile_h5


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<!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; }
        .hero { width: 100%; height: 200px; background: #ddd url('https://via.placeholder.com/400x200/007aff/ffffff?text=Activity') center/cover; position: relative; }
        .back-btn { position: absolute; top: 40px; left: 20px; width: 32px; height: 32px; background: rgba(0,0,0,0.5); border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; }
        .content { padding: 20px; }
        .title { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
        .tags { display: flex; gap: 10px; margin-bottom: 20px; }
        .tag { background: #f0f2f5; color: #666; padding: 4px 8px; border-radius: 4px; font-size: 12px; }
        .desc { color: #666; line-height: 1.6; margin-bottom: 30px; }
        
        .action-bar { position: fixed; bottom: 0; left: 0; width: 100%; padding: 10px 20px; background: white; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); box-sizing: border-box; display: flex; gap: 10px; }
        .btn { flex: 1; padding: 12px; border-radius: 24px; text-align: center; font-weight: bold; font-size: 16px; cursor: pointer; }
        .btn-primary { background: #007aff; color: white; }
        .btn-outline { border: 1px solid #ddd; color: #333; background: white; }
    </style>

    <!-- SDK -->
    <script src="./mock_flutter.js"></script>
    <script src="./bridge.js"></script>
</head>
<body>

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

    <div class="content">
        <div class="title" id="title">活动标题</div>
        <div class="tags">
            <div class="tag">线下活动</div>
            <div class="tag">2025.11.26</div>
        </div>
        <div class="desc">
            这是一个非常精彩的线下活动。通过这个页面，演示了如何调用 App 原生的能力。<br><br>
            1. 点击左上角返回按钮，调用 Bridge.back()<br>
            2. 点击底部“导航”，调用 Bridge.openMap()<br>
            3. 点击底部“详情”，调用 Bridge.openMatch() 跳转原生页面
        </div>
        
        <div style="text-align: center; margin-top: 20px;">
             <button onclick="doShare()" style="padding: 8px 20px; background: #4cd964; color: white; border: none; border-radius: 20px;">分享给朋友</button>
        </div>
    </div>

    <div class="action-bar">
        <div class="btn btn-outline" onclick="doNav()">🗺️ 导航</div>
        <div class="btn btn-primary" onclick="doNativeDetail()">📱 原生详情</div>
    </div>

    <script>
        // 获取 URL 参数
        function getQuery(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURIComponent(r[2]); return null;
        }

        var id = getQuery('id') || '0';
        var name = getQuery('name') || '未知活动';
        document.getElementById('title').innerText = name;

        function doNav() {
            // 调用地图
            Bridge.openMap(39.9042, 116.4074, name);
        }

        function doNativeDetail() {
            // 跳转 App 原生详情页
            // type=1: 普通活动
            Bridge.openMatch(id, 1);
        }
        
        function doShare() {
            Bridge.shareWx({
                title: '快来参加: ' + name,
                url: window.location.href,
                image: 'https://via.placeholder.com/100'
            });
        }
    </script>
</body>
</html>