feat(春节活动页面): 奖励页面组件完成

This commit is contained in:
hzj 2026-02-09 16:18:55 +08:00
parent 439d51b9c2
commit 985fe6968f
4 changed files with 308 additions and 430 deletions

View File

@ -1,5 +1,65 @@
<template>
<div></div>
<div style="display: flex; flex-direction: column; gap: 2vw">
<itemCenter
v-for="(rewardsTop, index) in rankingRewards"
style=""
:imgUrl="imageUrl(`rankingRewardTop${index + 1}Bg`)"
:contentStyle="rewardContentLayer(index)"
:lazy="true"
>
<!-- 奖励列表 -->
<div
v-for="(reward, rewardIndex) in rewardsTop.rewardProps"
:key="rewardIndex"
style="
width: 100%;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
"
>
<!-- 奖品图 -->
<div
style="
width: 80%;
height: 75%;
padding: 6vw 0 2vw;
min-width: 0;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- 奖励图片 -->
<img
v-smart-img
:src="reward.cover || ''"
alt=""
style="display: block; min-width: 0; width: 80%; height: 100%; object-fit: contain"
@error="(e) => handleRewardImageError(e, reward.type)"
/>
</div>
<!-- 数值 -->
<div
style="
width: 80%;
height: 5.5vw;
display: flex;
justify-content: center;
align-items: center;
"
>
<div style="min-width: 0; font-size: 1em; font-weight: 590; color: #fff">
{{ formatRewardDisplay(reward.type, reward) }}
</div>
</div>
</div>
</itemCenter>
</div>
</template>
<script setup>
@ -81,62 +141,22 @@ const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `filename_ar` : filename
}
//
const openPopup = (type) => {
closedPopup(false) //
switch (type) {
case 'help':
helpShow.value = true
break
default:
break
//
const rewardContentLayer = (index) => {
let gridStyle = ''
if (currentLangType.value == 'ar') {
gridStyle = 'direction: ltr;'
}
if (index == 0) {
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 27.5vw 7vw 14vw;${gridStyle}`
} else if (index == 1 || index == 2) {
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 27.5vw 7vw 44vw;${gridStyle}`
} else if (index == 3) {
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 27.5vw 7vw 14vw;${gridStyle}`
}
}
//
const closedPopup = (clear = true) => {
helpShow.value = false
//
if (clear) {
}
}
//
const initData = async () => {
await Promise.all([])
}
//
const preloadCriticalImages = async () => {
const criticalImages = []
await preloadImages(criticalImages)
}
//
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()
})
onMounted(() => {})
onUnmounted(() => {})
</script>

View File

@ -1,5 +1,95 @@
<template>
<div></div>
<div style="display: flex; flex-direction: column; gap: 2vw">
<itemCenter
v-for="(rewardsTop, index) in RechargeRewards"
style=""
:imgUrl="topImg[Number(rewardsTop.sort) - 1]"
:contentStyle="rewardContentLayer(index)"
:lazy="true"
>
<!-- 奖励列表 -->
<div
v-for="(reward, rewardIndex) in rewardsTop.rewardProps"
:key="rewardIndex"
style="
width: 100%;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
"
>
<!-- 奖品图 -->
<div
style="
width: 80%;
height: 75%;
padding: 6vw 0 2vw;
min-width: 0;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- 奖励图片 -->
<img
v-smart-img
:src="reward.cover || ''"
alt=""
style="display: block; min-width: 0; width: 80%; height: 100%; object-fit: contain"
@error="(e) => handleRewardImageError(e, reward.type)"
/>
</div>
<!-- 数值 -->
<div
style="
width: 80%;
height: 5.5vw;
display: flex;
justify-content: center;
align-items: center;
"
>
<div style="min-width: 0; font-size: 1em; font-weight: 590; color: #fff">
{{ formatRewardDisplay(reward.type, reward) }}
</div>
</div>
</div>
<!-- 领取按钮 -->
<div
style="
position: absolute;
bottom: 7vw;
left: 0;
right: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
<img
v-if="rewardsTop.claimStatus == 0"
:src="imageUrl('receiveBt')"
alt=""
style="width: 40vw; display: block; object-fit: cover"
@click="receiveReward(rewardsTop)"
/>
<img
v-else
class="grayscale-container"
:src="imageUrl('receiveBt')"
alt=""
style="width: 40vw; display: block; object-fit: cover"
/>
</div>
</itemCenter>
</div>
</template>
<script setup>
@ -81,62 +171,31 @@ const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `filename_ar` : filename
}
//
const openPopup = (type) => {
closedPopup(false) //
switch (type) {
case 'help':
helpShow.value = true
break
default:
break
const topImg = ref([
imageUrl('rechargeReward100'),
imageUrl('rechargeReward500'),
imageUrl('rechargeReward1000'),
imageUrl('rechargeReward3000'),
imageUrl('rechargeReward5000'),
imageUrl('rechargeReward10000'),
]) // top
//
const rewardContentLayer = (index) => {
let gridStyle = ''
if (currentLangType.value == 'ar') {
gridStyle = 'direction: ltr;'
}
if (index == 0) {
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 27.5vw 7vw 22vw;${gridStyle}`
} else if (index == 1 || index == 2) {
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 27.5vw 7vw 25.5vw;${gridStyle}`
} else if (index == 3 || index == 4 || index == 5) {
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 27.5vw 7vw 21.5vw;${gridStyle}`
}
}
//
const closedPopup = (clear = true) => {
helpShow.value = false
//
if (clear) {
}
}
//
const initData = async () => {
await Promise.all([])
}
//
const preloadCriticalImages = async () => {
const criticalImages = []
await preloadImages(criticalImages)
}
//
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()
})
onMounted(() => {})
onUnmounted(() => {})
</script>
@ -198,6 +257,10 @@ onUnmounted(() => {})
}
}
.grayscale-container {
filter: grayscale(100%) brightness(90%);
}
.scrollY::-webkit-scrollbar {
display: none;
}

