feat(周星): 完善页面并对接全部接口
This commit is contained in:
hzj
parent
edcb6e7d48
commit
2895ad5fc2
105
src/api/weeklyStar.js
Normal file
105
src/api/weeklyStar.js
Normal file
@ -0,0 +1,105 @@
|
||||
import { get, post } from '../utils/http.js'
|
||||
|
||||
// 获取礼物榜单
|
||||
export const getWeekStarRanking = async (data) => {
|
||||
try {
|
||||
const response = await get(
|
||||
`/activity/week-star/ranking?type=${data.type}¤t=${data.current}&size=${data.size}`
|
||||
)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to get week star ranking:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取我的排名
|
||||
export const getMyWeekStarRanking = async (type) => {
|
||||
try {
|
||||
const response = await get(`/activity/week-star/my-rank?type=${type}`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to get my week star ranking:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取本周奖励
|
||||
export const getWeekRewards = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/week-star/reward`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to get this week rewards:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取本周礼物
|
||||
export const getWeekGifts = async (type) => {
|
||||
try {
|
||||
const response = await get(`/activity/week-star/gifts?type=${type}`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to get this week gifts:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取历史周星top1
|
||||
export const getHistoryTopOne = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/week-star/history-top1`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to get history top one:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取本周可兑换商品
|
||||
export const getExchangeGoods = 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 exchange goods:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取我拥有的碎片
|
||||
export const getMyFragment = async (data) => {
|
||||
try {
|
||||
const response = await post(
|
||||
`/user/backpack/client/list/by/user-id?userId=${data.userId}&fragmentsIds=${data.fragmentsIds}`
|
||||
)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to get my fragment:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取我拥有的碎片
|
||||
export const exchangeGood = async (data) => {
|
||||
try {
|
||||
const response = await post(
|
||||
`/activity/week-star/exchange?propsGroupId=${data.propsGroupId}&fragmentsId=${data.fragmentsId}`
|
||||
)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to exchange goods:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
BIN
src/assets/images/WeeklyStar/ConfirmBt.png
Normal file
BIN
src/assets/images/WeeklyStar/ConfirmBt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/images/WeeklyStar/RedeemBt.png
Normal file
BIN
src/assets/images/WeeklyStar/RedeemBt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/images/WeeklyStar/btBg.png
Normal file
BIN
src/assets/images/WeeklyStar/btBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/images/WeeklyStar/debris.png
Normal file
BIN
src/assets/images/WeeklyStar/debris.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 849 KiB After Width: | Height: | Size: 774 KiB |
BIN
src/assets/images/WeeklyStar/helpInfo.png
Normal file
BIN
src/assets/images/WeeklyStar/helpInfo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/images/WeeklyStar/longBg.png
Normal file
BIN
src/assets/images/WeeklyStar/longBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
src/assets/images/WeeklyStar/mediumBg.png
Normal file
BIN
src/assets/images/WeeklyStar/mediumBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1015 KiB |
BIN
src/assets/images/WeeklyStar/nameBg.png
Normal file
BIN
src/assets/images/WeeklyStar/nameBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.4 MiB |
BIN
src/assets/images/WeeklyStar/topOneHistory.png
Normal file
BIN
src/assets/images/WeeklyStar/topOneHistory.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
@ -27,13 +27,41 @@
|
||||
alt=""
|
||||
width="100%"
|
||||
style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 用户名和贡献值 -->
|
||||
<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 35%; z-index: 3">
|
||||
<div class="showText" style="height: 28%; font-weight: 860">{{ name }}</div>
|
||||
<div class="showText" style="height: 37%; font-weight: 700">{{ distributionValue }}</div>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 35%;
|
||||
z-index: 3;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="height: 28%; display: flex; justify-content: center; align-items: center"
|
||||
:style="{ width: isTopOne ? '35%' : '50%' }"
|
||||
>
|
||||
<div style="font-weight: 860" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height: 36%; display: flex; justify-content: center; align-items: center"
|
||||
:style="{ width: isTopOne ? '30%' : '40%' }"
|
||||
>
|
||||
<div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
|
||||
{{ distributionValue }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -66,6 +94,11 @@ const props = defineProps({
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const defaultAvatarUrl = (e) => {
|
||||
console.log('头像资源出错')
|
||||
e.target.src = '/src/assets/images/WeeklyStar/defaultAvatar.png'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -76,9 +109,37 @@ const props = defineProps({
|
||||
|
||||
.showText {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.top1Text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.top1Text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.top1Text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<div class="bg">
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<div v-if="isInAppEnvironment" style="height: 30px"></div>
|
||||
|
||||
@ -133,17 +132,16 @@
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div
|
||||
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%"
|
||||
>
|
||||
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%">
|
||||
<!-- 前3名 -->
|
||||
<div style="margin-top: 3%">
|
||||
<!-- 第一 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUser
|
||||
BorderImgUrl="/src/assets/images/WeeklyStar/topOne.png"
|
||||
name="aaa"
|
||||
distributionValue="111"
|
||||
:avatarUrl="RankingHasTop3[0].userAvatar"
|
||||
:name="RankingHasTop3[0].userNickname"
|
||||
:distributionValue="RankingHasTop3[0].quantity"
|
||||
style="width: 70%"
|
||||
/>
|
||||
</div>
|
||||
@ -152,15 +150,17 @@
|
||||
<TopUser
|
||||
:isTopOne="false"
|
||||
BorderImgUrl="/src/assets/images/WeeklyStar/topTwo.png"
|
||||
name="bbb"
|
||||
distributionValue="222"
|
||||
:avatarUrl="RankingHasTop3[1].userAvatar"
|
||||
:name="RankingHasTop3[1].userNickname"
|
||||
:distributionValue="RankingHasTop3[1].quantity"
|
||||
style="width: 35%"
|
||||
/>
|
||||
<TopUser
|
||||
:isTopOne="false"
|
||||
BorderImgUrl="/src/assets/images/WeeklyStar/topThree.png"
|
||||
name="ccc"
|
||||
distributionValue="333"
|
||||
:avatarUrl="RankingHasTop3[2].userAvatar"
|
||||
:name="RankingHasTop3[2].userNickname"
|
||||
:distributionValue="RankingHasTop3[2].quantity"
|
||||
style="width: 35%"
|
||||
/>
|
||||
</div>
|
||||
@ -202,9 +202,7 @@
|
||||
"
|
||||
/>
|
||||
|
||||
<div
|
||||
style="width: calc(72% - 28px - 26px); display: flex; flex-direction: column"
|
||||
>
|
||||
<div style="width: calc(72% - 28px - 26px); display: flex; flex-direction: column">
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
@ -230,6 +228,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 触发加载功能 -->
|
||||
<div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -250,7 +250,7 @@
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 8%;
|
||||
top: 6%;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 11%;
|
||||
@ -262,7 +262,7 @@
|
||||
"
|
||||
class="topTitle"
|
||||
>
|
||||
TOP{{ topIndex + 1 }}
|
||||
TOP{{ topItem.rule.sort }}
|
||||
</div>
|
||||
<!-- 主体内容 -->
|
||||
<div
|
||||
@ -272,14 +272,139 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30% 5% 20%;
|
||||
padding: 30% 6% 13%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
"
|
||||
>
|
||||
<div v-for="gift in topItem" style="position: relative">
|
||||
<div
|
||||
v-for="gift in topItem.propsGroup.activityRewardProps"
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-bottom: 3px;
|
||||
"
|
||||
>
|
||||
<!-- gift背景图 -->
|
||||
<img
|
||||
src="/src/assets/images/WeeklyStar/giftItemBg.png"
|
||||
alt=""
|
||||
style="width: 90%; display: block"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<!-- gift图 -->
|
||||
<img
|
||||
:src="gift.cover"
|
||||
alt=""
|
||||
style="width: 50%; display: block"
|
||||
@error="(e) => handleImageError(e, gift.type)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative; width: 75%">
|
||||
<img src="/src/assets/images/WeeklyStar/btBg.png" alt="" width="100%" />
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 8%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
"
|
||||
>
|
||||
{{ showDetail(gift.type, gift.quantity) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Exchange -->
|
||||
<div v-show="exchargeShow" style="display: flex; justify-content: center">
|
||||
<div style="position: relative; width: 90%">
|
||||
<!-- 背景图 -->
|
||||
<img
|
||||
src="/src/assets/images/WeeklyStar/longBg.png"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 6%;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 11%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
"
|
||||
class="topTitle"
|
||||
>
|
||||
Props
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30% 7% 13%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
"
|
||||
>
|
||||
<!-- 碎片 -->
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
src="/src/assets/images/WeeklyStar/debris.png"
|
||||
alt=""
|
||||
style="width: 15%; display: block; margin-right: 5px"
|
||||
/>
|
||||
<div style="font-weight: 590; font-size: 1.3em">:{{ myFragment.quantity || 0 }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 礼品 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
|
||||
<div
|
||||
v-for="(goods, goodsIndex) in exchangeGoodsList"
|
||||
:key="goodsIndex"
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/WeeklyStar/giftItemBg.png"
|
||||
alt=""
|
||||
@ -298,15 +423,44 @@
|
||||
"
|
||||
>
|
||||
<!-- gift图 -->
|
||||
<img src="/src/assets/icon/coin.png" alt="" style="width: 50%; display: block" />
|
||||
<img
|
||||
:src="goods.propsGroup.activityRewardProps[0].cover"
|
||||
alt=""
|
||||
style="width: 50%; display: block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="needDebris">
|
||||
Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
|
||||
</div>
|
||||
<div style="position: relative; width: 75%" @click="selectGood(goods)">
|
||||
<img
|
||||
src="/src/assets/images/WeeklyStar/btBg.png"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 8%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
"
|
||||
class="needDebris"
|
||||
>
|
||||
Redeem
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Exchange -->
|
||||
<div v-show="exchargeShow"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -343,12 +497,12 @@
|
||||
padding: 0 8%;
|
||||
"
|
||||
>
|
||||
<div style="width: 70%; display: flex; align-items: center">
|
||||
<div style="width: 70%; display: flex; justify-content: space-around; align-items: center">
|
||||
<!-- 排名 -->
|
||||
<div style="color: #edb247; font-weight: 700">999</div>
|
||||
<div style="color: #edb247; font-weight: 700">{{ myRanking.rank }}</div>
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
src="/src/assets/icon/coin.png"
|
||||
:src="myRanking.userAvatar"
|
||||
alt=""
|
||||
style="
|
||||
width: 30%;
|
||||
@ -357,6 +511,7 @@
|
||||
object-fit: cover;
|
||||
margin: 0 12px;
|
||||
"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<!-- 名称 -->
|
||||
<div style="display: flex; flex-direction: column; width: calc(70% - 24px - 20%)">
|
||||
@ -369,22 +524,17 @@
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
aaaaaaaaaaaaaaaaaa
|
||||
{{ myRanking.userNickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div style="display: flex; width: 30%; display: flex; align-items: center">
|
||||
<div style="width: 30%; display: flex; justify-content: center; align-items: center">
|
||||
<img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
|
||||
<!-- 1:男,0:女 -->
|
||||
<!-- <div
|
||||
v-if="myRanking.userSex == 1"
|
||||
style="color: #edb247; font-weight: 700; margin-left: 8px"
|
||||
>
|
||||
{{ myRanking.wealthQuantity }}
|
||||
</div> -->
|
||||
<div style="color: #edb247; font-weight: 700; margin-left: 8px">10000</div>
|
||||
<div style="color: #edb247; font-weight: 700; margin-left: 8px">
|
||||
{{ myRanking.quantity || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -393,11 +543,150 @@
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
|
||||
<!-- help弹窗 -->
|
||||
<div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
|
||||
<img src="/src/assets/images/TopList/helpInfo.png" alt="" style="width: 100%" />
|
||||
<img src="/src/assets/images/WeeklyStar/helpInfo.png" alt="" style="width: 100%" />
|
||||
</div>
|
||||
|
||||
<!-- history弹窗 -->
|
||||
<div></div>
|
||||
<div v-if="historyShow" style="position: relative; margin: 20% 0" @click.stop>
|
||||
<!-- 背景图 -->
|
||||
<img
|
||||
src="/src/assets/images/WeeklyStar/mediumBg.png"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 13%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
"
|
||||
class="topTitle"
|
||||
>
|
||||
History
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 31% 7% 15%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<!-- 头像 -->
|
||||
<div style="position: relative; width: 75%">
|
||||
<!-- 头像框 -->
|
||||
<img
|
||||
src="/src/assets/images/WeeklyStar/topOneHistory.png"
|
||||
alt=""
|
||||
style="width: 100%; display: block; position: relative; z-index: 1"
|
||||
/>
|
||||
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
|
||||
<div
|
||||
style="height: 100%; display: flex; justify-content: center; align-items: center"
|
||||
>
|
||||
<img
|
||||
:src="showTopOne.userAvatar"
|
||||
alt=""
|
||||
style="
|
||||
width: 50%;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 名字 -->
|
||||
<div style="position: relative; width: 25%">
|
||||
<!-- 背景图 -->
|
||||
<img
|
||||
src="/src/assets/images/WeeklyStar/nameBg.png"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: 1%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
"
|
||||
class="history-name"
|
||||
>
|
||||
{{ showTopOne.userNickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 历史时间 -->
|
||||
<div
|
||||
style="width: 50%; display: flex; justify-content: space-between; align-items: center"
|
||||
>
|
||||
<img
|
||||
src="/src/assets/images/TopList/timeBack.png"
|
||||
alt=""
|
||||
width="13%"
|
||||
@click="changeHistoryIndex(1)"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-weight: 590;
|
||||
background-image: -webkit-linear-gradient(
|
||||
top,
|
||||
rgba(243, 183, 0, 1),
|
||||
rgba(255, 238, 198, 1)
|
||||
);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
"
|
||||
class="history-time"
|
||||
>
|
||||
{{ showTopOne.group }}
|
||||
</div>
|
||||
<img
|
||||
src="/src/assets/images/TopList/timeNext.png"
|
||||
alt=""
|
||||
width="13%"
|
||||
@click="changeHistoryIndex(-1)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- gifts弹窗 -->
|
||||
<div v-if="giftsShow" style="position: relative; margin: 20% 0" @click.stop>
|
||||
@ -421,7 +710,7 @@
|
||||
"
|
||||
>
|
||||
<!-- 礼物单元 -->
|
||||
<div style="width: 30%" v-for="value in gifts">
|
||||
<div style="width: 30%" v-for="gift in gifts" :key="gift.id">
|
||||
<!-- 礼物背景 -->
|
||||
<div style="position: relative">
|
||||
<img
|
||||
@ -443,7 +732,7 @@
|
||||
>
|
||||
<!-- 礼物 -->
|
||||
<img
|
||||
src="/src/assets/icon/coin.png"
|
||||
:src="gift.giftPhoto"
|
||||
alt=""
|
||||
style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
||||
/>
|
||||
@ -457,11 +746,69 @@
|
||||
alt=""
|
||||
style="width: 20%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
||||
/>
|
||||
<div style="color: #fff; font-weight: 590; margin-left: 2px">99999</div>
|
||||
<div style="color: #fff; font-weight: 590; margin-left: 2px">
|
||||
{{ gift.giftCandy }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交易商品弹窗 -->
|
||||
<div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
|
||||
<!-- 背景图 -->
|
||||
<img
|
||||
src="/src/assets/images/WeeklyStar/mediumBg.png"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 13%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
"
|
||||
class="topTitle"
|
||||
>
|
||||
Exchange
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30% 7% 15%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="selectedGood.propsGroup.activityRewardProps[0].cover"
|
||||
alt=""
|
||||
style="width: 50%; display: block"
|
||||
/>
|
||||
<div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
|
||||
<img
|
||||
src="/src/assets/images/WeeklyStar/ConfirmBt.png"
|
||||
alt=""
|
||||
style="width: 30%; display: block"
|
||||
@click="exchangeSelectedGood(selectedGood.rule.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</maskLayer>
|
||||
</div>
|
||||
</template>
|
||||
@ -472,14 +819,29 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import itemCenter from '@/components/WeeklyStar/itemCenter.vue'
|
||||
import TopUser from '@/components/WeeklyStar/topUser.vue'
|
||||
import maskLayer from '../../components/MaskLayer.vue'
|
||||
import { useDebounce, useThrottle } from '@/utils/useDebounce'
|
||||
import { getUserId } from '@/utils/userStore.js'
|
||||
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
|
||||
import {
|
||||
getWeekStarRanking,
|
||||
getWeekRewards,
|
||||
getWeekGifts,
|
||||
getHistoryTopOne,
|
||||
getMyWeekStarRanking,
|
||||
getMyFragment,
|
||||
getExchangeGoods,
|
||||
exchangeGood,
|
||||
} from '@/api/weeklyStar.js'
|
||||
|
||||
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
|
||||
const helpInfoShow = ref(false) //帮助模块
|
||||
const historyShow = ref(false) //历史模块
|
||||
const giftsShow = ref(false) //礼物模块
|
||||
const exchargeGoodsShow = ref(false) //交易弹窗
|
||||
|
||||
// 展示遮罩层
|
||||
const maskLayerShow = computed(() => {
|
||||
return helpInfoShow.value || historyShow.value || giftsShow.value
|
||||
return helpInfoShow.value || historyShow.value || giftsShow.value || exchargeGoodsShow.value
|
||||
})
|
||||
|
||||
// 倒计时
|
||||
@ -489,46 +851,110 @@ const Minutes = ref(0)
|
||||
const Second = ref(0)
|
||||
let timer = null
|
||||
|
||||
const rankingShow = ref(true)
|
||||
const rewardShow = ref(false)
|
||||
const exchargeShow = ref(false)
|
||||
// 模块切换展示
|
||||
const rankingShow = ref(true) //排行榜
|
||||
const rewardShow = ref(false) //奖励
|
||||
const exchargeShow = ref(false) //交易
|
||||
|
||||
// 排行榜
|
||||
const Ranking = ref(
|
||||
Array.from({ length: 5 }, () => ({
|
||||
rank: 111,
|
||||
userNickname: 'aaaaaaaaaaaaaa',
|
||||
account: '8826602',
|
||||
quantity: '111',
|
||||
const current = ref(1) //排行榜第几页
|
||||
const RankingLoadmore = ref(null) //触底模块
|
||||
const showRankingLoading = ref(true) //触底加载功能
|
||||
const Ranking = ref([]) // 排行榜
|
||||
|
||||
const RankingLoadParams = computed(() => {
|
||||
return {
|
||||
type: 'THIS_WEEK',
|
||||
current: current.value,
|
||||
size: 10,
|
||||
}
|
||||
})
|
||||
|
||||
const myRanking = ref([]) // 我的排名
|
||||
const rewardsList = ref([]) // 奖励列表
|
||||
const gifts = ref([]) // 本周礼物
|
||||
|
||||
const historyRankingTop1 = ref([]) // 历史榜首
|
||||
const historyIndex = ref(0)
|
||||
const showTopOne = computed(() => {
|
||||
return historyRankingTop1.value[historyIndex.value]
|
||||
})
|
||||
|
||||
const exchangeGoodsList = ref([])
|
||||
const myFragment = ref({})
|
||||
const selectedGood = ref({})
|
||||
|
||||
const changeHistoryIndex = (num) => {
|
||||
let targetIndex = historyIndex.value + num
|
||||
let length = historyRankingTop1.value.length
|
||||
if (targetIndex >= 0 && targetIndex < length) {
|
||||
historyIndex.value = targetIndex
|
||||
}
|
||||
}
|
||||
|
||||
// 处理排行榜小于3人时的情况
|
||||
const RankingHasTop3 = computed(() => {
|
||||
let RankingShow = [...Ranking.value]
|
||||
if (Ranking.value.length < 3) {
|
||||
let addNullUser = Array.from({ length: 3 - Ranking.value.length }, () => ({
|
||||
userAvatar: '',
|
||||
userNickname: '',
|
||||
quantity: '',
|
||||
}))
|
||||
)
|
||||
RankingShow.push(...addNullUser)
|
||||
}
|
||||
return RankingShow
|
||||
})
|
||||
|
||||
// 展示用的榜单
|
||||
const showRanking = computed(() => {
|
||||
return Ranking.value.filter((_, index) => index >= 3)
|
||||
})
|
||||
|
||||
// 本周礼物
|
||||
const gifts = ref(
|
||||
Array.from({ length: 3 }, () => ({
|
||||
quantity: '111',
|
||||
}))
|
||||
)
|
||||
// 图片资源出错处理
|
||||
const handleImageError = (e, type) => {
|
||||
console.log('图片资源出错')
|
||||
e.target.onerror = null
|
||||
if ((type = 'GOLD')) {
|
||||
e.target.src = '/src/assets/icon/coin.png'
|
||||
}
|
||||
}
|
||||
|
||||
// 奖励列表
|
||||
const rewardsList = ref(
|
||||
Array.from({ length: 3 }, () =>
|
||||
Array.from({ length: 4 }, () => ({
|
||||
userNickname: 'aaa',
|
||||
}))
|
||||
)
|
||||
)
|
||||
const defaultAvatarUrl = (e) => {
|
||||
console.log('头像资源出错')
|
||||
e.target.src = '/src/assets/images/WeeklyStar/defaultAvatar.png'
|
||||
}
|
||||
|
||||
// 选中要兑换的商品
|
||||
const selectGood = (good) => {
|
||||
exchargeGoodsShow.value = true
|
||||
selectedGood.value = good
|
||||
}
|
||||
|
||||
const exchangeSelectedGood = async (propsGroupId) => {
|
||||
try {
|
||||
let data = {
|
||||
propsGroupId,
|
||||
fragmentsId: '1968948330210508801',
|
||||
}
|
||||
const resExchangeGood = await exchangeGood(data)
|
||||
|
||||
if (resExchangeGood.status) {
|
||||
getThisWeekExchangeGoods() //刷新我的碎片
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('error:', error)
|
||||
// 信息提示id有误
|
||||
showWarning(error.response.errorMsg)
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const closedPopup = () => {
|
||||
helpInfoShow.value = false
|
||||
historyShow.value = false
|
||||
giftsShow.value = false
|
||||
exchargeGoodsShow.value = false
|
||||
selectedGood.value = {} //选中商品置空
|
||||
}
|
||||
|
||||
// 点击展示主体内容
|
||||
@ -538,22 +964,21 @@ const handleBt = (type) => {
|
||||
exchargeShow.value = type == 'Exchange' ? true : false
|
||||
}
|
||||
|
||||
// 获取下周的时间戳
|
||||
const getNextMonday = () => {
|
||||
const now = new Date() //当前时间
|
||||
const day = now.getDay() //0周日6周六
|
||||
// 获取沙特下周一早上六点的时间戳
|
||||
const getNextMondayInSaudi = () => {
|
||||
const now = new Date()
|
||||
const utcDay = now.getUTCDay() //获取UTC星期几，0(周日)-6(周六)
|
||||
|
||||
// 计算到下周的所需天数
|
||||
const dayToAdd = day === 1 ? 7 : (7 + 1 - day) % 7
|
||||
const nextMonday = new Date(now) //以当前时间为基准，而不是重新获取时间
|
||||
// 计算到下周一的所需天数
|
||||
const daysToAdd = utcDay === 1 ? 7 : (1 + 7 - utcDay) % 7
|
||||
const nextMondayUTC = new Date(now) //以当前UTC时间为基准，而不是重新获取
|
||||
|
||||
nextMonday.setDate(now.getDate() + dayToAdd) //增加到下周一那天
|
||||
nextMonday.setHours(0, 0, 0, 0)
|
||||
|
||||
return nextMonday.getTime() //得到下周一00:00:00.000的时间戳
|
||||
nextMondayUTC.setUTCDate(now.getUTCDate() + daysToAdd) //增加到下周一那天
|
||||
nextMondayUTC.setUTCHours(3, 0, 0, 0) // 设置为沙特下周一当天早上6点（北京时间3点）
|
||||
return nextMondayUTC.getTime() //得到下周一00:00:00.000的时间戳
|
||||
}
|
||||
|
||||
const targetTime = ref(getNextMonday()) // 闭包保存目标时间 (核心修正)
|
||||
const targetTime = ref(getNextMondayInSaudi()) // 闭包保存目标时间 (核心修正)
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (value) => {
|
||||
@ -566,6 +991,8 @@ const getCountdown = () => {
|
||||
let diff = targetTime.value - now
|
||||
|
||||
if (diff <= 0) {
|
||||
// 初始化数据
|
||||
resetPage()
|
||||
targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
|
||||
diff = targetTime.value - now
|
||||
}
|
||||
@ -577,12 +1004,147 @@ const getCountdown = () => {
|
||||
Second.value = formatTime(Math.floor(totalSeconds % 60))
|
||||
}
|
||||
|
||||
// 重置数据
|
||||
const resetPage = () => {
|
||||
current.value = 1 //排行榜第几页
|
||||
showRankingLoading.value = true //触底加载功能
|
||||
Ranking.value = [] // 排行榜
|
||||
|
||||
historyIndex.value = 0 //历史榜首重置展示当前
|
||||
|
||||
updatePageData() // 刷新页面数据
|
||||
}
|
||||
|
||||
// 格式化奖励的展示信息
|
||||
const showDetail = (type, quantity) => {
|
||||
let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
|
||||
if (showamount.includes(type)) {
|
||||
return quantity
|
||||
} else {
|
||||
return `${quantity}Days`
|
||||
}
|
||||
}
|
||||
|
||||
// 获取本周排名
|
||||
const getThisWeekRanking = async () => {
|
||||
const resWeekStarRanking = await getWeekStarRanking(RankingLoadParams.value)
|
||||
console.log('resWeekStarRanking:', resWeekStarRanking)
|
||||
if (
|
||||
resWeekStarRanking.status &&
|
||||
resWeekStarRanking.body &&
|
||||
resWeekStarRanking.body.rankUsers.records
|
||||
) {
|
||||
let rankUsers = resWeekStarRanking.body.rankUsers
|
||||
Ranking.value.push(...rankUsers.records)
|
||||
if (current.value * rankUsers.size >= rankUsers.total) {
|
||||
showRankingLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取历史榜首
|
||||
const getHistoryRankingTop1 = async () => {
|
||||
const resHistoryTopOne = await getHistoryTopOne()
|
||||
console.log('resHistoryTopOne:', resHistoryTopOne)
|
||||
if (resHistoryTopOne.status && resHistoryTopOne.body) {
|
||||
historyRankingTop1.value = resHistoryTopOne.body
|
||||
}
|
||||
}
|
||||
|
||||
// 获取本周我的排名
|
||||
const getMyThisWeekRanking = async () => {
|
||||
const resMyWeekStarRanking = await getMyWeekStarRanking('THIS_WEEK')
|
||||
console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
|
||||
if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
|
||||
myRanking.value = resMyWeekStarRanking.body
|
||||
}
|
||||
}
|
||||
|
||||
// 获取本周礼物
|
||||
const getThisWeekGifts = async () => {
|
||||
const resThisWeekGifts = await getWeekGifts('THIS_WEEK')
|
||||
console.log('resThisWeekGifts:', resThisWeekGifts)
|
||||
if (resThisWeekGifts.status && resThisWeekGifts.body) {
|
||||
gifts.value = resThisWeekGifts.body
|
||||
}
|
||||
}
|
||||
|
||||
// 获取本周奖励
|
||||
const getThisWeekRewards = async () => {
|
||||
const resThisWeekRewards = await getWeekRewards()
|
||||
console.log('resThisWeekRewards:', resThisWeekRewards)
|
||||
if (resThisWeekRewards.status && resThisWeekRewards.body) {
|
||||
rewardsList.value = resThisWeekRewards.body
|
||||
}
|
||||
}
|
||||
|
||||
// 获取本周可兑换商品
|
||||
const getThisWeekExchangeGoods = async () => {
|
||||
let data = {
|
||||
sysOrigin: 'LIKEI',
|
||||
activityType: 'STAR_EXCHANGE',
|
||||
}
|
||||
const resExchangeGoods = await getExchangeGoods(data)
|
||||
console.log('resExchangeGoods:', resExchangeGoods)
|
||||
if (resExchangeGoods.status && resExchangeGoods.body) {
|
||||
exchangeGoodsList.value = resExchangeGoods.body
|
||||
}
|
||||
}
|
||||
|
||||
// 获取本周我拥有的碎片
|
||||
const getThisWeekMyFragment = async () => {
|
||||
let data = {
|
||||
userId: getUserId(),
|
||||
fragmentsIds: ['1968948330210508801'],
|
||||
}
|
||||
|
||||
const resMyFragment = await getMyFragment(data)
|
||||
console.log('resMyFragment:', resMyFragment)
|
||||
if (resMyFragment.status && resMyFragment.body) {
|
||||
myFragment.value =
|
||||
resMyFragment.body.find((item) => item.fragmentsId == '1968948330210508801') || {}
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新页面数据
|
||||
const updatePageData = () => {
|
||||
getThisWeekRanking() // 获取本周排名
|
||||
getHistoryRankingTop1() // 获取历史top1
|
||||
getMyThisWeekRanking() // 获取本周我的排名
|
||||
getThisWeekRewards() // 获取本周奖励
|
||||
getThisWeekGifts() // 获取本周礼物
|
||||
getThisWeekExchangeGoods() // 获取本周可兑换商品
|
||||
getThisWeekMyFragment() // 获取本周我的碎片
|
||||
}
|
||||
|
||||
const debouceGetThisWeekRanking = useThrottle(() => {
|
||||
getThisWeekRanking()
|
||||
}, 1000)
|
||||
|
||||
// IntersectionObserver配置
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.intersectionRatio > 0 && Ranking.value.length != 0) {
|
||||
console.log('触发RankingLoadmore加载')
|
||||
current.value++
|
||||
debouceGetThisWeekRanking()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 组件挂载时检测环境
|
||||
onMounted(() => {
|
||||
isInAppEnvironment.value = isInApp()
|
||||
|
||||
getCountdown()
|
||||
timer = setInterval(getCountdown, 1000) //每秒更新
|
||||
|
||||
updatePageData() // 刷新页面数据
|
||||
|
||||
// 监听加载模块
|
||||
if (RankingLoadmore.value) {
|
||||
observer.observe(RankingLoadmore.value)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@ -592,19 +1154,14 @@ onUnmounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
color: black;
|
||||
color: #fff;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: #311300;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-color: #311300;
|
||||
background-image: url(../../assets/images/WeeklyStar/bg.png);
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
@ -628,7 +1185,31 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.topTitle {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.needDebris {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.history-name {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.history-time {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user