添加2v2页面

src/pages/team-battle.vue

@@ -0,0 +1,146 @@
+<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>