chore(过期活动): 水果游戏活动删除
This commit is contained in:
hzj
parent
c042f9bd61
commit
f6152441d5
@ -389,12 +389,6 @@ const router = createRouter({
|
|||||||
component: () => import('../views/Activities/SpringFestival/index.vue'),
|
component: () => import('../views/Activities/SpringFestival/index.vue'),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
}, //2026年3月14日上午5点结束
|
}, //2026年3月14日上午5点结束
|
||||||
{
|
|
||||||
path: '/jack-pot',
|
|
||||||
name: 'jack-pot',
|
|
||||||
component: () => import('../views/Activities/JackPot/index.vue'),
|
|
||||||
meta: { requiresAuth: true },
|
|
||||||
}, //2026年2月16日上午5点结束
|
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -57,11 +57,10 @@ const RANKING_PAGES = [
|
|||||||
const ACTIVITIES = [
|
const ACTIVITIES = [
|
||||||
INVITATION_PAGES.INVITE_USER, //邀请新用户（邀请码）
|
INVITATION_PAGES.INVITE_USER, //邀请新用户（邀请码）
|
||||||
'/recharge-reward', //充值奖励
|
'/recharge-reward', //充值奖励
|
||||||
|
'/login-reward', // 登录奖励
|
||||||
|
|
||||||
'/activities/lucky-dollars-season3', // 斋月打榜
|
'/activities/lucky-dollars-season3', // 斋月打榜
|
||||||
'/activities/spring-festival', // 春节打榜
|
'/activities/spring-festival', // 春节打榜
|
||||||
'/login-reward', // 登录奖励
|
|
||||||
'/jack-pot', // 水果游戏打榜
|
|
||||||
]
|
]
|
||||||
|
|
||||||
// 🎯 核心改变：基于身份的权限配置
|
// 🎯 核心改变：基于身份的权限配置
|
||||||
|
|||||||
@ -408,11 +408,10 @@ class RouteGuard {
|
|||||||
const ACTIVITIES = [
|
const ACTIVITIES = [
|
||||||
'/invitation-to-register', //邀请新用户注册页面
|
'/invitation-to-register', //邀请新用户注册页面
|
||||||
'/recharge-reward', //充值奖励
|
'/recharge-reward', //充值奖励
|
||||||
|
'/login-reward', // 登录奖励
|
||||||
|
|
||||||
'/activities/lucky-dollars-season3', // 斋月打榜
|
'/activities/lucky-dollars-season3', // 斋月打榜
|
||||||
'/activities/spring-festival', // 春节打榜
|
'/activities/spring-festival', // 春节打榜
|
||||||
'/login-reward', // 登录奖励
|
|
||||||
'/jack-pot', //水果游戏打榜
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const publicPages = [
|
const publicPages = [
|
||||||
|
|||||||
@ -1,259 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="width: 100%">
|
|
||||||
<div style="position: relative">
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
:src="BorderImgUrl"
|
|
||||||
alt=""
|
|
||||||
width="100%"
|
|
||||||
style="display: block; position: relative; z-index: 2"
|
|
||||||
/>
|
|
||||||
<!-- 头像 -->
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
:style="{ height: avatarContainerHeight }"
|
|
||||||
>
|
|
||||||
<div :style="{ width: avatarWidth }">
|
|
||||||
<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="
|
|
||||||
height: 30%;
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
|
|
||||||
{{ name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
border-radius: 40px;
|
|
||||||
box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.4) inset;
|
|
||||||
border: 0.64px solid #ffdf36;
|
|
||||||
padding: 1px 2px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
:style="{
|
|
||||||
width: distributionValueWidth,
|
|
||||||
background:
|
|
||||||
ranking == '1'
|
|
||||||
? `linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`
|
|
||||||
: ranking == '2'
|
|
||||||
? `linear-gradient(270deg, #A3FDF9 0%, #1D7BBD 50%, #A3FDF9 100%)`
|
|
||||||
: `linear-gradient(270deg, #F5EAE4 0%, #F9C29E 50%, #F5EAE4 100%)`,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
src="/src/assets/icon/coin.png"
|
|
||||||
alt=""
|
|
||||||
style="display: block"
|
|
||||||
:style="{ width: coinWidth }"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="font-weight: 590"
|
|
||||||
class="showText"
|
|
||||||
:class="isTopOne ? 'top1Text' : 'text'"
|
|
||||||
:style="{
|
|
||||||
color: ranking == '1' ? `#FFE601` : '#FFF',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ distributionValue }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { handleAvatarImageError } from '@/utils/imageHandler.js'
|
|
||||||
import { computed } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
ranking: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
|
|
||||||
avatarUrl: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
|
|
||||||
BorderImgUrl: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
|
|
||||||
distributionValue: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
// 是否为第一名
|
|
||||||
const isTopOne = computed(() => {
|
|
||||||
return props.ranking === '1'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 头像容器高度
|
|
||||||
const avatarContainerHeight = computed(() => {
|
|
||||||
switch (props.ranking) {
|
|
||||||
case '1':
|
|
||||||
return '91%'
|
|
||||||
case '2':
|
|
||||||
return '87%'
|
|
||||||
case '3':
|
|
||||||
return '89%'
|
|
||||||
default:
|
|
||||||
return '90%'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 头像宽度
|
|
||||||
const avatarWidth = computed(() => {
|
|
||||||
switch (props.ranking) {
|
|
||||||
case '1':
|
|
||||||
return '43%'
|
|
||||||
case '2':
|
|
||||||
return '46%'
|
|
||||||
case '3':
|
|
||||||
return '43%'
|
|
||||||
default:
|
|
||||||
return '48%'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 底部信息区域高度
|
|
||||||
const bottomSectionHeight = computed(() => {
|
|
||||||
switch (props.ranking) {
|
|
||||||
case '1':
|
|
||||||
return '35%'
|
|
||||||
case '2':
|
|
||||||
return '33.5%'
|
|
||||||
case '3':
|
|
||||||
return '35%'
|
|
||||||
default:
|
|
||||||
return '35%'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 贡献值宽度
|
|
||||||
const distributionValueWidth = computed(() => {
|
|
||||||
switch (props.ranking) {
|
|
||||||
case '1':
|
|
||||||
return '55%'
|
|
||||||
case '2':
|
|
||||||
return '50%'
|
|
||||||
case '3':
|
|
||||||
return '50%'
|
|
||||||
default:
|
|
||||||
return '50%'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 金币图标宽度
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.showText {
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top1Text {
|
|
||||||
font-size: 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 0.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 360px) {
|
|
||||||
* {
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 360px) {
|
|
||||||
* {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
* {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1024px) {
|
|
||||||
* {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,839 +0,0 @@
|
|||||||
<!-- src/views/Activities/Game/index.vue -->
|
|
||||||
<template>
|
|
||||||
<div class="fullPage">
|
|
||||||
<!-- 预加载状态 -->
|
|
||||||
<div v-if="isLoading" class="loading-container">
|
|
||||||
<div class="loading-spinner"></div>
|
|
||||||
<p>{{ $t('loading') }}...</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 主要内容 -->
|
|
||||||
<div v-else>
|
|
||||||
<!-- 新增的背景图层 -->
|
|
||||||
<div class="background-overlay" :style="{ '--bg2-url': `url(${imageUrl('bg2')})` }"></div>
|
|
||||||
|
|
||||||
<div class="bg">
|
|
||||||
<itemCenter :imgUrl="imageUrl('bg')" :contentStyle="`display: block;`">
|
|
||||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
|
||||||
<!-- <div v-if="isInAppEnvironment" style="height: 30px"></div> -->
|
|
||||||
|
|
||||||
<!-- 按钮 -->
|
|
||||||
<div
|
|
||||||
style="margin-top: 89vw; display: flex; justify-content: flex-end; align-items: center"
|
|
||||||
>
|
|
||||||
<!-- 帮助按钮 -->
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
src="/src/assets/icon/helpAct.png"
|
|
||||||
alt=""
|
|
||||||
style="display: block; position: relative; width: 10vw; margin-right: 4vw"
|
|
||||||
@click="maskLayerShow = true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</itemCenter>
|
|
||||||
|
|
||||||
<!-- 倒计时 -->
|
|
||||||
<div class="timeBox">
|
|
||||||
<div style="width: 20%">
|
|
||||||
<itemCenter :imgUrl="imageUrl('timeDayBg')">
|
|
||||||
<div class="timeText" style="">{{ Days }}D</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
<div class="timeText timeGap"></div>
|
|
||||||
<div style="width: 20%">
|
|
||||||
<itemCenter :imgUrl="imageUrl('timeHourBg')">
|
|
||||||
<div class="timeText" style="">{{ Hours }}</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
<div class="timeText timeGap">:</div>
|
|
||||||
<div style="width: 20%">
|
|
||||||
<itemCenter :imgUrl="imageUrl('timeMinBg')">
|
|
||||||
<div class="timeText" style="">{{ Minutes }}</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
<div class="timeText timeGap">:</div>
|
|
||||||
<div style="width: 20%">
|
|
||||||
<itemCenter :imgUrl="imageUrl('timeSecBg')">
|
|
||||||
<div class="timeText" style="">{{ Second }}</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 切换按钮 -->
|
|
||||||
<div>
|
|
||||||
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
|
||||||
<!-- 排行榜按钮 -->
|
|
||||||
<div style="width: 40%; position: relative" @click="rankingShow = true">
|
|
||||||
<img
|
|
||||||
v-show="!rankingShow"
|
|
||||||
v-smart-img
|
|
||||||
:src="imageUrl(getImgName('rankingBt'))"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 100%"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
v-show="rankingShow"
|
|
||||||
v-smart-img
|
|
||||||
:src="imageUrl(getImgName('rankingBtActive'))"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 100%"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 奖励按钮 -->
|
|
||||||
<div style="width: 40%; position: relative" @click="rankingShow = false">
|
|
||||||
<img
|
|
||||||
v-show="rankingShow"
|
|
||||||
v-smart-img
|
|
||||||
:src="imageUrl(getImgName('rewardsBt'))"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 100%"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
v-show="!rankingShow"
|
|
||||||
v-smart-img
|
|
||||||
:src="imageUrl(getImgName('rewardBtActive'))"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 100%"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 展示内容 -->
|
|
||||||
<div>
|
|
||||||
<!-- Ranking -->
|
|
||||||
<div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
|
|
||||||
<!-- 背景图 -->
|
|
||||||
<div
|
|
||||||
class="ranking-bg"
|
|
||||||
:style="{ '--ranking-bg-url': `url(${imageUrl('RankingBg')})` }"
|
|
||||||
></div>
|
|
||||||
|
|
||||||
<div style="position: relative; z-index: 1">
|
|
||||||
<!-- 前三名 -->
|
|
||||||
<itemCenter
|
|
||||||
:imgUrl="imageUrl('RankingMain')"
|
|
||||||
:contentStyle="`padding: 21% 3% 0;flex-direction: column;`"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<!-- 第一 -->
|
|
||||||
<div style="display: flex; justify-content: center">
|
|
||||||
<TopUser
|
|
||||||
ranking="1"
|
|
||||||
:BorderImgUrl="imageUrl('topOne')"
|
|
||||||
:avatarUrl="RankingHasTop3[0].avatar"
|
|
||||||
:name="RankingHasTop3[0].nickname"
|
|
||||||
:distributionValue="RankingHasTop3[0].quantity"
|
|
||||||
style="width: 42%"
|
|
||||||
@click="viewUserInfo(RankingHasTop3[0].userId)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- 第二三 -->
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: relative;
|
|
||||||
z-index: 3;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: -34%;
|
|
||||||
pointer-events: none;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="pointer-events: auto; width: 32%"
|
|
||||||
@click.stop="viewUserInfo(RankingHasTop3[1].userId)"
|
|
||||||
>
|
|
||||||
<TopUser
|
|
||||||
ranking="2"
|
|
||||||
:BorderImgUrl="imageUrl('topTwo')"
|
|
||||||
:avatarUrl="RankingHasTop3[1].avatar"
|
|
||||||
:name="RankingHasTop3[1].nickname"
|
|
||||||
:distributionValue="RankingHasTop3[1].quantity"
|
|
||||||
style="width: 100%"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="pointer-events: auto; width: 32%"
|
|
||||||
@click.stop="viewUserInfo(RankingHasTop3[2].userId)"
|
|
||||||
>
|
|
||||||
<TopUser
|
|
||||||
ranking="3"
|
|
||||||
:BorderImgUrl="imageUrl('topThree')"
|
|
||||||
:avatarUrl="RankingHasTop3[2].avatar"
|
|
||||||
:name="RankingHasTop3[2].nickname"
|
|
||||||
:distributionValue="RankingHasTop3[2].quantity"
|
|
||||||
style="width: 100%"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</itemCenter>
|
|
||||||
|
|
||||||
<!-- 第四名开始 -->
|
|
||||||
<div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
|
|
||||||
<itemCenter
|
|
||||||
v-for="(listItem, index) in showRanking"
|
|
||||||
:key="listItem.userId"
|
|
||||||
:imgUrl="imageUrl('RankingItem')"
|
|
||||||
:contentStyle="`padding: 0 13%`"
|
|
||||||
: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: 4px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- 排名 -->
|
|
||||||
<div style="color: #ffe601; font-weight: 700">
|
|
||||||
{{ listItem?.rank }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 头像 -->
|
|
||||||
<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="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?.nickname }}
|
|
||||||
</div>
|
|
||||||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
|
||||||
{{ $t('user_id_prefix') }} {{ 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: #ffe601; font-weight: 700" class="UserNickname">
|
|
||||||
{{ listItem?.quantity }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 底框 -->
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
:src="imageUrl('RankingBottomBorder')"
|
|
||||||
alt=""
|
|
||||||
width="100%"
|
|
||||||
style="display: block; margin-top: -13vw; 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="
|
|
||||||
rewardsTop.rankRange == '1'
|
|
||||||
? `display: grid;grid-template-columns: repeat(2, 1fr);gap: 5vw;padding: 29vw 9vw 34vw;`
|
|
||||||
: `display: grid;grid-template-columns: repeat(2, 1fr);gap: 5vw;padding: 29vw 9vw 12vw;`
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
|
||||||
:key="rewardIndex"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- 奖励图片 -->
|
|
||||||
<img
|
|
||||||
:src="reward.cover || ''"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 70%; object-fit: cover"
|
|
||||||
@error="(e) => handleRewardImageError(e, reward.type)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 数值 -->
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div style="min-width: 0; font-size: 1.2em; font-weight: 590; color: #fff">
|
|
||||||
{{ showDetail(reward.type, reward) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 我的排名占位 -->
|
|
||||||
<div style="height: 30vw"></div>
|
|
||||||
|
|
||||||
<!-- 我的排名 -->
|
|
||||||
<itemCenter
|
|
||||||
style="position: fixed; bottom: 0; z-index: 2"
|
|
||||||
:imgUrl="imageUrl('myRankingBg')"
|
|
||||||
:contentStyle="`padding: 2% 8% 0`"
|
|
||||||
>
|
|
||||||
<!-- 基本信息 -->
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
gap: 8px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- 排名 -->
|
|
||||||
<div style="color: #ffe601; font-weight: 700">
|
|
||||||
{{ myRanking.rank || 999 }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 头像 -->
|
|
||||||
<img
|
|
||||||
:src="myRanking.avatar || ''"
|
|
||||||
alt=""
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
width: 4em;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
"
|
|
||||||
@error="handleAvatarImageError"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 名称 -->
|
|
||||||
<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: #ffe601; 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="imageUrl(getImgName('helpInfo'))"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 100%"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</maskLayer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
||||||
import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
|
|
||||||
import { connectToApp } from '@/utils/appConnector.js'
|
|
||||||
import { useLangStore } from '@/stores/lang'
|
|
||||||
import { getPngUrl } from '@/config/imagePaths.js'
|
|
||||||
import { preloadImages } from '@/utils/imagePreloader.js'
|
|
||||||
import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
|
|
||||||
|
|
||||||
import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
|
|
||||||
|
|
||||||
import itemCenter from '@/components/itemCenter.vue'
|
|
||||||
import TopUser from './components/topUser.vue'
|
|
||||||
import maskLayer from '@/components/MaskLayer.vue'
|
|
||||||
|
|
||||||
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
|
||||||
const maskLayerShow = ref(false) //帮助模块
|
|
||||||
|
|
||||||
// 预加载状态
|
|
||||||
const isLoading = ref(true)
|
|
||||||
|
|
||||||
const langStore = useLangStore()
|
|
||||||
// 当前语言类型
|
|
||||||
const currentLangType = computed(() => {
|
|
||||||
return langStore.selectedLang?.type || 'en'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 获取OSS图片URL的函数
|
|
||||||
const imageUrl = (filename) => getPngUrl('Activities/JackPot/', filename)
|
|
||||||
|
|
||||||
// 根据语言获取图片名
|
|
||||||
const getImgName = (filename) => {
|
|
||||||
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
|
|
||||||
}
|
|
||||||
|
|
||||||
// 倒计时
|
|
||||||
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 topImg = ref([imageUrl('top1RewardBg'), imageUrl('top2RewardBg'), imageUrl('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 []
|
|
||||||
})
|
|
||||||
|
|
||||||
// 获取沙特时间的2026年2月16号早上0点的时间戳（直接使用北京时间）
|
|
||||||
const getTargetTime = () => {
|
|
||||||
// 沙特时间2026年2月16号早上0点 = 北京时间2026年2月16号早上5点（沙特比北京晚5小时）
|
|
||||||
const targetDate = new Date(2026, 1, 16, 5, 0, 0)
|
|
||||||
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 if (type === 'DOLLARS') {
|
|
||||||
return `$${reward.content}`
|
|
||||||
} else {
|
|
||||||
return `${reward.quantity}Days`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取排行榜和我的排名
|
|
||||||
const getListAndMy = async () => {
|
|
||||||
let data = {
|
|
||||||
activityType: 11,
|
|
||||||
cycleKey: 20260129,
|
|
||||||
cycleType: 2,
|
|
||||||
}
|
|
||||||
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('2001927003858481154')
|
|
||||||
if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
|
|
||||||
rewardsList.value = resRewardsAndGifts.body.butOneRewards
|
|
||||||
if (rewardsList.value[0]) {
|
|
||||||
rewardsList.value[0].rewards.push({
|
|
||||||
type: 'DOLLARS',
|
|
||||||
content: 50,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (rewardsList.value[1]) {
|
|
||||||
rewardsList.value[1].rewards.push({
|
|
||||||
type: 'DOLLARS',
|
|
||||||
content: 30,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (rewardsList.value[2]) {
|
|
||||||
rewardsList.value[2].rewards.push({
|
|
||||||
type: 'DOLLARS',
|
|
||||||
content: 10,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 刷新页面数据
|
|
||||||
const initData = async () => {
|
|
||||||
await Promise.all([
|
|
||||||
getListAndMy(), // 获取排行榜和我的排名
|
|
||||||
getRewardsAndGifts(), //获取本周的礼物和奖励列表
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
// 预加载关键图片
|
|
||||||
const preloadCriticalImages = async () => {
|
|
||||||
const criticalImages = [
|
|
||||||
imageUrl('bg'),
|
|
||||||
// imageUrl('bg2'),
|
|
||||||
imageUrl('helpInfo'),
|
|
||||||
imageUrl('myRankingBg'),
|
|
||||||
// imageUrl('RankingBg'),
|
|
||||||
imageUrl('RankingBottomBorder'),
|
|
||||||
imageUrl('rankingBt'),
|
|
||||||
imageUrl('rankingBtActive'),
|
|
||||||
imageUrl('RankingItem'),
|
|
||||||
imageUrl('RankingMain'),
|
|
||||||
imageUrl('rewardBtActive'),
|
|
||||||
imageUrl('rewardsBt'),
|
|
||||||
imageUrl('timeDayBg'),
|
|
||||||
imageUrl('timeHourBg'),
|
|
||||||
imageUrl('timeMinBg'),
|
|
||||||
imageUrl('timeSecBg'),
|
|
||||||
imageUrl('top1RewardBg'),
|
|
||||||
imageUrl('top2RewardBg'),
|
|
||||||
imageUrl('top3RewardBg'),
|
|
||||||
imageUrl('topOne'),
|
|
||||||
imageUrl('topTwo'),
|
|
||||||
imageUrl('topThree'),
|
|
||||||
]
|
|
||||||
|
|
||||||
const criticalImages_ar = [
|
|
||||||
imageUrl('bg'),
|
|
||||||
// imageUrl('bg2'),
|
|
||||||
imageUrl('helpInfo_ar'),
|
|
||||||
imageUrl('myRankingBg'),
|
|
||||||
// imageUrl('RankingBg'),
|
|
||||||
imageUrl('RankingBottomBorder'),
|
|
||||||
imageUrl('rankingBt_ar'),
|
|
||||||
imageUrl('rankingBtActive_ar'),
|
|
||||||
imageUrl('RankingItem'),
|
|
||||||
imageUrl('RankingMain'),
|
|
||||||
imageUrl('rewardBtActive_ar'),
|
|
||||||
imageUrl('rewardsBt_ar'),
|
|
||||||
imageUrl('timeDayBg'),
|
|
||||||
imageUrl('timeHourBg'),
|
|
||||||
imageUrl('timeMinBg'),
|
|
||||||
imageUrl('timeSecBg'),
|
|
||||||
imageUrl('top1RewardBg'),
|
|
||||||
imageUrl('top2RewardBg'),
|
|
||||||
imageUrl('top3RewardBg'),
|
|
||||||
imageUrl('topOne'),
|
|
||||||
imageUrl('topTwo'),
|
|
||||||
imageUrl('topThree'),
|
|
||||||
]
|
|
||||||
|
|
||||||
if (currentLangType.value == 'en') {
|
|
||||||
await preloadImages(criticalImages)
|
|
||||||
} else if (currentLangType.value == 'ar') {
|
|
||||||
await preloadImages(criticalImages_ar)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 完成预加载
|
|
||||||
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()
|
|
||||||
isInAppEnvironment.value = isInApp()
|
|
||||||
|
|
||||||
getCountdown()
|
|
||||||
timer = setInterval(getCountdown, 1000) //倒计时每秒更新
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
clearInterval(timer) //摧毁计时器
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
* {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullPage {
|
|
||||||
position: relative;
|
|
||||||
background: #4a0505;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg {
|
|
||||||
width: 100vw;
|
|
||||||
min-height: 100vh;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 120vw 0 0;
|
|
||||||
background-image: var(--bg2-url);
|
|
||||||
background-repeat: repeat-y;
|
|
||||||
background-position: top center;
|
|
||||||
background-size: 100% auto;
|
|
||||||
z-index: 0; /* 确保在.bg之下 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.ranking-bg {
|
|
||||||
background-color: #450b08;
|
|
||||||
background-image: var(--ranking-bg-url);
|
|
||||||
background-size: 100% auto;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
inset: 15vw 2vw 4vw;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeText {
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 590;
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin-bottom: 4vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeGap {
|
|
||||||
width: 6px;
|
|
||||||
align-self: stretch;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeBox {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: -23vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 添加加载动画样式 */
|
|
||||||
.loading-container {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-spinner {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border: 3px solid #f3f3f3;
|
|
||||||
border-top: 3px solid #f59e0b;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[dir='rtl'] .timeBox {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user