完成耐力赛接口调试

src/components/BowTarget.vue

@@ -77,6 +77,7 @@ function calcRealY(num) {
 }
 .target {
   position: relative;
+  overflow: hidden;
 }
 .target > image:last-child {
   width: 100%;

src/pages/practise-one.vue

@@ -13,10 +13,10 @@ import websocket from "@/websocket";
 const start = ref(false);
 const showScore = ref(false);
 const scores = ref([]);
+const total = 12;
 
 const onReady = async () => {
-  const result = await createPractiseAPI(12);
-  console.log("result", result);
+  const result = await createPractiseAPI(total);
   start.value = true;
   const token = uni.getStorageSync("token");
 
@@ -25,8 +25,7 @@ const onReady = async () => {
     messages.forEach((msg) => {
       if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
         scores.value.push(msg.target);
-        console.log("msg:", msg.target);
-        if (scores.value.length === 12) {
+        if (scores.value.length === total) {
           showScore.value = true;
           websocket.closeWebSocket();
         }
@@ -46,7 +45,7 @@ onUnmounted(() => {
     <Header title="个人单组练习" />
     <ShootProgress tips="请开始射箭第一轮" :start="start" :total="120" />
     <BowTarget
-      :totalRound="12"
+      :totalRound="total"
       :currentRound="scores.length + 1"
       avatar="../static/avatar.png"
       :power="45"
@@ -54,7 +53,7 @@ onUnmounted(() => {
     />
     <ScorePanel2 v-if="start" :scores="scores.map((s) => s.ring)" />
     <ScoreResult
-      :total="12"
+      :total="total"
       :rowCount="6"
       :show="showScore"
       :onClose="() => (showScore = false)"

src/pages/practise-two.vue

@@ -1,37 +1,70 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onUnmounted } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ScorePanel from "@/components/ScorePanel.vue";
 import ScoreResult from "@/components/ScoreResult.vue";
-const scores = ref(new Array(32).fill(9));
+import SButton from "@/components/SButton.vue";
+import { createPractiseAPI } from "@/apis";
+import { MESSAGETYPES } from "@/constants";
+import websocket from "@/websocket";
+const start = ref(false);
 const showScore = ref(false);
+const scores = ref([]);
+const total = 36;
 
-setTimeout(() => {
-  showScore.value = true;
-}, 2000);
+const onReady = async () => {
+  const result = await createPractiseAPI(total);
+  start.value = true;
+  const token = uni.getStorageSync("token");
+
+  websocket.createWebSocket(token, (result) => {
+    const messages = JSON.parse(result).data.updates || [];
+    messages.forEach((msg) => {
+      if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+        scores.value.push(msg.target);
+        if (scores.value.length === total) {
+          showScore.value = true;
+          websocket.closeWebSocket();
+        }
+      }
+    });
+  });
+};
+
+onUnmounted(() => {
+  websocket.closeWebSocket();
+});
 </script>
 
 <template>
   <view class="container">
     <AppBackground type="1" />
     <Header title="个人耐力挑战" />
-    <ShootProgress tips="请连续射箭36支" total="120" />
+    <ShootProgress :tips="`请连续射箭${total}支`" total="120" />
     <BowTarget
-      totalRound="10"
-      currentRound="4"
+      :totalRound="total"
+      :currentRound="scores.length + 1"
       avatar="../static/avatar.png"
-      power="45"
+      :power="45"
+      :scores="scores"
+    />
+    <ScorePanel
+      v-if="start"
+      :scores="scores.map((s) => s.ring)"
+      :total="total"
+      :rowCount="total / 4"
     />
-    <ScorePanel :scores="scores" :total="36" :rowCount="9" />
     <ScoreResult
-      :total="36"
+      :total="total"
       :rowCount="9"
       :show="showScore"
       :onClose="() => (showScore = false)"
+      :scores="scores.map((s) => s.ring)"
     />
+    <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
   </view>
 </template>