684 lines
20 KiB
Vue
684 lines
20 KiB
Vue
<!-- src/views/Activities/heroesDay/index.vue -->
|
||
<template>
|
||
<div class="fullPage">
|
||
<div class="bg">
|
||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||
|
||
<!-- 按钮 -->
|
||
<div style="margin-top: 90vw; display: flex; justify-content: flex-end; align-items: center">
|
||
<!-- 帮助按钮 -->
|
||
<img
|
||
v-smart-img
|
||
src="../../../../assets/icon/helpAct.png"
|
||
alt=""
|
||
style="display: block; position: relative; width: 10%; margin-right: 5%"
|
||
@click="maskLayerShow = true"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 倒计时 -->
|
||
<div style="display: flex; justify-content: center; margin-top: 2vw">
|
||
<div style="width: 20%">
|
||
<itemCenter :imgUrl="images.timeBg">
|
||
<div class="timeText" style="">{{ Days }}D</div>
|
||
</itemCenter>
|
||
</div>
|
||
<div class="timeText timeGap"></div>
|
||
<div style="width: 20%">
|
||
<itemCenter :imgUrl="images.timeBg">
|
||
<div class="timeText" style="">{{ Hours }}</div>
|
||
</itemCenter>
|
||
</div>
|
||
<div class="timeText timeGap">:</div>
|
||
<div style="width: 20%">
|
||
<itemCenter :imgUrl="images.timeBg">
|
||
<div class="timeText" style="">{{ Minutes }}</div>
|
||
</itemCenter>
|
||
</div>
|
||
<div class="timeText timeGap">:</div>
|
||
<div style="width: 20%">
|
||
<itemCenter :imgUrl="images.timeBg">
|
||
<div class="timeText" style="">{{ Second }}</div>
|
||
</itemCenter>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 每周礼物 -->
|
||
<div style="display: flex; justify-content: center; margin-top: 10px">
|
||
<itemCenter :imgUrl="images.giftsBg" :contentStyle="'paddingTop: 5%;'">
|
||
<div style="width: 85%; display: flex; justify-content: space-around; margin-top: 10%">
|
||
<div
|
||
v-for="(gift, index) in gifts"
|
||
:key="index"
|
||
style="width: 30%; display: flex; flex-direction: column"
|
||
>
|
||
<itemCenter :imgUrl="images.giftItemBg"
|
||
><img
|
||
v-smart-img
|
||
:src="gift.giftPhoto"
|
||
alt=""
|
||
width="70%"
|
||
style="display: block; object-fit: cover"
|
||
/></itemCenter>
|
||
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
|
||
<img
|
||
v-smart-img
|
||
src="/src/assets/icon/coin.png"
|
||
alt=""
|
||
style="display: block; width: 25%; aspect-ratio: 1/1"
|
||
/>
|
||
<div style="color: rgba(255, 255, 255, 1); font-weight: 590">
|
||
{{ gift.giftCandy }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
|
||
<!-- 切换按钮 -->
|
||
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
||
<img
|
||
v-smart-img
|
||
:src="rankingShow ? images.rankingBtActive : images.rankingBt"
|
||
alt=""
|
||
style="display: block; width: 45%"
|
||
@click="rankingShow = true"
|
||
/>
|
||
<img
|
||
v-smart-img
|
||
:src="!rankingShow ? images.rewardBtActive : images.rewardsBt"
|
||
alt=""
|
||
style="display: block; width: 45%"
|
||
@click="rankingShow = false"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 展示内容 -->
|
||
<div>
|
||
<!-- Ranking -->
|
||
<div v-show="rankingShow" style="position: relative; width: 100%">
|
||
<!-- 背景图 -->
|
||
<div class="ranking-bg"></div>
|
||
|
||
<div style="position: relative; z-index: 2">
|
||
<!-- 前三名 -->
|
||
<itemCenter
|
||
:imgUrl="images.RankingMain"
|
||
:contentStyle="`padding: 28% 5% 0;flex-direction: column;`"
|
||
>
|
||
<div>
|
||
<!-- 第一 -->
|
||
<div style="display: flex; justify-content: center">
|
||
<TopUser
|
||
:BorderImgUrl="images.topOne"
|
||
:avatarUrl="RankingHasTop3[0].avatar"
|
||
:name="RankingHasTop3[0].nickname"
|
||
:distributionValue="RankingHasTop3[0].quantity"
|
||
style="width: 60%"
|
||
@click="viewUserInfo(RankingHasTop3[0].userId)"
|
||
/>
|
||
</div>
|
||
<!-- 第二三 -->
|
||
<div style="display: flex; justify-content: space-between; margin-top: -35%">
|
||
<TopUser
|
||
:isTopOne="false"
|
||
ranking="2"
|
||
:BorderImgUrl="images.topTwo"
|
||
:avatarUrl="RankingHasTop3[1].avatar"
|
||
:name="RankingHasTop3[1].nickname"
|
||
:distributionValue="RankingHasTop3[1].quantity"
|
||
style="width: 35%"
|
||
@click="viewUserInfo(RankingHasTop3[1].userId)"
|
||
/>
|
||
<TopUser
|
||
:isTopOne="false"
|
||
ranking="3"
|
||
:BorderImgUrl="images.topThree"
|
||
:avatarUrl="RankingHasTop3[2].avatar"
|
||
:name="RankingHasTop3[2].nickname"
|
||
:distributionValue="RankingHasTop3[2].quantity"
|
||
style="width: 35%"
|
||
@click="viewUserInfo(RankingHasTop3[2].userId)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- 第四名开始 -->
|
||
<div
|
||
v-if="showRanking.length > 0"
|
||
style="margin-bottom: 6vw; position: relative; z-index: 2"
|
||
>
|
||
<itemCenter
|
||
v-for="listItem in showRanking"
|
||
:imgUrl="images.RankingItem"
|
||
:contentStyle="`padding: 0 10%`"
|
||
@click="viewUserInfo(listItem.userId)"
|
||
>
|
||
<!-- 基本信息 -->
|
||
<div
|
||
style="
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
gap: 4px;
|
||
"
|
||
>
|
||
<!-- 排名 -->
|
||
<div style="color: #edb247; font-weight: 700">
|
||
{{ listItem?.rank }}
|
||
</div>
|
||
|
||
<!-- 头像 -->
|
||
<img
|
||
v-smart-img
|
||
:src="listItem?.avatar || ''"
|
||
alt=""
|
||
style="
|
||
display: block;
|
||
width: 3.5em;
|
||
margin: 0 2%;
|
||
aspect-ratio: 1/1;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
"
|
||
@error="defaultAvatarUrl"
|
||
/>
|
||
|
||
<!-- 名称、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?.nickname }}
|
||
</div>
|
||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
||
ID:{{ listItem?.account }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 贡献值 -->
|
||
<div
|
||
style="
|
||
width: auto;
|
||
min-width: 0;
|
||
|
||
display: flex;
|
||
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: #edb247; font-weight: 700" class="UserNickname">
|
||
{{ listItem?.quantity }}
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
|
||
<!-- 底框 -->
|
||
<img
|
||
v-smart-img
|
||
:src="images.RankingBottomBorder"
|
||
alt=""
|
||
width="100%"
|
||
style="display: block; margin-top: -32vw; position: relative; z-index: 1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rewards -->
|
||
<div
|
||
v-show="!rankingShow"
|
||
style="display: flex; flex-direction: column; align-items: center"
|
||
>
|
||
<div
|
||
v-for="(rewardsTop, top) in rewardsList"
|
||
:key="top"
|
||
style="position: relative; width: 100%; margin: 10px 0"
|
||
>
|
||
<itemCenter
|
||
:imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
|
||
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;padding: 20vw 8vw 8vw;`"
|
||
>
|
||
<div
|
||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||
:key="rewardIndex"
|
||
style="width: 100%"
|
||
>
|
||
<div style="position: relative">
|
||
<itemCenter :imgUrl="images.giftItemBg">
|
||
<img
|
||
v-smart-img
|
||
:src="reward.cover || ''"
|
||
alt=""
|
||
width="70%"
|
||
style="display: block; object-fit: cover"
|
||
@error="(e) => handleImageError(e, reward.type)"
|
||
/>
|
||
</itemCenter>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
bottom: 2%;
|
||
left: 0;
|
||
width: 100%;
|
||
|
||
text-align: center;
|
||
"
|
||
>
|
||
<div
|
||
style="
|
||
text-align: center;
|
||
font-size: 1.2em;
|
||
font-weight: 900;
|
||
font-style: italic;
|
||
background: linear-gradient(
|
||
90deg,
|
||
#fff677 6.36%,
|
||
#d39f1e 26%,
|
||
#fff891 49.56%,
|
||
#ffc93e 70.51%,
|
||
#ffc 93.64%
|
||
);
|
||
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
"
|
||
>
|
||
{{ showDetail(reward.type, reward) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的排名占位 -->
|
||
<div style="height: 25vw"></div>
|
||
|
||
<!-- 我的排名 -->
|
||
<itemCenter
|
||
style="position: fixed; bottom: -1vw; z-index: 2"
|
||
:imgUrl="images.myRankingBg"
|
||
:contentStyle="`padding: 2% 7% 0`"
|
||
>
|
||
<!-- 基本信息 -->
|
||
<div
|
||
style="
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
gap: 8px;
|
||
"
|
||
>
|
||
<!-- 排名 -->
|
||
<div style="color: #edb247; font-weight: 700">
|
||
{{ myRanking.rank || 999 }}
|
||
</div>
|
||
|
||
<!-- 头像 -->
|
||
<img
|
||
v-smart-img
|
||
:src="myRanking.avatar || ''"
|
||
alt=""
|
||
style="
|
||
display: block;
|
||
width: 4em;
|
||
aspect-ratio: 1/1;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
"
|
||
@error="defaultAvatarUrl"
|
||
/>
|
||
|
||
<!-- 名称 -->
|
||
<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"
|
||
>
|
||
{{ myRanking.nickname }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 贡献值 -->
|
||
<div
|
||
style="
|
||
width: auto;
|
||
min-width: 0;
|
||
|
||
display: flex;
|
||
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: #edb247; font-weight: 700">
|
||
{{ myRanking.quantity || 0 }}
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- 弹窗遮罩层 -->
|
||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||
<!-- help弹窗 -->
|
||
<div style="margin: 20% 0" @click.stop>
|
||
<img v-smart-img :src="images.helpInfo" alt="" style="display: block; width: 100%" />
|
||
</div>
|
||
</maskLayer>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||
import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
|
||
|
||
import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
|
||
|
||
import { connectToApp } from '@/utils/appConnector.js'
|
||
import itemCenter from '@/components/itemCenter.vue'
|
||
import TopUser from './components/topUser.vue'
|
||
import maskLayer from '@/components/MaskLayer.vue'
|
||
|
||
// vite动态批量导入图片
|
||
const imageModules = import.meta.glob(
|
||
'@/assets/images/Activities/UAE/IndependenceDay/*.{png,jpg,svg}',
|
||
{
|
||
eager: true,
|
||
}
|
||
)
|
||
// 生成文件名映射对象（自动移除路径和扩展名）
|
||
const images = Object.fromEntries(
|
||
Object.entries(imageModules).map(([path, module]) => {
|
||
const fileName = path.split('/').pop().split('.')[0]
|
||
return [fileName, module.default]
|
||
})
|
||
)
|
||
|
||
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
||
const maskLayerShow = ref(false) //帮助模块
|
||
|
||
// 倒计时
|
||
const Days = ref(0)
|
||
const Hours = ref(0)
|
||
const Minutes = ref(0)
|
||
const Second = ref(0)
|
||
let timer = null
|
||
|
||
// 模块切换展示
|
||
const rankingShow = ref(true) //排行榜
|
||
|
||
const Ranking = ref([]) // 排行榜
|
||
const myRanking = ref({}) // 我的排名
|
||
const rewardsList = ref([]) // 奖励列表
|
||
const gifts = ref([]) // 本周礼物
|
||
|
||
const topImg = ref([images.top1RewardBg, images.top2RewardBg, images.top3RewardBg]) // top图片
|
||
|
||
// 处理排行榜小于3人时的情况
|
||
const RankingHasTop3 = computed(() => {
|
||
let RankingShow = [...Ranking.value]
|
||
if (Ranking.value.length < 3) {
|
||
let addNullUser = Array.from({ length: 3 - Ranking.value.length }, () => ({
|
||
avatar: '',
|
||
nickname: '',
|
||
quantity: '',
|
||
}))
|
||
RankingShow.push(...addNullUser)
|
||
}
|
||
return RankingShow
|
||
})
|
||
|
||
// 展示用的榜单
|
||
const showRanking = computed(() => {
|
||
return Ranking.value.filter((_, index) => index >= 3)
|
||
// return []
|
||
})
|
||
|
||
// 奖励图片资源出错处理
|
||
const handleImageError = (e, type) => {
|
||
console.log('图片资源出错')
|
||
e.target.onerror = null //防止循环
|
||
if ((type = 'GOLD')) {
|
||
e.target.src = new URL('/src/assets/icon/coin.png', import.meta.url).href
|
||
}
|
||
}
|
||
|
||
// 头像资源出错处理
|
||
const defaultAvatarUrl = (e) => {
|
||
console.log('头像资源出错')
|
||
e.target.onerror = null //防止循环
|
||
e.target.src = new URL('/src/assets/icon/defaultAvatar.png', import.meta.url).href
|
||
}
|
||
|
||
// 获取2025年12月9日上午10点的时间戳（北京时间）
|
||
const getTargetTime = () => {
|
||
const targetDate = new Date(2025, 11, 9, 10, 0, 0) // 月份从0开始，11代表12月
|
||
return targetDate.getTime()
|
||
}
|
||
|
||
const targetTime = ref(getTargetTime())
|
||
|
||
// 格式化时间
|
||
const formatTime = (value) => {
|
||
return value < 10 ? `0${value}` : value
|
||
}
|
||
|
||
// 倒计时
|
||
const getCountdown = () => {
|
||
const now = Date.now()
|
||
let diff = targetTime.value - now
|
||
|
||
// 如果已过期，显示全零
|
||
if (diff <= 0) {
|
||
Days.value = 0
|
||
Hours.value = '00'
|
||
Minutes.value = '00'
|
||
Second.value = '00'
|
||
|
||
// 清除定时器
|
||
if (timer) {
|
||
clearInterval(timer)
|
||
timer = null
|
||
}
|
||
return
|
||
}
|
||
|
||
const totalSeconds = Math.floor(diff / 1000)
|
||
Days.value = Math.floor(totalSeconds / (24 * 3600))
|
||
Hours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
|
||
Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
|
||
Second.value = formatTime(Math.floor(totalSeconds % 60))
|
||
}
|
||
|
||
// 格式化奖励的展示信息
|
||
const showDetail = (type, reward) => {
|
||
let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
|
||
if (showamount.includes(type)) {
|
||
return reward.content
|
||
} else {
|
||
return `${reward.quantity}Days`
|
||
}
|
||
}
|
||
|
||
// 获取排行榜和我的排名
|
||
const getListAndMy = async () => {
|
||
let data = {
|
||
activityType: 7,
|
||
}
|
||
const resMyWeekStarRanking = await getRankingListAndMyRanking(data)
|
||
console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
|
||
if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
|
||
myRanking.value = resMyWeekStarRanking.body.currentUserRank
|
||
Ranking.value = resMyWeekStarRanking.body.rankingList
|
||
}
|
||
}
|
||
|
||
// 获取每周奖励列表和礼物
|
||
const getRewardsAndGifts = async () => {
|
||
const resRewardsAndGifts = await getThisWeekRewardsAndGifts('1995445868665577474')
|
||
if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
|
||
gifts.value = resRewardsAndGifts.body.gifts
|
||
rewardsList.value = resRewardsAndGifts.body.butOneRewards
|
||
}
|
||
}
|
||
|
||
// 刷新页面数据
|
||
const initData = () => {
|
||
getListAndMy() // 获取排行榜和我的排名
|
||
getRewardsAndGifts() //获取本周的礼物和奖励列表
|
||
}
|
||
|
||
// 使用工具函数连接APP
|
||
const connectToAppHandler = async () => {
|
||
await connectToApp(() => {
|
||
// 连接成功回调
|
||
initData() //初始化数据
|
||
})
|
||
}
|
||
|
||
// 组件挂载时检测环境
|
||
onMounted(() => {
|
||
connectToAppHandler()
|
||
isInAppEnvironment.value = isInApp()
|
||
|
||
getCountdown()
|
||
timer = setInterval(getCountdown, 1000) //倒计时每秒更新
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
clearInterval(timer) //摧毁计时器
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
* {
|
||
color: #fff;
|
||
font-family: 'SF Pro';
|
||
}
|
||
|
||
.fullPage {
|
||
position: relative;
|
||
background: #460001;
|
||
}
|
||
|
||
.bg {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-image: url(../../../../assets/images/Activities/UAE/IndependenceDay/bg.png);
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.timeText {
|
||
color: #fff;
|
||
font-weight: 590;
|
||
font-size: 1.7em;
|
||
}
|
||
|
||
.timeGap {
|
||
width: 6px;
|
||
align-self: stretch;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.ranking-bg {
|
||
background-color: linear-gradient(180deg, #7c0101 0%, #400000 100%), #d9d9d9;
|
||
background-image: url(../../../../assets/images/Activities/UAE/IndependenceDay/RankingBg.png);
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
|
||
position: absolute;
|
||
inset: 10vw 2% 1vw;
|
||
z-index: 1;
|
||
}
|
||
|
||
.btTitle {
|
||
color: #fff;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.topTitle {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
.history-name {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.history-time {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.UserNickname {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
@media screen and (max-width: 360px) {
|
||
* {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 360px) {
|
||
* {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
* {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1024px) {
|
||
* {
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
</style>
|