From bfe9e0d8feaeea76da6c09a7d70bc1fb80a16ebc Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Sun, 4 Jan 2026 14:31:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E5=B9=B4=E6=B4=BB=E5=8A=A8):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=98=BF=E8=AF=AD=E8=BD=AC=E7=9B=98=E4=B8=AD?=
 =?UTF-8?q?=E5=A5=96=E5=A5=96=E5=93=81=E5=AF=B9=E4=B8=8D=E4=B8=8A=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E8=A1=A5=E5=85=85=E6=8E=92=E8=A1=8C?=
 =?UTF-8?q?=E6=A6=9C=E7=9A=84=E4=B8=8A=E6=8B=89=E5=8A=A0=E8=BD=BD=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/lottery.js                     |  6 ++-
 src/views/Activities/NewYear/index.vue | 64 ++++++++++++++++++++++----
 2 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/src/api/lottery.js b/src/api/lottery.js
index 6f1f4b5..b16666c 100644
--- a/src/api/lottery.js
+++ b/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)
diff --git a/src/views/Activities/NewYear/index.vue b/src/views/Activities/NewYear/index.vue
index f61f647..41ae9e9 100644
--- a/src/views/Activities/NewYear/index.vue
+++ b/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;
   }
 }