feat(春节活动页面): 排行榜页面完成

src/stores/springFestival.js

@@ -12,6 +12,7 @@ export const useSpringFestival = defineStore('springFestival', {
     taskList: [], // 任务列表
 
     // 抽奖排名模块
+    lotteryPageNo: 1, // 抽奖排名页码
     lotteryRanking: [], // 抽奖排名
     addLotteryRanking: [], // 补充的抽奖排名
     myLotteryRanking: {}, // 我的抽奖排名
@@ -20,6 +21,7 @@ export const useSpringFestival = defineStore('springFestival', {
     rankingRewards: {}, // 排名奖池
 
     // 充值排名模块
+    rechargePageNo: 1, // 充值排名页码
     rechargeRanking: [], // 充值排名
     addRechargeRanking: [], // 补充的充值排名
     myRechargeRanking: {}, // 我的充值排名

src/views/Activities/SpringFestival/Ranking.vue

@@ -1,5 +1,179 @@
 <template>
-  <div></div>
+  <div>
+    <!-- 前三名 -->
+    <div style="">
+      <!-- 第一 -->
+      <div style="display: flex; justify-content: center">
+        <TopUser
+          ranking="1"
+          :BorderImgUrl="imageUrl('top1Bg')"
+          :avatarUrl="RankingHasTop3[0].userAvatar"
+          :name="RankingHasTop3[0].userName"
+          :rankingType="rankingType"
+          :distributionValue="RankingHasTop3[0].amount"
+          style="width: 70%"
+          @click="viewUserInfo(RankingHasTop3[0].userId)"
+        />
+      </div>
+      <!-- 第二三 -->
+      <div
+        style="
+          position: relative;
+          z-index: 3;
+
+          display: flex;
+          justify-content: space-around;
+          pointer-events: none;
+        "
+      >
+        <div
+          style="pointer-events: auto; width: 42%"
+          @click.stop="viewUserInfo(RankingHasTop3[1].userId)"
+        >
+          <TopUser
+            ranking="2"
+            :BorderImgUrl="imageUrl('top2Bg')"
+            :avatarUrl="RankingHasTop3[1].userAvatar"
+            :name="RankingHasTop3[1].userName"
+            :rankingType="rankingType"
+            :distributionValue="RankingHasTop3[1].amount"
+            style="width: 100%"
+          />
+        </div>
+
+        <div
+          style="pointer-events: auto; width: 42%"
+          @click.stop="viewUserInfo(RankingHasTop3[2].userId)"
+        >
+          <TopUser
+            ranking="3"
+            :BorderImgUrl="imageUrl('top3Bg')"
+            :avatarUrl="RankingHasTop3[2].userAvatar"
+            :name="RankingHasTop3[2].userName"
+            :rankingType="rankingType"
+            :distributionValue="RankingHasTop3[2].amount"
+            style="width: 100%"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 第四名开始 -->
+    <div
+      v-if="showRanking.length > 0"
+      style="position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2vw"
+    >
+      <div
+        v-for="(listItem, index) in showRanking"
+        :key="listItem.userId"
+        style="padding: 0 2vw; display: flex; align-items: center; gap: 2vw"
+      >
+        <!-- 排名 -->
+        <itemCenter
+          style="width: 10vw"
+          :imgUrl="imageUrl('rankingNumBg')"
+          :contentStyle="``"
+          @click="viewUserInfo(listItem.userId)"
+        >
+          <div style="color: #ffe601; font-weight: 700">{{ listItem?.rank }}</div>
+        </itemCenter>
+
+        <itemCenter
+          :imgUrl="imageUrl('rankingItemBg')"
+          :contentStyle="`padding: 9.5vw 4vw 7vw 5vw;gap: 1vw`"
+          :lazy="true"
+          :immediate="index < 2"
+          @click="viewUserInfo(listItem.userId)"
+        >
+          <!-- 基本信息 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+
+              gap: 10vw;
+            "
+          >
+            <!-- 头像 -->
+            <img
+              v-smart-img
+              :src="listItem?.userAvatar || ''"
+              alt=""
+              style="
+                display: block;
+                width: 19vw;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                object-fit: cover;
+                z-index: -1;
+              "
+              @error="handleAvatarImageError"
+            />
+
+            <!-- 名称、id -->
+            <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
+              <div
+                style="
+                  color: #fff;
+                  font-weight: 860;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                "
+                class="UserNickname"
+              >
+                {{ listItem?.userName }}
+              </div>
+              <div style="color: #fff; font-weight: 590" class="UserNickname">
+                {{ $t('user_id_prefix') }} {{ listItem?.specialAccount || listItem?.account }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 贡献值 -->
+          <div
+            style="
+              width: auto;
+              min-width: 0;
+
+              display: flex;
+              align-items: center;
+            "
+          >
+            <div
+              v-if="rankingType == 'lottery'"
+              style="display: flex; justify-content: center; align-items: center"
+            >
+              <img
+                v-smart-img
+                src="/src/assets/icon/coin.png"
+                alt=""
+                style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
+              />
+              <div style="color: #ffe601; font-weight: 700" class="Textlittle">
+                {{ listItem?.amount || 0 }}
+              </div>
+            </div>
+
+            <div
+              v-if="rankingType == 'recharge'"
+              style="color: #fff; font-weight: 700"
+              class="UserNickname"
+            >
+              ${{ listItem?.amount }}
+            </div>
+          </div>
+        </itemCenter>
+      </div>
+    </div>
+
+    <!-- 触发加载功能 -->
+    <div ref="RankingLoadmore"></div>
+  </div>
 </template>
 
 <script setup>
@@ -17,10 +191,34 @@ import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHan
 import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
 import { useSpringFestival } from '@/stores/springFestival'
 import { storeToRefs } from 'pinia'
+import { useThrottle } from '@/utils/useDebounce'
+
+import {
+  ranklist, //获取排行榜
+  validActivity, // 获取有效活动
+  activityDetail, // 获取活动详情
+  myRecharge, // 获取充值记录
+  activityRewardConfigs, // 获取活动奖励配置列表
+  myTickets, // 获取剩余中奖券
+  myTotalDrawCount, // 获取我的累计抽奖次数
+  onceDraw, // 执行单次抽奖
+  multiDraw, // 执行连抽
+  drawRecords, // 获取中奖记录
+  ActTaskList, // 获取任务列表
+  rewardConfigsBadge, // 获取累计抽奖-徽章信息
+  receiveTickets, // 领取任务奖励
+  receiveRechargeReward, // 领取充值奖励
+  receiveRewardBadge, // 领取累计抽奖奖励-徽章
+  winnerHistory, //获取历史中奖用户
+  withdrawableAmount, //获取可提现金额
+  transferActivityDollar, // 转账活动美金
+  exchangeCoin, //兑换代币
+} from '@/api/lottery'
 
 import BackgroundLayer from '@/components/BackgroundLayer.vue'
 import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
+import TopUser from './components/topUser.vue'
 
 // 预加载状态
 const isLoading = ref(true)
@@ -40,6 +238,7 @@ const {
   taskList, // 任务列表
 
   // 抽奖排名模块
+  lotteryPageNo, // 抽奖排名页码
   lotteryRanking, // 抽奖排名
   addLotteryRanking, // 补充的抽奖排名
   myLotteryRanking, // 我的抽奖排名
@@ -48,6 +247,7 @@ const {
   rankingRewards, // 排名奖池
 
   // 充值排名模块
+  rechargePageNo, // 充值排名页码
   rechargeRanking, // 充值排名
   addRechargeRanking, // 补充的充值排名
   myRechargeRanking, // 我的充值排名
@@ -81,61 +281,113 @@ const getImgName = (filename) => {
   return currentLangType.value === 'ar' ? `filename_ar` : filename
 }
 
-// 打开弹窗
+const props = defineProps({
-const openPopup = (type) => {
+  rankingType: {
-  closedPopup(false) //先关闭其他弹窗，不清除抽奖结果
+    type: String,
-  switch (type) {
+    default: '',
-    case 'help':
+  },
-      helpShow.value = true
+})
-      break
+
-    default:
+// 完整排行榜
-      break
+const rankingTotal = computed(() => {
+  if (props.rankingType == 'lottery') {
+    return [...lotteryRanking.value, ...addLotteryRanking.value]
+  }
+  return [...rechargeRanking.value, ...addRechargeRanking.value]
+})
+// 处理排行榜小于3人时的情况
+const RankingHasTop3 = computed(() => {
+  let RankingTop3 = [...rankingTotal.value]
+  if (rankingTotal.value.length < 3) {
+    let addNullUser = Array.from({ length: 3 - rankingTotal.value.length }, () => ({
+      userAvatar: '',
+      userName: '',
+      amount: '',
+    }))
+    RankingTop3.push(...addNullUser)
+  }
+  return RankingTop3
+})
+
+// 展示用的榜单
+const showRanking = computed(() => {
+  return rankingTotal.value.filter((_, index) => index >= 3)
+  // return []
+})
+
+const RankingLoadmore = ref(null) //触底模块
+const rankingPageNo = ref(1) //分页页码
+
+//获取排行榜
+const getRanking = async () => {
+  let data = {
+    activityId: props.rankingType == 'lottery' ? '2005571533988298753' : '2005571533988298753',
+    pageNo: props.rankingType == 'lottery' ? lotteryPageNo.value : rechargePageNo.value,
+    pageSize: 20,
+  }
+  const resRanking = await ranklist(data)
+  if (resRanking.status && resRanking.body) {
+    if (props.rankingType == 'lottery') {
+      myLotteryRanking.value = resRanking.body?.currentUser // 我的抽奖排名
+    } else if (props.rankingType == 'recharge') {
+      myRechargeRanking.value = resRanking.body?.currentUser // 我的充值排名
+    }
+
+    if (resRanking.body.topList.length > 0) {
+      if (resRanking.body.topList.length == 20) {
+        if (props.rankingType == 'lottery') {
+          addLotteryRanking.value = []
+          lotteryRanking.value.push(...resRanking.body?.topList)
+          lotteryPageNo.value++
+        } else if (props.rankingType == 'recharge') {
+          addRechargeRanking.value = []
+          rechargeRanking.value.push(...resRanking.body?.topList)
+          rechargePageNo.value++
+        }
+      } else {
+        if (props.rankingType == 'lottery') {
+          addLotteryRanking.value = resRanking.body?.topList
+        } else if (props.rankingType == 'recharge') {
+          addRechargeRanking.value = resRanking.body?.topList
+        }
+      }
+    }
+  } else {
+    if (props.rankingType == 'lottery') {
+      myLotteryRanking.value = {}
+      lotteryRanking.value = []
+      addLotteryRanking.value = []
+      lotteryPageNo.value = 1
+    } else if (props.rankingType == 'recharge') {
+      myRechargeRanking.value = {}
+      rechargeRanking.value = []
+      addRechargeRanking.value = []
+      rechargePageNo.value = 1
+    }
   }
 }
 
-// 关闭弹窗
+// 触发节流获取排行榜
-const closedPopup = (clear = true) => {
+const debouceGetRanking = useThrottle(() => {
-  helpShow.value = false
+  getRanking() //加载新的排行榜项
-  // 清空数据
+}, 1000)
-  if (clear) {
-  }
-}
 
-// 刷新页面数据
+// IntersectionObserver配置
-const initData = async () => {
+const observer = new IntersectionObserver((entries) => {
-  await Promise.all([])
+  entries.forEach((entry) => {
-}
+    if (entry.intersectionRatio > 0 && rankingTotal.value.length != 0) {
-
+      console.log('触发RankingLoadmore加载')
-// 预加载关键图片
+      debouceGetRanking()
-const preloadCriticalImages = async () => {
+    }
-  const criticalImages = []
-
-  await preloadImages(criticalImages)
-}
-
-// 完成预加载
-const completePreloading = async () => {
-  try {
-    // 执行所有初始化操作
-    await Promise.all([initData(), preloadCriticalImages()])
-  } catch (error) {
-    console.error('预加载过程中发生错误:', error)
-  } finally {
-    // 无论成功或失败都结束加载状态
-    isLoading.value = false
-  }
-}
-
-// 使用工具函数连接APP
-const connectToAppHandler = async () => {
-  await connectToApp(() => {
-    // 连接成功回调
-    completePreloading() // 完成预加载
   })
-}
+})
 
 onMounted(() => {
-  // connectToAppHandler()
+  // 监听加载模块
+  if (RankingLoadmore.value) {
+    console.log('监控加载模块')
+    observer.observe(RankingLoadmore.value)
+  }
 })
 
 onUnmounted(() => {})

src/views/Activities/SpringFestival/components/topUser.vue

@@ -1,356 +1,151 @@
 <template>
   <div style="width: 100%">
-    <itemCenter :imgUrl="BorderImgUrl" :flip="true" :contentStyle="`display:block;`">
+    <div style="position: relative">
-      <!-- 第一名 -->
+      <img
-      <div v-if="isTopOne" style="width: 98vw; height: 80%; position: relative">
+        v-smart-img
-        <!-- 查看个人信息按钮 -->
+        :src="BorderImgUrl"
-        <div style="position: absolute; z-index: 2; inset: 0; display: flex">
+        alt=""
-          <!-- 情侣1 -->
+        width="100%"
-          <div
+        style="display: block; position: relative; z-index: 2"
-            style="flex: 1; min-width: 0; align-self: stretch"
+      />
-            @click="viewUserInfo(rankingItem.userId)"
+      <!-- 头像 -->
-          ></div>
+      <div
-          <!-- 情侣1 -->
+        style="
-          <div
+          position: absolute;
-            style="flex: 1; min-width: 0; align-self: stretch"
+          top: 0;
-            @click="viewUserInfo(rankingItem.cpUserId)"
+          left: 0;
-          ></div>
+          right: 0;
-        </div>
+          z-index: 1;
-
+          display: flex;
-        <!-- 头像 -->
+          justify-content: center;
-        <div
+          align-items: center;
-          style="
+        "
-            position: absolute;
+        :style="{ height: avatarContainerHeight }"
-            z-index: -1;
+      >
-            top: 12vw;
+        <div :style="{ width: avatarWidth }">
-            left: 0;
-            width: 100%;
-            height: 25vw;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 14vw;
-          "
-        >
-          <!-- 情侣1头像 -->
           <img
-            :src="rankingItem.userAvatar"
+            v-smart-img
+            :src="avatarUrl || ''"
             alt=""
-            style="
+            width="100%"
-              display: block;
+            style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
-              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: 22vw"></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;
-          "
-        >
-          <div style="width: 76vw; display: flex; align-items: center; gap: 2vw">
-            <!-- 情侣1名称 -->
-            <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.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 v-else style="height: 65%; padding: 0 7%; display: flex; align-items: center">
+      <div
-        <!-- 排名 -->
+        style="
-        <itemCenter
+          position: absolute;
-          style="width: 9vw"
+          bottom: 0;
-          class="rankingBg"
+          left: 0;
-          :imgUrl="imageUrl(`top${ranking}RankingBg`)"
+          right: 0;
-          :flip="true"
+          z-index: 3;
-          :contentStyle="``"
+          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,
+          }"
         >
-          <img :src="imageUrl(`num${ranking}`)" alt="" style="width: 3vw; display: block" />
+          <div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
-        </itemCenter>
+            {{ name }}
-
-        <!-- 头像 -->
-        <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>
+        </div>
+        <div
+          style="
+            padding: 1px 2px;
 
-          <!-- 内容 -->
+            display: flex;
-          <itemCenter
+            justify-content: center;
-            style="width: 100%; z-index: 1"
+            align-items: center;
-            :imgUrl="imageUrl(`top${ranking}Frame`)"
+          "
-            :contentStyle="`z-index: -1;`"
+          :style="{
+            width: distributionValueWidth,
+            height: distributionValueHeight,
+          }"
+        >
+          <div
+            v-if="rankingType == 'lottery'"
+            style="display: flex; justify-content: center; align-items: center"
           >
+            <img
+              v-smart-img
+              src="/src/assets/icon/coin.png"
+              alt=""
+              style="display: block"
+              :style="{ width: coinWidth }"
+            />
             <div
-              style="
+              style="font-weight: 590"
-                width: 100%;
+              class="showText"
-                padding: 3vw 5vw;
+              :class="isTopOne ? 'top1Text' : 'text'"
-                height: 80%;
+              :style="{
-                display: flex;
+                color: ranking == '1' ? `#FFE601` : '#FFF',
-                justify-content: space-between;
+              }"
-                align-items: center;
-              "
             >
-              <!-- 情侣1头像 -->
+              {{ distributionValue }}
-              <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">
+          <div
-            {{ rankingItem.cpUserNickname || '' }}
+            v-if="rankingType == 'recharge'"
-          </div>
+            style="font-weight: 590"
-        </div>
+            class="showText"
-
+            :class="isTopOne ? 'top1Text' : 'text'"
-        <!-- 贡献 -->
+            :style="{
-        <div style="width: auto; min-width: 0; display: flex; align-items: center">
+              color: ranking == '1' ? `#FFE601` : '#FFF',
-          <img
+            }"
-            :src="imageUrl('distribution')"
+          >
-            alt=""
+            ${{ distributionValue }}
-            style="width: 10vw; display: block; object-fit: cover"
-          />
-          <div style="font-weight: 700">{{ rankingItem.total || '0' }}</div>
-        </div>
-      </div>
-
-      <!-- 奖励 -->
-      <div class="reward-wrapper">
-        <div style="height: 100%; display: flex; align-items: center; overflow: hidden">
-          <!-- 滚动容器 -->
-          <div class="scroll-wrapper">
-            <!-- 2套内容 -->
-            <div class="scroll-content" v-for="value in 2">
-              <div
-                v-for="(item, index) in rewards.activityRewardProps"
-                :key="index"
-                style="align-self: stretch; display: flex; align-items: center; padding: 0 1vw"
-                @click="clickReward(item)"
-              >
-                <!-- 预览图 -->
-                <img
-                  v-if="item.cover != ''"
-                  :src="item.cover"
-                  alt=""
-                  style="min-width: 0; display: block; width: 10vw; object-fit: cover"
-                />
-                <div style="min-width: 0; color: #fff; white-space: nowrap">
-                  {{ formatRewardDisplay(item.type, item) }}
-                </div>
-                ，
-              </div>
-            </div>
           </div>
         </div>
       </div>
-    </itemCenter>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { handleAvatarImageError } from '@/utils/imageHandler.js'
-import { useRoute, useRouter } from 'vue-router'
+import { computed } from 'vue'
-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: '0',
+    default: '',
   },
 
-  rankingItem: {
+  avatarUrl: {
-    type: Object,
+    type: String,
-    default: () => ({}),
+    default: '',
   },
 
-  rewards: {
+  BorderImgUrl: {
-    type: Object,
+    type: String,
-    default: () => ({}),
+    required: true,
   },
-})
 
-const BorderImgUrl = computed(() => {
+  name: {
-  switch (props.ranking) {
+    type: String,
-    case '1':
+    default: '',
-      return imageUrl('top1')
+  },
-    case '2':
+
-      return imageUrl('top2-3')
+  rankingType: {
-    case '3':
+    type: String,
-      return imageUrl('top2-3')
+    default: '',
-    default:
+  },
-      return imageUrl('top2-3')
+
-  }
+  distributionValue: {
+    type: String,
+    default: '',
+  },
 })
 
 // 是否为第一名
@@ -358,16 +153,122 @@ const isTopOne = computed(() => {
   return props.ranking === '1'
 })
 
-// 点击奖品
+// 头像容器高度
-const clickReward = (item) => {
+const avatarContainerHeight = computed(() => {
-  topReward.value = item // 展示奖品赋值
+  switch (props.ranking) {
-  topRewardShow.value = true // 显示奖品
+    case '1':
-}
+      return '85%'
+    case '2':
+      return '78%'
+    case '3':
+      return '78%'
+    default:
+      return '78%'
+  }
+})
+
+// 头像宽度
+const avatarWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '35%'
+    case '2':
+      return '40%'
+    case '3':
+      return '38%'
+    default:
+      return '38%'
+  }
+})
+
+// 底部信息区域高度
+const bottomSectionHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '27%'
+    case '2':
+      return '29%'
+    case '3':
+      return '29%'
+    default:
+      return '29%'
+  }
+})
+
+// 名称宽度
+const nameValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '30%'
+    case '2':
+      return '40%'
+    case '3':
+      return '37%'
+    default:
+      return '40%'
+  }
+})
+
+// 名称高度
+const nameValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '25%'
+    case '2':
+      return '38%'
+    case '3':
+      return '38%'
+    default:
+      return '38%'
+  }
+})
+
+// 贡献值宽度
+const distributionValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '23%'
+    case '2':
+      return '35%'
+    case '3':
+      return '32%'
+    default:
+      return '40%'
+  }
+})
+
+// 贡献值高度
+const distributionValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '26%'
+    case '2':
+      return '38%'
+    case '3':
+      return '38%'
+    default:
+      return '38%'
+  }
+})
+
+// 金币图标宽度
+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: #fff;
+  color: black;
 }
 
 .showText {
@@ -386,66 +287,6 @@ const clickReward = (item) => {
   font-size: 0.6em;
 }
 
-.reward-wrapper {
-  position: absolute;
-  bottom: 0;
-  left: 15vw;
-  right: 4vw;
-  height: 13.5vw;
-}
-
-[dir='rtl'] .reward-wrapper {
-  left: 4vw;
-  right: 15vw;
-}
-
-.scroll-wrapper {
-  display: flex;
-  width: fit-content;
-}
-
-.scroll-content {
-  display: flex;
-  align-items: center;
-}
-
-@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/Activities/SpringFestival/index.vue

@@ -170,7 +170,7 @@
           <!-- 任务模块 -->
           <Task v-show="TaskShow" :activity="lotteryRewards" />
           <!-- 抽奖排名模块 -->
-          <Ranking v-show="lotteryRankingShow" TagType="Ranking" />
+          <Ranking v-show="lotteryRankingShow" rankingType="lottery" />
           <!-- 抽奖奖励模块 -->
           <RankingReward v-show="lotteryRewardShow" />
         </div>
@@ -218,7 +218,7 @@
           </div>
 
           <!-- 充值排名模块 -->
-          <Ranking v-show="rechargeRankingShow" TagType="recharge" />
+          <Ranking v-show="rechargeRankingShow" rankingType="recharge" />
           <!-- 充值奖励模块 -->
           <RechargeReward v-show="rechargeRewardShow" />
         </div>
@@ -232,7 +232,7 @@
         v-show="RankingShow"
         style="position: fixed; bottom: 0; z-index: 2"
         :imgUrl="imageUrl('myRankingBg')"
-        :contentStyle="`padding: 2vw 8vw 0`"
+        :contentStyle="`padding: 0 5vw`"
       >
         <!-- 基本信息 -->
         <div
@@ -248,27 +248,41 @@
           "
         >
           <!-- 排名 -->
-          <div style="color: #ffe601; font-weight: 700">
+          <itemCenter
-            {{ myRanking?.rank || 999 }}
+            style="width: 10vw"
-          </div>
+            :imgUrl="imageUrl('rankingNumBg')"
+            :contentStyle="``"
+            @click="viewUserInfo(listItem.userId)"
+          >
+            <div style="color: #ffe601; font-weight: 700">{{ myRanking?.rank || 999 }}</div>
+          </itemCenter>
 
           <!-- 头像 -->
-          <img
+          <itemCenter
-            v-smart-img
+            style="width: 20vw; z-index: 1"
-            :src="myRanking?.userAvatar || ''"
+            :imgUrl="imageUrl('userFrame')"
-            alt=""
+            :contentStyle="`top:2vw`"
-            style="
+          >
-              display: block;
+            <img
-              width: 4em;
+              v-smart-img
-              aspect-ratio: 1/1;
+              :src="myRanking?.userAvatar || ''"
-              border-radius: 50%;
+              alt=""
-              object-fit: cover;
+              style="
-            "
+                position: relative;
-            @error="handleAvatarImageError"
+                z-index: -1;
-          />
+                display: block;
+                width: 13vw;
+                aspect-ratio: 1/1;
+                border-radius: 50%;
+                object-fit: cover;
+              "
+              @error="handleAvatarImageError"
+            />
+          </itemCenter>
 
-          <!-- 名称 -->
+          <!-- 名称、id -->
           <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
+            <!-- 名称 -->
             <div
               style="
                 color: #fff;
@@ -281,6 +295,12 @@
             >
               {{ myRanking?.userName }}
             </div>
+
+            <!-- ID -->
+            <div style="color: #fff; font-weight: 590" class="Textlittle">
+              {{ $t('user_id_prefix') }}
+              {{ myRanking?.specialAccount || myRanking?.account }}
+            </div>
           </div>
         </div>
 
@@ -294,7 +314,24 @@
             align-items: center;
           "
         >
-          <div style="color: #fff; font-weight: 700">${{ myRanking?.amount || 0 }}</div>
+          <div
+            v-if="GamePlayShow && lotteryRankingShow"
+            style="display: flex; justify-content: center; align-items: center"
+          >
+            <img
+              v-smart-img
+              src="/src/assets/icon/coin.png"
+              alt=""
+              style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
+            />
+            <div style="color: #ffe601; font-weight: 700" class="Textlittle">
+              {{ myRanking?.amount || 0 }}
+            </div>
+          </div>
+
+          <div v-if="RechargeShow && rechargeRankingShow" style="color: #fff; font-weight: 700">
+            ${{ myRanking?.amount || 0 }}
+          </div>
         </div>
       </itemCenter>
 
@@ -526,6 +563,7 @@ import {
   apiGetUserFragmentBackpack, // 获取用户碎片背包
 } from '@/api/couple.js'
 import {
+  ranklist, //获取排行榜
   withdrawableAmount, //获取可提现金额
 } from '@/api/lottery'
 
@@ -553,6 +591,7 @@ const {
   taskList, // 任务列表
 
   // 抽奖排名模块
+  lotteryPageNo, // 抽奖排名页码
   lotteryRanking, // 抽奖排名
   addLotteryRanking, // 补充的抽奖排名
   myLotteryRanking, // 我的抽奖排名
@@ -561,6 +600,7 @@ const {
   rankingRewards, // 排名奖池
 
   // 充值排名模块
+  rechargePageNo, // 充值排名页码
   rechargeRanking, // 充值排名
   addRechargeRanking, // 补充的充值排名
   myRechargeRanking, // 我的充值排名
@@ -617,6 +657,7 @@ const RankingShow = computed(() => {
   )
 })
 
+// 我的排名
 const myRanking = computed(() => {
   if (RankingShow.value) {
     if (GamePlayShow.value) {
@@ -853,6 +894,55 @@ const clearPayee = () => {
   clearSelectedPayee()
 }
 
+//获取排行榜
+const getRanking = async (rankingType = 'lottery') => {
+  let data = {
+    activityId: rankingType == 'lottery' ? '2005571533988298753' : '2005571533988298753',
+    pageNo: rankingType == 'lottery' ? lotteryPageNo.value : rechargePageNo.value,
+    pageSize: 20,
+  }
+  const resRanking = await ranklist(data)
+  if (resRanking.status && resRanking.body) {
+    if (rankingType == 'lottery') {
+      myLotteryRanking.value = resRanking.body?.currentUser // 我的抽奖排名
+    } else if (rankingType == 'recharge') {
+      myRechargeRanking.value = resRanking.body?.currentUser // 我的充值排名
+    }
+
+    if (resRanking.body.topList.length > 0) {
+      if (resRanking.body.topList.length == 20) {
+        if (rankingType == 'lottery') {
+          addLotteryRanking.value = []
+          lotteryRanking.value.push(...resRanking.body?.topList)
+          lotteryPageNo.value++
+        } else if (rankingType == 'recharge') {
+          addRechargeRanking.value = []
+          rechargeRanking.value.push(...resRanking.body?.topList)
+          rechargePageNo.value++
+        }
+      } else {
+        if (rankingType == 'lottery') {
+          addLotteryRanking.value = resRanking.body?.topList
+        } else if (rankingType == 'recharge') {
+          addRechargeRanking.value = resRanking.body?.topList
+        }
+      }
+    }
+  } else {
+    if (rankingType == 'lottery') {
+      myLotteryRanking.value = {}
+      lotteryRanking.value = []
+      addLotteryRanking.value = []
+      lotteryPageNo.value = 1
+    } else if (rankingType == 'recharge') {
+      myRechargeRanking.value = {}
+      rechargeRanking.value = []
+      addRechargeRanking.value = []
+      rechargePageNo.value = 1
+    }
+  }
+}
+
 // 页面初始化数据
 const initData = async () => {
   await Promise.all([
@@ -861,6 +951,9 @@ const initData = async () => {
     getUserInfo(), //获取用户信息
     getDrawableAmount(), //获取可提现金额
     initializePayee(), //获取收款人信息
+
+    getRanking('lottery'), // 获取抽奖排行榜
+    getRanking('recharge'), // 获取充值排行榜
   ])
 }