feat(扑克王牌): 接口数据对接

src/router/index.js

@@ -400,7 +400,7 @@ const router = createRouter({
       name: 'pokerAce',
       component: () => import('../views/Activities/PokerAce/index.vue'),
       meta: { requiresAuth: true },
-    }, //2026年x月x日上午5点结束
+    }, //2026年5月1日上午5点结束
     {
       path: '/activities/lucky-dollars-season4',
       name: 'lucky-dollars-season4',

src/views/Activities/PokerAce/index.vue

@@ -13,7 +13,7 @@
       class="scrollY"
     >
       <!-- 页面背景 -->
-      <BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg')]" />
+      <BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl(getBgImgName('bg'))]" />
 
       <!-- 页面内容 -->
       <div
@@ -37,11 +37,7 @@
 
         <!-- 倒计时 -->
         <div style="padding: 23vw 4vw 3vw">
-          <itemCenter
+          <itemCenter :imgUrl="imageUrl('timeBg')" style="" :contentStyle="timeContentStyle">
-            :imgUrl="imageUrl('timeBg')"
-            style=""
-            :contentStyle="`width:92vw;left:50%;transform: translateX(-50%);`"
-          >
             <div
               style="
                 width: 100%;
@@ -277,9 +273,6 @@
               </div>
             </itemCenter>
           </div>
-
-          <!-- 触发加载功能 -->
-          <div ref="RankingLoadmore"></div>
         </div>
 
         <!-- 前三奖励模块 -->
@@ -298,7 +291,12 @@
             style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
           >
             <!-- 排名标题 -->
-            <img :src="imageUrl(`rewardTitleTop${index + 1}`)" alt="" style="width: 50vw" />
+            <img
+              v-smart-img
+              :src="imageUrl(`rewardTitleTop${index + 1}`)"
+              alt=""
+              style="width: 50vw"
+            />
 
             <!-- 奖励列表 -->
             <div
@@ -353,7 +351,7 @@
       </div>
 
       <!-- 我的排名占位 -->
-      <div v-show="rankingShow" style="height: 20vw"></div>
+      <div v-show="rankingShow" style="height: 25vw"></div>
 
       <!-- 我的排名 -->
       <itemCenter
@@ -453,13 +451,21 @@
           "
           @click="closedPopup"
         >
-          <img
+          <itemCenter
             v-if="helpShow"
-            v-smart-img
+            :imgUrl="imageUrl(getImgName('helpInfo'))"
-            :src="imageUrl(getImgName('helpInfo'))"
+            :contentStyle="``"
-            alt=""
+            @click.stop
-            style="display: block; width: 100%"
+          >
-          />
+            <!-- 关闭按钮 -->
+            <img
+              v-smart-img
+              :src="imageUrl('closeBt')"
+              alt=""
+              class="close-btn"
+              @click="closedPopup"
+            />
+          </itemCenter>
         </div>
       </maskLayer>
     </div>
@@ -467,7 +473,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { connectToApp } from '@/utils/appConnector.js'
 import { useI18n } from 'vue-i18n'
 import { viewUserInfo } from '@/utils/appBridge.js'
@@ -475,9 +481,9 @@ import { useLangStore } from '@/stores/lang'
 import { getPngUrl } from '@/config/imagePaths.js'
 import { preloadImages } from '@/utils/image/imagePreloader.js'
 import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
-import { useThrottle } from '@/utils/useDebounce'
 import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
-import { apigetRewardConfigs, ranklist } from '@/api/lottery'
+
+import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
 
 import TopUser from './components/topUser.vue'
 import BackgroundLayer from '@/components/BackgroundLayer.vue'
