feat(春节活动页面): 奖励页面组件完成
This commit is contained in:
hzj
parent
439d51b9c2
commit
985fe6968f
@ -1,5 +1,65 @@
|
|||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -81,62 +141,22 @@ const getImgName = (filename) => {
|
|||||||
return currentLangType.value === 'ar' ? `filename_ar` : filename
|
return currentLangType.value === 'ar' ? `filename_ar` : filename
|
||||||
}
|
}
|
||||||
|
|
||||||
// 打开弹窗
|
//充值奖励的内容样式
|
||||||
const openPopup = (type) => {
|
const rewardContentLayer = (index) => {
|
||||||
closedPopup(false) //先关闭其他弹窗，不清除抽奖结果
|
let gridStyle = ''
|
||||||
switch (type) {
|
if (currentLangType.value == 'ar') {
|
||||||
case 'help':
|
gridStyle = 'direction: ltr;'
|
||||||
helpShow.value = true
|
}
|
||||||
break
|
if (index == 0) {
|
||||||
default:
|
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 27.5vw 7vw 14vw;${gridStyle}`
|
||||||
break
|
} 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}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 关闭弹窗
|
onMounted(() => {})
|
||||||
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()
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {})
|
onUnmounted(() => {})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,95 @@
|
|||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -81,62 +171,31 @@ const getImgName = (filename) => {
|
|||||||
return currentLangType.value === 'ar' ? `filename_ar` : filename
|
return currentLangType.value === 'ar' ? `filename_ar` : filename
|
||||||
}
|
}
|
||||||
|
|
||||||
// 打开弹窗
|
const topImg = ref([
|
||||||
const openPopup = (type) => {
|
imageUrl('rechargeReward100'),
|
||||||
closedPopup(false) //先关闭其他弹窗，不清除抽奖结果
|
imageUrl('rechargeReward500'),
|
||||||
switch (type) {
|
imageUrl('rechargeReward1000'),
|
||||||
case 'help':
|
imageUrl('rechargeReward3000'),
|
||||||
helpShow.value = true
|
imageUrl('rechargeReward5000'),
|
||||||
break
|
imageUrl('rechargeReward10000'),
|
||||||
default:
|
]) // top图片
|
||||||
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 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}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 关闭弹窗
|
onMounted(() => {})
|
||||||
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()
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {})
|
onUnmounted(() => {})
|
||||||
</script>
|
</script>
|
||||||
@ -198,6 +257,10 @@ onUnmounted(() => {})
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grayscale-container {
|
||||||
|
filter: grayscale(100%) brightness(90%);
|
||||||
|
}
|
||||||
|
|
||||||
.scrollY::-webkit-scrollbar {
|
.scrollY::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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()
|
|
||||||
|
|
||||||
// 获取OSS图片URL的函数
|
|
||||||
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.2秒，持续时间不低于8秒）
|
|
||||||
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>
|
|
||||||
@ -564,6 +564,7 @@ import {
|
|||||||
} from '@/api/couple.js'
|
} from '@/api/couple.js'
|
||||||
import {
|
import {
|
||||||
ranklist, //获取排行榜
|
ranklist, //获取排行榜
|
||||||
|
activityRewardConfigs, // 获取活动奖励配置列表
|
||||||
withdrawableAmount, //获取可提现金额
|
withdrawableAmount, //获取可提现金额
|
||||||
} from '@/api/lottery'
|
} 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 () => {
|
const initData = async () => {
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
@ -954,6 +1068,9 @@ const initData = async () => {
|
|||||||
|
|
||||||
getRanking('lottery'), // 获取抽奖排行榜
|
getRanking('lottery'), // 获取抽奖排行榜
|
||||||
getRanking('recharge'), // 获取充值排行榜
|
getRanking('recharge'), // 获取充值排行榜
|
||||||
|
|
||||||
|
getGameReward(), // 获取游戏奖励列表
|
||||||
|
getRechargeReward(), // 获取充值奖励列表
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user