添加气泡消息交互

src/pages/practise-one.vue

@@ -9,6 +9,7 @@ import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
 import TestDistance from "@/components/TestDistance.vue";
+import BubbleTip from "@/components/BubbleTip.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
 import { generateCanvasImage } from "@/util";
 import { MESSAGETYPES, roundsName } from "@/constants";
@@ -17,13 +18,14 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 const { updateUser } = store;
-const start = ref(false);
+const start = ref(true);
 const scores = ref([]);
 const total = 12;
 const currentRound = ref(0);
 const practiseResult = ref({});
 const power = ref(0);
 const practiseId = ref("");
+const showGuide = ref(false);
 
 const onReady = async () => {
   const result = await createPractiseAPI(total);
@@ -42,6 +44,12 @@ async function onReceiveMessage(messages = []) {
         if (currentRound.value === 4) {
           currentRound.value = 1;
         }
+        if (scores.value.length === total / 2) {
+          showGuide.value = true;
+          setTimeout(() => {
+            showGuide.value = false;
+          }, 3000);
+        }
       }
       power.value = msg.target.battery;
     }
@@ -100,6 +108,13 @@ onUnmounted(() => {
         <view class="user-row">
           <Avatar :src="user.avatar" :size="35" />
           <BowPower :power="power" />
+          <BubbleTip
+            v-if="showGuide"
+            :location="{ top: '40%', left: '5%', paddingLeft: '16rpx' }"
+          >
+            <text>还有两场，坚持</text>
+            <text>就是胜利！💪</text>
+          </BubbleTip>
         </view>
         <BowTarget
           :start="start"