chore(删除活动及其图片): 孟加拉国民革命与团结日
|
Before Width: | Height: | Size: 233 KiB |
|
Before Width: | Height: | Size: 251 KiB |
|
Before Width: | Height: | Size: 332 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.0 MiB |
|
Before Width: | Height: | Size: 223 KiB |
|
Before Width: | Height: | Size: 1023 KiB |
|
Before Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 214 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 396 KiB |
|
Before Width: | Height: | Size: 576 KiB |
|
Before Width: | Height: | Size: 187 KiB |
|
Before Width: | Height: | Size: 195 KiB |
@ -287,12 +287,6 @@ const router = createRouter({
|
|||||||
component: () => import('../views/Activities/Reward/RechargeReward.vue'),
|
component: () => import('../views/Activities/Reward/RechargeReward.vue'),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/revolution-unity-day',
|
|
||||||
name: 'revolution-unity-day',
|
|
||||||
component: () => import('../views/Activities/RevolutionUnityDay/index.vue'),
|
|
||||||
meta: { requiresAuth: true },
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/bank-card',
|
path: '/bank-card',
|
||||||
name: 'bank-card',
|
name: 'bank-card',
|
||||||
|
|||||||
@ -57,7 +57,6 @@ const ACTIVITIES = [
|
|||||||
'/recharge-reward', //充值奖励页面
|
'/recharge-reward', //充值奖励页面
|
||||||
|
|
||||||
'/activity-game', //活动游戏页面
|
'/activity-game', //活动游戏页面
|
||||||
'/revolution-unity-day', //孟加拉国民革命与团结日
|
|
||||||
'/oman-national-day', //阿曼国庆日
|
'/oman-national-day', //阿曼国庆日
|
||||||
'/Lebanon-independence-day', //黎巴嫩独立日
|
'/Lebanon-independence-day', //黎巴嫩独立日
|
||||||
'/Yemen-independence-day', //也门独立日
|
'/Yemen-independence-day', //也门独立日
|
||||||
|
|||||||
@ -408,7 +408,6 @@ class RouteGuard {
|
|||||||
'/recharge-reward', //充值奖励页面
|
'/recharge-reward', //充值奖励页面
|
||||||
|
|
||||||
'/activity-game', //活动游戏页面
|
'/activity-game', //活动游戏页面
|
||||||
'/revolution-unity-day', //孟加拉国民革命与团结日
|
|
||||||
'/oman-national-day', //阿曼国庆日
|
'/oman-national-day', //阿曼国庆日
|
||||||
'/Lebanon-independence-day', //黎巴嫩独立日
|
'/Lebanon-independence-day', //黎巴嫩独立日
|
||||||
'/Yemen-independence-day', //也门独立日
|
'/Yemen-independence-day', //也门独立日
|
||||||
|
|||||||
@ -1,182 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="width: 100%">
|
|
||||||
<div style="position: relative">
|
|
||||||
<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;
|
|
||||||
"
|
|
||||||
:style="{ height: isTopOne ? '61%' : '58%' }"
|
|
||||||
>
|
|
||||||
<div :style="{ width: isTopOne ? '50%' : '50%', marginTop: isTopOne ? '30%' : '30%' }">
|
|
||||||
<img
|
|
||||||
:src="avatarUrl || ''"
|
|
||||||
alt=""
|
|
||||||
width="100%"
|
|
||||||
style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
|
|
||||||
@error="defaultAvatarUrl"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 用户名和贡献值 -->
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 3;
|
|
||||||
height: 40%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
height: 30%;
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div style="font-weight: 860" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
|
|
||||||
{{ name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
width: 60%;
|
|
||||||
border-radius: 40px;
|
|
||||||
border: 0.64px solid #ffdf36;
|
|
||||||
background: linear-gradient(
|
|
||||||
270deg,
|
|
||||||
transparent 0%,
|
|
||||||
rgba(255, 255, 255, 0.6) 50%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.6) inset;
|
|
||||||
|
|
||||||
padding: 2px 4px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/src/assets/icon/coin.png"
|
|
||||||
alt=""
|
|
||||||
style="display: block"
|
|
||||||
:style="{ width: isTopOne ? '25%' : '35%' }"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="font-weight: 700; color: #ffe601"
|
|
||||||
class="showText"
|
|
||||||
:class="isTopOne ? 'top1Text' : 'text'"
|
|
||||||
>
|
|
||||||
{{ distributionValue }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
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: '',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
import defaultAvatar from '@/assets/icon/defaultAvatar.png'
|
|
||||||
|
|
||||||
const defaultAvatarUrl = (e) => {
|
|
||||||
console.log('头像资源出错')
|
|
||||||
e.target.onerror = null //防止循环
|
|
||||||
e.target.src = defaultAvatar
|
|
||||||
}
|
|
||||||
</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.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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,666 +0,0 @@
|
|||||||
<!-- src/views/Activities/RevolutionUnityDay/index.vue -->
|
|
||||||
<template>
|
|
||||||
<div class="fullPage">
|
|
||||||
<div class="bg">
|
|
||||||
<!-- 状态栏占位区域(仅在APP中显示) -->
|
|
||||||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
|
||||||
|
|
||||||
<!-- 按钮 -->
|
|
||||||
<div style="display: flex; justify-content: flex-end; align-items: center">
|
|
||||||
<!-- 帮助按钮 -->
|
|
||||||
<img
|
|
||||||
src="../../../assets/icon/helpAct.png"
|
|
||||||
alt=""
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin-top: 100vw;
|
|
||||||
position: relative;
|
|
||||||
width: 10%;
|
|
||||||
margin-right: 8px;
|
|
||||||
"
|
|
||||||
@click="maskLayerShow = true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 倒计时 -->
|
|
||||||
<div style="display: flex; justify-content: center; gap: 4px; margin-top: 1vw">
|
|
||||||
<div style="width: 15%">
|
|
||||||
<itemCenter :imgUrl="images.timeDayBg">
|
|
||||||
<div class="timeText" style="margin-bottom: 20%">{{ Days }}D</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
<div class="timeText timeGap" style="width: 6px"></div>
|
|
||||||
<div style="width: 15%">
|
|
||||||
<itemCenter :imgUrl="images.timeHourBg">
|
|
||||||
<div class="timeText" style="margin-bottom: 20%">{{ Hours }}</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
<div class="timeText timeGap">:</div>
|
|
||||||
<div style="width: 15%">
|
|
||||||
<itemCenter :imgUrl="images.timeMinBg">
|
|
||||||
<div class="timeText" style="margin-bottom: 20%">{{ Minutes }}</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
<div class="timeText timeGap">:</div>
|
|
||||||
<div style="width: 15%">
|
|
||||||
<itemCenter :imgUrl="images.timeSecBg">
|
|
||||||
<div class="timeText" style="margin-bottom: 20%">{{ Second }}</div>
|
|
||||||
</itemCenter>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 每周礼物 -->
|
|
||||||
<div style="display: flex; justify-content: center; margin-top: 10px">
|
|
||||||
<div style="width: 100%; position: relative">
|
|
||||||
<img :src="images.giftsBg" alt="" style="width: 100%" />
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div style="width: 80%; 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"
|
|
||||||
>
|
|
||||||
<div style="position: relative">
|
|
||||||
<img style="" :src="images.giftItemBg" alt="" width="100%" />
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<img :src="gift.giftPhoto" alt="" width="50%" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
|
|
||||||
<img
|
|
||||||
src="/src/assets/icon/coin.png"
|
|
||||||
alt=""
|
|
||||||
style="width: 18%; aspect-ratio: 1/1"
|
|
||||||
/>
|
|
||||||
<div style="color: rgba(255, 255, 255, 1); font-weight: 590">
|
|
||||||
{{ gift.giftCandy }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 切换按钮 -->
|
|
||||||
<div style="display: flex; justify-content: space-around">
|
|
||||||
<img
|
|
||||||
:src="rankingShow ? images.rankingBtActive : images.rankingBt"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 40%"
|
|
||||||
@click="rankingShow = true"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
:src="!rankingShow ? images.rewardBtActive : images.rewardsBt"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 40%"
|
|
||||||
@click="rankingShow = false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 展示内容 -->
|
|
||||||
<div>
|
|
||||||
<!-- Ranking -->
|
|
||||||
<div
|
|
||||||
v-show="rankingShow"
|
|
||||||
style="position: relative; width: 90%; left: 50%; transform: translateX(-50%)"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
inset: 2;
|
|
||||||
background: radial-gradient(50% 50% at 50% 50%, #10614b 0%, #053126 100%);
|
|
||||||
z-index: 1;
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
<div style="position: relative; z-index: 1">
|
|
||||||
<!-- 前三名 -->
|
|
||||||
<div style="position: relative">
|
|
||||||
<!-- 头像框 -->
|
|
||||||
<img :src="images.RankingMain" alt="" width="100%" style="display: block" />
|
|
||||||
<!-- 用户信息 -->
|
|
||||||
<div style="position: absolute; inset: 0; padding: 18% 5% 2%">
|
|
||||||
<div style="margin-top: 3%">
|
|
||||||
<!-- 第一 -->
|
|
||||||
<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: 43%"
|
|
||||||
@click="viewUserInfo(RankingHasTop3[0].userId)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- 第二三 -->
|
|
||||||
<div style="display: flex; justify-content: space-between; margin-top: -20%">
|
|
||||||
<TopUser
|
|
||||||
:isTopOne="false"
|
|
||||||
:BorderImgUrl="images.topTwo"
|
|
||||||
:avatarUrl="RankingHasTop3[1].avatar"
|
|
||||||
:name="RankingHasTop3[1].nickname"
|
|
||||||
:distributionValue="RankingHasTop3[1].quantity"
|
|
||||||
style="width: 30%"
|
|
||||||
@click="viewUserInfo(RankingHasTop3[1].userId)"
|
|
||||||
/>
|
|
||||||
<TopUser
|
|
||||||
:isTopOne="false"
|
|
||||||
:BorderImgUrl="images.topThree"
|
|
||||||
:avatarUrl="RankingHasTop3[2].avatar"
|
|
||||||
:name="RankingHasTop3[2].nickname"
|
|
||||||
:distributionValue="RankingHasTop3[2].quantity"
|
|
||||||
style="width: 30%"
|
|
||||||
@click="viewUserInfo(RankingHasTop3[2].userId)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 第四名开始 -->
|
|
||||||
<div
|
|
||||||
v-for="listItem in showRanking"
|
|
||||||
style="position: relative"
|
|
||||||
@click="viewUserInfo(listItem.userId)"
|
|
||||||
>
|
|
||||||
<img :src="images.RankingItem" alt="" width="100%" style="display: block" />
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 8%;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div style="width: 70%; display: flex; align-items: center">
|
|
||||||
<div style="color: #edb247; font-weight: 700; width: 10%" class="UserNickname">
|
|
||||||
{{ listItem.rank }}
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
:src="listItem.avatar || ''"
|
|
||||||
alt=""
|
|
||||||
style="
|
|
||||||
width: 20%;
|
|
||||||
margin: 0 2%;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
"
|
|
||||||
@error="defaultAvatarUrl"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
width: calc(100% - 10% - 28% - 16px);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 860;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
width: 100%;
|
|
||||||
"
|
|
||||||
class="UserNickname"
|
|
||||||
>
|
|
||||||
{{ listItem.nickname }}
|
|
||||||
</div>
|
|
||||||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
|
||||||
ID:{{ listItem.account }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex; width: 30%; display: flex; align-items: center">
|
|
||||||
<img src="/src/assets/icon/coin.png" alt="" style="width: 30%" />
|
|
||||||
<div style="color: #edb247; font-weight: 700" class="UserNickname">
|
|
||||||
{{ listItem.quantity }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 底框 -->
|
|
||||||
<img
|
|
||||||
:src="images.RankingBottomBorder"
|
|
||||||
alt=""
|
|
||||||
width="100%"
|
|
||||||
style="display: block; margin-top: -20%"
|
|
||||||
/>
|
|
||||||
</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: 90%; margin: 10px 0"
|
|
||||||
>
|
|
||||||
<div style="position: relative">
|
|
||||||
<img :src="topImg[Number(rewardsTop.rankRange) - 1]" alt="" style="width: 100%" />
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 8px;
|
|
||||||
padding: 20vw 5vw 15vw;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
|
||||||
:key="rewardIndex"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<div style="position: relative">
|
|
||||||
<img :src="images.giftItemBg" style="" alt="" width="100%" />
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
:src="reward.cover || ''"
|
|
||||||
alt=""
|
|
||||||
width="50%"
|
|
||||||
style="aspect-ratio: 1/1"
|
|
||||||
@error="(e) => handleImageError(e, reward.type)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="color: rgba(255, 255, 255, 1); font-weight: 590; text-align: center">
|
|
||||||
{{ showDetail(reward.type, reward) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 我的排名 -->
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
background-color: #053126;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
z-index: 999;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<img :src="images.myRankingBg" alt="" style="width: calc(100% - 1px); display: block" />
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2% 5% 0;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="width: 70%; display: flex; justify-content: space-around; align-items: center"
|
|
||||||
>
|
|
||||||
<!-- 排名 -->
|
|
||||||
<div style="color: #edb247; font-weight: 700">{{ myRanking.rank || 999 }}</div>
|
|
||||||
<!-- 头像 -->
|
|
||||||
<img
|
|
||||||
:src="myRanking.avatar || ''"
|
|
||||||
alt=""
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
width: 25%;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
margin: 0 12px;
|
|
||||||
"
|
|
||||||
@error="defaultAvatarUrl"
|
|
||||||
/>
|
|
||||||
<!-- 名称 -->
|
|
||||||
<div style="display: flex; flex-direction: column; width: calc(100% - 25% - 24px)">
|
|
||||||
<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: 30%; display: flex; justify-content: center; align-items: center">
|
|
||||||
<img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
|
|
||||||
<div style="color: #edb247; font-weight: 700">
|
|
||||||
{{ myRanking.quantity || 0 }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 弹窗遮罩层 -->
|
|
||||||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
|
||||||
<!-- help弹窗 -->
|
|
||||||
<div style="margin: 20% 0" @click.stop>
|
|
||||||
<img :src="images.helpInfo" alt="" style="width: 100%" />
|
|
||||||
</div>
|
|
||||||
</maskLayer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
|
|
||||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
||||||
import itemCenter from '@/components/itemCenter.vue'
|
|
||||||
import TopUser from './components/topUser.vue'
|
|
||||||
import maskLayer from '@/components/MaskLayer.vue'
|
|
||||||
import { getMemberProfile } from '@/api/wallet'
|
|
||||||
import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
|
|
||||||
import { connectToApp } from '@/utils/appConnector.js'
|
|
||||||
|
|
||||||
// vite动态批量导入图片
|
|
||||||
const imageModules = import.meta.glob('@/assets/images/Activities/revolution/*.{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 }, () => ({
|
|
||||||
userAvatar: '',
|
|
||||||
userNickname: '',
|
|
||||||
quantity: '',
|
|
||||||
}))
|
|
||||||
RankingShow.push(...addNullUser)
|
|
||||||
}
|
|
||||||
return RankingShow
|
|
||||||
})
|
|
||||||
|
|
||||||
// 展示用的榜单
|
|
||||||
const showRanking = computed(() => {
|
|
||||||
return Ranking.value.filter((_, index) => index >= 3)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 奖励图片资源出错处理
|
|
||||||
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年11月14日上午10点的时间戳(北京时间)
|
|
||||||
const getTargetTime = () => {
|
|
||||||
const targetDate = new Date(2025, 10, 14, 10, 0, 0) // 月份从0开始,10代表11月
|
|
||||||
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 () => {
|
|
||||||
const resMyWeekStarRanking = await getRankingListAndMyRanking(1)
|
|
||||||
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('1986033416841801729')
|
|
||||||
if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
|
|
||||||
gifts.value = resRewardsAndGifts.body.gifts
|
|
||||||
rewardsList.value = resRewardsAndGifts.body.butOneRewards
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 刷新页面数据
|
|
||||||
const initData = () => {
|
|
||||||
console.log('initData')
|
|
||||||
|
|
||||||
getListAndMy() // 获取排行榜和我的排名
|
|
||||||
getRewardsAndGifts() //获取本周的礼物和奖励列表
|
|
||||||
}
|
|
||||||
|
|
||||||
// 使用工具函数连接APP
|
|
||||||
const connectToAppHandler = async () => {
|
|
||||||
console.log('connectToAppHandler')
|
|
||||||
|
|
||||||
await connectToApp(() => {
|
|
||||||
// 连接成功回调
|
|
||||||
console.log('连接成功回调')
|
|
||||||
|
|
||||||
initData() //初始化数据
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 组件挂载时检测环境
|
|
||||||
onMounted(() => {
|
|
||||||
console.log('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 {
|
|
||||||
background: linear-gradient(0deg, #053126 0%, #053126 100%);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg {
|
|
||||||
width: 100vw;
|
|
||||||
min-height: 100vh;
|
|
||||||
background-image: url(../../../assets/images/Activities/revolution/bg.png);
|
|
||||||
background-size: 100% auto;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeText {
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 860;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeGap {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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>
|
|
||||||