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

feat(春节活动页面): 补充新的阿语图源

Browse Source
This commit is contained in:
hzj 2026-02-11 18:41:57 +08:00
parent f4edac0757
commit ddedd5aaff
6 changed files with 186 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
src/views/Activities/LuckyDollars/Season3/index.vue
View File

@ -332,7 +332,7 @@
<!-- 头像 -->
<img
v-smart-img
:src="listItem?.userAvatar || ''"
:src="listItem?.avatar || ''"
alt=""
style="
display: block;
@ -380,7 +380,7 @@
white-space: nowrap;
"
>
{{ listItem?.userName }}
{{ listItem?.nickname }}
</div>
</div>
</div>
@ -394,7 +394,7 @@
white-space: nowrap;
"
>
{{ listItem?.userName }}
{{ listItem?.nickname }}
</div>
</div>
</div>
@ -426,7 +426,7 @@
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
/>
<div style="color: #ffe601; font-weight: 700" class="Textlittle">
{{ listItem?.amount || 0 }}
{{ listItem?.quantity || 0 }}
</div>
</div>
</itemCenter>
@ -444,7 +444,7 @@
<!-- 2套内容 -->
<div class="scroll-content" v-for="value in 2">
<div
v-for="(item, index) in showRewardsTop10[index].activityRewardProps"
v-for="(item, index) in showRewardsTop10[index]?.rewards"
:key="index"
style="
align-self: stretch;
@ -509,7 +509,7 @@
<!-- 头像 -->
<img
v-smart-img
:src="listItem?.userAvatar || ''"
:src="listItem?.avatar || ''"
alt=""
style="
display: block;
@ -556,7 +556,7 @@
white-space: nowrap;
"
>
{{ listItem?.userName }}
{{ listItem?.nickname }}
</div>
</div>
</div>
@ -570,7 +570,7 @@
white-space: nowrap;
"
>
{{ listItem?.userName }}
{{ listItem?.nickname }}
</div>
</div>
</div>
@ -602,7 +602,7 @@
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
/>
<div style="color: #ffe601; font-weight: 700" class="Textlittle">
{{ listItem?.amount || 0 }}
{{ listItem?.quantity || 0 }}
</div>
</div>
</itemCenter>
@ -610,7 +610,7 @@
</div>
<!-- 触发加载功能 -->
<div ref="RankingLoadmore"></div>
<!-- <div ref="RankingLoadmore"></div> -->
</div>
<!-- 抽奖模块 -->
@ -1482,7 +1482,7 @@
<!-- 头像 -->
<img
v-smart-img
:src="myRanking.userAvatar || ''"
:src="myRanking.avatar || ''"
alt=""
style="
display: block;
@ -1506,7 +1506,7 @@
text-overflow: ellipsis;
"
>
{{ myRanking.userName }}
{{ myRanking.nickname }}
</div>
</div>
</div>
@ -1528,7 +1528,7 @@
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
/>
<div style="color: #ffe601; font-weight: 700">
{{ myRanking.amount || 0 }}
{{ myRanking.quantity || 0 }}
</div>
</div>
</itemCenter>
@ -1799,9 +1799,9 @@ import { useThrottle } from '@/utils/useDebounce'
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
import { getMemberProfile, getUserIdentity } from '@/api/wallet'
import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
import {
ranklist, //获取排行榜
validActivity, // 获取有效活动
activityDetail, // 获取活动详情
myRecharge, // 获取充值记录
activityRewardConfigs, // 获取活动奖励配置列表
@ -1827,8 +1827,8 @@ import Barrage from './components/Barrage.vue'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'
// 预加载状态
const isLoading = ref(true)
const isLoading = ref(true) // 预加载状态
const timeoutId = ref(null) // 超时定时器 ID
const { t, locale } = useI18n()
const router = useRouter()
@ -1911,25 +1911,58 @@ const rewardsTop10 = ref([]) // 原前10名奖励列表
const topReward = ref({}) // 前10名奖励项
// 处理后的前10名奖励列表
const showRewardsTop10 = computed(() => {
// 对 rewardsTop10 进行深拷贝，避免引用问题
let newRewardsTop10 = Array(10).fill({
activityRewardProps: [
{
let newRewardsTop10 = JSON.parse(JSON.stringify(rewardsTop10.value)) // 对 rewardsTop10 进行深拷贝，避免引用问题
for (let index = 0; index < newRewardsTop10.length; index++) {
let topRewards = newRewardsTop10[index]
let topUser = RankingHasTop10.value[index]
// 第1名
if (index === 0) {
topRewards?.rewards.push(
{
cover: new URL('/src/assets/icon/coin.png', import.meta.url).href,
content: `${formatLargeNumber(Number(topUser?.totalNumber || '0') * 0.1)}(10% Points Coins)`,
quantity: 0,
type: 'GIFT',
},
{
cover: '',
content: 'Homepage Ad* 7 days',
quantity: 0,
type: 'GIFT',
},
)
}
// 第2名
else if (index === 1) {
topRewards?.rewards.push({
cover: new URL('/src/assets/icon/coin.png', import.meta.url).href,
content: t('heartbeat_value_points_4_percent', {
amount: formatLargeNumber(Number('1000') * 0.04),
}),
content: `${formatLargeNumber(Number(topUser?.totalNumber || '0') * 0.08)}(8% Points Coins)`,
quantity: 0,
type: 'GIFT',
},
{
cover: '',
content: 'Homepage Ad* 7 days',
})
}
// 第3名
else if (index === 2) {
topRewards?.rewards.push({
cover: new URL('/src/assets/icon/coin.png', import.meta.url).href,
content: `${formatLargeNumber(Number(topUser?.totalNumber || '0') * 0.06)}(6% Points Coins)`,
quantity: 0,
type: 'GIFT',
},
],
})
})
}
// 第4-10名
else {
topRewards?.rewards.push({
cover: new URL('/src/assets/icon/coin.png', import.meta.url).href,
content: `${formatLargeNumber(Number(topUser?.totalNumber || '0') * 0.04)}(4% Points Coins)`,
quantity: 0,
type: 'GIFT',
})
}
}
return newRewardsTop10
})
@ -2120,7 +2153,7 @@ const transfer = async () => {
const transferData = {
amount: selectedCoin.value.price,
acceptUserId: selectedPayee.value?.id,
activityId: '',
activityId: '2006671533988298666',
}
try {
@ -2155,7 +2188,7 @@ const exchangeCoinBt = async () => {
// 构造请求参数
const transferData = {
amount: selectedCoin.value.price,
activityId: '',
activityId: '2006671533988298666',
}
try {
@ -2285,7 +2318,7 @@ const sweepstakes = async (consecutive = 1) => {
if (rollTimes.value >= consecutive) {
isRolling.value = true
let data = {
activityId: '2004471533988167125',
activityId: '2006671533988298666',
drawCount: consecutive,
}
try {
@ -2435,7 +2468,7 @@ const clearPayee = () => {
//获取中奖用户列表
const getWinners = async () => {
const resWinners = await winnerHistory()
const resWinners = await winnerHistory('2006671533988298666')
if (resWinners.status && resWinners.body) {
barrageList.value = resWinners.body
}
@ -2459,33 +2492,41 @@ const getUserInfo = async () => {
//获取排行榜
const getRanking = async () => {
let data = {
activityId: '2005571533988298753',
pageNo: rankingPageNo.value,
pageSize: 20,
activityType: 13,
}
const resRanking = await ranklist(data)
const resRanking = await getRankingListAndMyRanking(data)
if (resRanking.status && resRanking.body) {
myRanking.value = resRanking.body?.currentUser //我的排名信息
if (resRanking.body.topList.length > 0) {
if (resRanking.body.topList.length == 20) {
rankingAdd.value = []
Ranking.value.push(...resRanking.body?.topList)
rankingPageNo.value++
} else {
rankingAdd.value = resRanking.body?.topList
}
}
myRanking.value = resRanking.body?.currentUserRank //我的排名信息
Ranking.value = resRanking.body?.rankingList
getRewardsAndGifts() // 获取前十名奖励列表
} else {
Ranking.value = []
myRanking.value = {}
}
}
//获取奖池
// 获取前十名奖励列表
const getRewardsAndGifts = async () => {
const resRewardsAndGifts = await getThisWeekRewardsAndGifts('2020751672412921857')
if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
let tempRewardsTop10 = resRewardsAndGifts.body.butOneRewards
let top4Rewards = JSON.parse(JSON.stringify(tempRewardsTop10[3])) // 获取第4名奖励项
if (tempRewardsTop10.length < 10) {
let addNullUser = Array.from({ length: 10 - tempRewardsTop10.length }, () => top4Rewards)
tempRewardsTop10.push(...addNullUser)
}
rewardsTop10.value = tempRewardsTop10
console.log('rewardsTop10.value:', rewardsTop10.value)
}
}
//获取抽奖奖池
const getActivityDetail = async () => {
getDrawableAmount() //获取可提现金额
const resDetail = await activityDetail('67125')
const resDetail = await activityDetail('98666')
if (resDetail.status && resDetail.body) {
activity.value = resDetail.body
} else {
@ -2507,7 +2548,7 @@ const showDetail = (type, reward) => {
//获取拥有的抽奖券
const getTickets = async () => {
const resTickets = await myTickets()
const resTickets = await myTickets('2006671533988298666')
if (resTickets.status && resTickets.body) {
rollTimes.value = resTickets.body
} else {
@ -2517,7 +2558,7 @@ const getTickets = async () => {
//获取累计抽奖次数
const getTotalDrawCount = async () => {
const resTotalDrawCount = await myTotalDrawCount()
const resTotalDrawCount = await myTotalDrawCount('2006671533988298666')
if (resTotalDrawCount.status && resTotalDrawCount.body) {
totalDraw.value = resTotalDrawCount.body
}
@ -2525,7 +2566,7 @@ const getTotalDrawCount = async () => {
//可提现金额
const getDrawableAmount = async () => {
const resDrawableAmount = await withdrawableAmount('2004471533988167125')
const resDrawableAmount = await withdrawableAmount('2006671533988298666')
if (resDrawableAmount.status && resDrawableAmount.body) {
currentAmount.value = resDrawableAmount.body
}
@ -2543,7 +2584,7 @@ const getTaskList = async () => {
const getConfigsBadgeInfo = async () => {
let data = {
activityType: 'USER_RECHARGE_DRAW',
activityId: '2005571533988298753',
activityId: '2006671533988298666',
}
const resConfigsBadge = await rewardConfigsBadge(data)
if (resConfigsBadge.status && resConfigsBadge.body) {
@ -2553,7 +2594,7 @@ const getConfigsBadgeInfo = async () => {
//获取中奖记录
const getDrawRecords = async () => {
const resDrawRecords = await drawRecords()
const resDrawRecords = await drawRecords('98666')
if (resDrawRecords.status && resDrawRecords.body) {
myRecords.value = resDrawRecords.body?.records || []
}
@ -2579,7 +2620,7 @@ const receiveTaskReward = async (code) => {
const receiveRechargeBadge = async (rewards) => {
let data = {
activityType: rewards.activityType,
activityId: '2005571533988298753',
activityId: '2006671533988298666',
ruleId: rewards.ruleId,
}
try {
@ -2616,11 +2657,21 @@ const preloadCriticalImages = async () => {
await preloadImages(criticalImages)
}
// 预加载其他图片
const preloadOtherImages = async () => {
const criticalImages = []
await preloadImages(criticalImages)
}
// 完成预加载
const completePreloading = async () => {
try {
// 执行所有初始化操作
await Promise.all([initData(), preloadCriticalImages()])
await Promise.all([
// initData(),
preloadCriticalImages(),
])
} catch (error) {
console.error('预加载过程中发生错误:', error)
} finally {
@ -2643,23 +2694,41 @@ const startCountdown = () => {
timer = setInterval(getCountdown, 1000) //倒计时每秒更新
}
// 触发节流获取排行榜
const debouceGetRanking = useThrottle(() => {
getRanking() //加载新的排行榜项
}, 1000)
// // 触发节流获取排行榜
// const debouceGetRanking = useThrottle(() => {
// getRanking() //加载新的排行榜项
// }, 1000)
// IntersectionObserver配置
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0 && rankingTotal.value.length != 0) {
console.log('触发RankingLoadmore加载')
debouceGetRanking()
// // IntersectionObserver配置
// const observer = new IntersectionObserver((entries) => {
// entries.forEach((entry) => {
// if (entry.intersectionRatio > 0 && rankingTotal.value.length != 0) {
// console.log('触发RankingLoadmore加载')
// debouceGetRanking()
// }
// })
// })
// 设置超时刷新逻辑
const startTimeoutCheck = () => {
timeoutId.value = setTimeout(() => {
if (isLoading.value) {
console.warn('⏰ 预加载超时，正在刷新页面...')
window.location.reload() // 刷新页面
}
})
})
}, 20000) // 20 秒超时
}
// 清理定时器
const clearTimeoutCheck = () => {
if (timeoutId.value) {
clearTimeout(timeoutId.value)
timeoutId.value = null
}
}
// 组件挂载时检测环境
onMounted(() => {
onMounted(async () => {
console.log('route.query.activeAction:', route.query.activeAction)
if (route.query.activeAction == 'incomeShow') {
handleBt('withdrawal')
@ -2667,18 +2736,25 @@ onMounted(() => {
handleBt('ranking')
}
connectToAppHandler()
// 启动超时检测
startTimeoutCheck()
await connectToAppHandler()
initData()
startCountdown() //开启倒计时
// 监听加载模块
if (RankingLoadmore.value) {
console.log('监控加载模块')
observer.observe(RankingLoadmore.value)
}
preloadOtherImages() // 预加载其他图片
// // 监听加载模块
// if (RankingLoadmore.value) {
// console.log('监控加载模块')
// observer.observe(RankingLoadmore.value)
// }
})
onUnmounted(() => {
clearTimeoutCheck() // 清理超时检测定时器
clearInterval(timer) //摧毁计时器
})
</script>

2
src/views/Activities/SpringFestival/Ranking.vue
View File

@ -263,7 +263,7 @@ const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `filename_ar` : filename
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}
const props = defineProps({

2
src/views/Activities/SpringFestival/RankingReward.vue
View File

@ -139,7 +139,7 @@ const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `filename_ar` : filename
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}
//充值奖励的内容样式

29
src/views/Activities/SpringFestival/RechargeReward.vue
View File

@ -67,7 +67,14 @@
<div>{{ $t('user_id_prefix') }} {{ myRechargeRecode?.account }}</div>
<!-- 总充值 -->
<div style="display: flex; justify-content: space-between; align-items: center">
<div
style="
display: flex;
justify-content: space-between;
align-items: center;
white-space: nowrap;
"
>
<div>
{{ t('Accumulated recharge') }}:${{
formatRechargeAmount(myRechargeRecode?.totalAmount)
@ -170,20 +177,20 @@
<img
v-if="rewardsTop.claimStatus == -1"
class="grayscale-container"
:src="imageUrl('receiveBt')"
:src="imageUrl(getImgName('receiveBt'))"
alt=""
style="width: 40vw; display: block; object-fit: cover"
/>
<img
v-if="rewardsTop.claimStatus == 0"
:src="imageUrl('receiveBt')"
:src="imageUrl(getImgName('receiveBt'))"
alt=""
style="width: 40vw; display: block; object-fit: cover"
@click="receiveReward(rewardsTop)"
/>
<img
v-if="rewardsTop.claimStatus == 1"
:src="imageUrl('receivedBt')"
:src="imageUrl(getImgName('receivedBt'))"
alt=""
style="width: 40vw; display: block; object-fit: cover"
/>
@ -283,7 +290,7 @@ const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `filename_ar` : filename
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}
const rechargehidden = ref(true) //金额是否隐藏
@ -299,12 +306,12 @@ const formatRechargeAmount = (amount) => {
}
const topImg = ref([
imageUrl('rechargeReward100'),
imageUrl('rechargeReward500'),
imageUrl('rechargeReward1000'),
imageUrl('rechargeReward3000'),
imageUrl('rechargeReward5000'),
imageUrl('rechargeReward10000'),
imageUrl(getImgName('rechargeReward100')),
imageUrl(getImgName('rechargeReward500')),
imageUrl(getImgName('rechargeReward1000')),
imageUrl(getImgName('rechargeReward3000')),
imageUrl(getImgName('rechargeReward5000')),
imageUrl(getImgName('rechargeReward10000')),
]) // top图片
//充值奖励的内容样式

10
src/views/Activities/SpringFestival/Task.vue
View File

@ -143,10 +143,10 @@
<!-- 抽奖信息 -->
<div style="width: 100%; height: 5vw; display: flex; justify-content: space-between">
<!-- 拥有抽奖券 -->
<div>{{ $t('remaining_lottery_tickets') }}: {{ tickets }}</div>
<div style="font-weight: 700">{{ $t('remaining_lottery_tickets') }}: {{ tickets }}</div>
<!-- 获取抽奖券 -->
<div @click="showTaskList">{{ $t('how_to_get_ticket') }}</div>
<div style="font-weight: 700" @click="showTaskList">{{ $t('how_to_get_ticket') }}</div>
</div>
<!-- 抽奖按钮 -->
@ -195,7 +195,7 @@
display: flex;
justify-content: center;
align-items: center;
gap: 4vw;
gap: 2vw;
"
@click="sweepstakes(10)"
>
@ -594,7 +594,7 @@
:class="['coin-item', { selected: selectedCoin?.id == coin.id }]"
>
<img v-smart-img src="/src/assets/icon/coin.png" alt="" style="width: 40%" />
<div style="font-size: 0.7em">{{ coin.amount }} coins x1</div>
<div style="direction: ltr; font-size: 0.7em">{{ coin.amount }} coins x1</div>
<div style="font-weight: 500; color: #fff">${{ coin.price }}</div>
</div>
</div>
@ -746,7 +746,7 @@ const imageUrl = (filename) => getPngUrl('Activities/SpringFestival/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `filename_ar` : filename
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}
const props = defineProps({

16
src/views/Activities/SpringFestival/index.vue
View File

@ -1373,14 +1373,14 @@ const preloadOtherImages = async () => {
imageUrl('rankingRewardTop4Bg'),
// 充值奖励组件
imageUrl('receiveBt'),
imageUrl('receivedBt'),
imageUrl('rechargeReward100'),
imageUrl('rechargeReward500'),
imageUrl('rechargeReward1000'),
imageUrl('rechargeReward3000'),
imageUrl('rechargeReward5000'),
imageUrl('rechargeReward10000'),
imageUrl(getImgName('receiveBt')),
imageUrl(getImgName('receivedBt')),
imageUrl(getImgName('rechargeReward100')),
imageUrl(getImgName('rechargeReward500')),
imageUrl(getImgName('rechargeReward1000')),
imageUrl(getImgName('rechargeReward3000')),
imageUrl(getImgName('rechargeReward5000')),
imageUrl(getImgName('rechargeReward10000')),
]
await preloadImages(criticalImages)