feat(游戏王打榜): 新增历史模块
This commit is contained in:
hzj
parent
f5bbd3d3d3
commit
8336d3f794
@ -36,3 +36,17 @@ export const getHistoryTopOne = async (activityType) => {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取指定类型活动资源
|
||||
export const activityResource = async (data) => {
|
||||
try {
|
||||
const response = await get(
|
||||
`/props-activity-cnf/client/listActivityResource?sysOrigin=${data.sysOrigin}&activityType=${data.activityType}`
|
||||
)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to get this week rewards and gifts:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,7 +127,7 @@ const props = defineProps({
|
||||
// 排名
|
||||
ranking: {
|
||||
type: String,
|
||||
default: '1',
|
||||
default: '',
|
||||
},
|
||||
|
||||
// 头像
|
||||
@ -171,7 +171,7 @@ const avatarContainerHeight = computed(() => {
|
||||
case '8-10':
|
||||
return '85%'
|
||||
default:
|
||||
return '90%'
|
||||
return '93%'
|
||||
}
|
||||
})
|
||||
|
||||
@ -191,7 +191,7 @@ const avatarWidth = computed(() => {
|
||||
case '8-10':
|
||||
return '45%'
|
||||
default:
|
||||
return '48%'
|
||||
return '36%'
|
||||
}
|
||||
})
|
||||
|
||||
@ -211,7 +211,7 @@ const bottomSectionHeight = computed(() => {
|
||||
case '8-10':
|
||||
return '41%'
|
||||
default:
|
||||
return '30%'
|
||||
return '22%'
|
||||
}
|
||||
})
|
||||
|
||||
@ -231,7 +231,7 @@ const usernameAreaStyle = computed(() => {
|
||||
case '8-10':
|
||||
return 'height: 27%; width: 78%;'
|
||||
default:
|
||||
return 'height: 30%; width: 40%;'
|
||||
return 'height: 100%; width: 72%;'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -85,8 +85,26 @@
|
||||
<!-- 切换按钮 -->
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-around; margin-top: 2vw">
|
||||
<!-- 排行榜按钮 -->
|
||||
<div style="width: 40%; position: relative" @click="rankingShow = true">
|
||||
<!-- 历史模块按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="changeModule('history')">
|
||||
<img
|
||||
v-show="!historyShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('historyBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="historyShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('historyBtActive'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 排行榜模块按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="changeModule('ranking')">
|
||||
<img
|
||||
v-show="!rankingShow"
|
||||
v-smart-img
|
||||
@ -103,17 +121,17 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 奖励按钮 -->
|
||||
<div style="width: 40%; position: relative" @click="rankingShow = false">
|
||||
<!-- 奖励模块按钮 -->
|
||||
<div style="width: 30%; position: relative" @click="changeModule('rewards')">
|
||||
<img
|
||||
v-show="rankingShow"
|
||||
v-show="!rewardsShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rewardsBt'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
<img
|
||||
v-show="!rankingShow"
|
||||
v-show="rewardsShow"
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rewardBtActive'))"
|
||||
alt=""
|
||||
@ -123,8 +141,99 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展示内容 -->
|
||||
<div>
|
||||
<!-- history -->
|
||||
<div
|
||||
v-show="historyShow"
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
>
|
||||
<!-- 历史榜首 -->
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl(getImgName('historyTopBg'))"
|
||||
:contentStyle="`inset: 31vw 5vw 4vw;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap:2vw`"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<!-- 上一周榜首按钮 -->
|
||||
<div
|
||||
style="
|
||||
width: 8vw;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
v-show="historyTopList.length > 1 && historyTopIndex > 0"
|
||||
:src="imageUrl('topBackBt')"
|
||||
alt=""
|
||||
class="flipImg"
|
||||
style="display: block; width: 100%; object-fit: cover"
|
||||
@click="historyTopIndex--"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 榜首 -->
|
||||
<TopUser
|
||||
:BorderImgUrl="imageUrl('historyTopFrame')"
|
||||
:avatarUrl="historyTopList[historyTopIndex].topUser.avatar"
|
||||
:name="historyTopList[historyTopIndex].topUser.nickname"
|
||||
:distributionValue="historyTopList[historyTopIndex].topUser.quantity || ''"
|
||||
style="width: 90%"
|
||||
@click="viewUserInfo(historyTopList[historyTopIndex].topUser.userId)"
|
||||
/>
|
||||
|
||||
<!-- 下一周榜首按钮 -->
|
||||
<div
|
||||
style="
|
||||
width: 8vw;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
v-show="
|
||||
historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length
|
||||
"
|
||||
:src="imageUrl('topNextBt')"
|
||||
alt=""
|
||||
class="flipImg"
|
||||
style="display: block; width: 100%; object-fit: cover"
|
||||
@click="historyTopIndex++"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 特殊奖励 -->
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl(getImgName('specialRewardsBg'))"
|
||||
:contentStyle="`inset: 50vw 3vw 5vw;`"
|
||||
>
|
||||
<img
|
||||
:src="specialReward?.cover"
|
||||
alt=""
|
||||
style="display: block; width: 66%; object-fit: cover"
|
||||
/>
|
||||
</itemCenter>
|
||||
</div>
|
||||
|
||||
<!-- Ranking -->
|
||||
<div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
|
||||
<div style="position: relative; z-index: 1">
|
||||
@ -316,7 +425,7 @@
|
||||
|
||||
<!-- Rewards -->
|
||||
<div
|
||||
v-show="!rankingShow"
|
||||
v-show="rewardsShow"
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
>
|
||||
<div
|
||||
@ -476,7 +585,7 @@
|
||||
|
||||
<!-- 我的排名 -->
|
||||
<itemCenter
|
||||
style="position: fixed; bottom: 0; z-index: 2"
|
||||
style="position: fixed; bottom: 0; z-index: 3"
|
||||
:imgUrl="imageUrl('myRankingBg')"
|
||||
:contentStyle="`padding: 0 8%`"
|
||||
>
|
||||
@ -583,7 +692,12 @@ import { getPngUrl } from '@/config/imagePaths.js'
|
||||
import { preloadImages } from '@/utils/imagePreloader.js'
|
||||
import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
|
||||
|
||||
import { getThisWeekRewardsAndGifts, getRankingListAndMyRanking } from '@/api/activity.js'
|
||||
import {
|
||||
getThisWeekRewardsAndGifts, // 获取本周奖励和礼物
|
||||
getRankingListAndMyRanking, // 获取排行榜和我的排名
|
||||
getHistoryTopOne, // 获取历史榜首
|
||||
activityResource, // 活动特定资源
|
||||
} from '@/api/activity.js'
|
||||
|
||||
import itemCenter from '@/components/itemCenter.vue'
|
||||
import TopUser from './components/topUser.vue'
|
||||
@ -617,11 +731,35 @@ const Second = ref(0)
|
||||
let timer = null
|
||||
|
||||
// 模块切换展示
|
||||
const rankingShow = ref(true) //排行榜
|
||||
const historyShow = ref(true) //历史榜首
|
||||
const rankingShow = ref(false) //排行榜
|
||||
const rewardsShow = ref(false) //奖励模块
|
||||
const changeModule = (module) => {
|
||||
switch (module) {
|
||||
case 'history':
|
||||
historyShow.value = true
|
||||
rankingShow.value = false
|
||||
rewardsShow.value = false
|
||||
break
|
||||
case 'ranking':
|
||||
historyShow.value = false
|
||||
rankingShow.value = true
|
||||
rewardsShow.value = false
|
||||
break
|
||||
case 'rewards':
|
||||
historyShow.value = false
|
||||
rankingShow.value = false
|
||||
rewardsShow.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const historyTopList = ref([]) // 历史榜首
|
||||
const historyTopIndex = ref(0)
|
||||
|
||||
const Ranking = ref([]) // 排行榜
|
||||
const myRanking = ref({}) // 我的排名
|
||||
const rewardsList = ref([]) // 奖励列表
|
||||
const specialReward = ref({}) // 奖励列表
|
||||
|
||||
const topImg = ref([
|
||||
imageUrl('top1RewardBg'),
|
||||
@ -723,6 +861,14 @@ const showDetail = (type, reward) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 获取历史榜首
|
||||
const getAllTopOne = async () => {
|
||||
const resHistoryTopOne = await getHistoryTopOne('10')
|
||||
if (resHistoryTopOne.status && resHistoryTopOne.body) {
|
||||
historyTopList.value = resHistoryTopOne.body?.historicalList
|
||||
}
|
||||
}
|
||||
|
||||
// 获取排行榜和我的排名
|
||||
const getListAndMy = async () => {
|
||||
let data = {
|
||||
@ -744,11 +890,25 @@ const getRewardsAndGifts = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 获取指定类型活动资源
|
||||
const getActivityResource = async () => {
|
||||
let data = {
|
||||
sysOrigin: 'LIKEI',
|
||||
activityType: 'GAME_KING',
|
||||
}
|
||||
const resActivityResource = await activityResource(data)
|
||||
if (resActivityResource.status && resActivityResource.body) {
|
||||
specialReward.value = resActivityResource.body?.[0]?.propsGroup?.activityRewardProps?.[0]
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新页面数据
|
||||
const initData = async () => {
|
||||
await Promise.all([
|
||||
getAllTopOne(), // 获取历史榜首
|
||||
getListAndMy(), // 获取排行榜和我的排名
|
||||
getRewardsAndGifts(), //获取本周的礼物和奖励列表
|
||||
getRewardsAndGifts(), // 获取本周的礼物和奖励列表
|
||||
getActivityResource(), // 获取指定类型活动资源
|
||||
])
|
||||
}
|
||||
|
||||
@ -967,4 +1127,8 @@ onUnmounted(() => {
|
||||
[dir='rtl'] .timeBox {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
[dir='rtl'] .flipImg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user