feat(新年活动): 修复阿语转盘中奖奖品对不上的问题，补充排行榜的上拉加载功能

src/api/lottery.js

@@ -35,9 +35,11 @@ export const withdrawApply = async (data) => {
 }
 
 // 获取排行榜
-export const ranklist = async (activityId) => {
+export const ranklist = async (data) => {
   try {
-    const response = await get(`/activity/lottery/recharge-rank?activityId=${activityId}`)
+    const response = await get(
+      `/activity/lottery/recharge-rank?activityId=${data.activityId}&pageNo=${data.pageNo}&pageSize=${data.pageSize}`
+    )
     return response
   } catch (error) {
     console.error('Failed to fetch get rank list:', error)

src/views/Activities/NewYear/index.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="fullPage">
     <!-- 预加载状态 -->
-    <div v-if="isLoading" class="loading-container">
+    <div v-show="isLoading" class="loading-container">
       <div class="loading-spinner"></div>
       <p>{{ $t('loading') }}...</p>
     </div>
 
     <!-- 主要内容 -->
-    <div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
+    <div
+      v-show="!isLoading"
+      style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative"
+    >
       <!-- 页面背景 -->
       <div class="bg-layer">
         <img
@@ -489,6 +492,9 @@
               </div>
             </itemCenter>
           </div>
+
+          <!-- 触发加载功能 -->
+          <div ref="RankingLoadmore"></div>
         </div>
 
         <!-- 抽奖模块 -->
@@ -522,6 +528,8 @@
                 grid-template-columns: repeat(3, 1fr);
                 grid-template-rows: repeat(3, 1fr);
                 gap: 1vw;
+
+                direction: ltr;
               "
             >
               <div
@@ -1604,6 +1612,7 @@ import { showError, showSuccess } from '@/utils/toast.js'
 import { getSelectedPayee, clearSelectedPayee } from '@/utils/payeeStore.js'
 import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
 import { preloadImages } from '@/utils/imagePreloader.js'
+import { useThrottle } from '@/utils/useDebounce'
 
 import { getMemberProfile, getUserIdentity } from '@/api/wallet'
 import {
@@ -1711,7 +1720,10 @@ const formatRechargeAmount = (amount) => {
   }
 }
 
+const RankingLoadmore = ref(null) //触底模块
+const rankingPageNo = ref(1) //分页页码
 const ranking = ref([]) //排行榜
+const rankingAdd = ref([]) //加载排行榜项
 const myRanking = ref({}) //我的排名
 const topImg = ref([
   imageUrl('RewardRecharge100'),
@@ -1738,7 +1750,8 @@ const RankingHasTop3 = computed(() => {
 
 // 展示用的榜单
 const showRanking = computed(() => {
-  return ranking.value.filter((_, index) => index >= 3)
+  // return ranking.value.filter((_, index) => index >= 3)
+  return [...ranking.value.filter((_, index) => index >= 3), ...rankingAdd.value]
   // return []
 })
 
@@ -2188,12 +2201,26 @@ const getUserInfo = async () => {
 
 //获取排行榜
 const getRanking = async () => {
-  const resRanking = await ranklist('2005571533988298753')
+  let data = {
+    activityId: '2005571533988298753',
+    pageNo: rankingPageNo.value,
+    pageSize: 20,
+  }
+  const resRanking = await ranklist(data)
   if (resRanking.status && resRanking.body) {
-    ranking.value = resRanking.body?.topList
-    myRanking.value = resRanking.body?.currentUser
+    myRanking.value = resRanking.body?.currentUser //我的排名信息
+
+    if (resRanking.body.topList.length != 0) {
+      if (resRanking.body.topList.length == 20) {
+        rankingAdd.value = []
+        ranking.value.push(...resRanking.body?.topList)
+        rankingPageNo.value++
+      } else {
+        rankingAdd.value = resRanking.body?.topList
+      }
+    }
   } else {
-    ranking.value = {}
+    ranking.value = []
     myRanking.value = {}
   }
 }
@@ -2625,6 +2652,21 @@ const connectToAppHandler = async () => {
   })
 }
 
+// 触发节流获取排行榜
+const debouceGetRanking = useThrottle(() => {
+  getRanking() //加载新的排行榜项
+}, 1000)
+
+// IntersectionObserver配置
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.intersectionRatio > 0 && ranking.value.length != 0) {
+      console.log('触发RankingLoadmore加载')
+      debouceGetRanking()
+    }
+  })
+})
+
 // 组件挂载时检测环境
 onMounted(() => {
   console.log('route.query.activeAction:', route.query.activeAction)
@@ -2637,6 +2679,12 @@ onMounted(() => {
   preloadOtherImages() // 预加载其他图片
   startCountdown() //开启倒计时
   underlineStyle.value // 触发计算属性更新
+
+  // 监听加载模块
+  if (RankingLoadmore.value) {
+    console.log('监控加载模块')
+    observer.observe(RankingLoadmore.value)
+  }
 })
 
 onUnmounted(() => {
@@ -2830,7 +2878,7 @@ onUnmounted(() => {
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 14px;
+    font-size: 12px;
   }
 }