完成新手试炼接口调试

src/pages/first-try.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onUnmounted } from "vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import Swiper from "@/components/Swiper.vue";
@@ -8,8 +8,17 @@ import ShootProgress from "@/components/ShootProgress.vue";
 import ScoreResult from "@/components/ScoreResult.vue";
 import ScorePanel from "@/components/ScorePanel.vue";
 import Container from "@/components/Container.vue";
-const scores = ref(new Array(10).fill(9));
+import { createPractiseAPI } from "@/apis";
+import { MESSAGETYPES } from "@/constants";
+import websocket from "@/websocket";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+const scores = ref([]);
 const step = ref(0);
+const showScore = ref(false);
+const total = 12;
 const stepButtonTexts = [
   "开始",
   "进入下一个任务",
@@ -18,6 +27,29 @@ const stepButtonTexts = [
   "",
   "退出新手试炼",
 ];
+
+const onReady = async () => {
+  const result = await createPractiseAPI(total);
+  const token = uni.getStorageSync("token");
+
+  websocket.createWebSocket(token, (content) => {
+    const messages = JSON.parse(content).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();
+});
+
 const nextStep = () => {
   if (step.value === 0) {
     step.value = 1;
@@ -27,18 +59,17 @@ const nextStep = () => {
     step.value = 3;
   } else if (step.value === 3) {
     step.value = 4;
+    onReady();
   } else if (step.value === 5) {
     uni.navigateBack({
       delta: 1,
     });
   }
 };
-const showScore = ref(false);
-setTimeout(() => {
-  showScore.value = true;
-}, 1000);
+
 const onClose = () => {
   showScore.value = false;
+  websocket.closeWebSocket();
   setTimeout(() => {
     step.value = 5;
   }, 500);
@@ -46,10 +77,10 @@ const onClose = () => {
 </script>
 
 <template>
-  <Container bgType="1" title="新手试炼场">
+  <Container :bgType="1" title="新手试炼场">
     <Guide v-if="step !== 4" :tall="step === 2 || step === 5">
       <text v-if="step === 0">
-        hi，<text :style="{ color: '#fed847' }">Rocker</text>
+        hi，<text :style="{ color: '#fed847' }">{{ user.nickName }}</text>
         ，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）
       </text>
       <text v-if="step === 1"
@@ -109,21 +140,33 @@ const onClose = () => {
         ]"
       />
     </view>
-    <ShootProgress v-if="step === 4" tips="请开始连续射箭" total="10" />
+    <ShootProgress
+      v-if="step === 4"
+      tips="请开始连续射箭"
+      :total="100"
+      :start="true"
+    />
     <BowTarget
-      avatar="../static/avatar.png"
-      power="45"
+      :avatar="user.avatarUrl"
+      :power="45"
       :debug="step === 2"
       v-if="step === 2 || step === 4"
       :tips="step === 4 ? '' : '本次射程5.2米，已达到距离要求'"
+      :scores="scores"
+    />
+    <ScorePanel
+      v-if="step === 4"
+      :total="total"
+      :rowCount="6"
+      :scores="scores.map((s) => s.ring)"
     />
-    <ScorePanel v-if="step === 4" :scores="scores" :total="12" :rowCount="6" />
     <ScoreResult
-      :total="12"
+      :total="total"
       :rowCount="6"
       :show="showScore"
       v-if="step === 4"
       :onClose="onClose"
+      :scores="scores.map((s) => s.ring)"
     />
     <SButton v-if="step !== 4" :onClick="nextStep">{{
       stepButtonTexts[step]