update:代码备份

src/pages/training/practise-one.vue

@@ -29,6 +29,13 @@ const { user } = storeToRefs(store);
 
 const sound = ref(true);
 const start = ref(false);
+const pageStages = Object.freeze({
+  DISTANCE: "distance",
+  SHOOTING: "shooting",
+  RESULT: "result",
+  LOADING: "loading",
+});
+const pageStage = ref(pageStages.DISTANCE);
 const scores = ref([]);
 const defaultTotal = 12;
 const defaultShootTime = 120;
@@ -53,6 +60,13 @@ const env = computed(() => {
   }
 });
 
+const isDistanceStage = computed(() => pageStage.value === pageStages.DISTANCE);
+const isShootingStage = computed(() => pageStage.value === pageStages.SHOOTING);
+const hasPractiseResult = computed(() => !!practiseResult.value?.details);
+const showResult = computed(
+  () => pageStage.value === pageStages.RESULT && hasPractiseResult.value
+);
+
 const defaultHighlightAreas = [{ quadrant: 1, rings: [7] }];
 
 // 临时高亮测试数据：第 N 项对应第 N 箭，每箭展示一个不同区域。
@@ -123,6 +137,7 @@ const runHighlightTest = () => {
   clearHighlightTestTimer();
   useHighlightTest.value = true;
   practiseResult.value = {};
+  pageStage.value = pageStages.SHOOTING;
   start.value = true;
 
   let arrowIndex = 1;
@@ -162,21 +177,44 @@ onLoad((options = {}) => {
 });
 
 const onReady = async () => {
+  pageStage.value = pageStages.LOADING;
   clearHighlightTestTimer();
   useHighlightTest.value = false;
-  await startPractiseAPI();
-  scores.value = [];
-  start.value = true;
-  audioManager.play("练习开始");
+  try {
+    await startPractiseAPI();
+    practiseResult.value = {};
+    scores.value = [];
+    start.value = true;
+    pageStage.value = pageStages.SHOOTING;
+    audioManager.play("练习开始");
+  } catch (error) {
+    start.value = false;
+    pageStage.value = pageStages.DISTANCE;
+    throw error;
+  }
 };
 
 const onOver = async () => {
-  practiseResult.value = await getPractiseAPI(practiseId.value);
+  if (!isShootingStage.value) return;
+
+  clearHighlightTestTimer();
+  pageStage.value = pageStages.LOADING;
   start.value = false;
+
+  try {
+    practiseResult.value = (await getPractiseAPI(practiseId.value)) || {};
+    pageStage.value = hasPractiseResult.value
+      ? pageStages.RESULT
+      : pageStages.DISTANCE;
+  } catch (error) {
+    start.value = true;
+    pageStage.value = pageStages.SHOOTING;
+    throw error;
+  }
 };
 
 async function onReceiveMessage(msg) {
-  if (msg.type === MESSAGETYPESV2.ShootResult) {
+  if (msg.type === MESSAGETYPESV2.ShootResult && isShootingStage.value) {
     scores.value = msg.details;
   } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
     // setTimeout(onOver, 1500);
@@ -184,18 +222,25 @@ async function onReceiveMessage(msg) {
 }
 
 function onComplete() {
+  pageStage.value = pageStages.LOADING;
+  start.value = false;
   uni.$emit(trainingDifficultyRefreshEvent);
   uni.navigateBack();
 }
 
 async function onRetry() {
+  pageStage.value = pageStages.LOADING;
   clearHighlightTestTimer();
   useHighlightTest.value = false;
   practiseId.value = "";
   practiseResult.value = {};
   start.value = false;
   scores.value = [];
-  await createPractice();
+  try {
+    await createPractice();
+  } finally {
+    pageStage.value = pageStages.DISTANCE;
+  }
 }
 
 const onClickShare = debounce(async () => {
@@ -241,83 +286,92 @@ onBeforeUnmount(() => {
 
 <template>
   <Container
-    :bgType="!start && !practiseResult.id?9:10"
-    :showBottom="!start && !scores.length"
-    headerClass="training-practise-header"
+    :bgType="isDistanceStage ? 9 : 10"
+    :showBottom="isDistanceStage"
+    :scroll="!isShootingStage"
   >
-    <view>
-      <TestDistance v-if="!start && !practiseResult.id" />
-      <block v-else>
-        <ShootProgress
-          :start="start"
-          :onStop="onOver"
-        />
-        <view class="user-row">
-          <!-- <Avatar :src="user.avatar" :size="35" /> -->
-          <BubbleTip v-if="showGuide" type="normal2">
-            <text>还有两场，坚持</text>
-            <text>就是胜利！💪</text>
-          </BubbleTip>
-          <!-- <BowPower /> -->
-        </view>
-        <BowTarget
-        :totalRound="start ? total / 4 : 0"
-        :currentRound="scores.length % 3"
-        :scores="scores"
-        :showCrosshair="false"
-        :highlightAreas="targetHighlightAreas"
-        />
-        <view v-if="env !== 'release'" class="highlight-test-actions">
-          <button
-            class="highlight-test-btn"
-            hover-class="none"
-            @click="runHighlightTest"
-          >
-            高亮测试
-          </button>
-          <button
-            class="highlight-test-btn"
-            hover-class="none"
-            @click="resetHighlightTest"
-          >
-            重置高亮
-          </button>
-        </view>
-        <view class="sound-text-box">
-          <button class="sound-btn" hover-class="none" @click="updateSound">
-            <image
-              class="sound-icon"
-              :src="`/static/sound${sound ? '' : '-off'}-yellow.png`"
-              mode="aspectFit"
-            />
-          </button>
-          <view class="bat-text-big-box">
-            <image
-              class="dao-icon"
-              src="../../static/training-difficulty-design/dao-icon.png"
-              mode="widthFix"
-            />
-            <view class="bat-text-box">
-              <view class="bat-text-small-box">
-                <view class="text-round-box">
-                  <view class="text1">每箭命中9环之上</view>
-                  <view class="text2">剩余<text class="text2-yellow">3</text>箭</view>
+    <view class="practise-content">
+      <TestDistance v-if="isDistanceStage" />
+      <view v-else-if="isShootingStage" class="shooting-layout">
+        <view class="shooting-fixed">
+          <ShootProgress
+            :start="start"
+            :onStop="onOver"
+          />
+          <view class="user-row">
+            <!-- <Avatar :src="user.avatar" :size="35" /> -->
+            <BubbleTip v-if="showGuide" type="normal2">
+              <text>还有两场，坚持</text>
+              <text>就是胜利！💪</text>
+            </BubbleTip>
+            <!-- <BowPower /> -->
+          </view>
+          <BowTarget
+            :totalRound="start ? total / 4 : 0"
+            :currentRound="scores.length % 3"
+            :scores="scores"
+            :showCrosshair="false"
+            :highlightAreas="targetHighlightAreas"
+          />
+          <view v-if="env !== 'release'" class="highlight-test-actions">
+            <button
+              class="highlight-test-btn"
+              hover-class="none"
+              @click="runHighlightTest"
+            >
+              高亮测试
+            </button>
+            <button
+              class="highlight-test-btn"
+              hover-class="none"
+              @click="resetHighlightTest"
+            >
+              重置高亮
+            </button>
+          </view>
+          <view class="sound-text-box">
+            <button class="sound-btn" hover-class="none" @click="updateSound">
+              <image
+                class="sound-icon"
+                :src="`/static/sound${sound ? '' : '-off'}-yellow.png`"
+                mode="aspectFit"
+              />
+            </button>
+            <view class="bat-text-big-box">
+              <image
+                class="dao-icon"
+                src="../../static/training-difficulty-design/dao-icon.png"
+                mode="widthFix"
+              />
+              <view class="bat-text-box">
+                <view class="bat-text-small-box">
+                  <view class="text-round-box">
+                    <view class="text1">每箭命中9环之上</view>
+                    <view class="text2">剩余<text class="text2-yellow">3</text>箭</view>
+                  </view>
                 </view>
               </view>
             </view>
           </view>
         </view>
-        <ScorePanel2 :arrows="scores" :total="total" />
-        <ScoreResult
-          v-if="practiseResult.details"
-          :rowCount="6"
-          :total="total"
-          :onClose="onComplete"
-          :onRetry="onRetry"
-          :result="practiseResult"
-        />
-        <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
-      </block>
+        <scroll-view
+          class="score-scroll"
+          scroll-y
+          :enhanced="true"
+          :show-scrollbar="false"
+        >
+          <ScorePanel2 :arrows="scores" :total="total" />
+        </scroll-view>
+      </view>
+      <ScoreResult
+        v-else-if="showResult"
+        :rowCount="6"
+        :total="total"
+        :onClose="onComplete"
+        :onRetry="onRetry"
+        :result="practiseResult"
+      />
+      <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
     </view>
     <template #bottom>
       <view class="btn-box">
@@ -333,6 +387,30 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.practise-content {
+  height: 100%;
+  min-height: 0;
+}
+
+.shooting-layout {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.shooting-fixed {
+  flex-shrink: 0;
+}
+
+.score-scroll {
+  flex: 1;
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .btn-box{
   width: 488rpx;
   height: 234rpx;
@@ -360,11 +438,6 @@ onBeforeUnmount(() => {
   bottom: -36rpx;
 }
 
-:deep(.training-practise-header .back-btn) {
-  position: relative;
-  z-index: 1000;
-}
-
 .highlight-test-actions {
   display: flex;
   justify-content: center;