feat(排行榜): 实现动态数据加载并添加日期显示
- 重构排行榜组件,从API动态加载数据 - 添加排行榜日期显示功能 - 优化区域切换逻辑,支持动态区域显示 - 调整返回顶部按钮位置 - 添加默认头像处理逻辑
Showing
3 changed files
with
20 additions
and
5 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-09-02 13:06:39 | 2 | * @Date: 2025-09-02 13:06:39 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-02 13:12:20 | 4 | + * @LastEditTime: 2025-09-09 14:17:13 |
| 5 | * @FilePath: /lls_program/src/components/BackToTop.vue | 5 | * @FilePath: /lls_program/src/components/BackToTop.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -56,7 +56,7 @@ const scrollToTop = () => { | ... | @@ -56,7 +56,7 @@ const scrollToTop = () => { |
| 56 | .back-to-top { | 56 | .back-to-top { |
| 57 | position: fixed; | 57 | position: fixed; |
| 58 | right: 30rpx; | 58 | right: 30rpx; |
| 59 | - bottom: 180rpx; | 59 | + bottom: 250rpx; |
| 60 | width: 80rpx; | 60 | width: 80rpx; |
| 61 | height: 80rpx; | 61 | height: 80rpx; |
| 62 | background: rgba(64, 158, 255, 0.8); | 62 | background: rgba(64, 158, 255, 0.8); | ... | ... |
This diff is collapsed. Click to expand it.
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-09-01 13:07:52 | 2 | * @Date: 2025-09-01 13:07:52 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-09 14:07:23 | 4 | + * @LastEditTime: 2025-09-09 14:16:08 |
| 5 | * @FilePath: /lls_program/src/pages/FamilyRank/index.vue | 5 | * @FilePath: /lls_program/src/pages/FamilyRank/index.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -34,6 +34,11 @@ | ... | @@ -34,6 +34,11 @@ |
| 34 | <view class="loading-text">加载中...</view> | 34 | <view class="loading-text">加载中...</view> |
| 35 | </view> | 35 | </view> |
| 36 | 36 | ||
| 37 | + <!-- 排行榜日期 --> | ||
| 38 | + <view class="rank-date"> | ||
| 39 | + {{ currentDate }} | ||
| 40 | + </view> | ||
| 41 | + | ||
| 37 | <!-- 前三名展示 --> | 42 | <!-- 前三名展示 --> |
| 38 | <view v-else-if="topThreeData.length > 0" class="top-three"> | 43 | <view v-else-if="topThreeData.length > 0" class="top-three"> |
| 39 | <!-- 第二名 --> | 44 | <!-- 第二名 --> |
| ... | @@ -131,7 +136,7 @@ | ... | @@ -131,7 +136,7 @@ |
| 131 | </view> | 136 | </view> |
| 132 | 137 | ||
| 133 | <!-- 返回顶部组件 --> | 138 | <!-- 返回顶部组件 --> |
| 134 | - <!-- <BackToTop :distance="200" /> --> | 139 | + <BackToTop :distance="200" /> |
| 135 | </view> | 140 | </view> |
| 136 | </template> | 141 | </template> |
| 137 | 142 | ||
| ... | @@ -165,7 +170,8 @@ const leaderboardData = ref(null) | ... | @@ -165,7 +170,8 @@ const leaderboardData = ref(null) |
| 165 | // 加载状态 | 170 | // 加载状态 |
| 166 | const loading = ref(false) | 171 | const loading = ref(false) |
| 167 | 172 | ||
| 168 | - | 173 | +// 当前日期 |
| 174 | +const currentDate = ref('') | ||
| 169 | 175 | ||
| 170 | /** | 176 | /** |
| 171 | * 切换tab | 177 | * 切换tab |
| ... | @@ -230,6 +236,7 @@ const loadLeaderboardData = async (isInitialLoad = false) => { | ... | @@ -230,6 +236,7 @@ const loadLeaderboardData = async (isInitialLoad = false) => { |
| 230 | const response = await getStepLeaderboardAPI(params) | 236 | const response = await getStepLeaderboardAPI(params) |
| 231 | if (response.code) { | 237 | if (response.code) { |
| 232 | leaderboardData.value = response.data | 238 | leaderboardData.value = response.data |
| 239 | + currentDate.value = response.data.yesterday | ||
| 233 | 240 | ||
| 234 | // 只在初始加载时从current_family.county获取区县信息,设置默认tab | 241 | // 只在初始加载时从current_family.county获取区县信息,设置默认tab |
| 235 | if (isInitialLoad && response.data.current_family) { | 242 | if (isInitialLoad && response.data.current_family) { |
| ... | @@ -411,6 +418,14 @@ onMounted(async () => { | ... | @@ -411,6 +418,14 @@ onMounted(async () => { |
| 411 | opacity: 0.3; | 418 | opacity: 0.3; |
| 412 | transform: translateY(-20rpx); | 419 | transform: translateY(-20rpx); |
| 413 | } | 420 | } |
| 421 | + | ||
| 422 | + .rank-date { | ||
| 423 | + font-size: 28rpx; | ||
| 424 | + color: rgba(255, 255, 255, 0.8); | ||
| 425 | + text-align: center; | ||
| 426 | + margin-top: 40rpx; | ||
| 427 | + margin-bottom: 40rpx; | ||
| 428 | + } | ||
| 414 | } | 429 | } |
| 415 | 430 | ||
| 416 | .top-three { | 431 | .top-three { | ... | ... |
-
Please register or login to post a comment