Orienteering
/
mobile_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>S3 活动首页</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
		body { font-family: 'Roboto', sans-serif; }
		.content-bg {
			background: linear-gradient(180deg, #7aedff 0%, #047200 100%);
			min-height: 100vh;
		}
		.logo-bg {
			background-image: url('./static/logo/jbs.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
		}
	</style>
</head>
<body class="bg-gray-100">

	<div class="content-bg w-full flex flex-col relative">
		<!-- Top Bar -->
		<div class="w-full flex justify-end p-4 pt-8">
			<div class="flex items-center bg-black/30 rounded-xl px-3 py-1 gap-2 min-w-[90px] h-[40px]">
				<img src="https://img.icons8.com/ios-filled/50/ffffff/clock.png" class="w-5 h-5 object-contain">
				<div id="countdown" class="text-white text-lg font-bold text-center min-w-[60px]">--:--</div>
			</div>
		</div>

		<!-- Main Content -->
		<div class="flex-1 flex flex-col items-center justify-center gap-6 -mt-20">
			<!-- Logo -->
			<div class="w-[50vw] h-[50vw] logo-bg"></div>

			<!-- Type & Notice -->
			<div class="relative flex items-center justify-center w-full">
				<img id="notice-icon" src="./static/common/notice.png" class="absolute left-10 w-4 h-4 hidden" alt="notice">
				<span id="activity-type" class="text-white/60 text-xl font-bold">锦标赛</span>
			</div>

			<!-- Name -->
			<div id="activity-name" class="text-white text-2xl font-bold text-center px-4">正在加载...</div>

			<!-- Button -->
			<button id="action-btn" onclick="handleBtnClick()" class="bg-white text-black text-xl font-bold py-3 px-12 rounded-full shadow-lg active:scale-95 transition-transform mt-4">
				开始比赛
			</button>
		</div>
	</div>

	<!-- Scripts -->
	<script src="./js/utils.js"></script>
	<script src="./js/bridge.js"></script>
	<script src="./js/api.js"></script>
	<script>
		const state = {
			ecId: 0,
			isJoin: false,
			isFinished: false,
			secondCardName: '',
			beginSecond: 0,
			endSecond: 0,
			timer: null,
			rankKey: ''
		};

		window.onload = function() {
			const token = Tools.getQueryParam('token');
			state.ecId = Tools.getQueryParam('id') || 0;
			state.ecId = 112;
			state.rankKey = `rank-tpl-style3-${state.ecId}`;

			if (window.API) {
				API.setToken(token);
				if (Tools.getQueryParam('env') === 'mock') {
					API.init({ useMock: true });
					if (!state.ecId) state.ecId = 'mock_id';
				}
			}

			const typeParam = Tools.getQueryParam('type');
			if (typeParam) document.getElementById('activity-type').innerText = decodeURIComponent(typeParam);

			const btnTextParam = Tools.getQueryParam('btnText');
			if (btnTextParam) document.getElementById('action-btn').innerText = decodeURIComponent(btnTextParam);

			loadCardBase();
			checkUserJoin();
			loadMatchDetail();
		};

		window.onunload = function() {
			if (state.timer) {
				clearInterval(state.timer);
			}
		};

		function loadCardBase() {
			if (!window.API) return;
			API.getCardBase(state.ecId).then(res => {
				if (res) {
					document.getElementById('activity-name').innerText = res.ecName || '未命名活动';
					state.beginSecond = res.beginSecond;
					state.endSecond = res.endSecond;
					state.secondCardName = res.secondCardName;
					startCountdown();
				}
			});
		}

		function checkUserJoin() {
			if (!window.API) return;
			API.getUserJoinStatus(state.ecId).then(res => {
				if (res && res.isJoin) {
					state.isJoin = true;
				}
			});
		}

		function loadMatchDetail() {
			if (!window.API) return;
			API.getMatchRsDetail(state.ecId,0).then(res => {
				if (!res) return;
				const rankStr = JSON.stringify(res);
				const cache = localStorage.getItem(state.rankKey);
				if (cache !== rankStr) {
					document.getElementById('notice-icon').classList.remove('hidden');
					localStorage.setItem(state.rankKey, rankStr);
				}
			});
		}

		function startCountdown() {
			const countdownEl = document.getElementById('countdown');
			const update = () => {
				if (state.endSecond > 0) {
					const diff = state.endSecond - Date.now() / 1000;
					if (diff > 0) {
						countdownEl.innerText = '距结束' + Tools.convertSecondsToDHM(diff);
					} else {
						countdownEl.innerText = '已结束';
						state.isFinished = true;
						clearInterval(state.timer);
					}
				}
			};
			update();
			state.timer = setInterval(update, 60000);
		}

		function handleBtnClick() {
			//const queryStr = window.location.search;
			const queryStr='?token='+ Tools.getQueryParam('token') +'&id=112';
			if (state.isJoin) {
				const target = `./ranklist.html${queryStr}&full=true`;
				Bridge.appAction(target);
			} else {
				if (!state.isFinished) {
					if (state.secondCardName === 'rankList') {
						const target = `./ranklist.html${queryStr}&full=true`;
						Bridge.appAction(target);
					} else {
						const target = `./signup.html${queryStr}&full=true`;
						Bridge.appAction(target);
					}
				} else {
					const target = `./ranklist.html${queryStr}&full=true`;
					Bridge.appAction(target);
				}
			}
		}
	</script>
</body>
</html>