View File

@ -1,322 +0,0 @@
<!-- 告白墙弹幕 -->
<template>
<div
style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none"
>
<!-- 双行弹幕轨道 -->
<div
v-for="(track, index) in visibleTracks"
:key="index"
style="position: absolute; width: 100%; height: 50px"
:style="{ top: `calc(${index} * 16vw)` }"
>
<div
v-for="item in track"
:key="item.id"
class="barrage-item"
style="
position: absolute;
border-radius: 26px;
padding: 8px;
display: flex;
align-items: center;
gap: 2vw;
backdrop-filter: blur(1px);
"
:style="getBarrageStyle(item)"
@animationend="handleAnimationEnd(item.id)"
>
<!-- 情侣头像 -->
<div
style="
position: relative;
display: flex;
align-items: center;
gap: 2vw;
"
>
<!-- 爱心图形 -->
<div
style="
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
"
>
<img
:src="imageUrl('coupleSign')"
alt=""
style="width: 5vw; display: block; object-fit: cover"
/>
</div>
<!-- 发送人 -->
<img
v-smart-img
:src="item.senderAvatar || ''"
alt=""
style="
width: 8vw;
border-radius: 50%;
display: block;
aspect-ratio: 1/1;
object-fit: cover;
"
@error="handleAvatarImageError"
/>
<!-- 接收人 -->
<img
v-smart-img
:src="item.receiverAvatar || ''"
alt=""
style="
width: 8vw;
border-radius: 50%;
display: block;
aspect-ratio: 1/1;
object-fit: cover;
"
@error="handleAvatarImageError"
/>
</div>
<div
style="
white-space: nowrap;
font-weight: 700;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(
180deg,
#fff9a9 26.92%,
#ed7d0a 52.08%,
#fffab5 73.08%
);
"
>
{{ item.content }}
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { handleAvatarImageError } from '@/utils/imageHandler.js'
const { locale, t } = useI18n()
// OSSURL
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
const props = defineProps({
barrageList: {
type: Array,
required: true,
default: () => [],
},
maxItems: {
type: Number,
default: 4, //
},
loopInterval: {
type: Number,
default: 2000, // (ms)
},
})
const tracks = ref([[], []]) //
const idCounter = ref(0) // ID
const currentIndex = ref(0) //
//
const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
//
const getBarrageStyle = (item) => {
const isRTL = locale.value === 'ar'
return {
animationDuration: `${item.duration}s`,
animationDelay: `${item.delay}s`,
'--start-pos': `${item.startPos}px`,
borderRadius: '200px',
background: 'linear-gradient(180deg, #FFACBB 0%, rgba(255, 172, 187, 0.00) 58.38%), #FF4768',
boxShadow:
'0 1px 4.5px 0 rgba(0, 0, 0, 0.10), -1px 0 5px 0 rgba(255, 255, 255, 0.70) inset, -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.20) inset, 1px 0 5px 0 rgba(255, 255, 255, 0.70) inset, 3.5px 0 7.5px 0 rgba(255, 255, 255, 0.20) inset',
// RTL
...(isRTL
? {
right: '0',
left: 'auto',
transform: 'translateX(-100vw)',
}
: {
left: '0',
right: 'auto',
transform: 'translateX(100vw)',
}),
}
}
//
const generateBarrageProps = (item) => {
const textLength = item.content.length
return {
duration: Math.min(5 + textLength * 0.1, 10), // 0.28
startPos: 0, //
}
}
//
const addToTrack = (item) => {
//
const trackIndex = tracks.value.reduce(
(minIndex, track, index) => (track.length < tracks.value[minIndex].length ? index : minIndex),
0,
)
if (tracks.value[trackIndex].length < props.maxItems) {
tracks.value[trackIndex].push({
...item,
id: idCounter.value++, //
delay: 0, // 0-4
...generateBarrageProps(item),
})
}
}
//
const cleanCompleted = () => {
tracks.value.forEach((track) => {
for (let i = track.length - 1; i >= 0; i--) {
if (track[i].completed) {
track.splice(i, 1)
}
}
})
}
//
const handleAnimationEnd = (id) => {
tracks.value.forEach((track) => {
const item = track.find((item) => item.id === id)
if (item) item.completed = true
})
}
//
const getNextBarrage = () => {
if (props.barrageList.length === 0) return null
const item = props.barrageList[currentIndex.value] //
currentIndex.value = (currentIndex.value + 1) % props.barrageList.length //0
return { ...item } //
}
//
let barrageInterval = null
//
const startBarrage = () => {
barrageInterval = setInterval(() => {
cleanCompleted() //
const nextBarrage = getNextBarrage() //
if (nextBarrage) {
addToTrack(nextBarrage) //
}
}, props.loopInterval)
}
onMounted(() => {
startBarrage() //
})
onUnmounted(() => {
clearInterval(barrageInterval) //
})
//
watch(
() => props.barrageList,
(newList) => {
currentIndex.value = 0 //
clearInterval(barrageInterval) //
//
if (newList.length !== 0) {
startBarrage() //
}
},
{ deep: true },
)
</script>
<style scoped>
/* 样式保持不变(同之前版本) */
.barrage-item {
will-change: transform;
animation: moveLeft linear forwards;
}
@keyframes moveLeft {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
}
}
/* RTL支持 - 镜像弹幕动画 */
[dir='rtl'] .barrage-item {
animation: moveRight linear forwards;
}
@keyframes moveRight {
0% {
transform: translateX(-100vw);
}
100% {
transform: translateX(100%);
}
}
@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>