@@ -498,16 +504,33 @@ const currentLangType = computed(() => {
 // 获取 OSS 图片 URL
 const imageUrl = (filename) => getPngUrl('Activities/PokerAce/', filename)
 
+// 根据语言获取图片名
+const getBgImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
 // 根据语言获取图片名
 const getImgName = (filename) => {
   return currentLangType.value === 'en' ? filename : `${filename}_${currentLangType.value}`
 }
 
+const activityId = ref('2047505567719723009') // 活动ID
+const activityType = ref(17) // 活动类型
+const cycleKey = ref('20260424') // 周期键
+// 测试用参数
+// const activityId = ref('2001207026499137537') // 活动ID
+// const activityType = ref(10) // 活动类型
+
 const topRankingContentStyle = computed(() => {
   const baseStyle = 'gap:8vw;padding: 0 9vw 26vw;'
   return currentLangType.value === 'ar' ? `${baseStyle}flex-direction:row-reverse` : baseStyle
 })
 
+const timeContentStyle = computed(() => {
+  return currentLangType.value === 'ar'
+    ? 'width:96vw;left:auto;right:50%;transform: translateX(50%);'
+    : 'width:96vw;left:50%;transform: translateX(-50%);'
+})
+
 // 弹窗展示
 const helpShow = ref(false) // 帮助
 const maskLayerShow = computed(() => {
@@ -526,21 +549,25 @@ const handleBt = (type) => {
 const RankingShow = computed(() => rankingShow.value)
 
 // 排行榜数据
-const PageNo = ref(1)
 const Ranking = ref([])
-const addRanking = ref([])
 const myRanking = ref({})
 const rankingRewards = ref([])
-const RankingLoadmore = ref(null)
-const rankingLoading = ref(false)
-const rankingHasMore = ref(true)
 
-const rankingTotal = computed(() => {
+const normalizeRankingUser = (user = {}) => {
-  return [...Ranking.value, ...addRanking.value]
+  return {
-})
+    ...user,
+    userId: user.userId || user.uid || '',
+    userAvatar: user.userAvatar || user.avatar || '',
+    userName: user.userName || user.nickname || '',
+    amount: user.amount ?? user.quantity ?? 0,
+    rank: user.rank ?? user.ranking ?? '',
+    account: user.account || '',
+    specialAccount: user.specialAccount || '',
+  }
+}
 
 const RankingHasTop3 = computed(() => {
-  const top3 = rankingTotal.value.filter((_, index) => index < 3)
+  const top3 = Ranking.value.filter((_, index) => index < 3)
   if (top3.length < 3) {
     top3.push(
       ...Array.from({ length: 3 - top3.length }, () => ({
@@ -556,7 +583,7 @@ const RankingHasTop3 = computed(() => {
 })
 
 const showRanking = computed(() => {
-  return rankingTotal.value.filter((_, index) => index >= 3)
+  return Ranking.value.filter((_, index) => index >= 3)
 })
 
 // 倒计时
@@ -566,7 +593,7 @@ const Minutes = ref('00')
 const Seconds = ref('00')
 let countdownTimer = null
 
-const ACTIVITY_END_TIME = new Date(2026, 4, 31, 5, 0, 0).getTime()
+const ACTIVITY_END_TIME = new Date(2026, 4, 1, 5, 0, 0).getTime()
 
 const formatTime = (value) => String(value).padStart(2, '0')
 
@@ -617,105 +644,26 @@ const closedPopup = () => {
 
 // 获取排行榜
 const getRanking = async () => {
-  if (rankingLoading.value || !rankingHasMore.value) {
+  const data = {
-    return
+    activityType: activityType.value,
+    cycleKey: cycleKey.value,
   }
 
-  if (PageNo.value == 0) {
+  const resRanking = await getRankingListAndMyRanking(data)
-    PageNo.value = 1
+  if (resRanking.status && resRanking.body) {
-  }
+    myRanking.value = normalizeRankingUser(resRanking.body?.currentUserRank || {})
-  rankingLoading.value = true
+    Ranking.value = (resRanking.body?.rankingList || []).map((item) => normalizeRankingUser(item))
-
+  } else {
-  try {
+    myRanking.value = {}
-    let data = {
+    Ranking.value = []
-      activityId: '2007771533988204877',
-      pageNo: PageNo.value,
-      pageSize: 20,
-    }
-    const resRanking = await ranklist(data)
-    if (resRanking.status && resRanking.body) {
-      myRanking.value = resRanking.body?.currentUser // 我的排名
-
-      const topList = resRanking.body.topList || []
-      if (topList.length > 0) {
-        if (topList.length == 20) {
-          addRanking.value = []
-          Ranking.value.push(...topList)
-          PageNo.value++
-        } else {
-          addRanking.value = topList
-          rankingHasMore.value = false
-        }
-      } else {
-        rankingHasMore.value = false
-      }
-    } else {
-      myRanking.value = {}
-      Ranking.value = []
-      addRanking.value = []
-      PageNo.value = 1
-      rankingHasMore.value = true
-    }
-  } finally {
-    rankingLoading.value = false
   }
 }
 
 // 获取奖励列表
 const getGameReward = async () => {
-  let data = {
+  const resRewardsAndGifts = await getThisWeekRewardsAndGifts(activityId.value)
-    sysOrigin: 'LIKEI',
+  if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
-    activityType: 'LUCKY_GIFT_REWARD',
+    rankingRewards.value = (resRewardsAndGifts.body.butOneRewards || []).slice(0, 3)
-  }
-  const resActivityReward = await apigetRewardConfigs(data)
-  if (resActivityReward.status && resActivityReward.body) {
-    rankingRewards.value = resActivityReward.body
-      .filter((rewards) => rewards.rule.sort <= 3)
-      .slice(0, 3)
-      .map((rewards) => {
-        let addReward = []
-        if (rewards.rule.sort == 1) {
-          addReward = [
-            {
-              type: 'DOLLARS',
-              cover: '',
-              content: 100,
-            },
-          ]
-        } else if (rewards.rule.sort == 2) {
-          addReward = [
-            {
-              type: 'DOLLARS',
-              cover: '',
-              content: 50,
-            },
-          ]
-        } else if (rewards.rule.sort == 3) {
-          addReward = [
-            {
-              type: 'DOLLARS',
-              cover: '',
-              content: 30,
-            },
-          ]
-        } else if (rewards.rule.sort == 4) {
-          addReward = [
-            {
-              type: 'DOLLARS',
-              cover: '',
-              content: 10,
-            },
-          ]
-        }
-
-        rewards.propsGroup.activityRewardProps.push(...addReward) // 补充奖励项
-
-        rewards = {
-          ...rewards,
-          rewards: rewards.propsGroup.activityRewardProps,
-        }
-        return rewards
-      })
   } else {
     rankingRewards.value = []
   }
@@ -729,7 +677,7 @@ const initData = async () => {
 // 预加载关键图片
 const preloadCriticalImages = async () => {
   const criticalImages = [
-    imageUrl('bg'),
+    imageUrl(getBgImgName('bg')),
     imageUrl('helpBt'),
     imageUrl('timeBg'),
     imageUrl(getImgName('rankBtActive')),
@@ -746,6 +694,7 @@ const preloadCriticalImages = async () => {
     imageUrl('rewardTitleTop3'),
     imageUrl('giftItemBg'),
     imageUrl('myRankingBg'),
+    imageUrl('closeBt'),
     imageUrl(getImgName('helpInfo')),
   ]
 
@@ -762,11 +711,6 @@ const completePreloading = async () => {
   } finally {
     // 无论成功或失败都结束加载状态
     isLoading.value = false
-
-    await nextTick()
-    if (RankingLoadmore.value) {
-      observer.observe(RankingLoadmore.value)
-    }
   }
 }
 
@@ -778,18 +722,6 @@ const connectToAppHandler = async () => {
   })
 }
 
-const debouceGetRanking = useThrottle(() => {
-  getRanking()
-}, 1000)
-
-const observer = new IntersectionObserver((entries) => {
-  entries.forEach((entry) => {
-    if (entry.intersectionRatio > 0 && rankingTotal.value.length !== 0) {
-      debouceGetRanking()
-    }
-  })
-})
-
 onMounted(async () => {
   handleBt('rank')
   startCountdown()
@@ -801,8 +733,6 @@ onUnmounted(() => {
     clearInterval(countdownTimer)
     countdownTimer = null
   }
-
-  observer.disconnect()
 })
 </script>
 
@@ -881,6 +811,21 @@ onUnmounted(() => {
   font-style: italic;
 }
 
+.close-btn {
+  display: block;
+  width: 8vw;
+  position: absolute;
+  z-index: 9;
+
+  top: 14vw;
+  right: 10vw;
+}
+
+[dir='rtl'] .close-btn {
+  left: 10vw;
+  right: auto;
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;