aslan-h5/src/views/Activities/SpringFestival/RankingReward.vue

<template>
  <div style="display: flex; flex-direction: column; gap: 2vw">
    <itemCenter
      :style="{ minHeight: index <= 2 ? '128vw' : '98.39vw' }"
      v-for="(rewardsTop, index) in rankingRewards"
      style=""
      :imgUrl="imageUrl(`rankingRewardTop${index + 1}Bg`)"
      :contentStyle="rewardContentLayer(index)"
    >
      <!-- 奖励列表 -->
      <div
        v-for="(reward, rewardIndex) in rewardsTop.propsGroup.activityRewardProps"
        :key="rewardIndex"
        style="
          width: 100%;
          align-self: stretch;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <!-- 奖品图 -->
        <div
          style="
            width: 80%;
            height: 75%;
            padding: 6vw 0 2vw;
            min-width: 0;
            aspect-ratio: 1/1;

            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <!-- 奖励图片 -->
          <img
            :src="reward.cover || ''"
            alt=""
            style="display: block; min-width: 0; width: 80%; height: 100%; object-fit: contain"
            @error="(e) => handleRewardImageError(e, reward.type)"
          />
        </div>

        <!-- 数值 -->
        <div
          style="
            width: 80%;
            height: 5.5vw;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <div style="min-width: 0; font-size: 1em; font-weight: 590; color: #fff">
            {{ formatRewardDisplay(reward.type, reward) }}
          </div>
        </div>
      </div>
    </itemCenter>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { connectToApp } from '@/utils/appConnector.js'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { setDocumentDirection } from '@/locales/i18n'
import { viewUserInfo } from '@/utils/appBridge.js'
import { useLangStore } from '@/stores/lang'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { showError, showSuccess } from '@/utils/toast.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
import { useSpringFestival } from '@/stores/springFestival'
import { storeToRefs } from 'pinia'

import BackgroundLayer from '@/components/BackgroundLayer.vue'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'

// 预加载状态
const isLoading = ref(true)

const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()
const springFestivalStore = useSpringFestival()

const {
  // 抽奖模块
  lotteryRewards, // 抽奖奖池
  tickets, // 抽奖券数量
  userInfo, // 用户信息
  userIdentity, // 用户身份
  currentEarnings, // 当前收益
  taskList, // 任务列表

  // 抽奖排名模块
  lotteryRanking, // 抽奖排名
  addLotteryRanking, // 补充的抽奖排名
  myLotteryRanking, // 我的抽奖排名

  // 排行榜奖励模块
  rankingRewards, // 排名奖池

  // 充值排名模块
  rechargeRanking, // 充值排名
  addRechargeRanking, // 补充的充值排名
  myRechargeRanking, // 我的充值排名

  // 充值奖池模块
  myRechargeRecode, // 我的充值记录
  RechargeRewards, // 充值奖池

  resultShow,
  result, // 抽奖结果

  drawRecordShow,
  myRecords, // 我的抽奖记录

  receiveRecordShow,
  receiveRecord, // 领取抽奖券记录

  earningsHelpShow, // 收益help展示
  rechargeHelpShow, // 充值help展示
} = storeToRefs(springFestivalStore)

const langStore = useLangStore()
// 当前语言类型
const currentLangType = computed(() => {
  return langStore.selectedLang?.type || 'en'
})

// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)

// 根据语言获取图片名
const getImgName = (filename) => {
  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}

//充值奖励的内容样式
const rewardContentLayer = (index) => {
  let gridStyle = ''
  if (currentLangType.value == 'ar') {
    gridStyle = 'direction: ltr;'
  }
  if (index == 0) {
    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 27.5vw 7vw 14vw;${gridStyle}`
  } else if (index == 1 || index == 2) {
    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 27.5vw 7vw 44vw;${gridStyle}`
  } else if (index == 3) {
    return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 27.5vw 7vw 14vw;${gridStyle}`
  }
}

onMounted(() => {})

onUnmounted(() => {})
</script>

<style lang="scss" scoped>
* {
  color: #fff;
}

.fullPage {
  position: relative;
  background: #142c24;
}

.bg {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.background-overlay {
  position: absolute;
  inset: 236vw 0 0;
  background-image: var(--bg2-url);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  z-index: 0; /* 确保在.bg之下 */
}

/* 添加加载动画样式 */
.loading-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;
}

.scrollY::-webkit-scrollbar {
  display: none;
}

[dir='rtl'] .flipImg {
  transform: scaleX(-1);
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>