hookehuyr

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

添加截止昨日文本和排名提示,调整助力码位置
重构数字滚动组件逻辑,添加触发和重置方法
仅在特定tab显示家庭数量统计
<!--
* @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 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 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: 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)
......
<!--
* @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 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 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: 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>
......