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-12 11:55:55 +08:00
parent f43aeec5ad
commit c80ddeebbd
2 changed files with 189 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/activity.js
View File

@ -24,6 +24,18 @@ export const getThisWeekRewardsAndGifts = async (templateId) => {
}
}
// 获取总榜前三
export const getOverallRankingTop3 = async (data) => {
try {
const response = await post(`/ranking/top-three-overall`, data)
return response
} catch (error) {
console.error('Failed to get history top one:', error)
console.error('error:' + error.response.errorMsg)
throw error
}
}
// 获取历史榜首
export const getHistoryTopOne = async (activityType) => {
try {

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

@ -3,13 +3,16 @@
<div class="fullPage">
<!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container">
<!-- 页面背景 -->
<BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2')]" />
<div class="loading-spinner"></div>
<p>{{ $t('loading') }}...</p>
</div>
<!-- 主要内容 -->
<div
v-show="!isLoading"
v-if="!isLoading"
style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative"
>
<!-- 页面背景 -->
@ -89,12 +92,34 @@
<!-- 排行榜模块 -->
<div v-show="rankingShow">
<!-- 每周礼物 -->
<img
v-smart-img
:src="imageUrl('eventGiftsBg')"
alt=""
style="display: block; width: 100vw; object-fit: cover"
/>
<itemCenter :imgUrl="imageUrl('eventGiftsBg')">
<div
style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%"
>
<div
v-for="(gift, index) in giftsList"
:key="index"
style="width: 30%; display: flex; flex-direction: column"
>
<itemCenter :imgUrl="imageUrl('giftBg')">
<img v-smart-img :src="gift.giftPhoto" alt="" width="50%" />
</itemCenter>
<div
style="display: flex; justify-content: center; align-items: center; gap: 2px"
>
<img
v-smart-img
src="/src/assets/icon/coin.png"
alt=""
style="display: block; width: 1.3em; aspect-ratio: 1/1"
/>
<div style="color: rgba(255, 255, 255, 1); font-weight: 590">
{{ gift.giftCandy }}
</div>
</div>
</div>
</div>
</itemCenter>
<!-- 总排行榜前三 -->
<itemCenter
@ -115,9 +140,9 @@
<TopUser
ranking="1"
:BorderImgUrl="imageUrl('top1')"
:avatarUrl="OverallRanking[0].userAvatar"
:name="OverallRanking[0].userName"
:distributionValue="OverallRanking[0].amount"
:avatarUrl="OverallRanking[0].avatar"
:name="OverallRanking[0].nickname"
:distributionValue="OverallRanking[0].quantity"
style="width: 40%"
@click="viewUserInfo(OverallRanking[0].userId)"
/>
@ -141,9 +166,9 @@
<TopUser
ranking="2"
:BorderImgUrl="imageUrl('top2')"
:avatarUrl="OverallRanking[1].userAvatar"
:name="OverallRanking[1].userName"
:distributionValue="OverallRanking[1].amount"
:avatarUrl="OverallRanking[1].avatar"
:name="OverallRanking[1].nickname"
:distributionValue="OverallRanking[1].quantity"
style="width: 100%"
/>
</div>
@ -155,9 +180,9 @@
<TopUser
ranking="3"
:BorderImgUrl="imageUrl('top3')"
:avatarUrl="OverallRanking[2].userAvatar"
:name="OverallRanking[2].userName"
:distributionValue="OverallRanking[2].amount"
:avatarUrl="OverallRanking[2].avatar"
:name="OverallRanking[2].nickname"
:distributionValue="OverallRanking[2].quantity"
style="width: 100%"
/>
</div>
@ -627,9 +652,9 @@
<!-- 中奖历史按钮 -->
<img
v-smart-img
:src="imageUrl('historyBt')"
:src="imageUrl('resultBt')"
alt=""
style="width: 8vw; position: absolute; z-index: 2; top: 2vw; right: 4vw"
style="width: 7vw; position: absolute; z-index: 2; top: 11.3vw; right: 5vw"
@click="openPopup('history')"
/>
@ -1799,7 +1824,11 @@ 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 {
getThisWeekRewardsAndGifts,
getRankingListAndMyRanking,
getOverallRankingTop3, // 获取总榜前三
} from '@/api/activity.js'
import {
ranklist, //获取排行榜
activityDetail, // 获取活动详情
@ -1891,9 +1920,9 @@ const barrageList = ref([]) // 弹幕数据
const OverallRanking = ref(
Array(3).fill({
userId: '',
userAvatar: '',
userName: 'aaaaaaaa',
amount: '111M',
avatar: '',
nickname: 'aaaaaaaa',
quantity: '111M',
}),
) // 总排行榜前三
@ -1921,7 +1950,7 @@ const showRewardsTop10 = computed(() => {
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)`,
content: `${formatLargeNumber(Number(topUser?.quantityNumber || '0') * 0.1)}(10% Points Coins)`,
quantity: 0,
type: 'GIFT',
},
@ -1938,7 +1967,7 @@ const showRewardsTop10 = computed(() => {
else if (index === 1) {
topRewards?.rewards.push({
cover: new URL('/src/assets/icon/coin.png', import.meta.url).href,
content: `${formatLargeNumber(Number(topUser?.totalNumber || '0') * 0.08)}(8% Points Coins)`,
content: `${formatLargeNumber(Number(topUser?.quantityNumber || '0') * 0.08)}(8% Points Coins)`,
quantity: 0,
type: 'GIFT',
})
@ -1947,7 +1976,7 @@ const showRewardsTop10 = computed(() => {
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)`,
content: `${formatLargeNumber(Number(topUser?.quantityNumber || '0') * 0.06)}(6% Points Coins)`,
quantity: 0,
type: 'GIFT',
})
@ -1957,7 +1986,7 @@ const showRewardsTop10 = computed(() => {
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)`,
content: `${formatLargeNumber(Number(topUser?.quantityNumber || '0') * 0.04)}(4% Points Coins)`,
quantity: 0,
type: 'GIFT',
})
@ -1988,6 +2017,8 @@ const formatLargeNumber = (num) => {
}
}
const giftsList = ref([]) // 礼物列表
const activity = ref({}) //活动详情和奖池
const activeIndex = ref(0) // 当前高亮格子
const isRolling = ref(false) // 抽奖状态
@ -2003,6 +2034,8 @@ const RechargeBadgeInfo = ref([]) //充值奖励-徽章信息
const userInfo = ref({}) //用户信息
const userIdentity = ref({}) //用户身份
const taskList = ref([]) //任务列表
// 排行榜前10名（带奖励）
const RankingHasTop10 = computed(() => {
let RankingTop10 = rankingTotal.value.filter((_, index) => index < 10)
@ -2098,7 +2131,7 @@ const searchPayee = () => {
// 前往提现页
const goToWithdraw = () => {
router.push({ path: '/cash-out', query: { activityId: '2005571533988298753' } })
router.push({ path: '/cash-out', query: { activityId: '2006671533988298666' } })
}
// 判断文本是否溢出（需要滚动）
@ -2369,8 +2402,6 @@ const sweepstakes = async (consecutive = 1) => {
}
}
const taskList = ref([]) //任务列表
// 展示任务目标
const showTarget = (task) => {
if (task.targetType == 'MIC_TIME') {
@ -2466,7 +2497,7 @@ const clearPayee = () => {
clearSelectedPayee()
}
//获取中奖用户列表
// 获取中奖用户列表
const getWinners = async () => {
const resWinners = await winnerHistory('2006671533988298666')
if (resWinners.status && resWinners.body) {
@ -2474,7 +2505,7 @@ const getWinners = async () => {
}
}
//获取用户信息
// 获取用户信息
const getUserInfo = async () => {
if (Object.keys(userInfo.value).length === 0) {
const resUserInfo = await getMemberProfile()
@ -2489,7 +2520,20 @@ const getUserInfo = async () => {
}
}
//获取排行榜
// 获取总榜前三
const getOverallRanking = async () => {
let data = {
activityType: 13,
}
const resRanking = await getOverallRankingTop3(data)
if (resRanking.status && resRanking.body) {
OverallRanking.value = resRanking.body || []
} else {
OverallRanking.value = []
}
}
// 获取排行榜
const getRanking = async () => {
let data = {
activityType: 13,
@ -2509,6 +2553,7 @@ const getRanking = async () => {
const getRewardsAndGifts = async () => {
const resRewardsAndGifts = await getThisWeekRewardsAndGifts('2020751672412921857')
if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
giftsList.value = resRewardsAndGifts.body.gifts
let tempRewardsTop10 = resRewardsAndGifts.body.butOneRewards
let top4Rewards = JSON.parse(JSON.stringify(tempRewardsTop10[3])) // 获取第4名奖励项
@ -2523,7 +2568,7 @@ const getRewardsAndGifts = async () => {
}
}
//获取抽奖奖池
// 获取抽奖奖池
const getActivityDetail = async () => {
getDrawableAmount() //获取可提现金额
const resDetail = await activityDetail('98666')
@ -2546,7 +2591,7 @@ const showDetail = (type, reward) => {
}
}
//获取拥有的抽奖券
// 获取拥有的抽奖券
const getTickets = async () => {
const resTickets = await myTickets('2006671533988298666')
if (resTickets.status && resTickets.body) {
@ -2556,7 +2601,7 @@ const getTickets = async () => {
}
}
//获取累计抽奖次数
// 获取累计抽奖次数
const getTotalDrawCount = async () => {
const resTotalDrawCount = await myTotalDrawCount('2006671533988298666')
if (resTotalDrawCount.status && resTotalDrawCount.body) {
@ -2564,7 +2609,7 @@ const getTotalDrawCount = async () => {
}
}
//可提现金额
// 可提现金额
const getDrawableAmount = async () => {
const resDrawableAmount = await withdrawableAmount('2006671533988298666')
if (resDrawableAmount.status && resDrawableAmount.body) {
@ -2572,7 +2617,7 @@ const getDrawableAmount = async () => {
}
}
//获取任务列表
// 获取任务列表
const getTaskList = async () => {
const resTaskList = await ActTaskList()
if (resTaskList.status && resTaskList.body) {
@ -2592,7 +2637,7 @@ const getConfigsBadgeInfo = async () => {
}
}
//获取中奖记录
// 获取中奖记录
const getDrawRecords = async () => {
const resDrawRecords = await drawRecords('98666')
if (resDrawRecords.status && resDrawRecords.body) {
@ -2640,6 +2685,7 @@ const initData = async () => {
initializePayee(), //获取收款人信息
getWinners(), //获取历史中奖用户
getRanking(), //获取排行榜
getOverallRanking(), //获取总榜前三
getActivityDetail(), //获取奖池
getTotalDrawCount(), //刷新累计抽奖次数
@ -2652,15 +2698,103 @@ const initData = async () => {
// 预加载关键图片
const preloadCriticalImages = async () => {
const criticalImages = []
const criticalImages = [
// 背景
imageUrl('bg1'),
imageUrl('bg2'),
// imageUrl('bg3'),
// 按钮
imageUrl(getImgName('rankBt')),
imageUrl(getImgName('rankBtActive')),
imageUrl(getImgName('lotteryBt')),
imageUrl(getImgName('lotteryBtActive')),
imageUrl(getImgName('withdrawalBt')),
imageUrl(getImgName('withdrawalBtActive')),
// 每周礼物
imageUrl('eventGiftsBg'),
imageUrl('giftBg'),
// 总排行榜前三
imageUrl('overallRankingBg'),
imageUrl('historyBt'),
imageUrl('top1'),
imageUrl('top2'),
imageUrl('top3'),
// 倒计时
imageUrl('timeDayBg'),
imageUrl('timeBg'),
// 排行榜
imageUrl('RankingTopBorder'),
imageUrl('RankingBottomBorder'),
imageUrl('RankingBorder'),
imageUrl('historyBt'),
imageUrl('itemTop1Bg'),
imageUrl('itemTop2Bg'),
imageUrl('itemTop3Bg'),
imageUrl('itemFrom4Bg'),
imageUrl('ranking1'),
imageUrl('ranking2'),
imageUrl('ranking3'),
imageUrl('rankingFrom4'),
imageUrl('ranking1Frame'),
imageUrl('ranking2Frame'),
imageUrl('ranking3Frame'),
imageUrl('userNameBorder'),
imageUrl('itemTopRewardBg'),
// 我的排名
imageUrl('myRankingBg'),
]
await preloadImages(criticalImages)
}
// 预加载其他图片
const preloadOtherImages = async () => {
const criticalImages = []
// const criticalImages = [
// // 抽奖模块
// imageUrl('resultBt'),
// imageUrl('lottery'),
// imageUrl('prizeActiveFrame'),
// imageUrl(getImgName('draw1BtBg')),
// imageUrl(getImgName('draw10BtBg')),
// imageUrl('taskBtGo'),
// imageUrl('taskBtReceive'),
// imageUrl('taskBtReceived'),
// imageUrl('taskTalk'),
// imageUrl('taskGift'),
// imageUrl('taskGame'),
// imageUrl('taskRecharge'),
// imageUrl('ticket'),
// // 前三名奖励展示
// imageUrl('rewardBg'),
// // 抽奖结果展示
// imageUrl('resultBg'),
// imageUrl('resultBack'),
// imageUrl('resultNext'),
// // 中奖历史
// imageUrl('historyBg'),
// // 排行榜帮助弹窗
// imageUrl('rankingHelpBg_ar'),
// imageUrl(getImgName('rankingHelpInfo')),
// // 总榜前三规则弹窗
// imageUrl('top3HelpBg_ar'),
// imageUrl(getImgName('top3HelpInfo')),
// // 兑换规则弹窗
// imageUrl(getImgName('withdrawalHelp')),
// ]
const criticalImages = []
await preloadImages(criticalImages)
}
@ -2848,6 +2982,9 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
color: #666;
overflow: hidden;
position: relative;
}
.loading-spinner {