feat(游戏王打榜): 新增历史模块

src/api/activity.js

@@ -36,3 +36,17 @@ export const getHistoryTopOne = async (activityType) => {
     throw error
   }
 }
+
+// 获取指定类型活动资源
+export const activityResource = async (data) => {
+  try {
+    const response = await get(
+      `/props-activity-cnf/client/listActivityResource?sysOrigin=${data.sysOrigin}&activityType=${data.activityType}`
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to get this week rewards and gifts:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}

src/views/Ranking/GamesKing/components/topUser.vue

@@ -127,7 +127,7 @@ const props = defineProps({
   // 排名
   ranking: {
     type: String,
-    default: '1',
+    default: '',
   },
 
   // 头像
@@ -171,7 +171,7 @@ const avatarContainerHeight = computed(() => {
     case '8-10':
       return '85%'
     default:
-      return '90%'
+      return '93%'
   }
 })
 
@@ -191,7 +191,7 @@ const avatarWidth = computed(() => {
     case '8-10':
       return '45%'
     default:
-      return '48%'
+      return '36%'
   }
 })
 
@@ -211,7 +211,7 @@ const bottomSectionHeight = computed(() => {
     case '8-10':
       return '41%'
     default:
-      return '30%'
+      return '22%'
   }
 })
 
@@ -231,7 +231,7 @@ const usernameAreaStyle = computed(() => {
     case '8-10':
       return 'height: 27%; width: 78%;'
     default:
-      return 'height: 30%; width: 40%;'
+      return 'height: 100%; width: 72%;'
   }
 })
 

src/views/Ranking/GamesKing/index.vue

@@ -85,8 +85,26 @@
         <!-- 切换按钮 -->
         <div>
           <div style="display: flex; justify-content: space-around; margin-top: 2vw">
-            <!-- 排行榜按钮 -->
+            <!-- 历史模块按钮 -->
-            <div style="width: 40%; position: relative" @click="rankingShow = true">
+            <div style="width: 30%; position: relative" @click="changeModule('history')">
+              <img
+                v-show="!historyShow"
+                v-smart-img
+                :src="imageUrl(getImgName('historyBt'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+              <img
+                v-show="historyShow"
+                v-smart-img
+                :src="imageUrl(getImgName('historyBtActive'))"
+                alt=""
+                style="display: block; width: 100%"
+              />
+            </div>
+
+            <!-- 排行榜模块按钮 -->
+            <div style="width: 30%; position: relative" @click="changeModule('ranking')">
               <img
                 v-show="!rankingShow"
                 v-smart-img
@@ -103,17 +121,17 @@
               />
             </div>
 
-            <!-- 奖励按钮 -->
+            <!-- 奖励模块按钮 -->
-            <div style="width: 40%; position: relative" @click="rankingShow = false">
+            <div style="width: 30%; position: relative" @click="changeModule('rewards')">
               <img
-                v-show="rankingShow"
+                v-show="!rewardsShow"
                 v-smart-img
                 :src="imageUrl(getImgName('rewardsBt'))"
                 alt=""
                 style="display: block; width: 100%"
               />
               <img
-                v-show="!rankingShow"
+                v-show="rewardsShow"
                 v-smart-img
                 :src="imageUrl(getImgName('rewardBtActive'))"
                 alt=""
@@ -123,8 +141,99 @@
           </div>
         </div>
 
-        <!-- 展示内容 -->
         <div>
