添加练习超时，重新挑战

src/components/BowTarget.vue

@@ -63,9 +63,7 @@ const timer = ref(null);
 watch(
   () => props.start,
   (newVal) => {
-    if (newVal) {
-      startCount.value = true;
-    }
+    startCount.value = newVal;
   },
   {
     immediate: true,

src/components/ScoreResult.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import IconButton from "@/components/IconButton.vue";
 import SButton from "@/components/SButton.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
@@ -10,6 +10,10 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  total: {
+    type: Number,
+    default: 0,
+  },
   rowCount: {
     type: Number,
     default: 0,
@@ -26,15 +30,20 @@ const props = defineProps({
 const showPanel = ref(true);
 const showComment = ref(false);
 const showBowData = ref(false);
+const finished = ref(false);
 const closePanel = () => {
   showPanel.value = false;
   setTimeout(() => {
     props.onClose();
   }, 300);
 };
-setTimeout(() => {
-  showPanel.value = true;
-}, 300);
+onMounted(() => {
+  finished.value =
+    props.result.arrows && props.result.arrows.length === props.total;
+});
+// setTimeout(() => {
+//   showPanel.value = true;
+// }, 300);
 </script>
 
 <template>
@@ -73,13 +82,24 @@ setTimeout(() => {
         </view>
       </view>
       <view>
-        <IconButton name="分享" src="../static/share.png" :onClick="wxShare" />
-        <IconButton
-          name="教练点评"
-          src="../static/review.png"
-          :onClick="() => (showComment = true)"
-        />
-        <SButton width="70vw" :rounded="30" :onClick="closePanel">完成</SButton>
+        <block v-if="finished">
+          <IconButton
+            name="分享"
+            src="../static/share.png"
+            :onClick="wxShare"
+          />
+          <IconButton
+            name="教练点评"
+            src="../static/review.png"
+            :onClick="() => (showComment = true)"
+          />
+        </block>
+        <SButton
+          :width="finished ? '70vw' : 'calc(100vw - 20px)'"
+          :rounded="30"
+          :onClick="closePanel"
+          >{{ finished ? "完成" : "重新挑战" }}</SButton
+        >
       </view>
     </view>
     <ScreenHint :show="showComment" :onClose="() => (showComment = false)">

src/components/ShootProgress.vue

@@ -56,6 +56,7 @@ watch(
   (newVal, oldVal) => {
     if (newVal === false) {
       if (timer.value) clearInterval(timer.value);
+      remain.value = props.total;
     }
     if (!oldVal && newVal === true) {
       setTimeout(() => {
@@ -86,7 +87,7 @@ onUnmounted(() => {
   <view class="container">
     <view>
       <image src="../static/shooter.png" mode="widthFix" />
-      <text>{{ remain === 0 ? "射箭时间到！" : tips }}</text>
+      <text>{{ start && remain === 0 ? "射箭时间到！" : tips }}</text>
       <button hover-class="none" @click="() => (sound = !sound)">
         <image
           :src="`../static/sound${sound ? '' : '-off'}-yellow.png`"

src/components/StartCountdown.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onUnmounted } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 const props = defineProps({
   start: {
     type: Boolean,
@@ -9,11 +9,13 @@ const props = defineProps({
 
 const count = ref(4);
 const timer = ref(null);
+const isIos = ref(true);
 watch(
   () => props.start,
   (newVal) => {
     if (newVal) {
       if (timer.value) clearInterval(timer.value);
+      count.value = 4;
       timer.value = setInterval(() => {
         if (count.value <= 1) {
           clearInterval(timer.value);
@@ -26,13 +28,17 @@ watch(
     immediate: true,
   }
 );
+onMounted(() => {
+  const deviceInfo = uni.getDeviceInfo();
+  isIos.value = deviceInfo.osName === "ios";
+});
 onUnmounted(() => {
   if (timer.value) clearInterval(timer.value);
 });
 </script>
 
 <template>
-  <view class="container">
+  <view class="container" :style="{ top: `calc(50% - ${isIos ? 59 : 64}px)` }">
     <view class="number pump-in" v-if="count === 3">3</view>
     <view class="number pump-in" v-if="count === 2">2</view>
     <view class="number pump-in" v-if="count === 1">1</view>

src/pages/first-try.vue

@@ -105,10 +105,20 @@ const nextStep = async () => {
 };
 
 const onClose = () => {
-  setTimeout(() => {
+  if (
+    practiseResult.value.arrows &&
+    practiseResult.value.arrows.length === total
+  ) {
+    setTimeout(() => {
+      practiseResult.value = {};
+      step.value = 5;
+    }, 500);
+  } else {
     practiseResult.value = {};
-    step.value = 5;
-  }, 500);
+    start.value = false;
+    scores.value = [];
+    step.value = 3;
+  }
 };
 </script>
 
@@ -225,6 +235,7 @@ const onClose = () => {
       <ScoreResult
         v-if="practiseResult.arrows"
         :rowCount="6"
+        :total="total"
         :onClose="onClose"
         :result="practiseResult"
         :tipSrc="`../static/${

src/pages/practise-one.vue

@@ -56,9 +56,17 @@ async function onReceiveMessage(messages = []) {
 }
 
 async function onComplete() {
-  // const result = await getHomeData();
-  // if (result.user) updateUser(result.user);
-  uni.navigateBack();
+  if (
+    practiseResult.value.arrows &&
+    practiseResult.value.arrows.length === total
+  ) {
+    uni.navigateBack();
+  } else {
+    practiseResult.value = {};
+    start.value = false;
+    scores.value = [];
+    currentRound.value = 0;
+  }
 }
 
 onMounted(() => {
@@ -104,6 +112,7 @@ onUnmounted(() => {
       <ScoreResult
         v-if="practiseResult.arrows"
         :rowCount="6"
+        :total="total"
         :onClose="onComplete"
         :result="practiseResult"
         :tipSrc="`../static/${

src/pages/practise-two.vue

@@ -60,9 +60,17 @@ async function onReceiveMessage(messages = []) {
 }
 
 async function onComplete() {
-  // const result = await getHomeData();
-  // if (result.user) updateUser(result.user);
-  uni.navigateBack();
+  if (
+    practiseResult.value.arrows &&
+    practiseResult.value.arrows.length === total
+  ) {
+    uni.navigateBack();
+  } else {
+    practiseResult.value = {};
+    start.value = false;
+    scores.value = [];
+    currentRound.value = 0;
+  }
 }
 
 onMounted(() => {

src/util.js

@@ -183,9 +183,15 @@ export async function generateCanvasImage(canvasId, type, user, data) {
   var ctx = uni.createCanvasContext(canvasId);
   const width = 300;
   const height = 534;
-  ctx.drawImage("../static/share-bg.png", 0, 0, width, height);
-  const avatarInfo = await uni.getImageInfo({ src: user.avatar });
-  drawRoundImage(ctx, avatarInfo.path, 17, 20, 32, 32, 20);
+  try {
+    // 先下载完再一起渲染
+    const avatarInfo = await uni.getImageInfo({ src: user.avatar });
+    ctx.drawImage("../static/share-bg.png", 0, 0, width, height);
+    drawRoundImage(ctx, avatarInfo.path, 17, 20, 32, 32, 20);
+  } catch (err) {
+    console.log("下载头像错误：", err);
+  }
+  // drawRoundImage(ctx, user.avatar, 17, 20, 32, 32, 20);
   ctx.drawImage("../static/avatar-frame.png", 12, 15, 42, 42);
   renderText(ctx, user.nickName, 13, "#fff", 58, 34);
   renderRankTitle(ctx, user.lvlName);