更换测距页面

2025-07-05 14:52:41 +08:00
parent 054bf2ef21
commit 1c70471959
10 changed files with 224 additions and 179 deletions
--- a/src/pages/battle-room.vue
+++ b/src/pages/battle-room.vue
@@ -15,8 +15,8 @@ import PlayersRow from "@/components/PlayersRow.vue";
 import SModal from "@/components/SModal.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import RoundEndTip from "@/components/RoundEndTip.vue";
+import TestDistance from "@/components/TestDistance.vue";
 import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
-import { checkConnection } from "@/util";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -127,10 +127,6 @@ async function onReceiveMessage(messages = []) {
    ) {
      console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
    }
-    if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
-      scores.value.push(msg.target);
-      power.value = msg.target.battery;
-    }
    if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
      // 这里会掉多次;
      timerSeq.value += 1;
@@ -288,7 +284,6 @@ const exitRoom = async () => {
 };

 onMounted(() => {
-  checkConnection();
  uni.$on("socket-inbox", onReceiveMessage);
 });

@@ -358,25 +353,7 @@ onUnmounted(() => {
        :redTeam="redTeam"
        :players="players"
      />
-      <Guide noBg>
-        <view :style="{ display: 'flex', justifyContent: 'space-between' }">
-          <view :style="{ display: 'flex', flexDirection: 'column' }">
-            <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
-            <text>请确保射击距离只有5米</text>
-          </view>
-          <BowPower :power="power" />
-        </view>
-      </Guide>
-      <BowTarget
-        :scores="scores"
-        :tips="
-          !start && scores.length > 0
-            ? `本次射程${scores[scores.length - 1].dst / 100}米，${
-                scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
-              }达到距离要求`
-            : ''
-        "
-      />
+      <TestDistance :guide="false" />
    </view>
    <view v-if="step === 3">
      <ShootProgress
--- a/src/pages/first-try.vue
+++ b/src/pages/first-try.vue
@@ -10,8 +10,9 @@ import ScorePanel from "@/components/ScorePanel.vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
+import TestDistance from "@/components/TestDistance.vue";
 import { createPractiseAPI } from "@/apis";
-import { generateCanvasImage, checkConnection } from "@/util";
+import { generateCanvasImage } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -33,7 +34,7 @@ const title = ref("新手试炼场");
 const start = ref(false);
 const practiseResult = ref({});
 const power = ref(0);
-const btnDisabled = ref(false);
+// const btnDisabled = ref(false);
 const practiseId = ref("");

 const createPractise = async (arrows) => {
@@ -47,9 +48,9 @@ async function onReceiveMessage(messages = []) {
      scores.value.push(msg.target);
      power.value = msg.target.battery;
      // if (step.value === 2 && msg.target.dst / 100 > 5) {
-      if (step.value === 2 && msg.target.dst > 5) {
-        btnDisabled.value = false;
-      }
+      // if (step.value === 2 && msg.target.dst > 5) {
+      //   btnDisabled.value = false;
+      // }
    }
    if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
      if (practiseId.value && practiseId.value === msg.practice.id) {
@@ -72,7 +73,6 @@ async function onReceiveMessage(messages = []) {
 }

 onMounted(() => {
-  checkConnection();
  uni.$on("socket-inbox", onReceiveMessage);
 });

@@ -85,7 +85,7 @@ const nextStep = async () => {
    step.value = 1;
    title.value = "凹造型";
  } else if (step.value === 1) {
-    btnDisabled.value = true;
+    // btnDisabled.value = true;
    step.value = 2;
    title.value = "感知距离";
  } else if (step.value === 2) {
@@ -201,29 +201,20 @@ const onClose = () => {
        :total="100"
        :start="start"
      />
+      <TestDistance v-if="step === 2" :guide="false" />
      <view
        class="infos"
-        v-if="step === 2 || step === 4"
+        v-if="step === 4"
        :style="{ marginBottom: step === 2 ? '40px' : '0' }"
      >
-        <text v-if="step === 2">大人，请射箭</text>
-        <Avatar v-if="step === 4" :src="user.avatar" :size="35" />
+        <Avatar :src="user.avatar" :size="35" />
        <BowPower :power="power" />
      </view>
      <BowTarget
+        v-if="step === 4"
        :start="start"
-        :avatar="step === 2 ? user.avatar : ''"
-        :debug="step === 2"
-        v-if="step === 2 || step === 4"
        :currentRound="step === 4 ? scores.length : 0"
        :totalRound="step === 4 ? total : 0"
-        :tips="
-          step === 2 && scores.length > 0
-            ? `本次射程${scores[scores.length - 1].dst / 100}米，${
-                scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
-              }达到距离要求`
-            : ''
-        "
        :scores="scores"
      />
      <ScorePanel
@@ -245,7 +236,7 @@ const onClose = () => {
      <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
    </view>
    <view :style="{ marginBottom: '20px' }">
-      <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">{{
+      <SButton v-if="step !== 4" :onClick="nextStep">{{
        stepButtonTexts[step]
      }}</SButton>
    </view>
--- a/src/pages/melee-match.vue
+++ b/src/pages/melee-match.vue
@@ -13,6 +13,7 @@ import Avatar from "@/components/Avatar.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import Matching from "@/components/Matching.vue";
 import SModal from "@/components/SModal.vue";
+import TestDistance from "@/components/TestDistance.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -79,10 +80,6 @@ async function onReceiveMessage(messages = []) {
        });
      };
    }
-    if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
-      scores.value.push(msg.target);
-      power.value = msg.target.battery;
-    }
    if (msg.id !== battleId.value) return;
    if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
      start.value = true;
@@ -140,16 +137,8 @@ onUnmounted(() => {
  >
    <view class="container">
      <block v-if="battleId">
-        <BattleHeader v-if="players.length" :players="players" />
-        <Guide noBg v-if="!start && battleId">
-          <view :style="{ display: 'flex', justifyContent: 'space-between' }">
-            <view :style="{ display: 'flex', flexDirection: 'column' }">
-              <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
-              <text>请确保射击距离只有5米</text>
-            </view>
-            <BowPower :power="45" />
-          </view>
-        </Guide>
+        <BattleHeader :players="players" />
+        <TestDistance v-if="!start" :guide="false" />
        <ShootProgress
          v-if="start"
          :seq="seq"
@@ -161,7 +150,7 @@ onUnmounted(() => {
          <BowPower :power="power" />
        </view>
        <BowTarget
-          v-if="battleId"
+          v-if="start"
          :showE="start"
          :currentRound="scores.length"
          :totalRound="start ? 12 : 0"
--- a/src/pages/practise-one.vue
+++ b/src/pages/practise-one.vue
@@ -8,8 +8,9 @@ import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
+import TestDistance from "@/components/TestDistance.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
-import { generateCanvasImage, checkConnection } from "@/util";
+import { generateCanvasImage } from "@/util";
 import { MESSAGETYPES, roundsName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -70,7 +71,6 @@ async function onComplete() {
 }

 onMounted(() => {
-  checkConnection();
  uni.$on("socket-inbox", onReceiveMessage);
 });

@@ -82,44 +82,42 @@ onUnmounted(() => {
 <template>
  <Container :bgType="1" title="个人单组练习">
    <view>
-      <ShootProgress
-        :tips="`${
-          !start || scores.length === 12
-            ? ''
-            : `请开始射箭第${roundsName[Math.ceil((scores.length + 1) / 3)]}轮`
-        }`"
-        :start="start"
-        :total="120"
-      />
-      <view class="infos">
-        <Avatar :src="user.avatar" :size="35" />
-        <BowPower :power="power" />
-      </view>
-      <BowTarget
-        :start="start"
-        :totalRound="start ? total / 4 : 0"
-        :currentRound="currentRound"
-        :scores="scores"
-        :tips="
-          !start && scores.length > 0
-            ? `本次射程${scores[scores.length - 1].dst / 100}米，${
-                scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
-              }达到距离要求`
-            : ''
-        "
-      />
-      <ScorePanel2 v-if="start" :scores="scores.map((s) => s.ring)" />
-      <ScoreResult
-        v-if="practiseResult.arrows"
-        :rowCount="6"
-        :total="total"
-        :onClose="onComplete"
-        :result="practiseResult"
-        :tipSrc="`../static/${
-          practiseResult.arrows.length < total ? 'un' : ''
-        }finish-tip.png`"
-      />
-      <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
+      <TestDistance v-if="!start && !practiseResult.arrows" />
+      <block v-if="start || practiseResult.arrows">
+        <ShootProgress
+          :tips="`${
+            !start || scores.length === 12
+              ? ''
+              : `请开始射箭第${
+                  roundsName[Math.ceil((scores.length + 1) / 3)]
+                }轮`
+          }`"
+          :start="start"
+          :total="120"
+        />
+        <view class="infos">
+          <Avatar :src="user.avatar" :size="35" />
+          <BowPower :power="power" />
+        </view>
+        <BowTarget
+          :start="start"
+          :totalRound="start ? total / 4 : 0"
+          :currentRound="currentRound"
+          :scores="scores"
+        />
+        <ScorePanel2 :scores="scores.map((s) => s.ring)" />
+        <ScoreResult
+          v-if="practiseResult.arrows"
+          :rowCount="6"
+          :total="total"
+          :onClose="onComplete"
+          :result="practiseResult"
+          :tipSrc="`../static/${
+            practiseResult.arrows.length < total ? 'un' : ''
+          }finish-tip.png`"
+        />
+        <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
+      </block>
    </view>
    <view :style="{ marginBottom: '20px' }">
      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
--- a/src/pages/practise-two.vue
+++ b/src/pages/practise-two.vue
@@ -8,8 +8,9 @@ import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
+import TestDistance from "@/components/TestDistance.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
-import { generateCanvasImage, checkConnection } from "@/util";
+import { generateCanvasImage } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -74,7 +75,6 @@ async function onComplete() {
 }

 onMounted(() => {
-  checkConnection();
  uni.$on("socket-inbox", onReceiveMessage);
 });

@@ -86,47 +86,43 @@ onUnmounted(() => {
 <template>
  <Container :bgType="1" title="个人单组练习">
    <view>
-      <ShootProgress
-        :start="start"
-        :tips="`请连续射箭${total}支`"
-        :total="120"
-      />
-      <view class="infos">
-        <Avatar :src="user.avatar" :size="35" />
-        <BowPower :power="power" />
-      </view>
-      <BowTarget
-        :start="start"
-        :totalRound="start ? total : 0"
-        :currentRound="currentRound"
-        :scores="scores"
-        :tips="
-          !start && scores.length > 0
-            ? `本次射程${scores[scores.length - 1].dst / 100}米，${
-                scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
-              }达到距离要求`
-            : ''
-        "
-      />
-      <ScorePanel
-        v-if="start"
-        :scores="scores.map((s) => s.ring)"
-        :total="total"
-        :rowCount="total / 4"
-        :margin="1.5"
-        :font-size="20"
-      />
-      <ScoreResult
-        v-if="practiseResult.arrows"
-        :total="total"
-        :rowCount="9"
-        :onClose="onComplete"
-        :result="practiseResult"
-        :tipSrc="`../static/${
-          practiseResult.arrows.length < total ? '2un' : ''
-        }finish-tip.png`"
-      />
-      <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
+      <TestDistance v-if="!start && !practiseResult.arrows" />
+      <block v-if="start || practiseResult.arrows">
+        <ShootProgress
+          :start="start"
+          :tips="`请连续射箭${total}支`"
+          :total="120"
+        />
+        <view class="infos">
+          <Avatar :src="user.avatar" :size="35" />
+          <BowPower :power="power" />
+        </view>
+        <BowTarget
+          :start="start"
+          :totalRound="start ? total : 0"
+          :currentRound="currentRound"
+          :scores="scores"
+        />
+        <ScorePanel
+          v-if="start"
+          :scores="scores.map((s) => s.ring)"
+          :total="total"
+          :rowCount="total / 4"
+          :margin="1.5"
+          :font-size="20"
+        />
+        <ScoreResult
+          v-if="practiseResult.arrows"
+          :total="total"
+          :rowCount="9"
+          :onClose="onComplete"
+          :result="practiseResult"
+          :tipSrc="`../static/${
+            practiseResult.arrows.length < total ? '2un' : ''
+          }finish-tip.png`"
+        />
+        <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
+      </block>
    </view>
    <view :style="{ marginBottom: '20px' }">
      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
--- a/src/pages/team-match.vue
+++ b/src/pages/team-match.vue
@@ -14,6 +14,7 @@ import SButton from "@/components/SButton.vue";
 import Matching from "@/components/Matching.vue";
 import SModal from "@/components/SModal.vue";
 import RoundEndTip from "@/components/RoundEndTip.vue";
+import TestDistance from "@/components/TestDistance.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -71,10 +72,6 @@ async function onReceiveMessage(messages = []) {
    ) {
      console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
    }
-    if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
-      scores.value.push(msg.target);
-      power.value = msg.target.battery;
-    }
    if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
      // 这里会掉多次;
      onComplete.value = () => {
@@ -167,15 +164,7 @@ onUnmounted(() => {
          :redTeam="redTeam"
          :blueTeam="blueTeam"
        />
-        <Guide noBg v-if="!start">
-          <view :style="{ display: 'flex', justifyContent: 'space-between' }">
-            <view :style="{ display: 'flex', flexDirection: 'column' }">
-              <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
-              <text>请确保射击距离只有5米</text>
-            </view>
-            <BowPower :power="45" />
-          </view>
-        </Guide>
+        <TestDistance v-if="!start" :guide="false" />
        <ShootProgress v-if="start" :tips="tips" :seq="seq" :total="15" />
        <PlayersRow
          v-if="start"
@@ -184,6 +173,7 @@ onUnmounted(() => {
          :redTeam="redTeam"
        />
        <BowTarget
+          v-if="start"
          mode="team"
          :showE="start && user.id === currentShooterId"
          :power="start ? power : 0"
@@ -191,13 +181,6 @@ onUnmounted(() => {
          :totalRound="totalRounds"
          :scores="scores"
          :blueScores="blueScores"
-          :tips="
-            !start && scores.length > 0
-              ? `本次射程${scores[scores.length - 1].dst / 100}米，${
-                  scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
-                }达到距离要求`
-              : ''
-          "
        />
        <BattleFooter
          v-if="start"