feat(排行榜): 优化排行榜日期显示和数字滚动动画

添加截止昨日文本和排名提示，调整助力码位置重构数字滚动组件逻辑，添加触发和重置方法仅在特定tab显示家庭数量统计

feat(排行榜): 优化排行榜日期显示和数字滚动动画
添加截止昨日文本和排名提示，调整助力码位置重构数字滚动组件逻辑，添加触发和重置方法仅在特定tab显示家庭数量统计
hookehuyr
Commit 2838ea42c3acfc9ff7200f27509d4010fa705bc9 2838ea42 1 parent 929824be
Showing 2 changed files with 43 additions and 12 deletions
src/components/RankingCard.vue
src/pages/FamilyRank/index.vue
--- a/src/components/RankingCard.vue
View file @2838ea4
+++ b/src/components/RankingCard.vue
View file @2838ea4
 <!--
  * @Date: 2025-01-09 00:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-25 18:48:25
+ * @LastEditTime: 2025-10-25 19:35:03
  * @FilePath: /lls_program/src/components/RankingCard.vue
  * @Description: 排行榜卡片组件
 -->
@@ -42,13 +42,13 @@
     <view class="rank-content" :class="{ 'content-switching': isContentSwitching }">
       <!-- 排行榜日期 -->
       <view class="rank-date relative">
-        <view class="flex items-center justify-center">{{ currentDate }} <IconFont name="ask" size="16" class="ml-2" @click="handleRankAskClick"></IconFont></view>
+        <view class="flex items-center justify-center"><text class="mr-2">截止昨日</text>{{ currentDate }}<text v-if="activeTab !== 'shanghai'" class="ml-2">排名</text><IconFont name="ask" size="16" class="ml-2" @click="handleRankAskClick"></IconFont></view>
-        <view v-if="activeTab === 'support'" class="absolute font-bold text-white bg-orange-500 top-0 rounded-full px-4 py-1" style="right: 30rpx; font-size: 23rpx;" @tap="joinOrganization">助力码</view>
+        <view v-if="activeTab === 'support'" class="absolute font-bold text-white bg-orange-500 top-0 rounded-full px-4 py-1" style="right: 0rpx; top: 50rpx; font-size: 23rpx;" @tap="joinOrganization">助力码</view>
       </view>
-      <view class="relative mb-2 text-white">
+      <view v-if="activeTab === 'shanghai'" 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"
@@ -56,7 +56,7 @@
             :duration="1500"
             :digit-delay="150"
           />
-          <text class="ml-2" style="font-size: 28rpx;">个家庭</text>
+          <text class="ml-2" style="font-size: 28rpx;">组家庭参与排名</text>
         </view>
       </view>
@@ -249,6 +249,29 @@ const currentTotalFamilySum = ref(0);
 // 数字滚动组件引用
 const numberRollRef = ref(null)
+// 数字滚动触发状态
+const hasTriggeredNumberRoll = ref(false)
+
+/**
+ * 触发数字滚动动画
+ */
+const triggerNumberRoll = () => {
+  if (numberRollRef.value && numberRollRef.value.start) {
+    hasTriggeredNumberRoll.value = true
+    numberRollRef.value.start()
+  }
+}
+
+/**
+ * 重置数字滚动状态
+ */
+const resetNumberRoll = () => {
+  hasTriggeredNumberRoll.value = false
+  if (numberRollRef.value && numberRollRef.value.reset) {
+    numberRollRef.value.reset()
+  }
+}
+
 /**
  * 切换tab
  * @param {string} tab - tab名称
@@ -302,6 +325,14 @@ const loadLeaderboardData = async (isInitialLoad = false) => {
       currentDate.value = response.data.yesterday
       // TODO: 设置总家庭数
       currentTotalFamilySum.value = 2318;
+
+      // 数据加载完成后，延迟触发数字滚动动画
+      setTimeout(() => {
+        resetNumberRoll()
+        setTimeout(() => {
+          triggerNumberRoll()
+        }, 100)
+      }, 300)
     }
   } catch (error) {
     console.error('获取排行榜数据失败:', error)
--- a/src/pages/FamilyRank/index.vue
View file @2838ea4
+++ b/src/pages/FamilyRank/index.vue
View file @2838ea4
 <!--
  * @Date: 2025-09-01 13:07:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-25 18:52:07
+ * @LastEditTime: 2025-10-25 19:36:34
  * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
  * @Description: 文件描述
 -->
@@ -40,14 +40,14 @@
       <!-- 排行榜日期 -->
       <view v-if="!loading" class="rank-date relative">
-        <view class="flex items-center justify-center">{{ currentDate }} <IconFont name="ask" size="14" class="ml-2" @click="handleRankAskClick"></IconFont></view>
+        <view class="flex items-center justify-center"><text class="mr-2">截止昨日</text>{{ currentDate }}<text v-if="activeTab !== 'shanghai'" class="ml-2">排名</text><IconFont name="ask" size="14" class="ml-2" @click="handleRankAskClick"></IconFont></view>
-        <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 v-if="activeTab === 'support'" class="absolute font-bold text-white bg-orange-500 top-0 rounded-full px-4 py-1" style="right: 40rpx; top: 50rpx; font-size: 23rpx;" @tap="joinOrganization">助力码</view>
       </view>
       <!-- 参与家庭数量显示 -->
-      <view v-if="!loading" class="family-count-display">
+      <view v-if="!loading && activeTab === 'shanghai'" class="family-count-display">
         <view class="flex items-center justify-center text-white mb-4">
-          <text class="mr-2" style="font-size: 28rpx;">已加入</text>
+          <text class="mr-2" style="font-size: 28rpx;">有</text>
           <NumberRoll
             ref="numberRollRef"
             :target-value="currentTotalFamilySum"
@@ -55,7 +55,7 @@
             :duration="1500"
             :digit-delay="150"
           />
-          <text class="ml-2" style="font-size: 28rpx;">个家庭</text>
+          <text class="ml-2" style="font-size: 28rpx;">组家庭参与排名</text>
         </view>
       </view>