shoot-miniprograms/src/pages/team-battle.vue

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import BowTarget from "@/components/BowTarget.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import PlayersRow from "@/components/PlayersRow.vue";
import Timer from "@/components/Timer.vue";
import BattleFooter from "@/components/BattleFooter.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import SButton from "@/components/SButton.vue";
import RoundEndTip from "@/components/RoundEndTip.vue";
import TestDistance from "@/components/TestDistance.vue";
import TeamAvatars from "@/components/TeamAvatars.vue";
import ShootProgress2 from "@/components/ShootProgress2.vue";
import { getCurrentGameAPI } from "@/apis";
import { isGameEnded } from "@/util";
import { MESSAGETYPES, roundsName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const start = ref(true);
const battleId = ref("");
const currentRound = ref(1);
const currentRedPoint = ref(0);
const currentBluePoint = ref(0);
const totalRounds = ref(0);
const power = ref(0);
const scores = ref([]);
const blueScores = ref([]);
const redTeam = ref([]);
const blueTeam = ref([
  {
    name: "选手1",
  },
  {
    name: "选手2",
  },
  {
    name: "选手3",
  },
]);
const currentShooterId = ref(0);
const tips = ref("即将开始...");
const roundResults = ref([]);
const redPoints = ref(0);
const bluePoints = ref(0);
const showRoundTip = ref(false);
const isFinalShoot = ref(false);
const isEnded = ref(false);

const onBack = () => {
  uni.$showHint(2);
};
function onReceiveMessage() {}

onLoad(async (options) => {
  if (options.battleId) {
    battleId.value = options.battleId;
    redTeam.value = uni.getStorageSync("red-team");
    blueTeam.value = uni.getStorageSync("blue-team");
    const battleInfo = uni.getStorageSync("current-battle");
    if (battleInfo) {
      await nextTick(() => {
        recoverData(battleInfo);
      });
      setTimeout(getCurrentGameAPI, 2000);
    }
  }
});
onMounted(() => {
  uni.setKeepScreenOn({
    keepScreenOn: true,
  });
  uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
  uni.setKeepScreenOn({
    keepScreenOn: false,
  });
  uni.$off("socket-inbox", onReceiveMessage);
});
</script>

<template>
  <Container :bgType="3" :onBack="onBack">
    <view class="container">
      <BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
      <TestDistance v-if="!start" :guide="false" />
      <view class="players-row">
        <TeamAvatars :team="blueTeam" :isRed="false" :youTurn="true" />
        <ShootProgress2 :tips="tips" />
        <TeamAvatars :team="blueTeam" :youTurn="true" />
      </view>
      <BowTarget
        v-if="start"
        mode="team"
        :power="start ? power : 0"
        :scores="scores"
        :blueScores="blueScores"
      />
      <BattleFooter
        v-if="start"
        :roundResults="roundResults"
        :redPoints="redPoints"
        :bluePoints="bluePoints"
      />
      <Timer v-if="!start" />
      <ScreenHint
        :show="showRoundTip"
        :onClose="() => (showRoundTip = false)"
        :mode="isFinalShoot ? 'tall' : 'normal'"
      >
        <RoundEndTip
          v-if="showRoundTip"
          :isFinal="isFinalShoot"
          :round="currentRound - 1"
          :bluePoint="currentBluePoint"
          :redPoint="currentRedPoint"
          :roundData="
            roundResults[roundResults.length - 2]
              ? roundResults[roundResults.length - 2]
              : []
          "
          :onAutoClose="() => (showRoundTip = false)"
        />
      </ScreenHint>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.players-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: -7vw;
  margin-top: -3vw;
}
</style>