View File

@ -564,6 +564,7 @@ import {
} from '@/api/couple.js'
import {
ranklist, //
activityRewardConfigs, //
withdrawableAmount, //
} from '@/api/lottery'
@ -943,6 +944,119 @@ const getRanking = async (rankingType = 'lottery') => {
}
}
//
const getGameReward = async () => {
let data = {
activityType: 'CONSUMPTION_ACTIVITY',
activityId: '2005571533988298753',
}
const resActivityReward = await activityRewardConfigs(data)
if (resActivityReward.status && resActivityReward.body) {
let tempList = resActivityReward.body.filter((_, index) => index <= 3)
rankingRewards.value = tempList.map((rewards) => {
let jsonData = JSON.parse(rewards.jsonData)
let addReward = []
if (rewards.sort == 1) {
addReward = [
{
type: 'TICKET',
cover: imageUrl('ticket'),
content: 10,
},
{
type: 'TICKET',
cover: imageUrl('ticket'),
content: 10,
},
{
type: 'TICKET',
cover: imageUrl('ticket'),
content: 10,
},
]
}
rewards.rewardProps.push(...addReward) //
rewards = {
...rewards,
...jsonData,
}
return rewards
})
} else {
rankingRewards.value = []
}
}
//
const getRechargeReward = async () => {
let data = {
activityType: 'CONSUMPTION_ACTIVITY',
activityId: '2005571533988298753',
}
const resActivityReward = await activityRewardConfigs(data)
if (resActivityReward.status && resActivityReward.body) {
RechargeRewards.value = resActivityReward.body.map((rewards) => {
let jsonData = JSON.parse(rewards.jsonData)
let addReward = []
if (rewards.sort == 1) {
addReward = []
} else if (rewards.sort == 2) {
addReward = []
} else if (rewards.sort == 3) {
addReward = []
} else if (rewards.sort == 4) {
addReward = [
{
type: 'TICKET',
cover: imageUrl('ticket'),
content: 30,
},
]
} else if (rewards.sort == 5) {
addReward = [
{
type: 'TICKET',
cover: imageUrl('ticket'),
content: 40,
},
]
} else if (rewards.sort == 6) {
addReward = [
{
type: 'TICKET',
cover: imageUrl('ticket'),
content: 50,
},
{
type: 'TICKET',
cover: imageUrl('ticket'),
content: 50,
},
{
type: 'TICKET',
cover: imageUrl('ticket'),
content: 50,
},
]
}
rewards.rewardProps.push(...addReward) //
rewards = {
...rewards,
...jsonData,
}
return rewards
})
} else {
RechargeRewards.value = []
}
}
//
const initData = async () => {
await Promise.all([
@ -954,6 +1068,9 @@ const initData = async () => {
getRanking('lottery'), //
getRanking('recharge'), //
getGameReward(), //
getRechargeReward(), //
])
}