feat(家庭排行): 添加已加入家庭数量显示组件并优化布局

在排行榜卡片和家庭排行页面添加已加入家庭数量显示组件，使用NumberRoll实现数字滚动效果优化页面布局间距，将"参与"文案统一改为"已加入"

feat(家庭排行): 添加已加入家庭数量显示组件并优化布局
在排行榜卡片和家庭排行页面添加已加入家庭数量显示组件，使用NumberRoll实现数字滚动效果优化页面布局间距，将"参与"文案统一改为"已加入"
hookehuyr
Commit 929824be8fd48a6d78810bb9631dd214176314bc 929824be 1 parent 78848c7e
Showing 2 changed files with 62 additions and 6 deletions
src/components/RankingCard.vue
src/pages/FamilyRank/index.vue
--- a/src/components/RankingCard.vue
View file @929824b
+++ b/src/components/RankingCard.vue
View file @929824b
 <!--
  * @Date: 2025-01-09 00:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-25 18:39:43
+ * @LastEditTime: 2025-10-25 18:48:25
  * @FilePath: /lls_program/src/components/RankingCard.vue
  * @Description: 排行榜卡片组件
 -->
@@ -48,7 +48,7 @@
       <view class="relative mb-2 text-white">
         <view class="flex items-center justify-center">
-          <text class="mr-2" style="font-size: 28rpx;">参与 </text>
+          <text class="mr-2" style="font-size: 28rpx;">已加入</text>
           <NumberRoll
             ref="numberRollRef"
             :target-value="currentTotalFamilySum"
@@ -301,8 +301,7 @@ const loadLeaderboardData = async (isInitialLoad = false) => {
       // 设置当前日期
       currentDate.value = response.data.yesterday
       // TODO: 设置总家庭数
-      const newTotalFamilySum = 2318;
+      currentTotalFamilySum.value = 2318;
-      currentTotalFamilySum.value = newTotalFamilySum;
     }
   } catch (error) {
     console.error('获取排行榜数据失败:', error)
--- a/src/pages/FamilyRank/index.vue
View file @929824b
+++ b/src/pages/FamilyRank/index.vue
View file @929824b
 <!--
  * @Date: 2025-09-01 13:07:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-22 16:21:59
+ * @LastEditTime: 2025-10-25 18:52:07
  * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
  * @Description: 文件描述
 -->
@@ -44,6 +44,21 @@
         <view v-if="activeTab === 'support'" class="absolute font-bold text-white bg-orange-500 top-0 rounded-full px-4 py-1" style="right: 70rpx; font-size: 23rpx;" @tap="joinOrganization">助力码</view>
       </view>
+      <!-- 参与家庭数量显示 -->
+      <view v-if="!loading" class="family-count-display">
+        <view class="flex items-center justify-center text-white mb-4">
+          <text class="mr-2" style="font-size: 28rpx;">已加入</text>
+          <NumberRoll
+            ref="numberRollRef"
+            :target-value="currentTotalFamilySum"
+            :digit-count="currentTotalFamilySum.length"
+            :duration="1500"
+            :digit-delay="150"
+          />
+          <text class="ml-2" style="font-size: 28rpx;">个家庭</text>
+        </view>
+      </view>
+
       <!-- 助力榜空状态提示 -->
       <view v-if="!loading && activeTab === 'support' && (!supportData || !supportData.families || supportData.families.length === 0)" class="support-empty-state">
         <view class="empty-image">
@@ -191,6 +206,7 @@ import { ref, computed, onMounted } from 'vue'
 import Taro from '@tarojs/taro'
 import { IconFont } from '@nutui/icons-vue-taro';
 import BackToTop from '@/components/BackToTop.vue'
+import NumberRoll from '@/components/NumberRoll.vue'
 // 默认头像
 const defaultAvatar = 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%A8%E5%AE%B6%E7%A6%8F3_%E5%89%AF%E6%9C%AC.jpg?imageMogr2/strip/quality/60'
 const supportImg = 'https://cdn.ipadbiz.cn/lls_prog/images/support_img_1.png'
@@ -209,6 +225,12 @@ const shanghaiRegionOptions = computed(() => {
   }))
 })
+// NumberRoll组件引用
+const numberRollRef = ref(null)
+
+// 是否已触发数字滚动
+const hasTriggeredNumberRoll = ref(false)
+
 // 当前激活的tab
 const activeTab = ref('')
@@ -242,12 +264,32 @@ const handleRankAskClick = () => {
 }
 /**
+ * 触发数字滚动动画
+ */
+const triggerNumberRoll = () => {
+  if (numberRollRef.value && !hasTriggeredNumberRoll.value) {
+    numberRollRef.value.start()
+    hasTriggeredNumberRoll.value = true
+  }
+}
+
+/**
+ * 重置数字滚动状态
+ */
+const resetNumberRoll = () => {
+  hasTriggeredNumberRoll.value = false
+}
+
+/**
  * 切换tab
  * @param {string} tab - tab名称
  */
 const switchTab = async (tab) => {
   if (activeTab.value === tab) return
+  // 重置数字滚动状态
+  resetNumberRoll()
+
   // 开始切换动画
   isContentSwitching.value = true
@@ -261,6 +303,11 @@ const switchTab = async (tab) => {
     // 内容切换后，结束切换状态，开始淡入动画
     setTimeout(() => {
       isContentSwitching.value = false
+
+      // 延迟1秒触发数字滚动动画
+      setTimeout(() => {
+        triggerNumberRoll()
+      }, 1000)
     }, 50)
   }, 200)
 }
@@ -323,6 +370,8 @@ const loadLeaderboardData = async (isInitialLoad = false) => {
         leaderboardData.value = response.data
       }
       currentDate.value = response.data.yesterday
+      // TODO: 设置总家庭数
+      currentTotalFamilySum.value = 2318;
     }
   } catch (error) {
     console.error('获取排行榜数据失败:', error)
@@ -382,6 +431,9 @@ const getTabDisplayName = (region) => {
   }
 }
+// 当前总家庭数
+const currentTotalFamilySum = ref(0);
+
 /**
  * 计算前三名数据
  */
@@ -472,6 +524,11 @@ onMounted(async () => {
   activeTab.value = 'shanghai'
   // 加载排行榜数据
   await loadLeaderboardData(true)
+
+  // 延迟1秒触发数字滚动动画
+  setTimeout(() => {
+    triggerNumberRoll()
+  }, 1000)
 })
 </script>
@@ -561,7 +618,7 @@ onMounted(async () => {
       color: rgba(255, 255, 255, 0.8);
       text-align: center;
       margin-top: 40rpx;
-      margin-bottom: 40rpx;
+      margin-bottom: 10rpx;
     }
   }