添加气泡消息交互

src/pages/practise-two.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 } from "@/constants";
@@ -23,6 +24,7 @@ const total = 36;
 const practiseResult = ref({});
 const power = ref(0);
 const practiseId = ref("");
+const showGuide = ref(false);
 
 const onReady = async () => {
   const result = await createPractiseAPI(total);
@@ -36,6 +38,12 @@ async function onReceiveMessage(messages = []) {
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       if (scores.value.length < total) {
         scores.value.push(msg.target);
+        if (scores.value.length === total / 2) {
+          showGuide.value = true;
+          setTimeout(() => {
+            showGuide.value = false;
+          }, 3000);
+        }
       }
       power.value = msg.target.battery;
     }
@@ -94,6 +102,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"