From 016d4ac4fcc9c75bdd9e5c6121d0e87344ab0551 Mon Sep 17 00:00:00 2001
From: "du.meimei" <du.meimei@ebiz-digits.com>
Date: Wed, 28 May 2025 17:22:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E4=BC=98=E5=8C=96=E6=95=B0?=
 =?UTF-8?q?=E5=AD=97=E6=BB=9A=E5=8A=A8=E6=95=88=E6=9E=9C=E5=B9=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=BE=AA=E7=8E=AF=E6=92=AD=E6=94=BE=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 CountTo 组件中添加 update:readyLoop 事件，用于通知数字滚动完成
- 在 Header 组件中使用 readyLoop 事件来控制 Swiper 轮播的初始化和销毁
- 优化了数字滚动的动画效果，确保滚动到目标数字后停止
---
 src/components/CountTo.vue           | 13 +++++++++++--
 src/views/Home/components/Header.vue | 28 +++++++++++++++++++++-------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/CountTo.vue b/src/components/CountTo.vue
index 2d7dc246..b36edb9b 100644
--- a/src/components/CountTo.vue
+++ b/src/components/CountTo.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="count-to">{{ formattedCount }}</span>
+  <span class="count-to">{{ formattedCount }} </span>
 </template>
 
 <script setup>
@@ -20,6 +20,7 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['update:readyLoop'])
 // 工具函数：将 "1,000" 转成 1000
 const parseValue = (val) => {
   if (typeof val === 'number') return val
@@ -42,6 +43,9 @@ const formattedCount = ref('0')
 
 const animateCount = () => {
   parsedEnd.value = parseValue(props.end)
+
+
+  formattedCount.value = props.end
   let start = 0
   const totalSteps = Math.round(props.duration / 16)
   const increment = parsedEnd.value / totalSteps
@@ -50,7 +54,8 @@ const animateCount = () => {
     start += increment
     if (start >= parsedEnd.value) {
       currentCount.value = parsedEnd.value
-      formattedCount.value = props.useComma ? formatWithCommas(parsedEnd.value) : parsedEnd.value
+      formattedCount.value =  props.useComma ? formatWithCommas(parsedEnd.value) : parsedEnd.value
+      emit('readyLoop')
       return
     }
     currentCount.value = Math.round(start)
@@ -71,6 +76,10 @@ watch(
     () => props.end,
     () => {
       animateCount()
+    },
+    {
+      deep:true,
+      immediate:true
     }
 )
 </script>
diff --git a/src/views/Home/components/Header.vue b/src/views/Home/components/Header.vue
index 87bcbc60..45689068 100644
--- a/src/views/Home/components/Header.vue
+++ b/src/views/Home/components/Header.vue
@@ -5,12 +5,14 @@
         <!-- Swiper 轮播容器 -->
         <div class="swiper-container" ref="swiperContainer">
           <div class="swiper-wrapper">
-            <div class="banner-block swiper-slide">
+            <div class="banner-block swiper-slide" :key="surveyStats.user_count">
               <p class="banner-block-slogan">实时链接消费者的深度洞察及日常信息采集工具</p>
               <div class="banner-block-desc">
-                已支持 <CountTo :end="surveyStats.user_count" :use-comma="true" /> 用户 |
-                发起 <CountTo :end="surveyStats.survey_count" :use-comma="true" /> 次调研 |
-                有效回收 <CountTo :end="surveyStats.sample_count" :use-comma="true" /> 份数据
+                已支持 <CountTo :end="surveyStats.user_count" :use-comma="true" :key="surveyStats.user_count"
+                                @ready-loop="readyLoop"
+              /> 用户 |
+                发起 <CountTo :end="surveyStats.survey_count" :use-comma="true"  @ready-loop="readyLoop"  /> 次调研 |
+                有效回收 <CountTo :end="surveyStats.sample_count" :use-comma="true"    @ready-loop="readyLoop"  /> 份数据
               </div>
             </div>
             <!-- 动态 Banner 列表 -->
@@ -60,7 +62,7 @@
 </template>
 
 <script setup>
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import Swiper, { Autoplay } from 'swiper';
 import 'swiper/swiper-bundle.css';
 import { useRouter } from 'vue-router';
@@ -105,10 +107,22 @@ const getQuesStatics = async () => {
   const res = await getQuestionnaireStatistics()
   surveyData.value = res.data
 }
-const initSwiper = ()=>{
+
+const readyLoop = ()=>{
+  if (bannerSwiper){
+    bannerSwiper.destroy()
+  }
+  initSwiper(true)
+}
+
+const initSwiper = (loop = false)=>{
   // 初始化 Swiper
+  if (bannerSwiper) {
+    bannerSwiper.destroy(true, true);
+    bannerSwiper = null;
+  }
   bannerSwiper = new Swiper(swiperContainer.value, {
-    loop: true,
+    loop,
     autoplay: {
       delay: 5000,
       disableOnInteraction: false