feat(扑克王牌): 接口数据对接
This commit is contained in:
hzj
parent
98cd3d36ea
commit
157bba9ffd
@ -400,7 +400,7 @@ const router = createRouter({
|
||||
name: 'pokerAce',
|
||||
component: () => import('../views/Activities/PokerAce/index.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
}, //2026年x月x日上午5点结束
|
||||
}, //2026年5月1日上午5点结束
|
||||
{
|
||||
path: '/activities/lucky-dollars-season4',
|
||||
name: 'lucky-dollars-season4',
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
class="scrollY"
|
||||
>
|
||||
<!-- 页面背景 -->
|
||||
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg')]" />
|
||||
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl(getBgImgName('bg'))]" />
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div
|
||||
@ -37,11 +37,7 @@
|
||||
|
||||
<!-- 倒计时 -->
|
||||
<div style="padding: 23vw 4vw 3vw">
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl('timeBg')"
|
||||
style=""
|
||||
:contentStyle="`width:92vw;left:50%;transform: translateX(-50%);`"
|
||||
>
|
||||
<itemCenter :imgUrl="imageUrl('timeBg')" style="" :contentStyle="timeContentStyle">
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
@ -277,9 +273,6 @@
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
|
||||
<!-- 触发加载功能 -->
|
||||
<div ref="RankingLoadmore"></div>
|
||||
</div>
|
||||
|
||||
<!-- 前三奖励模块 -->
|
||||
@ -298,7 +291,12 @@
|
||||
style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
|
||||
>
|
||||
<!-- 排名标题 -->
|
||||
<img :src="imageUrl(`rewardTitleTop${index + 1}`)" alt="" style="width: 50vw" />
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(`rewardTitleTop${index + 1}`)"
|
||||
alt=""
|
||||
style="width: 50vw"
|
||||
/>
|
||||
|
||||
<!-- 奖励列表 -->
|
||||
<div
|
||||
@ -353,7 +351,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 我的排名占位 -->
|
||||
<div v-show="rankingShow" style="height: 20vw"></div>
|
||||
<div v-show="rankingShow" style="height: 25vw"></div>
|
||||
|
||||
<!-- 我的排名 -->
|
||||
<itemCenter
|
||||
@ -453,13 +451,21 @@
|
||||
"
|
||||
@click="closedPopup"
|
||||
>
|
||||
<img
|
||||
<itemCenter
|
||||
v-if="helpShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('helpInfo'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
:imgUrl="imageUrl(getImgName('helpInfo'))"
|
||||
:contentStyle="``"
|
||||
@click.stop
|
||||
>
|
||||
<!-- 关闭按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('closeBt')"
|
||||
alt=""
|
||||
class="close-btn"
|
||||
@click="closedPopup"
|
||||
/>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</maskLayer>
|
||||
</div>
|
||||
@ -467,7 +473,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { viewUserInfo } from '@/utils/appBridge.js'
|
||||
@ -475,9 +481,9 @@ import { useLangStore } from '@/stores/lang'
|
||||
import { getPngUrl } from '@/config/imagePaths.js'
|
||||
import { preloadImages } from '@/utils/image/imagePreloader.js'
|
||||
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
|
||||
import { useThrottle } from '@/utils/useDebounce'
|
||||
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
|
||||
import { apigetRewardConfigs, ranklist } from '@/api/lottery'
|
||||
|
||||
import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
|
||||
|
||||
import TopUser from './components/topUser.vue'
|
||||
import BackgroundLayer from '@/components/BackgroundLayer.vue'
|
||||
@ -498,16 +504,33 @@ const currentLangType = computed(() => {
|
||||
// 获取 OSS 图片 URL
|
||||
const imageUrl = (filename) => getPngUrl('Activities/PokerAce/', filename)
|
||||
|
||||
// 根据语言获取图片名
|
||||
const getBgImgName = (filename) => {
|
||||
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
|
||||
}
|
||||
// 根据语言获取图片名
|
||||
const getImgName = (filename) => {
|
||||
return currentLangType.value === 'en' ? filename : `${filename}_${currentLangType.value}`
|
||||
}
|
||||
|
||||
const activityId = ref('2047505567719723009') // 活动ID
|
||||
const activityType = ref(17) // 活动类型
|
||||
const cycleKey = ref('20260424') // 周期键
|
||||
// 测试用参数
|
||||
// const activityId = ref('2001207026499137537') // 活动ID
|
||||
// const activityType = ref(10) // 活动类型
|
||||
|
||||
const topRankingContentStyle = computed(() => {
|
||||
const baseStyle = 'gap:8vw;padding: 0 9vw 26vw;'
|
||||
return currentLangType.value === 'ar' ? `${baseStyle}flex-direction:row-reverse` : baseStyle
|
||||
})
|
||||
|
||||
const timeContentStyle = computed(() => {
|
||||
return currentLangType.value === 'ar'
|
||||
? 'width:96vw;left:auto;right:50%;transform: translateX(50%);'
|
||||
: 'width:96vw;left:50%;transform: translateX(-50%);'
|
||||
})
|
||||
|
||||
// 弹窗展示
|
||||
const helpShow = ref(false) // 帮助
|
||||
const maskLayerShow = computed(() => {
|
||||
@ -526,21 +549,25 @@ const handleBt = (type) => {
|
||||
const RankingShow = computed(() => rankingShow.value)
|
||||
|
||||
// 排行榜数据
|
||||
const PageNo = ref(1)
|
||||
const Ranking = ref([])
|
||||
const addRanking = ref([])
|
||||
const myRanking = ref({})
|
||||
const rankingRewards = ref([])
|
||||
const RankingLoadmore = ref(null)
|
||||
const rankingLoading = ref(false)
|
||||
const rankingHasMore = ref(true)
|
||||
|
||||
const rankingTotal = computed(() => {
|
||||
return [...Ranking.value, ...addRanking.value]
|
||||
})
|
||||
const normalizeRankingUser = (user = {}) => {
|
||||
return {
|
||||
...user,
|
||||
userId: user.userId || user.uid || '',
|
||||
userAvatar: user.userAvatar || user.avatar || '',
|
||||
userName: user.userName || user.nickname || '',
|
||||
amount: user.amount ?? user.quantity ?? 0,
|
||||
rank: user.rank ?? user.ranking ?? '',
|
||||
account: user.account || '',
|
||||
specialAccount: user.specialAccount || '',
|
||||
}
|
||||
}
|
||||
|
||||
const RankingHasTop3 = computed(() => {
|
||||
const top3 = rankingTotal.value.filter((_, index) => index < 3)
|
||||
const top3 = Ranking.value.filter((_, index) => index < 3)
|
||||
if (top3.length < 3) {
|
||||
top3.push(
|
||||
...Array.from({ length: 3 - top3.length }, () => ({
|
||||
@ -556,7 +583,7 @@ const RankingHasTop3 = computed(() => {
|
||||
})
|
||||
|
||||
const showRanking = computed(() => {
|
||||
return rankingTotal.value.filter((_, index) => index >= 3)
|
||||
return Ranking.value.filter((_, index) => index >= 3)
|
||||
})
|
||||
|
||||
// 倒计时
|
||||
@ -566,7 +593,7 @@ const Minutes = ref('00')
|
||||
const Seconds = ref('00')
|
||||
let countdownTimer = null
|
||||
|
||||
const ACTIVITY_END_TIME = new Date(2026, 4, 31, 5, 0, 0).getTime()
|
||||
const ACTIVITY_END_TIME = new Date(2026, 4, 1, 5, 0, 0).getTime()
|
||||
|
||||
const formatTime = (value) => String(value).padStart(2, '0')
|
||||
|
||||
@ -617,105 +644,26 @@ const closedPopup = () => {
|
||||
|
||||
// 获取排行榜
|
||||
const getRanking = async () => {
|
||||
if (rankingLoading.value || !rankingHasMore.value) {
|
||||
return
|
||||
const data = {
|
||||
activityType: activityType.value,
|
||||
cycleKey: cycleKey.value,
|
||||
}
|
||||
|
||||
if (PageNo.value == 0) {
|
||||
PageNo.value = 1
|
||||
}
|
||||
rankingLoading.value = true
|
||||
|
||||
try {
|
||||
let data = {
|
||||
activityId: '2007771533988204877',
|
||||
pageNo: PageNo.value,
|
||||
pageSize: 20,
|
||||
}
|
||||
const resRanking = await ranklist(data)
|
||||
if (resRanking.status && resRanking.body) {
|
||||
myRanking.value = resRanking.body?.currentUser // 我的排名
|
||||
|
||||
const topList = resRanking.body.topList || []
|
||||
if (topList.length > 0) {
|
||||
if (topList.length == 20) {
|
||||
addRanking.value = []
|
||||
Ranking.value.push(...topList)
|
||||
PageNo.value++
|
||||
} else {
|
||||
addRanking.value = topList
|
||||
rankingHasMore.value = false
|
||||
}
|
||||
} else {
|
||||
rankingHasMore.value = false
|
||||
}
|
||||
} else {
|
||||
myRanking.value = {}
|
||||
Ranking.value = []
|
||||
addRanking.value = []
|
||||
PageNo.value = 1
|
||||
rankingHasMore.value = true
|
||||
}
|
||||
} finally {
|
||||
rankingLoading.value = false
|
||||
const resRanking = await getRankingListAndMyRanking(data)
|
||||
if (resRanking.status && resRanking.body) {
|
||||
myRanking.value = normalizeRankingUser(resRanking.body?.currentUserRank || {})
|
||||
Ranking.value = (resRanking.body?.rankingList || []).map((item) => normalizeRankingUser(item))
|
||||
} else {
|
||||
myRanking.value = {}
|
||||
Ranking.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 获取奖励列表
|
||||
const getGameReward = async () => {
|
||||
let data = {
|
||||
sysOrigin: 'LIKEI',
|
||||
activityType: 'LUCKY_GIFT_REWARD',
|
||||
}
|
||||
const resActivityReward = await apigetRewardConfigs(data)
|
||||
if (resActivityReward.status && resActivityReward.body) {
|
||||
rankingRewards.value = resActivityReward.body
|
||||
.filter((rewards) => rewards.rule.sort <= 3)
|
||||
.slice(0, 3)
|
||||
.map((rewards) => {
|
||||
let addReward = []
|
||||
if (rewards.rule.sort == 1) {
|
||||
addReward = [
|
||||
{
|
||||
type: 'DOLLARS',
|
||||
cover: '',
|
||||
content: 100,
|
||||
},
|
||||
]
|
||||
} else if (rewards.rule.sort == 2) {
|
||||
addReward = [
|
||||
{
|
||||
type: 'DOLLARS',
|
||||
cover: '',
|
||||
content: 50,
|
||||
},
|
||||
]
|
||||
} else if (rewards.rule.sort == 3) {
|
||||
addReward = [
|
||||
{
|
||||
type: 'DOLLARS',
|
||||
cover: '',
|
||||
content: 30,
|
||||
},
|
||||
]
|
||||
} else if (rewards.rule.sort == 4) {
|
||||
addReward = [
|
||||
{
|
||||
type: 'DOLLARS',
|
||||
cover: '',
|
||||
content: 10,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
rewards.propsGroup.activityRewardProps.push(...addReward) // 补充奖励项
|
||||
|
||||
rewards = {
|
||||
...rewards,
|
||||
rewards: rewards.propsGroup.activityRewardProps,
|
||||
}
|
||||
return rewards
|
||||
})
|
||||
const resRewardsAndGifts = await getThisWeekRewardsAndGifts(activityId.value)
|
||||
if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
|
||||
rankingRewards.value = (resRewardsAndGifts.body.butOneRewards || []).slice(0, 3)
|
||||
} else {
|
||||
rankingRewards.value = []
|
||||
}
|
||||
@ -729,7 +677,7 @@ const initData = async () => {
|
||||
// 预加载关键图片
|
||||
const preloadCriticalImages = async () => {
|
||||
const criticalImages = [
|
||||
imageUrl('bg'),
|
||||
imageUrl(getBgImgName('bg')),
|
||||
imageUrl('helpBt'),
|
||||
imageUrl('timeBg'),
|
||||
imageUrl(getImgName('rankBtActive')),
|
||||
@ -746,6 +694,7 @@ const preloadCriticalImages = async () => {
|
||||
imageUrl('rewardTitleTop3'),
|
||||
imageUrl('giftItemBg'),
|
||||
imageUrl('myRankingBg'),
|
||||
imageUrl('closeBt'),
|
||||
imageUrl(getImgName('helpInfo')),
|
||||
]
|
||||
|
||||
@ -762,11 +711,6 @@ const completePreloading = async () => {
|
||||
} finally {
|
||||
// 无论成功或失败都结束加载状态
|
||||
isLoading.value = false
|
||||
|
||||
await nextTick()
|
||||
if (RankingLoadmore.value) {
|
||||
observer.observe(RankingLoadmore.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -778,18 +722,6 @@ const connectToAppHandler = async () => {
|
||||
})
|
||||
}
|
||||
|
||||
const debouceGetRanking = useThrottle(() => {
|
||||
getRanking()
|
||||
}, 1000)
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.intersectionRatio > 0 && rankingTotal.value.length !== 0) {
|
||||
debouceGetRanking()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
handleBt('rank')
|
||||
startCountdown()
|
||||
@ -801,8 +733,6 @@ onUnmounted(() => {
|
||||
clearInterval(countdownTimer)
|
||||
countdownTimer = null
|
||||
}
|
||||
|
||||
observer.disconnect()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -881,6 +811,21 @@ onUnmounted(() => {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
display: block;
|
||||
width: 8vw;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
|
||||
top: 14vw;
|
||||
right: 10vw;
|
||||
}
|
||||
|
||||
[dir='rtl'] .close-btn {
|
||||
left: 10vw;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user