feat(cp榜单页): 对接接口数据

src/stores/couple.js

@@ -2,6 +2,13 @@ import { defineStore } from 'pinia'
 
 export const useCoupleStore = defineStore('couple', {
   state: () => ({
+    helpShow: false, //帮助展示
+
+    topRewardShow: false, // 前三名奖励展示
+    topReward: {}, //前三名奖励项
+
+    myRanking: {}, // 我的排名
+
     TipsShow: false, // 金币不足提示
     needCheckInTipsShow: false, // 需要补签提示
     signInSuccessShow: false, // 签到成功提示

src/views/Ranking/Couple/GamePlay/Gameplay.vue

@@ -12,27 +12,59 @@
         gap: 2vw;
       "
     >
-      <img
+      <!-- 抽奖栏目按钮 -->
-        v-smart-img
+      <div style="flex: 1; min-width: 0" @click="changeTag('lottery')">
-        :src="imageUrl(getImgName('gameLotteryBt'))"
+        <img
-        alt=""
+          v-show="lotteryShow"
-        style="flex: 1; min-width: 0; display: block; object-fit: cover"
+          v-smart-img
-        @click="changeTag('lottery')"
+          :src="imageUrl(getImgName('gameLotteryBtActive'))"
-      />
+          alt=""
-      <img
+          style="width: 100%; display: block; object-fit: cover"
-        v-smart-img
+        />
-        :src="imageUrl(getImgName('gameSignInBt'))"
+        <img
-        alt=""
+          v-show="!lotteryShow"
-        style="flex: 1; min-width: 0; display: block; object-fit: cover"
+          v-smart-img
-        @click="changeTag('signIn')"
+          :src="imageUrl(getImgName('gameLotteryBt'))"
-      />
+          alt=""
-      <img
+          style="width: 100%; display: block; object-fit: cover"
-        v-smart-img
+        />
-        :src="imageUrl(getImgName('gameExchangeBt'))"
+      </div>
-        alt=""
+
-        style="flex: 1; min-width: 0; display: block; object-fit: cover"
+      <!-- 签到按钮 -->
-        @click="changeTag('exchange')"
+      <div style="flex: 1; min-width: 0" @click="changeTag('signIn')">
-      />
+        <img
+          v-show="signInShow"
+          v-smart-img
+          :src="imageUrl(getImgName('gameSignInBtActive'))"
+          alt=""
+          style="width: 100%; display: block; object-fit: cover"
+        />
+        <img
+          v-show="!signInShow"
+          v-smart-img
+          :src="imageUrl(getImgName('gameSignInBt'))"
+          alt=""
+          style="width: 100%; display: block; object-fit: cover"
+        />
+      </div>
+
+      <!-- 兑换按钮 -->
+      <div style="flex: 1; min-width: 0" @click="changeTag('exchange')">
+        <img
+          v-show="exchangeShow"
+          v-smart-img
+          :src="imageUrl(getImgName('gameExchangeBtActive'))"
+          alt=""
+          style="width: 100%; display: block; object-fit: cover"
+        />
+        <img
+          v-show="!exchangeShow"
+          v-smart-img
+          :src="imageUrl(getImgName('gameExchangeBt'))"
+          alt=""
+          style="width: 100%; display: block; object-fit: cover"
+        />
+      </div>
     </div>
 
     <div style="position: relative">

src/views/Ranking/Couple/Ranking.vue

@@ -12,27 +12,159 @@
         gap: 10vw;
       "
     >
-      <img
+      <!-- 周榜按钮 -->
-        v-smart-img
+      <div style="flex: 1; min-width: 0" @click="changeTag('weekly')">
-        :src="imageUrl(getImgName('rankingWeeklyBt'))"
+        <img
-        alt=""
+          v-show="weeklyShow"
-        style="flex: 1; min-width: 0; display: block; object-fit: cover"
+          v-smart-img
-        @click="changeTag('weekly')"
+          :src="imageUrl(getImgName('rankingWeeklyBtActive'))"
-      />
+          alt=""
-      <img
+          style="width: 100%; display: block; object-fit: cover"
-        v-smart-img
+        />
-        :src="imageUrl(getImgName('rankingSeasonBt'))"
+        <img
-        alt=""
+          v-show="!weeklyShow"
-        style="flex: 1; min-width: 0; display: block; object-fit: cover"
+          v-smart-img
-        @click="changeTag('season')"
+          :src="imageUrl(getImgName('rankingWeeklyBt'))"
-      />
+          alt=""
+          style="width: 100%; display: block; object-fit: cover"
+        />
+      </div>
+
+      <!-- 季榜按钮 -->
+      <div style="flex: 1; min-width: 0" @click="changeTag('season')">
+        <img
+          v-show="seasonShow"
+          v-smart-img
+          :src="imageUrl(getImgName('rankingSeasonBtActive'))"
+          alt=""
+          style="width: 100%; display: block; object-fit: cover"
+        />
+        <img
+          v-show="!seasonShow"
+          v-smart-img
+          :src="imageUrl(getImgName('rankingSeasonBt'))"
+          alt=""
+          style="width: 100%; display: block; object-fit: cover"
+        />
+      </div>
     </div>
 
     <!-- 排行榜 -->
-    <div>
+    <div style="position: relative; display: flex; flex-direction: column; gap: 2vw">
+      <!-- 取消按钮 -->
+      <img
+        :src="imageUrl('helpBt')"
+        alt=""
+        style="
+          display: block;
+          width: 8vw;
+          object-fit: cover;
+          position: absolute;
+          z-index: 3;
+          top: 0;
+          right: 3vw;
+        "
+        @click="helpShow = true"
+      />
+
       <!-- 前三名 -->
+      <TopUser
+        v-for="(value, index) in 3"
+        :ranking="index + 1 + ''"
+        :rankingItem="RankingHasTop3[index] || {}"
+        :rewards="rewardsTop3[index] || {}"
+      />
 
       <!-- 从第4名开始 -->
+      <itemCenter
+        v-for="item in showRanking"
+        :imgUrl="imageUrl(`rankingItemBg`)"
+        :contentStyle="`padding: 0 5%;justify-content: flex-start;`"
+      >
+        <!-- 排名 -->
+        <div style="width: 10vw; display: flex; justify-content: center; align-items: center">
+          <img
+            v-for="(digit, index) in getRankDigits(item.rank)"
+            :src="getDigitImageUrl(digit)"
+            style="display: block; width: 3vw; object-fit: cover"
+          />
+        </div>
+
+        <!-- 头像 -->
+        <div style="width: 36vw">
+          <div
+            style="
+              width: 100%;
+              padding: 3vw 5vw;
+              height: 80%;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            "
+          >
+            <!-- 情侣1头像 -->
+            <img
+              :src="item.userAvatar"
+              alt=""
+              style="
+                display: block;
+                min-width: 0;
+                width: 12vw;
+                object-fit: cover;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                border: 1px solid #fefa9f;
+              "
+              @error="handleAvatarImageError"
+            />
+            <!-- 情侣2头像 -->
+            <img
+              :src="item.cpUserAvatar"
+              alt=""
+              style="
+                display: block;
+                min-width: 0;
+                width: 12vw;
+                object-fit: cover;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                border: 1px solid #fefa9f;
+              "
+              @error="handleAvatarImageError"
+            />
+          </div>
+        </div>
+
+        <!-- 名称 -->
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: 1vw;
+          "
+        >
+          <div style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
+            {{ item.userNickname || '' }}
+          </div>
+          <div style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
+            {{ item.cpUserNickname || '' }}
+          </div>
+        </div>
+
+        <!-- 贡献 -->
+        <div style="width: auto; min-width: 0; display: flex; align-items: center">
+          <img
+            :src="imageUrl('distribution')"
+            alt=""
+            style="width: 10vw; display: block; object-fit: cover"
+          />
+          <div style="font-weight: 700">{{ item.total || '0' }}</div>
+        </div>
+      </itemCenter>
     </div>
   </div>
 </template>
@@ -50,11 +182,13 @@ import { preloadImages } from '@/utils/imagePreloader.js'
 import { formatUTCCustom } from '@/utils/utcFormat.js'
 import { showError, showSuccess } from '@/utils/toast.js'
 import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { useCoupleStore } from '@/stores/couple'
 import { useThrottle } from '@/utils/useDebounce.js'
 import { storeToRefs } from 'pinia'
 
 import {
   apiGetCpRanking, // 获取cp排行榜
+  apiGetCpRewardPool, // 获取cp奖励池(前三名)
 } from '@/api/couple.js'
 
 import TopUser from './components/topUser.vue'
@@ -64,6 +198,7 @@ import maskLayer from '@/components/MaskLayer.vue'
 const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
+const coupleStore = useCoupleStore()
 
 const langStore = useLangStore()
 // 当前语言类型
@@ -81,6 +216,11 @@ const getImgName = (filename) => {
   return currentLangType.value === 'ar' ? `${filename}_ar` : filename
 }
 
+const {
+  helpShow, // 帮助按钮
+  myRanking, // 我的排名
+} = storeToRefs(coupleStore)
+
 const weeklyShow = ref(true) //本周数据
 const seasonShow = ref(false) //季度数据
 
@@ -91,16 +231,20 @@ const changeTag = (module) => {
       weeklyShow.value = true
       seasonShow.value = false
       apiGetRanking() // 获取排行榜
+      apiGetTop3Rewards() // 获取前三名奖励
       break
     case 'season':
       if (seasonShow.value) return
       weeklyShow.value = false
       seasonShow.value = true
       apiGetRanking() // 获取排行榜
+      apiGetTop3Rewards() // 获取前三名奖励
       break
   }
 }
 
+const rewardsTop3 = ref([]) // 前三名奖励列表
+
 const RankingLoadmore = ref(null) //触底模块
 const rankingPageNo = ref(1) //分页页码
 const Ranking = ref([]) //原始排行榜
@@ -109,16 +253,26 @@ const rankingAdd = ref([]) //加载排行榜项
 const rankingTotal = computed(() => {
   return [...Ranking.value, ...rankingAdd.value]
 })
-const myRanking = ref({}) //我的排名
 
 // 处理排行榜小于3人时的情况
 const RankingHasTop3 = computed(() => {
   let RankingShow = [...Ranking.value]
   if (Ranking.value.length < 3) {
     let addNullUser = Array.from({ length: 3 - Ranking.value.length }, () => ({
-      avatar: '',
+      rank: '',
-      nickname: '',
+
-      quantity: '',
+      userAvatar: '',
+      userId: '',
+      userNickname: '',
+      userSex: '',
+
+      cpUserAvatar: '',
+      cpUserId: '',
+      cpUserNickname: '',
+      cpUserSex: '',
+
+      total: '0',
+      totalNumber: '0',
     }))
     RankingShow.push(...addNullUser)
   }
@@ -127,10 +281,24 @@ const RankingHasTop3 = computed(() => {
 
 // 展示用的榜单
 const showRanking = computed(() => {
-  return Ranking.value.filter((_, index) => index >= 10)
+  return Ranking.value.filter((_, index) => index >= 3)
   // return []
 })
 
+// 获取排名数字的各个位数
+const getRankDigits = (rank) => {
+  return String(rank).split('')
+}
+
+// 获取数字图片URL
+const getDigitImageUrl = (digit) => {
+  if (/^[0-9]$/.test(digit)) {
+    return imageUrl(`num${digit}`) // 假设数字图片在相同目录下
+  }
+  return ''
+}
+
+// 获取榜单
 const apiGetRanking = async () => {
   let type = weeklyShow.value ? 'WEEK' : 'SEASON'
   try {
@@ -144,6 +312,19 @@ const apiGetRanking = async () => {
   }
 }
 
+// 获取前三名奖励
+const apiGetTop3Rewards = async () => {
+  let type = weeklyShow.value ? 'WEEK_CP_GIFT' : 'SEASON_CP_GIFT'
+  try {
+    const response = await apiGetCpRewardPool(type)
+    if (response.status && response.body) {
+      rewardsTop3.value = response.body || [] // 前三名奖励
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
 // 触发节流获取排行榜
 const debouceGetRanking = useThrottle(() => {
   // getRanking() //加载新的排行榜项
@@ -162,6 +343,7 @@ const observer = new IntersectionObserver((entries) => {
 // 组件挂载时检测环境
 onMounted(() => {
   apiGetRanking() // 获取排行榜
+  apiGetTop3Rewards() // 获取前三名奖励
 
   // 监听加载模块
   if (RankingLoadmore.value) {

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

@@ -1,123 +1,346 @@
 <template>
   <div style="width: 100%">
-    <div style="position: relative">
+    <itemCenter :imgUrl="BorderImgUrl" :contentStyle="`display:block;`">
-      <img
+      <!-- 第一名 -->
-        v-smart-img
+      <div v-if="isTopOne" style="width: 98vw; height: 80%; position: relative">
-        :src="BorderImgUrl"
+        <!-- 查看个人信息按钮 -->
-        alt=""
+        <div style="position: absolute; z-index: 2; inset: 0; display: flex">
-        width="100%"
+          <!-- 情侣1 -->
-        style="display: block; position: relative; z-index: 2"
+          <div
-      />
+            style="flex: 1; min-width: 0; align-self: stretch"
-      <!-- 头像 -->
+            @click="viewUserInfo(rankingItem.userId)"
-      <div
+          ></div>
-        style="
+          <!-- 情侣1 -->
-          position: absolute;
+          <div
-          top: 0;
+            style="flex: 1; min-width: 0; align-self: stretch"
-          left: 0;
+            @click="viewUserInfo(rankingItem.cpUserId)"
-          right: 0;
+          ></div>
-          z-index: 1;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        "
-        :style="{ height: avatarContainerHeight }"
-      >
-        <div :style="{ width: avatarWidth }">
-          <img
-            v-smart-img
-            :src="avatarUrl || ''"
-            alt=""
-            width="100%"
-            style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
-            @error="handleAvatarImageError"
-          />
         </div>
-      </div>
 
-      <!-- 用户名和贡献值 -->
+        <!-- 头像 -->
-      <div
-        style="
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          z-index: 3;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          gap: 2px;
-        "
-        :style="{ height: bottomSectionHeight }"
-      >
-        <div
-          style="display: flex; justify-content: center; align-items: center"
-          :style="{
-            width: nameValueWidth,
-            height: nameValueHeight,
-          }"
-        >
-          <div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
-            {{ name }}
-          </div>
-        </div>
         <div
           style="
-            padding: 1px 2px;
+            position: absolute;
+            z-index: -1;
+            top: 17vw;
+            left: 0;
+            width: 100%;
+            height: 25vw;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 14vw;
+          "
+        >
+          <!-- 情侣1头像 -->
+          <img
+            :src="rankingItem.userAvatar"
+            alt=""
+            style="
+              display: block;
+              width: 25vw;
+              object-fit: cover;
+              aspect-ratio: 1/1;
+              border-radius: 50%;
+            "
+            @error="handleAvatarImageError"
+            @click="viewUserInfo(rankingItem.userId)"
+          />
+          <!-- 情侣2头像 -->
+          <img
+            :src="rankingItem.cpUserAvatar"
+            alt=""
+            style="
+              display: block;
+              width: 25vw;
+              object-fit: cover;
+              aspect-ratio: 1/1;
+              border-radius: 50%;
+            "
+            @error="handleAvatarImageError"
+            @click="viewUserInfo(rankingItem.cpUserId)"
+          />
+        </div>
 
+        <!-- 顶部距离 -->
+        <div style="height: 27vw"></div>
+        <!-- 贡献值 -->
+        <div style="height: 17vw; display: flex; justify-content: center; align-items: center">
+          <div style="color: #fff; font-weight: 700">
+            {{ rankingItem.total }}
+          </div>
+        </div>
+
+        <!-- 名称 -->
+        <div
+          style="
+            margin-top: -1vw;
+            height: 5vw;
             display: flex;
             justify-content: center;
             align-items: center;
           "
-          :style="{
-            width: distributionValueWidth,
-            height: distributionValueHeight,
-          }"
         >
-          <div
+          <div style="width: 76vw; display: flex; align-items: center; gap: 2vw">
-            style="font-weight: 590"
+            <!-- 情侣1名称 -->
-            class="showText"
+            <div
-            :class="isTopOne ? 'top1Text' : 'text'"
+              style="
-            :style="{
+                flex: 1;
-              color: ranking == '1' ? `#FFE601` : '#FFF',
+                min-width: 0;
-            }"
+
-          >
+                display: flex;
-            ${{ distributionValue }}
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <div
+                style="
+                  padding: 0 20%;
+
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+
+                  font-size: 0.9em;
+                  font-weight: 600;
+                "
+              >
+                {{ rankingItem.userNickname || '' }}
+              </div>
+            </div>
+            <!-- 情侣2名称 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <div
+                style="
+                  padding: 0 20%;
+
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+
+                  font-size: 0.9em;
+                  font-weight: 600;
+                "
+              >
+                {{ rankingItem.cpUserNickname || '' }}
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+
+      <!-- 第二三名 -->
+      <div v-else style="height: 65%; padding: 0 7%; display: flex; align-items: center">
+        <!-- 排名 -->
+        <img :src="imageUrl(`top${ranking}Ranking`)" alt="" style="width: 8vw" />
+
+        <!-- 头像 -->
+        <div style="width: 36vw; position: relative">
+          <!-- 查看个人信息按钮 -->
+          <div style="position: absolute; z-index: 2; inset: 0; display: flex">
+            <!-- 情侣1 -->
+            <div
+              style="flex: 1; min-width: 0; align-self: stretch"
+              @click="viewUserInfo(rankingItem.userId)"
+            ></div>
+            <!-- 情侣1 -->
+            <div
+              style="flex: 1; min-width: 0; align-self: stretch"
+              @click="viewUserInfo(rankingItem.cpUserId)"
+            ></div>
+          </div>
+
+          <!-- 内容 -->
+          <itemCenter
+            style="width: 100%; z-index: 1"
+            :imgUrl="imageUrl(`top${ranking}Frame`)"
+            :contentStyle="`z-index: -1;`"
+          >
+            <div
+              style="
+                width: 100%;
+                padding: 3vw 5vw;
+                height: 80%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              "
+            >
+              <!-- 情侣1头像 -->
+              <img
+                :src="rankingItem.userAvatar"
+                alt=""
+                style="
+                  display: block;
+                  min-width: 0;
+                  width: 10.5vw;
+                  object-fit: cover;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                "
+                @error="handleAvatarImageError"
+              />
+              <!-- 情侣2头像 -->
+              <img
+                :src="rankingItem.cpUserAvatar"
+                alt=""
+                style="
+                  display: block;
+                  min-width: 0;
+                  width: 10.5vw;
+                  object-fit: cover;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                "
+                @error="handleAvatarImageError"
+              />
+            </div>
+          </itemCenter>
+        </div>
+
+        <!-- 名称 -->
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: 1vw;
+          "
+        >
+          <div style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
+            {{ rankingItem.userNickname || '' }}
+          </div>
+          <div style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
+            {{ rankingItem.cpUserNickname || '' }}
+          </div>
+        </div>
+
+        <!-- 贡献 -->
+        <div style="width: auto; min-width: 0; display: flex; align-items: center">
+          <img
+            :src="imageUrl('distribution')"
+            alt=""
+            style="width: 10vw; display: block; object-fit: cover"
+          />
+          <div style="font-weight: 700">{{ rankingItem.total || '0' }}</div>
+        </div>
+      </div>
+
+      <!-- 奖励 -->
+      <div style="position: absolute; bottom: 0; left: 15vw; right: 4vw; height: 13.5vw">
+        <div style="height: 100%; display: flex; align-items: center; overflow: hidden">
+          <!-- 滚动容器 -->
+          <div class="scroll-wrapper">
+            <!-- 第一套内容 -->
+            <div class="scroll-content" v-for="value in 2">
+              <div
+                v-for="(item, index) in rewards.activityRewardProps"
+                :key="index"
+                style="display: flex; align-items: center; gap: 1vw"
+                @click="clickReward(item)"
+              >
+                <!-- 预览图 -->
+                <img
+                  :src="item.cover"
+                  alt=""
+                  style="display: block; width: 10vw; object-fit: cover"
+                />
+                <div style="color: #fff">
+                  {{ formatRewardDisplay(item.type, item) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </itemCenter>
   </div>
 </template>
 
 <script setup>
-import { handleAvatarImageError } from '@/utils/imageHandler.js'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLangStore } from '@/stores/lang'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { setUserInfo } from '@/utils/userStore.js'
+import { viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { useThrottle } from '@/utils/useDebounce.js'
+import { useCoupleStore } from '@/stores/couple'
+import { storeToRefs } from 'pinia'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const coupleStore = useCoupleStore()
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+const {
+  topRewardShow, // 前三名奖励展示
+  topReward, // 前三名奖励项
+} = storeToRefs(coupleStore)
 
 const props = defineProps({
   ranking: {
     type: String,
-    default: '',
+    default: '0',
   },
 
-  avatarUrl: {
+  rankingItem: {
-    type: String,
+    type: Object,
-    default: '',
+    default: () => ({}),
   },
 
-  BorderImgUrl: {
+  rewards: {
-    type: String,
+    type: Object,
-    required: true,
+    default: () => ({}),
   },
+})
 
-  name: {
+const BorderImgUrl = computed(() => {
-    type: String,
+  switch (props.ranking) {
-    default: '',
+    case '1':
-  },
+      return imageUrl('top1')
-
+    case '2':
-  distributionValue: {
+      return imageUrl('top2-3')
-    type: String,
+    case '3':
-    default: '',
+      return imageUrl('top2-3')
-  },
+    default:
+      return imageUrl('top2-3')
+  }
 })
 
 // 是否为第一名
@@ -125,122 +348,16 @@ const isTopOne = computed(() => {
   return props.ranking === '1'
 })
 
-// 头像容器高度
+// 点击奖品
-const avatarContainerHeight = computed(() => {
+const clickReward = (item) => {
-  switch (props.ranking) {
+  topReward.value = item // 展示奖品赋值
-    case '1':
+  topRewardShow.value = true // 显示奖品
-      return '70%'
+}
-    case '2':
-      return '60%'
-    case '3':
-      return '60%'
-    default:
-      return '60%'
-  }
-})
-
-// 头像宽度
-const avatarWidth = computed(() => {
-  switch (props.ranking) {
-    case '1':
-      return '43%'
-    case '2':
-      return '77%'
-    case '3':
-      return '77%'
-    default:
-      return '77%'
-  }
-})
-
-// 底部信息区域高度
-const bottomSectionHeight = computed(() => {
-  switch (props.ranking) {
-    case '1':
-      return '35%'
-    case '2':
-      return '39%'
-    case '3':
-      return '40%'
-    default:
-      return '39%'
-  }
-})
-
-// 名称宽度
-const nameValueWidth = computed(() => {
-  switch (props.ranking) {
-    case '1':
-      return '30%'
-    case '2':
-      return '60%'
-    case '3':
-      return '60%'
-    default:
-      return '60%'
-  }
-})
-
-// 名称高度
-const nameValueHeight = computed(() => {
-  switch (props.ranking) {
-    case '1':
-      return '25%'
-    case '2':
-      return '25%'
-    case '3':
-      return '25%'
-    default:
-      return '25%'
-  }
-})
-
-// 贡献值宽度
-const distributionValueWidth = computed(() => {
-  switch (props.ranking) {
-    case '1':
-      return '25%'
-    case '2':
-      return '40%'
-    case '3':
-      return '40%'
-    default:
-      return '40%'
-  }
-})
-
-// 贡献值宽度
-const distributionValueHeight = computed(() => {
-  switch (props.ranking) {
-    case '1':
-      return '35%'
-    case '2':
-      return '20%'
-    case '3':
-      return '20%'
-    default:
-      return '20%'
-  }
-})
-
-// 金币图标宽度
-const coinWidth = computed(() => {
-  switch (props.ranking) {
-    case '1':
-      return '1em'
-    case '2':
-      return '0.9em'
-    case '3':
-      return '0.9em'
-    default:
-      return '0.9em'
-  }
-})
 </script>
 
 <style lang="scss" scoped>
 * {
-  color: black;
+  color: #fff;
 }
 
 .showText {
@@ -259,6 +376,54 @@ const coinWidth = computed(() => {
   font-size: 0.6em;
 }
 
+.scroll-wrapper {
+  display: flex;
+  width: fit-content;
+}
+
+.scroll-content {
+  display: flex;
+  align-items: center;
+  gap: 2vw;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scroll-right {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(50%);
+  }
+}
+
+[dir='ltr'] .scroll-content {
+  margin-left: 4vw;
+}
+
+[dir='rtl'] .scroll-content {
+  margin-left: auto;
+  margin-right: 4vw;
+}
+
+[dir='ltr'] .scroll-wrapper {
+  animation: scroll-left 8s linear infinite;
+  will-change: transform;
+}
+
+[dir='rtl'] .scroll-wrapper {
+  animation: scroll-right 8s linear infinite;
+  will-change: transform;
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;

src/views/Ranking/Couple/index.vue

@@ -34,19 +34,80 @@
         </div>
 
         <!-- 历史榜首 -->
-        <!-- <itemCenter
+        <itemCenter
           :imgUrl="imageUrl(getImgName('historyTopBg'))"
           :contentStyle="`inset: 30vw 9vw 27vw;`"
         >
-          <div style="width: 100%; height: 100%; overflow-x: auto">
+          <div
-            <div style="padding: 0 16vw; display: flex; gap: 4vw">
+            style="width: 100%; display: flex; justify-content: space-between; align-items: center"
-              <div v-for="value in 4">
+          >
-                <img
+            <!-- 上一个奖品 -->
-            v-smart-img :src="imageUrl('topCoupleFrame')" alt="" style="width: 50vw" />
+            <div
-              </div>
+              style="
+                width: 8vw;
+                align-self: stretch;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <img
+                v-smart-img
+                v-show="result.length > 1 && resultShowIndex > 0"
+                :src="imageUrl('resultBack')"
+                alt=""
+                style="display: block; width: 80%; object-fit: cover"
+                @click="resultShowIndex--"
+              />
+            </div>
+            <!-- 奖品 -->
+            <img
+              :src="result[resultShowIndex]?.prize?.prizeImage"
+              alt=""
+              width="50%"
+              style="display: block"
+            />
+            <!-- 下一个奖品 -->
+            <div
+              style="
+                width: 8vw;
+                align-self: stretch;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <img
+                v-smart-img
+                v-show="result.length > 1 && resultShowIndex + 1 < result.length"
+                :src="imageUrl('resultNext')"
+                alt=""
+                style="display: block; width: 80%; object-fit: cover"
+                @click="resultShowIndex++"
+              />
             </div>
           </div>
-        </itemCenter> -->
+
+          <!-- 奖品说明 -->
+          <div
+            style="
+              width: 100%;
+              height: 5vw;
+              text-align: center;
+              font-size: 0.9em;
+              font-weight: 590;
+              background: linear-gradient(0deg, #f3b700 0%, #ffeec6 100%);
+              background-clip: text;
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              position: relative;
+            "
+          >
+            You Get {{ result[resultShowIndex]?.prize?.prizeName }}
+          </div>
+        </itemCenter>
 
         <!-- 栏目按钮 -->
         <div
@@ -60,20 +121,41 @@
             gap: 10vw;
           "
         >
-          <img
+          <!-- 排行榜栏目按钮 -->
-            v-smart-img
+          <div style="flex: 1; min-width: 0" @click="changeTag('ranking')">
-            :src="imageUrl(getImgName('rankingBt'))"
+            <img
-            alt=""
+              v-show="RankingShow"
-            style="flex: 1; min-width: 0; display: block; object-fit: cover"
+              v-smart-img
-            @click="changeTag('ranking')"
+              :src="imageUrl(getImgName('rankingBtActive'))"
-          />
+              alt=""
-          <img
+              style="width: 100%; display: block; object-fit: cover"
-            v-smart-img
+            />
-            :src="imageUrl(getImgName('gamePlayBt'))"
+            <img
-            alt=""
+              v-show="!RankingShow"
-            style="flex: 1; min-width: 0; display: block; object-fit: cover"
+              v-smart-img
-            @click="changeTag('gamePlay')"
+              :src="imageUrl(getImgName('rankingBt'))"
-          />
+              alt=""
+              style="width: 100%; display: block; object-fit: cover"
+            />
+          </div>
+
+          <!-- 游戏栏目按钮 -->
+          <div style="flex: 1; min-width: 0" @click="changeTag('gamePlay')">
+            <img
+              v-show="GamePlayShow"
+              v-smart-img
+              :src="imageUrl(getImgName('gamePlayBtActive'))"
+              alt=""
+              style="width: 100%; display: block; object-fit: cover"
+            />
+            <img
+              v-show="!GamePlayShow"
+              v-smart-img
+              :src="imageUrl(getImgName('gamePlayBt'))"
+              alt=""
+              style="width: 100%; display: block; object-fit: cover"
+            />
+          </div>
         </div>
 
         <!-- 排行榜标签页 -->
@@ -83,13 +165,132 @@
         <GamePlay v-show="GamePlayShow" />
       </div>
 
+      <!-- 我的排名占位 -->
+      <div v-show="RankingShow" style="height: 25vw"></div>
+
+      <!-- 我的排名 -->
+      <div v-show="RankingShow" style="position: fixed; bottom: 0; z-index: 2">
+        <!-- 有伴侣和排名 -->
+        <itemCenter
+          v-if="myRanking?.cpUserId != ''"
+          style="position: fixed; bottom: 0; z-index: 2"
+          :imgUrl="imageUrl('myRankingBg')"
+          :contentStyle="`padding: 0 5%;justify-content: flex-start;`"
+        >
+          <!-- 排名 -->
+          <div style="width: 10vw; display: flex; justify-content: center; align-items: center">
+            <img
+              v-for="(digit, index) in getRankDigits(myRanking.rank)"
+              :src="getDigitImageUrl(digit)"
+              style="display: block; width: 3vw; object-fit: cover"
+            />
+          </div>
+
+          <!-- 头像 -->
+          <div style="width: 36vw">
+            <div
+              style="
+                width: 100%;
+                padding: 3vw 5vw;
+                height: 80%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              "
+            >
+              <!-- 情侣1头像 -->
+              <img
+                :src="myRanking.userAvatar"
+                alt=""
+                style="
+                  display: block;
+                  min-width: 0;
+                  width: 12vw;
+                  object-fit: cover;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                  border: 1px solid #fefa9f;
+                "
+                @error="handleAvatarImageError"
+              />
+              <!-- 情侣2头像 -->
+              <img
+                :src="myRanking.cpUserAvatar"
+                alt=""
+                style="
+                  display: block;
+                  min-width: 0;
+                  width: 12vw;
+                  object-fit: cover;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                  border: 1px solid #fefa9f;
+                "
+                @error="handleAvatarImageError"
+              />
+            </div>
+          </div>
+
+          <!-- 名称 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              gap: 1vw;
+            "
+          >
+            <div
+              style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+            >
+              {{ myRanking.userNickname || '' }}
+            </div>
+            <div
+              style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+            >
+              {{ myRanking.cpUserNickname || '' }}
+            </div>
+          </div>
+
+          <!-- 贡献 -->
+          <div style="width: auto; min-width: 0; display: flex; align-items: center">
+            <img
+              :src="imageUrl('distribution')"
+              alt=""
+              style="width: 10vw; display: block; object-fit: cover"
+            />
+            <div style="font-weight: 700">{{ myRanking.total || '0' }}</div>
+          </div>
+        </itemCenter>
+
+        <!-- 无伴侣 -->
+        <div
+          v-else
+          style="
+            border-radius: 16px 16px 0 0;
+            background:
+              radial-gradient(
+                171.8% 117.34% at 34.23% 104.78%,
+                rgba(255, 188, 221, 0) 0%,
+                #ffbcdd 100%
+              ),
+              linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
+              linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
+
+            padding: 24px 12px 0 12px;
+          "
+        ></div>
+      </div>
+
       <!-- 弹窗遮罩层 -->
       <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
         <!-- 我的伴侣弹窗 -->
         <div v-show="myCoupleShow" style="position: fixed; bottom: 0; width: 100%">
           <div
             style="
-              border-radius: 16px 16px 0 0;
               border-radius: 16px 16px 0 0;
               background:
                 radial-gradient(
@@ -877,6 +1078,83 @@
             </div>
           </div>
         </div>
+
+        <!-- 前三名奖励展示 -->
+        <div
+          v-show="topRewardShow"
+          style="
+            position: relative;
+
+            margin: 10vh 4vw 5vh;
+            border-radius: 12px;
+            background:
+              radial-gradient(
+                171.8% 117.34% at 34.23% 104.78%,
+                rgba(255, 188, 221, 0) 0%,
+                #ffbcdd 100%
+              ),
+              linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
+              linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
+            padding: 20px;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 2vw;
+          "
+          @click.stop
+        >
+          <!-- 关闭按钮 -->
+          <div
+            style="position: absolute; top: 2vw; right: 5vw; color: #ff4668; font-size: 3em"
+            @click="closedPopup"
+          >
+            x
+          </div>
+
+          <!-- 奖品展示 -->
+          <img
+            :src="topReward.cover"
+            alt=""
+            style="width: 60%; display: block; object-fit: cover"
+          />
+
+          <!-- 时长或数量 -->
+          <div
+            style="
+              font-size: 2em;
+              font-weight: 700;
+              background: linear-gradient(
+                180deg,
+                #ffdf6b 31.61%,
+                #ffe562 36.73%,
+                #fff 52.37%,
+                #ffe562 58.67%,
+                #ffa615 72.2%
+              );
+              background-clip: text;
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            "
+          >
+            {{ formatRewardDisplay(topReward.type, topReward) }}
+          </div>
+        </div>
+
+        <!-- help弹窗 -->
+        <div v-show="helpShow" style="margin: 10vh 0 5vh" @click.stop>
+          <itemCenter
+            :imgUrl="imageUrl(getImgName('helpBg'))"
+            :contentStyle="`inset: 30vw 18vw 28vw;overflow-y: auto;display:block;`"
+          >
+            <img
+              v-smart-img
+              :src="imageUrl(getImgName('helpInfo'))"
+              alt=""
+              style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
+            />
+          </itemCenter>
+        </div>
       </maskLayer>
     </div>
   </div>
@@ -897,6 +1175,7 @@ import { showError, showSuccess } from '@/utils/toast.js'
 import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
 import { useCoupleStore } from '@/stores/couple'
 import { storeToRefs } from 'pinia'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
 
 import {
   apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
@@ -922,6 +1201,13 @@ const route = useRoute()
 const coupleStore = useCoupleStore()
 
 const {
+  helpShow, // 帮助弹窗
+
+  topRewardShow, // 前三名奖励展示
+  topReward, // 前三名奖励项
+
+  myRanking, // 我的排名
+
   crystal, // 水晶数量
   debris, // 碎片数量
 
@@ -958,6 +1244,19 @@ const getImgName = (filename) => {
   return currentLangType.value === 'ar' ? `${filename}_ar` : filename
 }
 
+// 获取排名数字的各个位数
+const getRankDigits = (rank) => {
+  return String(rank).split('')
+}
+
+// 获取数字图片URL
+const getDigitImageUrl = (digit) => {
+  if (/^[0-9]$/.test(digit)) {
+    return imageUrl(`num${digit}`) // 假设数字图片在相同目录下
+  }
+  return ''
+}
+
 const barrageList = ref([]) // 弹幕数据
 
 const RankingShow = ref(true) // 排行榜模块展示
@@ -1019,6 +1318,8 @@ const isPublic = ref(false) // 是否公开
 const confirmShow = ref(false) // 二次确认发送弹窗
 const maskLayerShow = computed(() => {
   return (
+    helpShow.value ||
+    topRewardShow.value ||
     lastLetterShow.value ||
     myCoupleShow.value ||
     writeLetterShow.value ||
@@ -1063,6 +1364,8 @@ const showPopup = (type) => {
 
 // 关闭弹窗
 const closedPopup = () => {
+  helpShow.value = false
+  topRewardShow.value = false
   lastLetterShow.value = false
   myCoupleShow.value = false
   writeLetterShow.value = false