feat(春节活动页面): 排行榜页面完成
This commit is contained in:
hzj
parent
620b27a2bc
commit
439d51b9c2
@ -12,6 +12,7 @@ export const useSpringFestival = defineStore('springFestival', {
|
||||
taskList: [], // 任务列表
|
||||
|
||||
// 抽奖排名模块
|
||||
lotteryPageNo: 1, // 抽奖排名页码
|
||||
lotteryRanking: [], // 抽奖排名
|
||||
addLotteryRanking: [], // 补充的抽奖排名
|
||||
myLotteryRanking: {}, // 我的抽奖排名
|
||||
@ -20,6 +21,7 @@ export const useSpringFestival = defineStore('springFestival', {
|
||||
rankingRewards: {}, // 排名奖池
|
||||
|
||||
// 充值排名模块
|
||||
rechargePageNo: 1, // 充值排名页码
|
||||
rechargeRanking: [], // 充值排名
|
||||
addRechargeRanking: [], // 补充的充值排名
|
||||
myRechargeRanking: {}, // 我的充值排名
|
||||
|
||||
@ -1,5 +1,179 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div>
|
||||
<!-- 前三名 -->
|
||||
<div style="">
|
||||
<!-- 第一 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<TopUser
|
||||
ranking="1"
|
||||
:BorderImgUrl="imageUrl('top1Bg')"
|
||||
:avatarUrl="RankingHasTop3[0].userAvatar"
|
||||
:name="RankingHasTop3[0].userName"
|
||||
:rankingType="rankingType"
|
||||
:distributionValue="RankingHasTop3[0].amount"
|
||||
style="width: 70%"
|
||||
@click="viewUserInfo(RankingHasTop3[0].userId)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 第二三 -->
|
||||
<div
|
||||
style="
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="pointer-events: auto; width: 42%"
|
||||
@click.stop="viewUserInfo(RankingHasTop3[1].userId)"
|
||||
>
|
||||
<TopUser
|
||||
ranking="2"
|
||||
:BorderImgUrl="imageUrl('top2Bg')"
|
||||
:avatarUrl="RankingHasTop3[1].userAvatar"
|
||||
:name="RankingHasTop3[1].userName"
|
||||
:rankingType="rankingType"
|
||||
:distributionValue="RankingHasTop3[1].amount"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="pointer-events: auto; width: 42%"
|
||||
@click.stop="viewUserInfo(RankingHasTop3[2].userId)"
|
||||
>
|
||||
<TopUser
|
||||
ranking="3"
|
||||
:BorderImgUrl="imageUrl('top3Bg')"
|
||||
:avatarUrl="RankingHasTop3[2].userAvatar"
|
||||
:name="RankingHasTop3[2].userName"
|
||||
:rankingType="rankingType"
|
||||
:distributionValue="RankingHasTop3[2].amount"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四名开始 -->
|
||||
<div
|
||||
v-if="showRanking.length > 0"
|
||||
style="position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2vw"
|
||||
>
|
||||
<div
|
||||
v-for="(listItem, index) in showRanking"
|
||||
:key="listItem.userId"
|
||||
style="padding: 0 2vw; display: flex; align-items: center; gap: 2vw"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<itemCenter
|
||||
style="width: 10vw"
|
||||
:imgUrl="imageUrl('rankingNumBg')"
|
||||
:contentStyle="``"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
>
|
||||
<div style="color: #ffe601; font-weight: 700">{{ listItem?.rank }}</div>
|
||||
</itemCenter>
|
||||
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl('rankingItemBg')"
|
||||
:contentStyle="`padding: 9.5vw 4vw 7vw 5vw;gap: 1vw`"
|
||||
:lazy="true"
|
||||
:immediate="index < 2"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
gap: 10vw;
|
||||
"
|
||||
>
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="listItem?.userAvatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 19vw;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
|
||||
<!-- 名称、id -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
class="UserNickname"
|
||||
>
|
||||
{{ listItem?.userName }}
|
||||
</div>
|
||||
<div style="color: #fff; font-weight: 590" class="UserNickname">
|
||||
{{ $t('user_id_prefix') }} {{ listItem?.specialAccount || listItem?.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献值 -->
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="rankingType == 'lottery'"
|
||||
style="display: flex; justify-content: center; align-items: center"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
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 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="rankingType == 'recharge'"
|
||||
style="color: #fff; font-weight: 700"
|
||||
class="UserNickname"
|
||||
>
|
||||
${{ listItem?.amount }}
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 触发加载功能 -->
|
||||
<div ref="RankingLoadmore"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -17,10 +191,34 @@ import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHan
|
||||
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
|
||||
import { useSpringFestival } from '@/stores/springFestival'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useThrottle } from '@/utils/useDebounce'
|
||||
|
||||
import {
|
||||
ranklist, //获取排行榜
|
||||
validActivity, // 获取有效活动
|
||||
activityDetail, // 获取活动详情
|
||||
myRecharge, // 获取充值记录
|
||||
activityRewardConfigs, // 获取活动奖励配置列表
|
||||
myTickets, // 获取剩余中奖券
|
||||
myTotalDrawCount, // 获取我的累计抽奖次数
|
||||
onceDraw, // 执行单次抽奖
|
||||
multiDraw, // 执行连抽
|
||||
drawRecords, // 获取中奖记录
|
||||
ActTaskList, // 获取任务列表
|
||||
rewardConfigsBadge, // 获取累计抽奖-徽章信息
|
||||
receiveTickets, // 领取任务奖励
|
||||
receiveRechargeReward, // 领取充值奖励
|
||||
receiveRewardBadge, // 领取累计抽奖奖励-徽章
|
||||
winnerHistory, //获取历史中奖用户
|
||||
withdrawableAmount, //获取可提现金额
|
||||
transferActivityDollar, // 转账活动美金
|
||||
exchangeCoin, //兑换代币
|
||||
} from '@/api/lottery'
|
||||
|
||||
import BackgroundLayer from '@/components/BackgroundLayer.vue'
|
||||
import itemCenter from '@/components/itemCenter.vue'
|
||||
import maskLayer from '@/components/MaskLayer.vue'
|
||||
import TopUser from './components/topUser.vue'
|
||||
|
||||
// 预加载状态
|
||||
const isLoading = ref(true)
|
||||
@ -40,6 +238,7 @@ const {
|
||||
taskList, // 任务列表
|
||||
|
||||
// 抽奖排名模块
|
||||
lotteryPageNo, // 抽奖排名页码
|
||||
lotteryRanking, // 抽奖排名
|
||||
addLotteryRanking, // 补充的抽奖排名
|
||||
myLotteryRanking, // 我的抽奖排名
|
||||
@ -48,6 +247,7 @@ const {
|
||||
rankingRewards, // 排名奖池
|
||||
|
||||
// 充值排名模块
|
||||
rechargePageNo, // 充值排名页码
|
||||
rechargeRanking, // 充值排名
|
||||
addRechargeRanking, // 补充的充值排名
|
||||
myRechargeRanking, // 我的充值排名
|
||||
@ -81,61 +281,113 @@ const getImgName = (filename) => {
|
||||
return currentLangType.value === 'ar' ? `filename_ar` : filename
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
const openPopup = (type) => {
|
||||
closedPopup(false) //先关闭其他弹窗，不清除抽奖结果
|
||||
switch (type) {
|
||||
case 'help':
|
||||
helpShow.value = true
|
||||
break
|
||||
default:
|
||||
break
|
||||
const props = defineProps({
|
||||
rankingType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
// 完整排行榜
|
||||
const rankingTotal = computed(() => {
|
||||
if (props.rankingType == 'lottery') {
|
||||
return [...lotteryRanking.value, ...addLotteryRanking.value]
|
||||
}
|
||||
return [...rechargeRanking.value, ...addRechargeRanking.value]
|
||||
})
|
||||
// 处理排行榜小于3人时的情况
|
||||
const RankingHasTop3 = computed(() => {
|
||||
let RankingTop3 = [...rankingTotal.value]
|
||||
if (rankingTotal.value.length < 3) {
|
||||
let addNullUser = Array.from({ length: 3 - rankingTotal.value.length }, () => ({
|
||||
userAvatar: '',
|
||||
userName: '',
|
||||
amount: '',
|
||||
}))
|
||||
RankingTop3.push(...addNullUser)
|
||||
}
|
||||
return RankingTop3
|
||||
})
|
||||
|
||||
// 展示用的榜单
|
||||
const showRanking = computed(() => {
|
||||
return rankingTotal.value.filter((_, index) => index >= 3)
|
||||
// return []
|
||||
})
|
||||
|
||||
const RankingLoadmore = ref(null) //触底模块
|
||||
const rankingPageNo = ref(1) //分页页码
|
||||
|
||||
//获取排行榜
|
||||
const getRanking = async () => {
|
||||
let data = {
|
||||
activityId: props.rankingType == 'lottery' ? '2005571533988298753' : '2005571533988298753',
|
||||
pageNo: props.rankingType == 'lottery' ? lotteryPageNo.value : rechargePageNo.value,
|
||||
pageSize: 20,
|
||||
}
|
||||
const resRanking = await ranklist(data)
|
||||
if (resRanking.status && resRanking.body) {
|
||||
if (props.rankingType == 'lottery') {
|
||||
myLotteryRanking.value = resRanking.body?.currentUser // 我的抽奖排名
|
||||
} else if (props.rankingType == 'recharge') {
|
||||
myRechargeRanking.value = resRanking.body?.currentUser // 我的充值排名
|
||||
}
|
||||
|
||||
if (resRanking.body.topList.length > 0) {
|
||||
if (resRanking.body.topList.length == 20) {
|
||||
if (props.rankingType == 'lottery') {
|
||||
addLotteryRanking.value = []
|
||||
lotteryRanking.value.push(...resRanking.body?.topList)
|
||||
lotteryPageNo.value++
|
||||
} else if (props.rankingType == 'recharge') {
|
||||
addRechargeRanking.value = []
|
||||
rechargeRanking.value.push(...resRanking.body?.topList)
|
||||
rechargePageNo.value++
|
||||
}
|
||||
} else {
|
||||
if (props.rankingType == 'lottery') {
|
||||
addLotteryRanking.value = resRanking.body?.topList
|
||||
} else if (props.rankingType == 'recharge') {
|
||||
addRechargeRanking.value = resRanking.body?.topList
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (props.rankingType == 'lottery') {
|
||||
myLotteryRanking.value = {}
|
||||
lotteryRanking.value = []
|
||||
addLotteryRanking.value = []
|
||||
lotteryPageNo.value = 1
|
||||
} else if (props.rankingType == 'recharge') {
|
||||
myRechargeRanking.value = {}
|
||||
rechargeRanking.value = []
|
||||
addRechargeRanking.value = []
|
||||
rechargePageNo.value = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const closedPopup = (clear = true) => {
|
||||
helpShow.value = false
|
||||
// 清空数据
|
||||
if (clear) {
|
||||
}
|
||||
}
|
||||
// 触发节流获取排行榜
|
||||
const debouceGetRanking = useThrottle(() => {
|
||||
getRanking() //加载新的排行榜项
|
||||
}, 1000)
|
||||
|
||||
// 刷新页面数据
|
||||
const initData = async () => {
|
||||
await Promise.all([])
|
||||
}
|
||||
|
||||
// 预加载关键图片
|
||||
const preloadCriticalImages = async () => {
|
||||
const criticalImages = []
|
||||
|
||||
await preloadImages(criticalImages)
|
||||
}
|
||||
|
||||
// 完成预加载
|
||||
const completePreloading = async () => {
|
||||
try {
|
||||
// 执行所有初始化操作
|
||||
await Promise.all([initData(), preloadCriticalImages()])
|
||||
} catch (error) {
|
||||
console.error('预加载过程中发生错误:', error)
|
||||
} finally {
|
||||
// 无论成功或失败都结束加载状态
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 使用工具函数连接APP
|
||||
const connectToAppHandler = async () => {
|
||||
await connectToApp(() => {
|
||||
// 连接成功回调
|
||||
completePreloading() // 完成预加载
|
||||
// IntersectionObserver配置
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.intersectionRatio > 0 && rankingTotal.value.length != 0) {
|
||||
console.log('触发RankingLoadmore加载')
|
||||
debouceGetRanking()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// connectToAppHandler()
|
||||
// 监听加载模块
|
||||
if (RankingLoadmore.value) {
|
||||
console.log('监控加载模块')
|
||||
observer.observe(RankingLoadmore.value)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {})
|
||||
|
||||
@ -1,356 +1,151 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<itemCenter :imgUrl="BorderImgUrl" :flip="true" :contentStyle="`display:block;`">
|
||||
<!-- 第一名 -->
|
||||
<div v-if="isTopOne" style="width: 98vw; height: 80%; position: relative">
|
||||
<!-- 查看个人信息按钮 -->
|
||||
<div style="position: absolute; z-index: 2; inset: 0; display: flex">
|
||||
<!-- 情侣1 -->
|
||||
<div
|
||||
style="flex: 1; min-width: 0; align-self: stretch"
|
||||
@click="viewUserInfo(rankingItem.userId)"
|
||||
></div>
|
||||
<!-- 情侣1 -->
|
||||
<div
|
||||
style="flex: 1; min-width: 0; align-self: stretch"
|
||||
@click="viewUserInfo(rankingItem.cpUserId)"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 12vw;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 25vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 14vw;
|
||||
"
|
||||
>
|
||||
<!-- 情侣1头像 -->
|
||||
<div style="position: relative">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="BorderImgUrl"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block; position: relative; z-index: 2"
|
||||
/>
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
:style="{ height: avatarContainerHeight }"
|
||||
>
|
||||
<div :style="{ width: avatarWidth }">
|
||||
<img
|
||||
:src="rankingItem.userAvatar"
|
||||
v-smart-img
|
||||
:src="avatarUrl || ''"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 25vw;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
"
|
||||
width="100%"
|
||||
style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
|
||||
@error="handleAvatarImageError"
|
||||
@click="viewUserInfo(rankingItem.userId)"
|
||||
/>
|
||||
<!-- 情侣2头像 -->
|
||||
<img
|
||||
:src="rankingItem.cpUserAvatar"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 25vw;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
@click="viewUserInfo(rankingItem.cpUserId)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 顶部距离 -->
|
||||
<div style="height: 22vw"></div>
|
||||
<!-- 贡献值 -->
|
||||
<div style="height: 17vw; display: flex; justify-content: center; align-items: center">
|
||||
<div style="color: #fff; font-weight: 700">
|
||||
{{ rankingItem.total }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 名称 -->
|
||||
<div
|
||||
style="
|
||||
margin-top: -1vw;
|
||||
height: 5vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div style="width: 76vw; display: flex; align-items: center; gap: 2vw">
|
||||
<!-- 情侣1名称 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
padding: 0 20%;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
{{ rankingItem.userNickname || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 情侣2名称 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
padding: 0 20%;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
{{ rankingItem.cpUserNickname || '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二三名 -->
|
||||
<div v-else style="height: 65%; padding: 0 7%; display: flex; align-items: center">
|
||||
<!-- 排名 -->
|
||||
<itemCenter
|
||||
style="width: 9vw"
|
||||
class="rankingBg"
|
||||
:imgUrl="imageUrl(`top${ranking}RankingBg`)"
|
||||
:flip="true"
|
||||
:contentStyle="``"
|
||||
<!-- 用户名和贡献值 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
"
|
||||
:style="{ height: bottomSectionHeight }"
|
||||
>
|
||||
<div
|
||||
style="display: flex; justify-content: center; align-items: center"
|
||||
:style="{
|
||||
width: nameValueWidth,
|
||||
height: nameValueHeight,
|
||||
}"
|
||||
>
|
||||
<img :src="imageUrl(`num${ranking}`)" alt="" style="width: 3vw; display: block" />
|
||||
</itemCenter>
|
||||
|
||||
<!-- 头像 -->
|
||||
<div style="width: 36vw; position: relative">
|
||||
<!-- 查看个人信息按钮 -->
|
||||
<div style="position: absolute; z-index: 2; inset: 0; display: flex">
|
||||
<!-- 情侣1 -->
|
||||
<div
|
||||
style="flex: 1; min-width: 0; align-self: stretch"
|
||||
@click="viewUserInfo(rankingItem.userId)"
|
||||
></div>
|
||||
<!-- 情侣1 -->
|
||||
<div
|
||||
style="flex: 1; min-width: 0; align-self: stretch"
|
||||
@click="viewUserInfo(rankingItem.cpUserId)"
|
||||
></div>
|
||||
<div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
padding: 1px 2px;
|
||||
|
||||
<!-- 内容 -->
|
||||
<itemCenter
|
||||
style="width: 100%; z-index: 1"
|
||||
:imgUrl="imageUrl(`top${ranking}Frame`)"
|
||||
:contentStyle="`z-index: -1;`"
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
:style="{
|
||||
width: distributionValueWidth,
|
||||
height: distributionValueHeight,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="rankingType == 'lottery'"
|
||||
style="display: flex; justify-content: center; align-items: center"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block"
|
||||
:style="{ width: coinWidth }"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 3vw 5vw;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
style="font-weight: 590"
|
||||
class="showText"
|
||||
:class="isTopOne ? 'top1Text' : 'text'"
|
||||
:style="{
|
||||
color: ranking == '1' ? `#FFE601` : '#FFF',
|
||||
}"
|
||||
>
|
||||
<!-- 情侣1头像 -->
|
||||
<img
|
||||
:src="rankingItem.userAvatar"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
min-width: 0;
|
||||
width: 10.5vw;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
<!-- 情侣2头像 -->
|
||||
<img
|
||||
:src="rankingItem.cpUserAvatar"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
min-width: 0;
|
||||
width: 10.5vw;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
{{ distributionValue }}
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
|
||||
<!-- 名称 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1vw;
|
||||
"
|
||||
>
|
||||
<div style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||||
{{ rankingItem.userNickname || '' }}
|
||||
</div>
|
||||
<div style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
|
||||
{{ rankingItem.cpUserNickname || '' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献 -->
|
||||
<div style="width: auto; min-width: 0; display: flex; align-items: center">
|
||||
<img
|
||||
:src="imageUrl('distribution')"
|
||||
alt=""
|
||||
style="width: 10vw; display: block; object-fit: cover"
|
||||
/>
|
||||
<div style="font-weight: 700">{{ rankingItem.total || '0' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 奖励 -->
|
||||
<div class="reward-wrapper">
|
||||
<div style="height: 100%; display: flex; align-items: center; overflow: hidden">
|
||||
<!-- 滚动容器 -->
|
||||
<div class="scroll-wrapper">
|
||||
<!-- 2套内容 -->
|
||||
<div class="scroll-content" v-for="value in 2">
|
||||
<div
|
||||
v-for="(item, index) in rewards.activityRewardProps"
|
||||
:key="index"
|
||||
style="align-self: stretch; display: flex; align-items: center; padding: 0 1vw"
|
||||
@click="clickReward(item)"
|
||||
>
|
||||
<!-- 预览图 -->
|
||||
<img
|
||||
v-if="item.cover != ''"
|
||||
:src="item.cover"
|
||||
alt=""
|
||||
style="min-width: 0; display: block; width: 10vw; object-fit: cover"
|
||||
/>
|
||||
<div style="min-width: 0; color: #fff; white-space: nowrap">
|
||||
{{ formatRewardDisplay(item.type, item) }}
|
||||
</div>
|
||||
，
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="rankingType == 'recharge'"
|
||||
style="font-weight: 590"
|
||||
class="showText"
|
||||
:class="isTopOne ? 'top1Text' : 'text'"
|
||||
:style="{
|
||||
color: ranking == '1' ? `#FFE601` : '#FFF',
|
||||
}"
|
||||
>
|
||||
${{ distributionValue }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useLangStore } from '@/stores/lang'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { getPngUrl } from '@/config/imagePaths.js'
|
||||
import { setUserInfo } from '@/utils/userStore.js'
|
||||
import { viewUserInfo } from '@/utils/appBridge.js'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
import { preloadImages } from '@/utils/imagePreloader.js'
|
||||
import { formatUTCCustom } from '@/utils/utcFormat.js'
|
||||
import { showError, showSuccess } from '@/utils/toast.js'
|
||||
import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
|
||||
import { useThrottle } from '@/utils/useDebounce.js'
|
||||
import { useCoupleStore } from '@/stores/couple'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
|
||||
|
||||
import itemCenter from '@/components/itemCenter.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const coupleStore = useCoupleStore()
|
||||
|
||||
const langStore = useLangStore()
|
||||
// 当前语言类型
|
||||
const currentLangType = computed(() => {
|
||||
return langStore.selectedLang?.type || 'en'
|
||||
})
|
||||
|
||||
// 获取OSS图片URL的函数
|
||||
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
|
||||
|
||||
// 根据语言获取图片名
|
||||
const getImgName = (filename) => {
|
||||
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
|
||||
}
|
||||
|
||||
const {
|
||||
topRewardShow, // 前三名奖励展示
|
||||
topReward, // 前三名奖励项
|
||||
} = storeToRefs(coupleStore)
|
||||
import { handleAvatarImageError } from '@/utils/imageHandler.js'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
ranking: {
|
||||
type: String,
|
||||
default: '0',
|
||||
default: '',
|
||||
},
|
||||
|
||||
rankingItem: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
avatarUrl: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
rewards: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
BorderImgUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const BorderImgUrl = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return imageUrl('top1')
|
||||
case '2':
|
||||
return imageUrl('top2-3')
|
||||
case '3':
|
||||
return imageUrl('top2-3')
|
||||
default:
|
||||
return imageUrl('top2-3')
|
||||
}
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
rankingType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
distributionValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
// 是否为第一名
|
||||
@ -358,16 +153,122 @@ const isTopOne = computed(() => {
|
||||
return props.ranking === '1'
|
||||
})
|
||||
|
||||
// 点击奖品
|
||||
const clickReward = (item) => {
|
||||
topReward.value = item // 展示奖品赋值
|
||||
topRewardShow.value = true // 显示奖品
|
||||
}
|
||||
// 头像容器高度
|
||||
const avatarContainerHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '85%'
|
||||
case '2':
|
||||
return '78%'
|
||||
case '3':
|
||||
return '78%'
|
||||
default:
|
||||
return '78%'
|
||||
}
|
||||
})
|
||||
|
||||
// 头像宽度
|
||||
const avatarWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '35%'
|
||||
case '2':
|
||||
return '40%'
|
||||
case '3':
|
||||
return '38%'
|
||||
default:
|
||||
return '38%'
|
||||
}
|
||||
})
|
||||
|
||||
// 底部信息区域高度
|
||||
const bottomSectionHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '27%'
|
||||
case '2':
|
||||
return '29%'
|
||||
case '3':
|
||||
return '29%'
|
||||
default:
|
||||
return '29%'
|
||||
}
|
||||
})
|
||||
|
||||
// 名称宽度
|
||||
const nameValueWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '30%'
|
||||
case '2':
|
||||
return '40%'
|
||||
case '3':
|
||||
return '37%'
|
||||
default:
|
||||
return '40%'
|
||||
}
|
||||
})
|
||||
|
||||
// 名称高度
|
||||
const nameValueHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '25%'
|
||||
case '2':
|
||||
return '38%'
|
||||
case '3':
|
||||
return '38%'
|
||||
default:
|
||||
return '38%'
|
||||
}
|
||||
})
|
||||
|
||||
// 贡献值宽度
|
||||
const distributionValueWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '23%'
|
||||
case '2':
|
||||
return '35%'
|
||||
case '3':
|
||||
return '32%'
|
||||
default:
|
||||
return '40%'
|
||||
}
|
||||
})
|
||||
|
||||
// 贡献值高度
|
||||
const distributionValueHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '26%'
|
||||
case '2':
|
||||
return '38%'
|
||||
case '3':
|
||||
return '38%'
|
||||
default:
|
||||
return '38%'
|
||||
}
|
||||
})
|
||||
|
||||
// 金币图标宽度
|
||||
const coinWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '1em'
|
||||
case '2':
|
||||
return '0.9em'
|
||||
case '3':
|
||||
return '0.9em'
|
||||
default:
|
||||
return '0.9em'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
color: #fff;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.showText {
|
||||
@ -386,66 +287,6 @@ const clickReward = (item) => {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.reward-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 15vw;
|
||||
right: 4vw;
|
||||
height: 13.5vw;
|
||||
}
|
||||
|
||||
[dir='rtl'] .reward-wrapper {
|
||||
left: 4vw;
|
||||
right: 15vw;
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes scroll-left {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scroll-right {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
[dir='ltr'] .scroll-content {
|
||||
margin-left: 4vw;
|
||||
}
|
||||
|
||||
[dir='rtl'] .scroll-content {
|
||||
margin-left: auto;
|
||||
margin-right: 4vw;
|
||||
}
|
||||
|
||||
[dir='ltr'] .scroll-wrapper {
|
||||
animation: scroll-left 8s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
[dir='rtl'] .scroll-wrapper {
|
||||
animation: scroll-right 8s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
|
||||
@ -170,7 +170,7 @@
|
||||
<!-- 任务模块 -->
|
||||
<Task v-show="TaskShow" :activity="lotteryRewards" />
|
||||
<!-- 抽奖排名模块 -->
|
||||
<Ranking v-show="lotteryRankingShow" TagType="Ranking" />
|
||||
<Ranking v-show="lotteryRankingShow" rankingType="lottery" />
|
||||
<!-- 抽奖奖励模块 -->
|
||||
<RankingReward v-show="lotteryRewardShow" />
|
||||
</div>
|
||||
@ -218,7 +218,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 充值排名模块 -->
|
||||
<Ranking v-show="rechargeRankingShow" TagType="recharge" />
|
||||
<Ranking v-show="rechargeRankingShow" rankingType="recharge" />
|
||||
<!-- 充值奖励模块 -->
|
||||
<RechargeReward v-show="rechargeRewardShow" />
|
||||
</div>
|
||||
@ -232,7 +232,7 @@
|
||||
v-show="RankingShow"
|
||||
style="position: fixed; bottom: 0; z-index: 2"
|
||||
:imgUrl="imageUrl('myRankingBg')"
|
||||
:contentStyle="`padding: 2vw 8vw 0`"
|
||||
:contentStyle="`padding: 0 5vw`"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
@ -248,27 +248,41 @@
|
||||
"
|
||||
>
|
||||
<!-- 排名 -->
|
||||
<div style="color: #ffe601; font-weight: 700">
|
||||
{{ myRanking?.rank || 999 }}
|
||||
</div>
|
||||
<itemCenter
|
||||
style="width: 10vw"
|
||||
:imgUrl="imageUrl('rankingNumBg')"
|
||||
:contentStyle="``"
|
||||
@click="viewUserInfo(listItem.userId)"
|
||||
>
|
||||
<div style="color: #ffe601; font-weight: 700">{{ myRanking?.rank || 999 }}</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 头像 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="myRanking?.userAvatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 4em;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
<itemCenter
|
||||
style="width: 20vw; z-index: 1"
|
||||
:imgUrl="imageUrl('userFrame')"
|
||||
:contentStyle="`top:2vw`"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="myRanking?.userAvatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
width: 13vw;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 名称 -->
|
||||
<!-- 名称、id -->
|
||||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||||
<!-- 名称 -->
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
@ -281,6 +295,12 @@
|
||||
>
|
||||
{{ myRanking?.userName }}
|
||||
</div>
|
||||
|
||||
<!-- ID -->
|
||||
<div style="color: #fff; font-weight: 590" class="Textlittle">
|
||||
{{ $t('user_id_prefix') }}
|
||||
{{ myRanking?.specialAccount || myRanking?.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -294,7 +314,24 @@
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div style="color: #fff; font-weight: 700">${{ myRanking?.amount || 0 }}</div>
|
||||
<div
|
||||
v-if="GamePlayShow && lotteryRankingShow"
|
||||
style="display: flex; justify-content: center; align-items: center"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
|
||||
/>
|
||||
<div style="color: #ffe601; font-weight: 700" class="Textlittle">
|
||||
{{ myRanking?.amount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="RechargeShow && rechargeRankingShow" style="color: #fff; font-weight: 700">
|
||||
${{ myRanking?.amount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
@ -526,6 +563,7 @@ import {
|
||||
apiGetUserFragmentBackpack, // 获取用户碎片背包
|
||||
} from '@/api/couple.js'
|
||||
import {
|
||||
ranklist, //获取排行榜
|
||||
withdrawableAmount, //获取可提现金额
|
||||
} from '@/api/lottery'
|
||||
|
||||
@ -553,6 +591,7 @@ const {
|
||||
taskList, // 任务列表
|
||||
|
||||
// 抽奖排名模块
|
||||
lotteryPageNo, // 抽奖排名页码
|
||||
lotteryRanking, // 抽奖排名
|
||||
addLotteryRanking, // 补充的抽奖排名
|
||||
myLotteryRanking, // 我的抽奖排名
|
||||
@ -561,6 +600,7 @@ const {
|
||||
rankingRewards, // 排名奖池
|
||||
|
||||
// 充值排名模块
|
||||
rechargePageNo, // 充值排名页码
|
||||
rechargeRanking, // 充值排名
|
||||
addRechargeRanking, // 补充的充值排名
|
||||
myRechargeRanking, // 我的充值排名
|
||||
@ -617,6 +657,7 @@ const RankingShow = computed(() => {
|
||||
)
|
||||
})
|
||||
|
||||
// 我的排名
|
||||
const myRanking = computed(() => {
|
||||
if (RankingShow.value) {
|
||||
if (GamePlayShow.value) {
|
||||
@ -853,6 +894,55 @@ const clearPayee = () => {
|
||||
clearSelectedPayee()
|
||||
}
|
||||
|
||||
//获取排行榜
|
||||
const getRanking = async (rankingType = 'lottery') => {
|
||||
let data = {
|
||||
activityId: rankingType == 'lottery' ? '2005571533988298753' : '2005571533988298753',
|
||||
pageNo: rankingType == 'lottery' ? lotteryPageNo.value : rechargePageNo.value,
|
||||
pageSize: 20,
|
||||
}
|
||||
const resRanking = await ranklist(data)
|
||||
if (resRanking.status && resRanking.body) {
|
||||
if (rankingType == 'lottery') {
|
||||
myLotteryRanking.value = resRanking.body?.currentUser // 我的抽奖排名
|
||||
} else if (rankingType == 'recharge') {
|
||||
myRechargeRanking.value = resRanking.body?.currentUser // 我的充值排名
|
||||
}
|
||||
|
||||
if (resRanking.body.topList.length > 0) {
|
||||
if (resRanking.body.topList.length == 20) {
|
||||
if (rankingType == 'lottery') {
|
||||
addLotteryRanking.value = []
|
||||
lotteryRanking.value.push(...resRanking.body?.topList)
|
||||
lotteryPageNo.value++
|
||||
} else if (rankingType == 'recharge') {
|
||||
addRechargeRanking.value = []
|
||||
rechargeRanking.value.push(...resRanking.body?.topList)
|
||||
rechargePageNo.value++
|
||||
}
|
||||
} else {
|
||||
if (rankingType == 'lottery') {
|
||||
addLotteryRanking.value = resRanking.body?.topList
|
||||
} else if (rankingType == 'recharge') {
|
||||
addRechargeRanking.value = resRanking.body?.topList
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (rankingType == 'lottery') {
|
||||
myLotteryRanking.value = {}
|
||||
lotteryRanking.value = []
|
||||
addLotteryRanking.value = []
|
||||
lotteryPageNo.value = 1
|
||||
} else if (rankingType == 'recharge') {
|
||||
myRechargeRanking.value = {}
|
||||
rechargeRanking.value = []
|
||||
addRechargeRanking.value = []
|
||||
rechargePageNo.value = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 页面初始化数据
|
||||
const initData = async () => {
|
||||
await Promise.all([
|
||||
@ -861,6 +951,9 @@ const initData = async () => {
|
||||
getUserInfo(), //获取用户信息
|
||||
getDrawableAmount(), //获取可提现金额
|
||||
initializePayee(), //获取收款人信息
|
||||
|
||||
getRanking('lottery'), // 获取抽奖排行榜
|
||||
getRanking('recharge'), // 获取充值排行榜
|
||||
])
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user