hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(删除活动页面): 活动游戏（2025年12月15日上午0点结束）

Browse Source
This commit is contained in:
hzj 2025-12-25 12:12:11 +08:00
parent 4a05d330f6
commit 1c96f421ac
5 changed files with 0 additions and 954 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/router/index.js
View File

@ -383,12 +383,6 @@ const router = createRouter({
component: () => import('../views/Activities/LuckyChampion/index.vue'),
meta: { requiresAuth: true },
}, //2025年12月21日上午0点结束
{
path: '/activity-game',
name: 'activity-game',
component: () => import('../views/Activities/Game/index.vue'),
meta: { requiresAuth: true },
}, //2025年12月15日上午0点结束
],
})

1
src/utils/permissionManager.js
View File

@ -60,7 +60,6 @@ const ACTIVITIES = [
'/merry-christmas', //圣诞节
'/jack-pot', //水果游戏打榜页面
'/lucky-champion', //幸运赢家
'/activity-game', //活动游戏页面
]
// 🎯 核心改变：基于身份的权限配置

1
src/utils/routeGuard.js
View File

@ -411,7 +411,6 @@ class RouteGuard {
'/merry-christmas', //圣诞节
'/jack-pot', //水果游戏打榜页面
'/lucky-champion', //幸运赢家
'/activity-game', //活动游戏页面
]
const publicPages = [

190
src/views/Activities/Game/components/topUser.vue
View File

@ -1,190 +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: isTopOne ? '78%' : '80%' }"
>
<div :style="{ width: isTopOne ? '45%' : '60%' }">
<img
v-smart-img
:src="avatarUrl || ''"
alt=""
width="100%"
style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
@error="handleAvatarImageError"
/>
</div>
</div>
<!-- 用户名和贡献值 -->
<div
style="
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
"
:style="{ height: ranking == '1' ? '26%' : ranking == '2' ? '26%' : '24%' }"
>
<div
style="
height: 30%;
width: 40%;
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: ranking == '1' ? `35%` : ranking == '2' ? `50%` : `50%`,
background:
ranking == '1'
? `linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`
: ranking == '2'
? `linear-gradient(270deg, #6593FF 0%, #0152CD 50%, #6593FF 100%), linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`
: `linear-gradient(270deg, #F59188 0%, #D74F36 50%, #F59188 100%), linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`,
}"
>
<img
v-smart-img
src="/src/assets/icon/coin.png"
alt=""
style="display: block"
:style="{ width: isTopOne ? '20%' : '20%' }"
/>
<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'
const props = defineProps({
isTopOne: {
type: Boolean,
default: true,
},
avatarUrl: {
type: String,
default: '',
},
BorderImgUrl: {
type: String,
required: true,
},
name: {
type: String,
default: '',
},
distributionValue: {
type: String,
default: '',
},
ranking: {
type: String,
default: '1',
},
})
</script>
<style lang="scss" scoped>
* {
font-family: 'SF Pro';
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>

756
src/views/Activities/Game/index.vue
View File

@ -1,756 +0,0 @@
<!-- src/views/Activities/Game/index.vue -->
<template>
<div class="fullPage">
<div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
<!-- 状态栏占位区域（仅在APP中显示） -->
<div v-if="isInAppEnvironment" style="height: 30px"></div>
<!-- 按钮 -->
<div style="margin-top: 106vw; 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: 8px"
@click="maskLayerShow = true"
/>
</div>
<!-- 倒计时 -->
<div class="timeBox">
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Days }}D</div>
</itemCenter>
</div>
<div class="timeText timeGap"></div>
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Hours }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<div class="timeText" style="">{{ Minutes }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<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">
<img
v-smart-img
:src="imageUrl(getImgName('rankingBt'))"
alt=""
style="display: block; width: 100%"
:style="{ opacity: rankingShow ? 0 : 1 }"
@click="rankingShow = true"
/>
<img
v-smart-img
:src="imageUrl(getImgName('rankingBtActive'))"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: rankingShow ? 1 : 0 }"
@click="rankingShow = true"
/>
</div>
<!-- 奖励按钮 -->
<div style="width: 40%; position: relative">
<img
v-smart-img
:src="imageUrl(getImgName('rewardsBt'))"
alt=""
style="display: block; width: 100%"
:style="{ opacity: rankingShow ? 1 : 0 }"
@click="rankingShow = false"
/>
<img
v-smart-img
:src="imageUrl(getImgName('rewardBtActive'))"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: rankingShow ? 0 : 1 }"
@click="rankingShow = false"
/>
</div>
</div>
</div>
<!-- 展示内容 -->
<div>
<!-- Ranking -->
<div v-show="rankingShow" style="position: relative; width: 100%">
<div style="position: relative; z-index: 2">
<!-- 前三名 -->
<itemCenter
:imgUrl="imageUrl('RankingMain')"
:contentStyle="`padding: 25% 5% 0;flex-direction: column;`"
>
<div>
<!-- 第一 -->
<div style="display: flex; justify-content: center">
<TopUser
:BorderImgUrl="imageUrl('topOne')"
:avatarUrl="RankingHasTop3[0].avatar"
:name="RankingHasTop3[0].nickname"
:distributionValue="RankingHasTop3[0].quantity"
style="width: 55%"
@click="viewUserInfo(RankingHasTop3[0].userId)"
/>
</div>
<!-- 第二三 -->
<div
style="
position: relative;
z-index: 3;
display: flex;
justify-content: space-between;
margin-top: -30%;
pointer-events: none;
"
>
<div
style="pointer-events: auto; width: 34%"
@click.stop="viewUserInfo(RankingHasTop3[1].userId)"
>
<TopUser
:isTopOne="false"
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: 34%"
@click.stop="viewUserInfo(RankingHasTop3[2].userId)"
>
<TopUser
:isTopOne="false"
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="margin-bottom: 6vw; position: relative; z-index: 2"
>
<itemCenter
v-for="(listItem, index) in showRanking"
:key="listItem.userId"
:imgUrl="imageUrl('RankingItem')"
:contentStyle="`padding: 2% 13% 0`"
: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
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="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: -40vw; 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: 25vw 8vw 6vw;`"
>
<div
v-for="(reward, rewardIndex) in rewardsTop.rewards"
:key="rewardIndex"
style="width: 100%"
>
<itemCenter :imgUrl="imageUrl('giftItemBg')">
<img
v-smart-img
:src="reward.cover || ''"
alt=""
width="70%"
style="display: block; object-fit: cover"
@error="(e) => handleRewardImageError(e, reward.type)"
/>
</itemCenter>
<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>
</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
v-smart-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>
</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 langStore = useLangStore()
// 当前语言类型
const currentLangType = computed(() => {
return langStore.selectedLang?.type || 'en'
})
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Activities/Game/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}Ar` : filename
}
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 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)
})
// 获取2025年12月15日上午0点的时间戳（北京时间）
const getTargetTime = () => {
const targetDate = new Date(2025, 11, 15, 0, 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 if (type === 'DOLLARS') {
return `$${reward.content}`
} else {
return `${reward.quantity}Days`
}
}
// 获取排行榜和我的排名
const getListAndMy = async () => {
let data = {
activityType: 1068,
cycleType: 3,
cycleKey: '202511',
}
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('1994334094730010626')
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 = () => {
getListAndMy() // 获取排行榜和我的排名
getRewardsAndGifts() //获取本周的礼物和奖励列表
}
// 预加载关键图片
const preloadCriticalImages = () => {
const criticalImages = [
imageUrl('bg'),
imageUrl('timeBg'),
imageUrl('rankingBt'),
imageUrl('rankingBtActive'),
imageUrl('rewardBtActive'),
imageUrl('rewardsBt'),
imageUrl('RankingMain'),
imageUrl('topOne'),
imageUrl('topTwo'),
imageUrl('topThree'),
imageUrl('RankingItem'),
imageUrl('RankingBottomBorder'),
imageUrl('myRankingBg'),
imageUrl('helpInfo'),
imageUrl('helpInfoAr'),
imageUrl('top1RewardBg'),
imageUrl('top2RewardBg'),
imageUrl('top3RewardBg'),
imageUrl('giftItemBg'),
]
const criticalImages_ar = [
imageUrl('bg'),
imageUrl('timeBg'),
imageUrl('rankingBtAr'),
imageUrl('rankingBtActiveAr'),
imageUrl('rewardBtActiveAr'),
imageUrl('rewardsBtAr'),
imageUrl('RankingMain'),
imageUrl('topOne'),
imageUrl('topTwo'),
imageUrl('topThree'),
imageUrl('RankingItem'),
imageUrl('RankingBottomBorder'),
imageUrl('myRankingBg'),
imageUrl('helpInfo'),
imageUrl('helpInfoAr'),
imageUrl('top1RewardBg'),
imageUrl('top2RewardBg'),
imageUrl('top3RewardBg'),
imageUrl('giftItemBg'),
]
if (currentLangType.value == 'en') {
preloadImages(criticalImages)
} else if (currentLangType.value == 'ar') {
preloadImages(criticalImages_ar)
}
}
// 使用工具函数连接APP
const connectToAppHandler = async () => {
await connectToApp(() => {
// 连接成功回调
initData() //初始化数据
preloadCriticalImages() //预加载关键图片
})
}
// 组件挂载时检测环境
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: #2e0649;
}
.bg {
width: 100vw;
min-height: 100vh;
background-image: var(--bg-url);
background-size: 100% auto;
background-repeat: no-repeat;
position: relative;
z-index: 1;
}
.timeText {
color: #fff;
font-weight: 590;
font-size: 1.5em;
margin-bottom: 1vw;
}
.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;
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;
}
.timeBox {
display: flex;
justify-content: center;
margin-top: 15vw;
}
@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>