feat(斋月活动): 对接总榜前三数据和礼物数据，完善预加载等其他功能

src/api/activity.js

@@ -24,6 +24,18 @@ export const getThisWeekRewardsAndGifts = async (templateId) => {
   }
 }
 
+// 获取总榜前三
+export const getOverallRankingTop3 = async (data) => {
+  try {
+    const response = await post(`/ranking/top-three-overall`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to get history top one:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
 // 获取历史榜首
 export const getHistoryTopOne = async (activityType) => {
   try {

src/views/Activities/LuckyDollars/Season3/index.vue

@@ -3,13 +3,16 @@
   <div class="fullPage">
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
+      <!-- 页面背景 -->
+      <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2')]" />
+
       <div class="loading-spinner"></div>
       <p>{{ $t('loading') }}...</p>
     </div>
 
     <!-- 主要内容 -->
     <div
-      v-show="!isLoading"
+      v-if="!isLoading"
       style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative"
     >
       <!-- 页面背景 -->
@@ -89,12 +92,34 @@
           <!-- 排行榜模块 -->
           <div v-show="rankingShow">
             <!-- 每周礼物 -->
-            <img
+            <itemCenter :imgUrl="imageUrl('eventGiftsBg')">
-              v-smart-img
+              <div
-              :src="imageUrl('eventGiftsBg')"
+                style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%"
-              alt=""
+              >
-              style="display: block; width: 100vw; object-fit: cover"
+                <div
-            />
+                  v-for="(gift, index) in giftsList"
+                  :key="index"
+                  style="width: 30%; display: flex; flex-direction: column"
+                >
+                  <itemCenter :imgUrl="imageUrl('giftBg')">
+                    <img v-smart-img :src="gift.giftPhoto" alt="" width="50%" />
+                  </itemCenter>
+                  <div
+                    style="display: flex; justify-content: center; align-items: center; gap: 2px"
+                  >
+                    <img
+                      v-smart-img
+                      src="/src/assets/icon/coin.png"
+                      alt=""
+                      style="display: block; width: 1.3em; aspect-ratio: 1/1"
+                    />
+                    <div style="color: rgba(255, 255, 255, 1); font-weight: 590">
+                      {{ gift.giftCandy }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </itemCenter>
 
             <!-- 总排行榜前三 -->
             <itemCenter
@@ -115,9 +140,9 @@
                 <TopUser
                   ranking="1"
                   :BorderImgUrl="imageUrl('top1')"
-                  :avatarUrl="OverallRanking[0].userAvatar"
+                  :avatarUrl="OverallRanking[0].avatar"
-                  :name="OverallRanking[0].userName"
+                  :name="OverallRanking[0].nickname"
-                  :distributionValue="OverallRanking[0].amount"
+                  :distributionValue="OverallRanking[0].quantity"
                   style="width: 40%"
                   @click="viewUserInfo(OverallRanking[0].userId)"
                 />
@@ -141,9 +166,9 @@
                   <TopUser
                     ranking="2"
                     :BorderImgUrl="imageUrl('top2')"
-                    :avatarUrl="OverallRanking[1].userAvatar"
+                    :avatarUrl="OverallRanking[1].avatar"
-                    :name="OverallRanking[1].userName"
+                    :name="OverallRanking[1].nickname"
-                    :distributionValue="OverallRanking[1].amount"
+                    :distributionValue="OverallRanking[1].quantity"
                     style="width: 100%"
                   />
                 </div>
@@ -155,9 +180,9 @@
                   <TopUser
                     ranking="3"
                     :BorderImgUrl="imageUrl('top3')"
-                    :avatarUrl="OverallRanking[2].userAvatar"
+                    :avatarUrl="OverallRanking[2].avatar"
-                    :name="OverallRanking[2].userName"
+                    :name="OverallRanking[2].nickname"
-                    :distributionValue="OverallRanking[2].amount"
+                    :distributionValue="OverallRanking[2].quantity"
                     style="width: 100%"
                   />
                 </div>
@@ -627,9 +652,9 @@
             <!-- 中奖历史按钮 -->
             <img
               v-smart-img
-              :src="imageUrl('historyBt')"
+              :src="imageUrl('resultBt')"
               alt=""
-              style="width: 8vw; position: absolute; z-index: 2; top: 2vw; right: 4vw"
+              style="width: 7vw; position: absolute; z-index: 2; top: 11.3vw; right: 5vw"
               @click="openPopup('history')"
             />
 
@@ -1799,7 +1824,11 @@ import { useThrottle } from '@/utils/useDebounce'
 import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
 
 import { getMemberProfile, getUserIdentity } from '@/api/wallet'
-import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
+import {
+  getThisWeekRewardsAndGifts,
+  getRankingListAndMyRanking,
+  getOverallRankingTop3, // 获取总榜前三
+} from '@/api/activity.js'
 import {
   ranklist, //获取排行榜
   activityDetail, // 获取活动详情
@@ -1891,9 +1920,9 @@ const barrageList = ref([]) // 弹幕数据
 const OverallRanking = ref(
   Array(3).fill({
     userId: '',
-    userAvatar: '',
+    avatar: '',
-    userName: 'aaaaaaaa',
+    nickname: 'aaaaaaaa',
-    amount: '111M',
+    quantity: '111M',
   }),
 ) // 总排行榜前三
 
@@ -1921,7 +1950,7 @@ const showRewardsTop10 = computed(() => {
       topRewards?.rewards.push(
         {
           cover: new URL('/src/assets/icon/coin.png', import.meta.url).href,
-          content: `${formatLargeNumber(Number(topUser?.totalNumber || '0') * 0.1)}(10% Points Coins)`,
+          content: `${formatLargeNumber(Number(topUser?.quantityNumber || '0') * 0.1)}(10% Points Coins)`,
           quantity: 0,
           type: 'GIFT',
         },
@@ -1938,7 +1967,7 @@ const showRewardsTop10 = computed(() => {
     else if (index === 1) {
       topRewards?.rewards.push({
         cover: new URL('/src/assets/icon/coin.png', import.meta.url).href,
-        content: `${formatLargeNumber(Number(topUser?.totalNumber || '0') * 0.08)}(8% Points Coins)`,
+        content: `${formatLargeNumber(Number(topUser?.quantityNumber || '0') * 0.08)}(8% Points Coins)`,
         quantity: 0,
         type: 'GIFT',
       })
@@ -1947,7 +1976,7 @@ const showRewardsTop10 = computed(() => {
     else if (index === 2) {
       topRewards?.rewards.push({
         cover: new URL('/src/assets/icon/coin.png', import.meta.url).href,
-        content: `${formatLargeNumber(Number(topUser?.totalNumber || '0') * 0.06)}(6% Points Coins)`,
+        content: `${formatLargeNumber(Number(topUser?.quantityNumber || '0') * 0.06)}(6% Points Coins)`,
         quantity: 0,
         type: 'GIFT',
       })
@@ -1957,7 +1986,7 @@ const showRewardsTop10 = computed(() => {
     else {
       topRewards?.rewards.push({
         cover: new URL('/src/assets/icon/coin.png', import.meta.url).href,
-        content: `${formatLargeNumber(Number(topUser?.totalNumber || '0') * 0.04)}(4% Points Coins)`,
+        content: `${formatLargeNumber(Number(topUser?.quantityNumber || '0') * 0.04)}(4% Points Coins)`,
         quantity: 0,
         type: 'GIFT',
       })
@@ -1988,6 +2017,8 @@ const formatLargeNumber = (num) => {
   }
 }
 
+const giftsList = ref([]) // 礼物列表
+
 const activity = ref({}) //活动详情和奖池
 const activeIndex = ref(0) // 当前高亮格子
 const isRolling = ref(false) // 抽奖状态
@@ -2003,6 +2034,8 @@ const RechargeBadgeInfo = ref([]) //充值奖励-徽章信息
 const userInfo = ref({}) //用户信息
 const userIdentity = ref({}) //用户身份
 
+const taskList = ref([]) //任务列表
+
 // 排行榜前10名（带奖励）
 const RankingHasTop10 = computed(() => {
   let RankingTop10 = rankingTotal.value.filter((_, index) => index < 10)
@@ -2098,7 +2131,7 @@ const searchPayee = () => {
 
 // 前往提现页
 const goToWithdraw = () => {
-  router.push({ path: '/cash-out', query: { activityId: '2005571533988298753' } })
+  router.push({ path: '/cash-out', query: { activityId: '2006671533988298666' } })
 }
 
 // 判断文本是否溢出（需要滚动）
@@ -2369,8 +2402,6 @@ const sweepstakes = async (consecutive = 1) => {
   }
 }
 
-const taskList = ref([]) //任务列表
-
 // 展示任务目标
 const showTarget = (task) => {
   if (task.targetType == 'MIC_TIME') {
@@ -2466,7 +2497,7 @@ const clearPayee = () => {
   clearSelectedPayee()
 }
 
-//获取中奖用户列表
+// 获取中奖用户列表
 const getWinners = async () => {
   const resWinners = await winnerHistory('2006671533988298666')
   if (resWinners.status && resWinners.body) {
@@ -2474,7 +2505,7 @@ const getWinners = async () => {
   }
 }
 
-//获取用户信息
+// 获取用户信息
 const getUserInfo = async () => {
   if (Object.keys(userInfo.value).length === 0) {
     const resUserInfo = await getMemberProfile()
@@ -2489,7 +2520,20 @@ const getUserInfo = async () => {
   }
 }
 
-//获取排行榜
+// 获取总榜前三
+const getOverallRanking = async () => {
+  let data = {
+    activityType: 13,
+  }
+  const resRanking = await getOverallRankingTop3(data)
+  if (resRanking.status && resRanking.body) {
+    OverallRanking.value = resRanking.body || []
+  } else {
+    OverallRanking.value = []
+  }
+}
+
+// 获取排行榜
 const getRanking = async () => {
   let data = {
     activityType: 13,
@@ -2509,6 +2553,7 @@ const getRanking = async () => {
 const getRewardsAndGifts = async () => {
   const resRewardsAndGifts = await getThisWeekRewardsAndGifts('2020751672412921857')
   if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
+    giftsList.value = resRewardsAndGifts.body.gifts
     let tempRewardsTop10 = resRewardsAndGifts.body.butOneRewards
 
     let top4Rewards = JSON.parse(JSON.stringify(tempRewardsTop10[3])) // 获取第4名奖励项
@@ -2523,7 +2568,7 @@ const getRewardsAndGifts = async () => {
   }
 }
 
-//获取抽奖奖池
+// 获取抽奖奖池
 const getActivityDetail = async () => {
   getDrawableAmount() //获取可提现金额
   const resDetail = await activityDetail('98666')
@@ -2546,7 +2591,7 @@ const showDetail = (type, reward) => {
   }
 }
 
-//获取拥有的抽奖券
+// 获取拥有的抽奖券
 const getTickets = async () => {
   const resTickets = await myTickets('2006671533988298666')
   if (resTickets.status && resTickets.body) {
@@ -2556,7 +2601,7 @@ const getTickets = async () => {
   }
 }
 
-//获取累计抽奖次数
+// 获取累计抽奖次数
 const getTotalDrawCount = async () => {
   const resTotalDrawCount = await myTotalDrawCount('2006671533988298666')
   if (resTotalDrawCount.status && resTotalDrawCount.body) {
@@ -2564,7 +2609,7 @@ const getTotalDrawCount = async () => {
   }
 }
 
-//可提现金额
+// 可提现金额
 const getDrawableAmount = async () => {
   const resDrawableAmount = await withdrawableAmount('2006671533988298666')
   if (resDrawableAmount.status && resDrawableAmount.body) {
@@ -2572,7 +2617,7 @@ const getDrawableAmount = async () => {
   }
 }
 
-//获取任务列表
+// 获取任务列表
 const getTaskList = async () => {
   const resTaskList = await ActTaskList()
   if (resTaskList.status && resTaskList.body) {
@@ -2592,7 +2637,7 @@ const getConfigsBadgeInfo = async () => {
   }
 }
 
-//获取中奖记录
+// 获取中奖记录
 const getDrawRecords = async () => {
   const resDrawRecords = await drawRecords('98666')
   if (resDrawRecords.status && resDrawRecords.body) {
@@ -2640,6 +2685,7 @@ const initData = async () => {
     initializePayee(), //获取收款人信息
     getWinners(), //获取历史中奖用户
     getRanking(), //获取排行榜
+    getOverallRanking(), //获取总榜前三
 
     getActivityDetail(), //获取奖池
     getTotalDrawCount(), //刷新累计抽奖次数
@@ -2652,15 +2698,103 @@ const initData = async () => {
 
 // 预加载关键图片
 const preloadCriticalImages = async () => {
-  const criticalImages = []
+  const criticalImages = [
+    // 背景
+    imageUrl('bg1'),
+    imageUrl('bg2'),
+    //  imageUrl('bg3'),
+
+    // 按钮
+    imageUrl(getImgName('rankBt')),
+    imageUrl(getImgName('rankBtActive')),
+    imageUrl(getImgName('lotteryBt')),
+    imageUrl(getImgName('lotteryBtActive')),
+    imageUrl(getImgName('withdrawalBt')),
+    imageUrl(getImgName('withdrawalBtActive')),
+
+    // 每周礼物
+    imageUrl('eventGiftsBg'),
+    imageUrl('giftBg'),
+
+    // 总排行榜前三
+    imageUrl('overallRankingBg'),
+    imageUrl('historyBt'),
+    imageUrl('top1'),
+    imageUrl('top2'),
+    imageUrl('top3'),
+
+    // 倒计时
+    imageUrl('timeDayBg'),
+    imageUrl('timeBg'),
+
+    // 排行榜
+    imageUrl('RankingTopBorder'),
+    imageUrl('RankingBottomBorder'),
+    imageUrl('RankingBorder'),
+    imageUrl('historyBt'),
+    imageUrl('itemTop1Bg'),
+    imageUrl('itemTop2Bg'),
+    imageUrl('itemTop3Bg'),
+    imageUrl('itemFrom4Bg'),
+    imageUrl('ranking1'),
+    imageUrl('ranking2'),
+    imageUrl('ranking3'),
+    imageUrl('rankingFrom4'),
+    imageUrl('ranking1Frame'),
+    imageUrl('ranking2Frame'),
+    imageUrl('ranking3Frame'),
+    imageUrl('userNameBorder'),
+    imageUrl('itemTopRewardBg'),
+
+    // 我的排名
+    imageUrl('myRankingBg'),
+  ]
 
   await preloadImages(criticalImages)
 }
 
 // 预加载其他图片
 const preloadOtherImages = async () => {
-  const criticalImages = []
+  // const criticalImages = [
+  //   // 抽奖模块
+  //   imageUrl('resultBt'),
+  //   imageUrl('lottery'),
+  //   imageUrl('prizeActiveFrame'),
+  //   imageUrl(getImgName('draw1BtBg')),
+  //   imageUrl(getImgName('draw10BtBg')),
+  //   imageUrl('taskBtGo'),
+  //   imageUrl('taskBtReceive'),
+  //   imageUrl('taskBtReceived'),
+  //   imageUrl('taskTalk'),
+  //   imageUrl('taskGift'),
+  //   imageUrl('taskGame'),
+  //   imageUrl('taskRecharge'),
+  //   imageUrl('ticket'),
 
+  //   // 前三名奖励展示
+  //   imageUrl('rewardBg'),
+
+  //   // 抽奖结果展示
+  //   imageUrl('resultBg'),
+  //   imageUrl('resultBack'),
+  //   imageUrl('resultNext'),
+
+  //   // 中奖历史
+  //   imageUrl('historyBg'),
+
+  //   // 排行榜帮助弹窗
+  //   imageUrl('rankingHelpBg_ar'),
+  //   imageUrl(getImgName('rankingHelpInfo')),
+
+  //   // 总榜前三规则弹窗
+  //   imageUrl('top3HelpBg_ar'),
+  //   imageUrl(getImgName('top3HelpInfo')),
+
+  //   // 兑换规则弹窗
+  //   imageUrl(getImgName('withdrawalHelp')),
+  // ]
+
+  const criticalImages = []
   await preloadImages(criticalImages)
 }
 
@@ -2848,6 +2982,9 @@ onUnmounted(() => {
   justify-content: center;
   align-items: center;
   color: #666;
+
+  overflow: hidden;
+  position: relative;
 }
 
 .loading-spinner {