页面优化

src/pages/practise-one.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
+import Container from "@/components/Container.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ScorePanel2 from "@/components/ScorePanel2.vue";
@@ -24,7 +23,7 @@ const onReady = async () => {
 async function onReceiveMessage(content) {
   const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
-    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+    if (start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);
       power.value = msg.target.battery;
       if (scores.value.length === total) {
@@ -40,6 +39,11 @@ async function onReceiveMessage(content) {
   });
 }
 
+function onComplete() {
+  uni.navigateBack();
+  showScore.value = false;
+}
+
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
 });
@@ -50,39 +54,35 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <view class="container">
-    <AppBackground :type="1" />
-    <Header title="个人单组练习" />
-    <ShootProgress
-      :tips="`${
-        scores.length === 12
-          ? ''
-          : `请开始射箭第${roundsName[Math.ceil((scores.length + 1) / 4)]}轮`
-      }`"
-      :start="start"
-      :total="120"
-    />
-    <BowTarget
-      :totalRound="total"
-      :currentRound="scores.length + 1"
-      avatar="../static/avatar.png"
-      :power="power"
-      :scores="scores"
-    />
-    <ScorePanel2 v-if="start" :scores="scores.map((s) => s.ring)" />
-    <ScoreResult
-      :total="total"
-      :rowCount="6"
-      :show="showScore"
-      :onClose="() => (showScore = false)"
-      :result="practiseResult"
-    />
+  <Container :bgType="1" title="个人单组练习">
+    <view>
+      <ShootProgress
+        :tips="`${
+          scores.length === 12
+            ? ''
+            : `请开始射箭第${roundsName[Math.ceil((scores.length + 1) / 4)]}轮`
+        }`"
+        :start="start"
+        :total="120"
+      />
+      <BowTarget
+        :totalRound="total"
+        :currentRound="scores.length + 1"
+        avatar="../static/avatar.png"
+        :power="power"
+        :scores="scores"
+      />
+      <ScorePanel2 v-if="start" :scores="scores.map((s) => s.ring)" />
+      <ScoreResult
+        :total="total"
+        :rowCount="6"
+        :show="showScore"
+        :onClose="onComplete"
+        :result="practiseResult"
+      />
+    </view>
     <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
-  </view>
+  </Container>
 </template>
 
-<style scoped>
-.container {
-  position: relative;
-}
-</style>
+<style scoped></style>