游戏列表页 - 在线游戏平台

import GameListCom from '../components/GameListCom.vue'; import TabNavCom from '../components/TabNavCom.vue'; const { proxy } = getCurrentInstance(); const $TOOL = proxy.$TOOL; const $API = proxy.$API; const route = useRoute(); const gid = ref(); const shijian = ref(0); const miaoshu = ref(''); const stoptime = ref(0); const opentime = ref(0); const status = ref(false); const info = ref(null); const lastLotto = ref(null); const record = ref(null); const nextGame = ref(null); const indexList = reactive([]); const timer = ref(null);

// 切换游戏 const get_gid = async (val) => { gid.value = val; await getHaed(gid.value); await getList(gid.value); };

onBeforeUnmount(() => { clearInterval(timer.value); // 清除定时器 console.log('清除定时器'); });

// 获取下一期游戏的状态标签 const nextGameLabel = () => { const nextGame = nextGame.value; if (!nextGame) { return ''; } else if (nextGame.now > nextGame.startTime) { return '开奖中'; } else { return '马上参与'; } };

// 获取按钮样式 const buttonClass = (index) => { const state = index.state; if (state === 0) { if (nextGame.value.now > index.stopTime) { return 'btn-border-warning'; } else { return 'btn-danger'; } } else { return 'btn-border-default'; } };

const buttonLabel = (index) => { const state = index.state; if (state === 1) { return '已开奖'; } else if (state === 0 && nextGame.value.now > index.stopTime) { return '开奖中'; } else { return nextGameLabel(); } };

// 更新头部数据 const updateHeaderData = async (val) => { const data = { g: val, }; try { const res = await $API.game.index.head.get(data); if (res.code === 0) { const { info, lastLotto, record, nextGame } = res.data; info.value = info; lastLotto.value = lastLotto; record.value = record; nextGame.value = nextGame;

  const timeA = new Date(nextGame.now).getTime();
  const timeB = new Date(nextGame.stoptime).getTime();
  const timeC = new Date(nextGame.opentime).getTime();

  stoptime.value = (timeB - timeA) / 1000;
  opentime.value = (timeC - timeA) / 1000;
  daojishi();
  clearInterval(timer.value);
  timer.value = setInterval(daojishi, 1000);
}

} catch (error) { console.log(error); } };

const getHaed = async (val) => { await updateHeaderData(val); };

const daojishi = () => { if (stoptime.value > 0) { miaoshu.value = '距离停止投注还有'; shijian.value = stoptime.value; } else if (opentime.value > 0) { miaoshu.value = '停止参与,等待开奖'; shijian.value = opentime.value; } else { status.value = true; miaoshu.value = opentime.value % 3 === 0 ? '正在开奖..' : '开奖中,请稍后'; getState(info.value.id, nextGame.value.nextIssue); }

status.value = opentime.value > 0 ? false : true;

stoptime.value--; opentime.value--; };

const getState = async (gid, did) => { console.log(gid); console.log(did); if (did === 0 || gid < 1 || gid > 100) { return; } const data = { g: gid, did: did, }; try { const res = await $API.game.index.getState.get(data); if (res.code === 0) { if (res.data.state === 1) { await getHaed(gid); } else { console.log('未开奖'); } } } catch (error) { console.log(error); } };

const getList = async (gid) => { const data = { g: gid, p: 1, }; try { const res = await $API.game.index.IndexList.get(data); indexList.value = res.data.listData; console.log(res); } catch (error) { console.log(error); } };