chore(恢复过期活动): 暂时保留以便查看数据
This commit is contained in:
hzj
parent
365c3c220a
commit
9bbe7fe313
@ -1,10 +1,10 @@
|
||||
<!-- src/views/Activities/Oman/NationalDay/index.vue -->
|
||||
<!-- src/views/Activities/heroesDay/index.vue -->
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 新增的背景图层 -->
|
||||
<div class="background-overlay"></div>
|
||||
|
||||
<div class="bg" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
|
||||
<div class="bg">
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||||
|
||||
@ -23,25 +23,25 @@
|
||||
<!-- 倒计时 -->
|
||||
<div style="display: flex; justify-content: center; gap: 4px; margin-top: 1vw">
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeDayBg')">
|
||||
<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: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeHourBg')">
|
||||
<itemCenter :imgUrl="images.timeHourBg">
|
||||
<div class="timeText" style="margin-bottom: 20%">{{ Hours }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
<div class="timeText timeGap">:</div>
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeMinBg')">
|
||||
<itemCenter :imgUrl="images.timeMinBg">
|
||||
<div class="timeText" style="margin-bottom: 20%">{{ Minutes }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
<div class="timeText timeGap">:</div>
|
||||
<div style="width: 20%">
|
||||
<itemCenter :imgUrl="imageUrl('timeSecBg')">
|
||||
<itemCenter :imgUrl="images.timeSecBg">
|
||||
<div class="timeText" style="margin-bottom: 20%">{{ Second }}</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
@ -49,22 +49,21 @@
|
||||
|
||||
<!-- 每周礼物 -->
|
||||
<div style="display: flex; justify-content: center; margin-top: 10px">
|
||||
<itemCenter :imgUrl="imageUrl('giftsBg')" :contentStyle="'paddingTop: 10%;'">
|
||||
<itemCenter :imgUrl="images.giftsBg" :contentStyle="'paddingTop: 10%;'">
|
||||
<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="imageUrl('giftItemBg')">
|
||||
<img
|
||||
<itemCenter :imgUrl="images.giftItemBg"
|
||||
><img
|
||||
v-smart-img
|
||||
:src="gift.giftPhoto"
|
||||
alt=""
|
||||
width="70%"
|
||||
style="display: block; object-fit: cover"
|
||||
/>
|
||||
</itemCenter>
|
||||
/></itemCenter>
|
||||
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
|
||||
<img
|
||||
v-smart-img
|
||||
@ -85,14 +84,14 @@
|
||||
<div style="display: flex; justify-content: space-around">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="rankingShow ? imageUrl('rankingBtActive') : imageUrl('rankingBt')"
|
||||
:src="rankingShow ? images.rankingBtActive : images.rankingBt"
|
||||
alt=""
|
||||
style="display: block; width: 40%"
|
||||
@click="rankingShow = true"
|
||||
/>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="!rankingShow ? imageUrl('rewardBtActive') : imageUrl('rewardsBt')"
|
||||
:src="!rankingShow ? images.rewardBtActive : images.rewardsBt"
|
||||
alt=""
|
||||
style="display: block; width: 40%"
|
||||
@click="rankingShow = false"
|
||||
@ -114,12 +113,12 @@
|
||||
></div>
|
||||
<div style="position: relative; z-index: 1">
|
||||
<!-- 前三名 -->
|
||||
<itemCenter :imgUrl="imageUrl('RankingMain')" :contentStyle="`padding: 25% 7% 10%`">
|
||||
<itemCenter :imgUrl="images.RankingMain" :contentStyle="`padding: 25% 7% 10%`">
|
||||
<div style="margin-top: 13%">
|
||||
<!-- 第一 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUser
|
||||
:BorderImgUrl="imageUrl('topOne')"
|
||||
:BorderImgUrl="images.topOne"
|
||||
:avatarUrl="RankingHasTop3[0].avatar"
|
||||
:name="RankingHasTop3[0].nickname"
|
||||
:distributionValue="RankingHasTop3[0].quantity"
|
||||
@ -132,7 +131,7 @@
|
||||
<TopUser
|
||||
:isTopOne="false"
|
||||
ranking="2"
|
||||
:BorderImgUrl="imageUrl('topTwo')"
|
||||
:BorderImgUrl="images.topTwo"
|
||||
:avatarUrl="RankingHasTop3[1].avatar"
|
||||
:name="RankingHasTop3[1].nickname"
|
||||
:distributionValue="RankingHasTop3[1].quantity"
|
||||
@ -142,7 +141,7 @@
|
||||
<TopUser
|
||||
:isTopOne="false"
|
||||
ranking="3"
|
||||
:BorderImgUrl="imageUrl('topThree')"
|
||||
:BorderImgUrl="images.topThree"
|
||||
:avatarUrl="RankingHasTop3[2].avatar"
|
||||
:name="RankingHasTop3[2].nickname"
|
||||
:distributionValue="RankingHasTop3[2].quantity"
|
||||
@ -157,11 +156,8 @@
|
||||
<div v-if="showRanking.length > 0" style="margin-bottom: 6vw; margin-top: -10vw">
|
||||
<itemCenter
|
||||
v-for="listItem in showRanking"
|
||||
:key="listItem.userId"
|
||||
:imgUrl="imageUrl('RankingItem')"
|
||||
:imgUrl="images.RankingItem"
|
||||
:contentStyle="`padding: 0 10%`"
|
||||
:lazy="true"
|
||||
:immediate="index < 2"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
>
|
||||
<div style="width: 75%; min-width: 0; display: flex; align-items: center">
|
||||
@ -227,7 +223,7 @@
|
||||
<!-- 底框 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('RankingBottomBorder')"
|
||||
:src="images.RankingBottomBorder"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block; margin-top: -22vw; position: relative; z-index: 9"
|
||||
@ -254,7 +250,7 @@
|
||||
:key="rewardIndex"
|
||||
style="width: 100%"
|
||||
>
|
||||
<itemCenter :imgUrl="imageUrl('giftItemBg')">
|
||||
<itemCenter :imgUrl="images.giftItemBg">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="reward.cover || ''"
|
||||
@ -288,7 +284,7 @@
|
||||
background: linear-gradient(0deg, #6e1116 0%, #6e1116 100%), #d9d9d9;
|
||||
z-index: 2;
|
||||
"
|
||||
:imgUrl="imageUrl('myRankingBg')"
|
||||
:imgUrl="images.myRankingBg"
|
||||
:contentStyle="`padding: 2% 5% 0`"
|
||||
>
|
||||
<div
|
||||
@ -364,7 +360,7 @@
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||
<!-- help弹窗 -->
|
||||
<div style="margin: 20% 0" @click.stop>
|
||||
<img v-smart-img :src="imageUrl('helpInfo')" alt="" style="display: block; width: 100%" />
|
||||
<img v-smart-img :src="images.helpInfo" alt="" style="display: block; width: 100%" />
|
||||
</div>
|
||||
</maskLayer>
|
||||
</div>
|
||||
@ -372,20 +368,28 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { isInApp, viewUserInfo } from '@/utils/appBridge.js'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
import { getPngUrl } from '@/config/imagePaths.js'
|
||||
import { preloadImages } from '@/utils/imagePreloader.js'
|
||||
|
||||
import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.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 { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
|
||||
// 获取OSS图片URL的函数
|
||||
const imageUrl = (filename) => getPngUrl('Activities/Oman/NationalDay/', filename)
|
||||
// vite动态批量导入图片
|
||||
const imageModules = import.meta.glob(
|
||||
'@/assets/images/Activities/Oman/NationalDay/*.{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) //帮助模块
|
||||
@ -405,7 +409,7 @@ const myRanking = ref({}) // 我的排名
|
||||
const rewardsList = ref([]) // 奖励列表
|
||||
const gifts = ref([]) // 本周礼物
|
||||
|
||||
const topImg = ref([imageUrl('top1RewardBg'), imageUrl('top2RewardBg'), imageUrl('top3RewardBg')]) // top图片
|
||||
const topImg = ref([images.top1RewardBg, images.top2RewardBg, images.top3RewardBg]) // top图片
|
||||
|
||||
// 处理排行榜小于3人时的情况
|
||||
const RankingHasTop3 = computed(() => {
|
||||
@ -424,6 +428,7 @@ const RankingHasTop3 = computed(() => {
|
||||
// 展示用的榜单
|
||||
const showRanking = computed(() => {
|
||||
return Ranking.value.filter((_, index) => index >= 3)
|
||||
// return []
|
||||
})
|
||||
|
||||
// 奖励图片资源出错处理
|
||||
@ -517,42 +522,11 @@ const initData = () => {
|
||||
getRewardsAndGifts() //获取本周的礼物和奖励列表
|
||||
}
|
||||
|
||||
// 预加载关键图片
|
||||
const preloadCriticalImages = () => {
|
||||
const criticalImages = [
|
||||
imageUrl('bg'),
|
||||
imageUrl('timeDayBg'),
|
||||
imageUrl('timeHourBg'),
|
||||
imageUrl('timeMinBg'),
|
||||
imageUrl('timeSecBg'),
|
||||
imageUrl('giftsBg'),
|
||||
imageUrl('giftItemBg'),
|
||||
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('top1RewardBg'),
|
||||
imageUrl('top2RewardBg'),
|
||||
imageUrl('top3RewardBg'),
|
||||
]
|
||||
|
||||
preloadImages(criticalImages, { useSmartCache: true })
|
||||
}
|
||||
|
||||
// 使用工具函数连接APP
|
||||
const connectToAppHandler = async () => {
|
||||
await connectToApp(() => {
|
||||
// 连接成功回调
|
||||
initData() //初始化数据
|
||||
preloadCriticalImages() //预加载关键图片
|
||||
})
|
||||
}
|
||||
|
||||
@ -594,7 +568,7 @@ onUnmounted(() => {
|
||||
.bg {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-image: var(--bg-url);
|
||||
background-image: url(../../../../assets/images/Activities/Oman/NationalDay/bg.png);
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user