+          <!-- history -->
+          <div
+            v-show="historyShow"
+            style="display: flex; flex-direction: column; align-items: center"
+          >
+            <!-- 历史榜首 -->
+            <itemCenter
+              :imgUrl="imageUrl(getImgName('historyTopBg'))"
+              :contentStyle="`inset: 31vw 5vw 4vw;
+                flex-direction: column;
+                justify-content: space-between;
+                gap:2vw`"
+            >
+              <div
+                style="
+                  width: 100%;
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                "
+              >
+                <!-- 上一周榜首按钮 -->
+                <div
+                  style="
+                    width: 8vw;
+                    align-self: stretch;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img
+                    v-smart-img
+                    v-show="historyTopList.length > 1 && historyTopIndex > 0"
+                    :src="imageUrl('topBackBt')"
+                    alt=""
+                    class="flipImg"
+                    style="display: block; width: 100%; object-fit: cover"
+                    @click="historyTopIndex--"
+                  />
+                </div>
+
+                <!-- 榜首 -->
+                <TopUser
+                  :BorderImgUrl="imageUrl('historyTopFrame')"
+                  :avatarUrl="historyTopList[historyTopIndex].topUser.avatar"
+                  :name="historyTopList[historyTopIndex].topUser.nickname"
+                  :distributionValue="historyTopList[historyTopIndex].topUser.quantity || ''"
+                  style="width: 90%"
+                  @click="viewUserInfo(historyTopList[historyTopIndex].topUser.userId)"
+                />
+
+                <!-- 下一周榜首按钮 -->
+                <div
+                  style="
+                    width: 8vw;
+                    align-self: stretch;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img
+                    v-smart-img
+                    v-show="
+                      historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length
+                    "
+                    :src="imageUrl('topNextBt')"
+                    alt=""
+                    class="flipImg"
+                    style="display: block; width: 100%; object-fit: cover"
+                    @click="historyTopIndex++"
+                  />
+                </div>
+              </div>
+            </itemCenter>
+
+            <!-- 特殊奖励 -->
+            <itemCenter
+              :imgUrl="imageUrl(getImgName('specialRewardsBg'))"
+              :contentStyle="`inset: 50vw 3vw 5vw;`"
+            >
+              <img
+                :src="specialReward?.cover"
+                alt=""
+                style="display: block; width: 66%; object-fit: cover"
+              />
+            </itemCenter>
+          </div>
+
           <!-- Ranking -->
           <div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
             <div style="position: relative; z-index: 1">
@@ -316,7 +425,7 @@
 
           <!-- Rewards -->
           <div
-            v-show="!rankingShow"
+            v-show="rewardsShow"
             style="display: flex; flex-direction: column; align-items: center"
           >
             <div
@@ -476,7 +585,7 @@
 
         <!-- 我的排名 -->
         <itemCenter
-          style="position: fixed; bottom: 0; z-index: 2"
+          style="position: fixed; bottom: 0; z-index: 3"
           :imgUrl="imageUrl('myRankingBg')"
           :contentStyle="`padding: 0 8%`"
         >
@@ -583,7 +692,12 @@ import { getPngUrl } from '@/config/imagePaths.js'
 import { preloadImages } from '@/utils/imagePreloader.js'
 import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
 
-import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
+import {
+  getThisWeekRewardsAndGifts, // 获取本周奖励和礼物
+  getRankingListAndMyRanking, // 获取排行榜和我的排名
+  getHistoryTopOne, // 获取历史榜首
+  activityResource, // 活动特定资源
+} from '@/api/activity.js'
 
 import itemCenter from '@/components/itemCenter.vue'
 import TopUser from './components/topUser.vue'
@@ -617,11 +731,35 @@ const Second = ref(0)
 let timer = null
 
 // 模块切换展示
-const rankingShow = ref(true) //排行榜
+const historyShow = ref(true) //历史榜首
+const rankingShow = ref(false) //排行榜
+const rewardsShow = ref(false) //奖励模块
+const changeModule = (module) => {
+  switch (module) {
+    case 'history':
+      historyShow.value = true
+      rankingShow.value = false
+      rewardsShow.value = false
+      break
+    case 'ranking':
+      historyShow.value = false
+      rankingShow.value = true
+      rewardsShow.value = false
+      break
+    case 'rewards':
+      historyShow.value = false
+      rankingShow.value = false
+      rewardsShow.value = true
+  }
+}
+
+const historyTopList = ref([]) // 历史榜首
+const historyTopIndex = ref(0)
 
 const Ranking = ref([]) // 排行榜
 const myRanking = ref({}) // 我的排名
 const rewardsList = ref([]) // 奖励列表
+const specialReward = ref({}) // 奖励列表
 
 const topImg = ref([
   imageUrl('top1RewardBg'),
@@ -723,6 +861,14 @@ const showDetail = (type, reward) => {
   }
 }
 
+// 获取历史榜首
+const getAllTopOne = async () => {
+  const resHistoryTopOne = await getHistoryTopOne('10')
+  if (resHistoryTopOne.status && resHistoryTopOne.body) {
+    historyTopList.value = resHistoryTopOne.body?.historicalList
+  }
+}
+
 // 获取排行榜和我的排名
 const getListAndMy = async () => {
   let data = {
@@ -744,11 +890,25 @@ const getRewardsAndGifts = async () => {
   }
 }
 
+// 获取指定类型活动资源
+const getActivityResource = async () => {
+  let data = {
+    sysOrigin: 'LIKEI',
+    activityType: 'GAME_KING',
+  }
+  const resActivityResource = await activityResource(data)
+  if (resActivityResource.status && resActivityResource.body) {
+    specialReward.value = resActivityResource.body?.[0]?.propsGroup?.activityRewardProps?.[0]
+  }
+}
+
 // 刷新页面数据
 const initData = async () => {
   await Promise.all([
+    getAllTopOne(), // 获取历史榜首
     getListAndMy(), // 获取排行榜和我的排名
-    getRewardsAndGifts(), //获取本周的礼物和奖励列表
+    getRewardsAndGifts(), // 获取本周的礼物和奖励列表
+    getActivityResource(), // 获取指定类型活动资源
   ])
 }
 
@@ -967,4 +1127,8 @@ onUnmounted(() => {
 [dir='rtl'] .timeBox {
   flex-direction: row-reverse;
 }
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
 </style>