3807 lines
125 KiB
Vue
3807 lines
125 KiB
Vue
<!-- src/views/Activities/Game/index.vue -->
|
||
<template>
|
||
<div class="fullPage">
|
||
<!-- 预加载状态 -->
|
||
<div v-if="isLoading" class="loading-container">
|
||
<LoadingSpinner />
|
||
<p>{{ $t('loading') }}...</p>
|
||
</div>
|
||
|
||
<!-- 主要内容 -->
|
||
<div v-if="!isLoading" class="bg" style="">
|
||
<!-- 页面背景 -->
|
||
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg1'), imageUrl('bg2')]" />
|
||
<!-- 重复的背景图层 -->
|
||
<div class="background-overlay" :style="{ '--bg2-url': toCssBackgroundImage(imageUrl('bg3')) }"></div>
|
||
|
||
<!-- 排行榜规则按钮 -->
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('historyBt')"
|
||
alt=""
|
||
style="width: 8vw; position: absolute; z-index: 2; top: 16vw; right: 7vw"
|
||
@click="openPopup('rankingHelp')"
|
||
/>
|
||
|
||
<!-- 页面内容 -->
|
||
<div
|
||
style="
|
||
position: relative;
|
||
z-index: 2;
|
||
margin-top: 145vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<!-- 倒计时 -->
|
||
<itemCenter
|
||
style="width: 87%; min-height: 16.76vw"
|
||
:imgUrl="imageUrl('timeBg')"
|
||
:contentStyle="`direction:ltr;`"
|
||
>
|
||
<div style="width: 44%; padding: 0 22.5vw 0 5vw; display: flex; justify-content: center">
|
||
<div class="timeText" style="padding-bottom: 2vw">{{ Days }}</div>
|
||
</div>
|
||
<div
|
||
style="
|
||
padding-top: 2vw;
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
"
|
||
>
|
||
<div style="width: 30%; display: flex; justify-content: center">
|
||
<div class="timeText" style="">{{ Hours }}</div>
|
||
</div>
|
||
<div style="width: 30%; display: flex; justify-content: center">
|
||
<div class="timeText" style="">{{ Minutes }}</div>
|
||
</div>
|
||
<div style="width: 30%; display: flex; justify-content: center">
|
||
<div class="timeText" style="">{{ Second }}</div>
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- 切换按钮 -->
|
||
<div
|
||
style="min-height: 14.58vw; display: flex; justify-content: space-around; margin-top: 2vw"
|
||
>
|
||
<!-- 排行榜按钮 -->
|
||
<div
|
||
style="width: 30%; position: relative; display: flex; flex-direction: column-reverse"
|
||
@click="handleBt('ranking')"
|
||
>
|
||
<img
|
||
v-show="!rankShow"
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('rankBt'))"
|
||
alt=""
|
||
style="display: block; width: 100%"
|
||
/>
|
||
<img
|
||
v-show="rankShow"
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('rankBtActive'))"
|
||
alt=""
|
||
style="display: block; width: 100%"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 充值榜按钮 -->
|
||
<div
|
||
style="width: 30%; position: relative; display: flex; flex-direction: column-reverse"
|
||
@click="handleBt('recharge')"
|
||
>
|
||
<img
|
||
v-show="!rechargeShow"
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('rechargeBt'))"
|
||
alt=""
|
||
style="display: block; width: 100%"
|
||
/>
|
||
<img
|
||
v-show="rechargeShow"
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('rechargeBtActive'))"
|
||
alt=""
|
||
style="display: block; width: 100%"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 抽奖按钮 -->
|
||
<div
|
||
style="width: 30%; position: relative; display: flex; flex-direction: column-reverse"
|
||
@click="handleBt('lottery')"
|
||
>
|
||
<img
|
||
v-show="!lotteryShow"
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('lotteryBt'))"
|
||
alt=""
|
||
style="display: block; width: 100%"
|
||
/>
|
||
<img
|
||
v-show="lotteryShow"
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('lotteryBtActive'))"
|
||
alt=""
|
||
style="display: block; width: 100%"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 展示内容 -->
|
||
<div style="width: 100%">
|
||
<!-- 排行榜模块 -->
|
||
<div v-show="rankShow" style="padding-top: 4vw">
|
||
<!-- 模块按钮 -->
|
||
<div
|
||
style="
|
||
width: 100vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
gap: 10vw;
|
||
"
|
||
>
|
||
<!-- 排行榜模块按钮 -->
|
||
<div style="width: 30vw; min-width: 0" @click="changeModule('ranking')">
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('rankingBt'))"
|
||
alt=""
|
||
:class="{
|
||
'grayscale-container': !rankingShow,
|
||
}"
|
||
style="width: 100%; display: block; object-fit: cover"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 奖励模块按钮 -->
|
||
<div style="width: 30vw; min-width: 0" @click="changeModule('rewards')">
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('rewardsBt'))"
|
||
alt=""
|
||
:class="{
|
||
'grayscale-container': !rewardsShow,
|
||
}"
|
||
style="width: 100%; display: block; object-fit: cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 每周礼物 -->
|
||
<itemCenter
|
||
v-show="rankingShow"
|
||
style="min-height: 73.86vw"
|
||
:imgUrl="imageUrl('eventGiftsBg')"
|
||
>
|
||
<div
|
||
style="width: 90%; display: flex; justify-content: space-around; margin-top: 10%"
|
||
>
|
||
<div
|
||
v-for="(gift, index) in giftsList"
|
||
:key="index"
|
||
style="width: 30%; display: flex; flex-direction: column"
|
||
>
|
||
<itemCenter style="min-height: 27vw" :imgUrl="imageUrl('giftBg')">
|
||
<img
|
||
:src="gift.giftPhoto"
|
||
alt=""
|
||
width="60%"
|
||
style="display: block; object-fit: cover"
|
||
/>
|
||
</itemCenter>
|
||
<div
|
||
style="display: flex; justify-content: center; align-items: center; gap: 2px"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
src="/src/assets/icon/Azizi/coin.png"
|
||
alt=""
|
||
style="display: block; width: 1.3em; aspect-ratio: 1/1"
|
||
/>
|
||
<div style="color: rgba(255, 255, 255, 1); font-weight: 590">
|
||
{{ gift.giftCandy }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- 排行榜模块 -->
|
||
<div v-show="rankingShow" style="padding-top: 4vw">
|
||
<!-- 排行榜 -->
|
||
<div
|
||
style="
|
||
padding: 30vw 5vw 10vw;
|
||
position: relative;
|
||
z-index: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2vw;
|
||
"
|
||
>
|
||
<!-- 页面背景 -->
|
||
<div style="position: absolute; inset: 15vw 3vw 3vw; overflow: hidden">
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('rankingImgBg')"
|
||
alt=""
|
||
style="
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
|
||
width: 94vw;
|
||
"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 背景图 -->
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
z-index: 0;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
"
|
||
>
|
||
<!-- 边框头部 -->
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('RankingTopBorder')"
|
||
alt=""
|
||
style="display: block; width: 100%; min-width: 0"
|
||
/>
|
||
<!-- 边框中部占位 -->
|
||
<div style="flex: 1; min-width: 0"></div>
|
||
<!-- 边框尾部 -->
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('RankingBottomBorder')"
|
||
alt=""
|
||
style="display: block; width: 100%; min-width: 0"
|
||
/>
|
||
|
||
<!-- 边框中部 -->
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 11vw 0 2vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('RankingBorder')"
|
||
alt=""
|
||
style="display: block; width: 100%; height: 100%; min-width: 0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 前三 -->
|
||
<div>
|
||
<!-- 第一 -->
|
||
<div style="display: flex; justify-content: center">
|
||
<TopUser
|
||
rankingType="activity"
|
||
ranking="1"
|
||
:BorderImgUrl="imageUrl('top1')"
|
||
:avatarUrl="RankingHasTop3[0].avatar"
|
||
:name="RankingHasTop3[0].nickname"
|
||
:distributionValue="RankingHasTop3[0].quantity"
|
||
style="width: 45%"
|
||
@click="viewUserInfo(RankingHasTop3[0].userId)"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 第二三 -->
|
||
<div
|
||
style="
|
||
position: relative;
|
||
z-index: 3;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: -40vw;
|
||
pointer-events: none;
|
||
"
|
||
>
|
||
<div
|
||
style="pointer-events: auto; width: 30%"
|
||
@click.stop="viewUserInfo(RankingHasTop3[1].userId)"
|
||
>
|
||
<TopUser
|
||
rankingType="activity"
|
||
ranking="2"
|
||
:BorderImgUrl="imageUrl('top2')"
|
||
:avatarUrl="RankingHasTop3[1].avatar"
|
||
:name="RankingHasTop3[1].nickname"
|
||
:distributionValue="RankingHasTop3[1].quantity"
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
|
||
<div
|
||
style="pointer-events: auto; width: 30%"
|
||
@click.stop="viewUserInfo(RankingHasTop3[2].userId)"
|
||
>
|
||
<TopUser
|
||
rankingType="activity"
|
||
ranking="3"
|
||
:BorderImgUrl="imageUrl('top3')"
|
||
:avatarUrl="RankingHasTop3[2].avatar"
|
||
:name="RankingHasTop3[2].nickname"
|
||
:distributionValue="RankingHasTop3[2].quantity"
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 排行榜 -->
|
||
<div
|
||
v-for="(listItem, index) in showRanking"
|
||
:key="listItem.userId"
|
||
style="display: flex; flex-direction: column; gap: 1vw"
|
||
>
|
||
<!-- 基本信息 -->
|
||
<itemCenter
|
||
style="min-height: 20.43vw"
|
||
:imgUrl="imageUrl('itemFrom4Bg')"
|
||
:contentStyle="`padding: 0 2vw`"
|
||
:lazy="true"
|
||
@click="viewUserInfo(listItem.userId)"
|
||
>
|
||
<!-- 基本信息 -->
|
||
<div
|
||
style="
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
gap: 4px;
|
||
"
|
||
>
|
||
<!-- 排名 -->
|
||
<div style="width: 9vw; display: flex; justify-content: center">
|
||
<div style="color: #ffe601; font-weight: 700">
|
||
{{ listItem?.rank }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 头像 -->
|
||
<div style="width: 3.5em; margin: 0 1vw; position: relative; z-index: 0">
|
||
<img
|
||
:src="listItem?.avatar || ''"
|
||
alt=""
|
||
style="
|
||
display: block;
|
||
width: 100%;
|
||
|
||
aspect-ratio: 1/1;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
"
|
||
@error="handleAvatarImageError"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 名称、id -->
|
||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||
<!-- 滚动名称 -->
|
||
<itemCenter
|
||
style="width: 30vw; height: 10vw; min-width: 0"
|
||
:imgUrl="imageUrl('userNameBorder')"
|
||
:contentStyle="`padding:0;`"
|
||
:lazy="true"
|
||
>
|
||
<div style="width: 100%; margin-top: 1vw">
|
||
<div
|
||
style="
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
/* justify-content: center; */
|
||
overflow: hidden;
|
||
"
|
||
>
|
||
<!-- 滚动容器 -->
|
||
<div
|
||
v-if="isTextOverflow(listItem?.nickname || '')"
|
||
class="scroll-wrapper"
|
||
>
|
||
<!-- 2套内容 -->
|
||
<div class="scroll-content" v-for="value in 2">
|
||
<div
|
||
style="
|
||
color: #fff;
|
||
font-size: 1em;
|
||
font-weight: 860;
|
||
white-space: nowrap;
|
||
"
|
||
>
|
||
{{ listItem?.nickname }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else style="width: 100%; text-align: center">
|
||
<div
|
||
style="
|
||
color: #fff;
|
||
font-size: 1em;
|
||
font-weight: 860;
|
||
white-space: nowrap;
|
||
"
|
||
>
|
||
{{ listItem?.nickname }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- ID -->
|
||
<div style="color: #fff; font-weight: 590" class="Textlittle">
|
||
{{ $t('user_id_prefix') }}
|
||
{{ listItem?.specialAccount || listItem?.account }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 贡献值 -->
|
||
<div
|
||
style="
|
||
width: auto;
|
||
min-width: 0;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
src="/src/assets/icon/Azizi/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?.quantity || 0 }}
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 触发加载功能 -->
|
||
<!-- <div ref="RankingLoadmore"></div> -->
|
||
</div>
|
||
|
||
<!-- 奖励模块 -->
|
||
<div
|
||
v-show="rewardsShow"
|
||
style="display: flex; flex-direction: column; gap: 4vw; padding: 4vw 0 10vw"
|
||
>
|
||
<itemCenter
|
||
v-for="(rewardsTop, index) in showRewardsTop3"
|
||
style="min-height: 112.26vw"
|
||
:imgUrl="imageUrl(`rewardTop${index + 1}`)"
|
||
:contentStyle="`
|
||
inset: 31vw 7vw 21vw;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(2, 1fr);
|
||
gap:6vw 4vw;
|
||
`"
|
||
>
|
||
<div
|
||
v-for="(reward, index) in rewardsTop.rewards"
|
||
style="
|
||
height: 100%;
|
||
align-self: stretch;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<!-- 奖品图 -->
|
||
<div
|
||
style="
|
||
width: 80%;
|
||
height: 75%;
|
||
padding: 6vw 0 2vw;
|
||
min-width: 0;
|
||
aspect-ratio: 1/1;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<!-- 奖励图片 -->
|
||
<img
|
||
:src="reward.cover || ''"
|
||
alt=""
|
||
style="
|
||
display: block;
|
||
min-width: 0;
|
||
width: 80%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
"
|
||
@error="(e) => handleRewardImageError(e, reward.type)"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 数值 -->
|
||
<div
|
||
style="
|
||
width: 80%;
|
||
height: 5.5vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<div style="min-width: 0; font-size: 1em; font-weight: 590; color: #fff">
|
||
{{ formatRewardDisplay(reward.type, reward) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 充值排行模块 -->
|
||
<div v-show="rechargeShow" style="padding-top: 4vw">
|
||
<!-- 模块按钮 -->
|
||
<div
|
||
style="
|
||
width: 100vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
gap: 10vw;
|
||
"
|
||
>
|
||
<!-- 充值排行榜模块按钮 -->
|
||
<div style="width: 30vw; min-width: 0" @click="changeModule('rechargeRank')">
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('rechargeRankBt'))"
|
||
alt=""
|
||
:class="{
|
||
'grayscale-container': !rechargeRankShow,
|
||
}"
|
||
style="width: 100%; display: block; object-fit: cover"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 奖励模块按钮 -->
|
||
<div style="width: 30vw; min-width: 0" @click="changeModule('rechargeRewards')">
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('rewardsBt'))"
|
||
alt=""
|
||
:class="{
|
||
'grayscale-container': !rechargeRewardsShow,
|
||
}"
|
||
style="width: 100%; display: block; object-fit: cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 排行榜模块 -->
|
||
<div v-show="rechargeRankShow" style="padding-top: 4vw">
|
||
<!-- 排行榜 -->
|
||
<div
|
||
style="
|
||
padding: 30vw 5vw 10vw;
|
||
position: relative;
|
||
z-index: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2vw;
|
||
"
|
||
>
|
||
<!-- 页面背景 -->
|
||
<div style="position: absolute; inset: 15vw 3vw 3vw; overflow: hidden">
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('rankingImgBg')"
|
||
alt=""
|
||
style="
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
|
||
width: 94vw;
|
||
"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 背景图 -->
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
z-index: 0;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
"
|
||
>
|
||
<!-- 边框头部 -->
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('RankingTopBorder')"
|
||
alt=""
|
||
style="display: block; width: 100%; min-width: 0"
|
||
/>
|
||
<!-- 边框中部占位 -->
|
||
<div style="flex: 1; min-width: 0"></div>
|
||
<!-- 边框尾部 -->
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('RankingBottomBorder')"
|
||
alt=""
|
||
style="display: block; width: 100%; min-width: 0"
|
||
/>
|
||
|
||
<!-- 边框中部 -->
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 11vw 0 2vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('RankingBorder')"
|
||
alt=""
|
||
style="display: block; width: 100%; height: 100%; min-width: 0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 前三 -->
|
||
<div>
|
||
<!-- 第一 -->
|
||
<div style="display: flex; justify-content: center">
|
||
<TopUser
|
||
rankingType="recharge"
|
||
ranking="1"
|
||
:BorderImgUrl="imageUrl('top1')"
|
||
:avatarUrl="rechargeRankingHasTop3[0].userAvatar"
|
||
:name="rechargeRankingHasTop3[0].userName"
|
||
distributionValue=""
|
||
style="width: 45%"
|
||
@click="viewUserInfo(rechargeRankingHasTop3[0].userId)"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 第二三 -->
|
||
<div
|
||
style="
|
||
position: relative;
|
||
z-index: 3;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: -40vw;
|
||
pointer-events: none;
|
||
"
|
||
>
|
||
<div
|
||
style="pointer-events: auto; width: 30%"
|
||
@click.stop="viewUserInfo(rechargeRankingHasTop3[1].userId)"
|
||
>
|
||
<TopUser
|
||
rankingType="recharge"
|
||
ranking="2"
|
||
:BorderImgUrl="imageUrl('top2')"
|
||
:avatarUrl="rechargeRankingHasTop3[1].userAvatar"
|
||
:name="rechargeRankingHasTop3[1].userName"
|
||
distributionValue=""
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
|
||
<div
|
||
style="pointer-events: auto; width: 30%"
|
||
@click.stop="viewUserInfo(rechargeRankingHasTop3[2].userId)"
|
||
>
|
||
<TopUser
|
||
rankingType="recharge"
|
||
ranking="3"
|
||
:BorderImgUrl="imageUrl('top3')"
|
||
:avatarUrl="rechargeRankingHasTop3[2].userAvatar"
|
||
:name="rechargeRankingHasTop3[2].userName"
|
||
distributionValue=""
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 排行榜 -->
|
||
<div
|
||
v-for="(listItem, index) in showRechargeRanking"
|
||
:key="listItem.userId"
|
||
style="display: flex; flex-direction: column; gap: 1vw"
|
||
>
|
||
<!-- 基本信息 -->
|
||
<itemCenter
|
||
style="min-height: 20.43vw"
|
||
:imgUrl="imageUrl('itemFrom4Bg')"
|
||
:contentStyle="`padding: 0 2vw`"
|
||
:lazy="true"
|
||
@click="viewUserInfo(listItem.userId)"
|
||
>
|
||
<!-- 基本信息 -->
|
||
<div
|
||
style="
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
gap: 4px;
|
||
"
|
||
>
|
||
<!-- 排名 -->
|
||
<div style="width: 9vw; display: flex; justify-content: center">
|
||
<div style="color: #ffe601; font-weight: 700">
|
||
{{ listItem?.rank }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 头像 -->
|
||
<div style="width: 3.5em; margin: 0 1vw; position: relative; z-index: 0">
|
||
<img
|
||
:src="listItem?.userAvatar || ''"
|
||
alt=""
|
||
style="
|
||
display: block;
|
||
width: 100%;
|
||
|
||
aspect-ratio: 1/1;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
"
|
||
@error="handleAvatarImageError"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 名称、id -->
|
||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||
<!-- 滚动名称 -->
|
||
<itemCenter
|
||
style="width: 30vw; height: 10vw; min-width: 0"
|
||
:imgUrl="imageUrl('userNameBorder')"
|
||
:contentStyle="`padding:0;`"
|
||
:lazy="true"
|
||
>
|
||
<div style="width: 100%; margin-top: 1vw">
|
||
<div
|
||
style="
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
/* justify-content: center; */
|
||
overflow: hidden;
|
||
"
|
||
>
|
||
<!-- 滚动容器 -->
|
||
<div
|
||
v-if="isTextOverflow(listItem?.userName || '')"
|
||
class="scroll-wrapper"
|
||
>
|
||
<!-- 2套内容 -->
|
||
<div class="scroll-content" v-for="value in 2">
|
||
<div
|
||
style="
|
||
color: #fff;
|
||
font-size: 1em;
|
||
font-weight: 860;
|
||
white-space: nowrap;
|
||
"
|
||
>
|
||
{{ listItem?.userName }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else style="width: 100%; text-align: center">
|
||
<div
|
||
style="
|
||
color: #fff;
|
||
font-size: 1em;
|
||
font-weight: 860;
|
||
white-space: nowrap;
|
||
"
|
||
>
|
||
{{ listItem?.userName }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- ID -->
|
||
<div style="color: #fff; font-weight: 590" class="Textlittle">
|
||
{{ $t('user_id_prefix') }}
|
||
{{ listItem?.specialAccount || listItem?.account }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 贡献值 -->
|
||
<div
|
||
style="
|
||
width: auto;
|
||
min-width: 0;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<div style="color: #fff; font-weight: 700">${{ listItem?.amount }}</div>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
|
||
<!-- 触发加载功能 -->
|
||
<div ref="RankingLoadmore"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 充值奖励模块 -->
|
||
<div
|
||
v-show="rechargeRewardsShow"
|
||
style="display: flex; flex-direction: column; gap: 2vw; padding: 4vw 0 10vw"
|
||
>
|
||
<!-- 个人充值信息 -->
|
||
<div style="padding: 0 4vw">
|
||
<itemCenter
|
||
style="min-height: 39.05vw; z-index: 0"
|
||
:imgUrl="imageUrl('earningInfoBg')"
|
||
:flip="true"
|
||
:contentStyle="`inset:7vw 10vw 9vw 9vw;justify-content: space-between;gap: 10vw;`"
|
||
>
|
||
<!-- 头像 -->
|
||
<img
|
||
:src="myRechargeRecode?.userAvatar || ''"
|
||
alt=""
|
||
style="
|
||
position: relative;
|
||
z-index: -1;
|
||
width: 23vw;
|
||
min-width: 0;
|
||
|
||
border-radius: 50%;
|
||
aspect-ratio: 1/1;
|
||
object-fit: cover;
|
||
"
|
||
@error="handleAvatarImageError"
|
||
/>
|
||
|
||
<!-- 基本信息 -->
|
||
<div
|
||
style="
|
||
position: relative;
|
||
flex: 1;
|
||
min-width: 0;
|
||
height: 80%;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 1vw;
|
||
"
|
||
>
|
||
<!-- 充值帮助按钮 -->
|
||
<img
|
||
v-smart-img
|
||
src="/src/assets/icon/Azizi/helpWhite.png"
|
||
alt=""
|
||
class="ruleBt"
|
||
@click="openPopup('rechargeRankingHelp')"
|
||
/>
|
||
|
||
<!-- 名称 -->
|
||
<div
|
||
style="
|
||
max-width: 70%;
|
||
min-width: 0;
|
||
font-weight: 500;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
"
|
||
>
|
||
{{ myRechargeRecode?.userName || '' }}
|
||
</div>
|
||
|
||
<!-- 账号 -->
|
||
<div>{{ $t('user_id_prefix') }} {{ myRechargeRecode?.account }}</div>
|
||
|
||
<!-- 总充值 -->
|
||
<div
|
||
style="
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
"
|
||
>
|
||
<div>
|
||
{{ t('Accumulated recharge') }}:${{
|
||
formatRechargeAmount(myRechargeRecode?.totalAmount)
|
||
}}
|
||
</div>
|
||
|
||
<img
|
||
v-show="rechargehidden"
|
||
v-smart-img
|
||
:src="imageUrl('rechargeNumHidden')"
|
||
alt=""
|
||
style="width: 5vw; display: block; object-fit: cover"
|
||
@click="rechargehidden = !rechargehidden"
|
||
/>
|
||
<img
|
||
v-show="!rechargehidden"
|
||
v-smart-img
|
||
:src="imageUrl('rechargeNumShow')"
|
||
alt=""
|
||
style="width: 5vw; display: block; object-fit: cover"
|
||
@click="rechargehidden = !rechargehidden"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
|
||
<!-- 充值奖励 -->
|
||
<itemCenter
|
||
:style="{ minHeight: index <= 2 ? '112.26vw' : '142.39vw' }"
|
||
v-for="(rewardsTop, index) in RechargeRewards"
|
||
style=""
|
||
:imgUrl="topImg[index]"
|
||
:contentStyle="rewardContentLayer(index)"
|
||
>
|
||
<!-- 奖励列表 -->
|
||
<div
|
||
v-for="(reward, rewardIndex) in rewardsTop.rewardProps"
|
||
:key="rewardIndex"
|
||
style="
|
||
width: 100%;
|
||
align-self: stretch;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<!-- 奖品图 -->
|
||
<div
|
||
style="
|
||
width: 80%;
|
||
height: 75%;
|
||
padding: 6vw 0 2vw;
|
||
min-width: 0;
|
||
aspect-ratio: 1/1;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<!-- 奖励图片 -->
|
||
<img
|
||
:src="reward.cover || ''"
|
||
alt=""
|
||
style="
|
||
display: block;
|
||
min-width: 0;
|
||
width: 80%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
"
|
||
@error="(e) => handleRewardImageError(e, reward.type)"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 数值 -->
|
||
<div
|
||
style="
|
||
width: 80%;
|
||
height: 5.5vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<div style="min-width: 0; font-size: 1em; font-weight: 590; color: #fff">
|
||
{{ formatRewardDisplay(reward.type, reward) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 领取按钮 -->
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
bottom: 7vw;
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
v-if="rewardsTop.claimStatus == -1"
|
||
class="grayscale-container"
|
||
:src="imageUrl(getImgName('receiveBt'))"
|
||
alt=""
|
||
style="width: 40vw; display: block; object-fit: cover"
|
||
/>
|
||
<img
|
||
v-smart-img
|
||
v-if="rewardsTop.claimStatus == 0"
|
||
:src="imageUrl(getImgName('receiveBt'))"
|
||
alt=""
|
||
style="width: 40vw; display: block; object-fit: cover"
|
||
@click="receiveReward(rewardsTop)"
|
||
/>
|
||
<img
|
||
v-smart-img
|
||
v-if="rewardsTop.claimStatus == 1"
|
||
:src="imageUrl(getImgName('receivedBt'))"
|
||
alt=""
|
||
style="width: 40vw; display: block; object-fit: cover"
|
||
/>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 抽奖模块 -->
|
||
<div v-show="lotteryShow" style="padding: 4vw 0 10vw">
|
||
<!-- 模块按钮 -->
|
||
<div
|
||
style="
|
||
width: 100vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
gap: 10vw;
|
||
"
|
||
>
|
||
<!-- 抽奖&任务模块按钮 -->
|
||
<div style="width: 30vw; min-width: 0" @click="changeModule('task')">
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('taskBt'))"
|
||
alt=""
|
||
:class="{
|
||
'grayscale-container': !taskShow,
|
||
}"
|
||
style="width: 100%; display: block; object-fit: cover"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 提现模块按钮 -->
|
||
<div style="width: 30vw; min-width: 0" @click="changeModule('withdraw')">
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl(getImgName('redeemBt'))"
|
||
alt=""
|
||
:class="{
|
||
'grayscale-container': !withdrawShow,
|
||
}"
|
||
style="width: 100%; display: block; object-fit: cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 抽奖模块 -->
|
||
<div
|
||
v-show="taskShow"
|
||
style="
|
||
width: 100vw;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3vw;
|
||
"
|
||
>
|
||
<!-- 中奖历史按钮 -->
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('resultBt')"
|
||
alt=""
|
||
style="width: 6vw; position: absolute; z-index: 2; top: 19.5vw; right: 1vw"
|
||
@click="openPopup('history')"
|
||
/>
|
||
|
||
<!-- 奖池 -->
|
||
<itemCenter
|
||
style="min-height: 99.73vw; margin-top: 6vw"
|
||
:imgUrl="imageUrl('lottery')"
|
||
:contentStyle="`
|
||
inset:9vw 10.5vw 9vw 10vw;
|
||
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(3, 1fr);
|
||
gap: 2vw 2.5vw;
|
||
|
||
direction: ltr;`"
|
||
>
|
||
<!-- 抽奖转盘 -->
|
||
<div
|
||
v-for="(prize, index) in activity.prizeList"
|
||
style="
|
||
align-self: stretch;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
position: relative;
|
||
padding: 0;
|
||
"
|
||
:style="[getGridPosition(index)]"
|
||
>
|
||
<!-- 奖品图 -->
|
||
<div
|
||
style="
|
||
width: 70%;
|
||
flex: 1;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
padding-top: 20%;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<img
|
||
:src="prize.prizeImage || ''"
|
||
:alt="prize.prizeName || ''"
|
||
style="width: 70%; display: block; object-fit: cover"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 奖励详情 -->
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
height: 25%;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<div
|
||
style="
|
||
font-size: 0.9em;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
text-shadow: 0 1px 0 #339370;
|
||
white-space: nowrap;
|
||
"
|
||
>
|
||
{{ prize.prizeName }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 转到的奖品项 -->
|
||
<img
|
||
v-smart-img
|
||
v-show="activeIndex === index"
|
||
:src="imageUrl('prizeActiveFrame')"
|
||
alt=""
|
||
style="
|
||
display: block;
|
||
width: 105%;
|
||
|
||
position: absolute;
|
||
inset: 50% 0 0 50%;
|
||
transform: translate(-50%, -50%);
|
||
"
|
||
/>
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- 我的抽奖券数量 -->
|
||
<div style="display: flex; justify-content: center">
|
||
<div style="font-size: 1.3em; font-weight: 600">
|
||
{{ $t('remaining_lottery_tickets') }}: {{ rollTimes }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 抽奖按钮 -->
|
||
<div style="display: flex; justify-content: center; gap: 4vw" class="drawBts">
|
||
<!-- 单抽 -->
|
||
<itemCenter
|
||
style="min-height: 20.11vw; width: 45vw"
|
||
:imgUrl="imageUrl('draw1BtBg')"
|
||
:contentStyle="``"
|
||
@click="sweepstakes(1)"
|
||
>
|
||
<div style="color: #fff; font-size: 2em; font-weight: 600">
|
||
{{ $t('single_spin') }}
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- 10连抽 -->
|
||
<itemCenter
|
||
style="min-height: 20.11vw; width: 45vw"
|
||
:imgUrl="imageUrl('draw10BtBg')"
|
||
:contentStyle="``"
|
||
@click="sweepstakes(10)"
|
||
>
|
||
<div style="color: #fff; font-size: 2em; font-weight: 600">
|
||
{{ $t('ten_spin') }}
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
|
||
<!-- 任务列表 -->
|
||
<div
|
||
style="
|
||
position: relative;
|
||
z-index: 2;
|
||
margin: 0 4vw;
|
||
border-radius: 12px;
|
||
background:
|
||
linear-gradient(
|
||
99deg,
|
||
rgba(211, 212, 213, 0.15) 12.86%,
|
||
rgba(139, 145, 147, 0.15) 15.34%,
|
||
rgba(87, 95, 99, 0.15) 17.82%,
|
||
rgba(55, 65, 69, 0.15) 18.64%,
|
||
rgba(43, 54, 58, 0.15) 19.47%,
|
||
rgba(52, 62, 66, 0.15) 22.77%,
|
||
rgba(77, 85, 89, 0.15) 26.9%,
|
||
rgba(117, 123, 126, 0.15) 32.68%,
|
||
rgba(173, 176, 177, 0.15) 38.46%,
|
||
rgba(205, 205, 206, 0.15) 41.76%,
|
||
rgba(198, 199, 200, 0.15) 43.41%,
|
||
rgba(180, 182, 184, 0.15) 45.06%,
|
||
rgba(151, 156, 158, 0.15) 46.71%,
|
||
rgba(111, 118, 122, 0.15) 49.19%,
|
||
rgba(72, 83, 87, 0.15) 50.84%,
|
||
rgba(76, 86, 90, 0.15) 52.49%,
|
||
rgba(89, 98, 102, 0.15) 54.97%,
|
||
rgba(112, 117, 120, 0.15) 57.45%,
|
||
rgba(143, 144, 146, 0.15) 59.1%,
|
||
rgba(152, 152, 154, 0.15) 59.92%,
|
||
rgba(165, 165, 166, 0.15) 63.23%,
|
||
rgba(199, 199, 200, 0.15) 70.66%,
|
||
rgba(255, 255, 255, 0.15) 78.91%,
|
||
rgba(209, 209, 210, 0.15) 81.39%,
|
||
rgba(79, 79, 83, 0.15) 87.17%,
|
||
rgba(27, 27, 32, 0.15) 90.47%,
|
||
rgba(49, 49, 54, 0.15) 91.3%,
|
||
rgba(77, 77, 81, 0.15) 92.12%,
|
||
rgba(116, 116, 118, 0.15) 92.95%,
|
||
rgba(165, 165, 167, 0.15) 94.6%,
|
||
rgba(233, 233, 233, 0.15) 95.43%
|
||
),
|
||
linear-gradient(0deg, #1f0f67 0%, #1f0f67 100%), #e8e8e8;
|
||
background-blend-mode: hard-light, normal, normal;
|
||
|
||
padding: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
"
|
||
>
|
||
<div style="font-weight: 590">{{ t('Task for tickets') }}</div>
|
||
<div
|
||
v-for="task in taskList"
|
||
style="
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(64, 64, 64, 0.5);
|
||
background: rgba(240, 240, 240, 0.3);
|
||
box-shadow:
|
||
-42px 103px 31px 0 rgba(145, 145, 145, 0),
|
||
-27px 66px 29px 0 rgba(145, 145, 145, 0.01),
|
||
-15px 37px 24px 0 rgba(145, 145, 145, 0.03),
|
||
-7px 17px 18px 0 rgba(145, 145, 145, 0.04),
|
||
-2px 4px 10px 0 rgba(145, 145, 145, 0.05);
|
||
backdrop-filter: blur(7.5px);
|
||
|
||
display: flex;
|
||
padding: 8px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<!-- 图标 -->
|
||
<div style="width: 20%">
|
||
<img
|
||
v-if="task.taskType == 1"
|
||
v-smart-img
|
||
:src="imageUrl('taskTalk')"
|
||
alt=""
|
||
width="100%"
|
||
style="display: block"
|
||
/>
|
||
<img
|
||
v-if="task.taskType == 2"
|
||
v-smart-img
|
||
:src="imageUrl('taskGift')"
|
||
alt=""
|
||
width="100%"
|
||
style="display: block"
|
||
/>
|
||
<img
|
||
v-if="task.taskType == 4"
|
||
v-smart-img
|
||
:src="imageUrl('taskGame')"
|
||
alt=""
|
||
width="100%"
|
||
style="display: block"
|
||
/>
|
||
<img
|
||
v-if="task.taskType == 5"
|
||
v-smart-img
|
||
:src="imageUrl('taskRecharge')"
|
||
alt=""
|
||
width="100%"
|
||
style="display: block"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 内容 -->
|
||
<div style="width: 60%">
|
||
<!-- 任务进度 -->
|
||
<div style="color: #fff; font-weight: 590; font-size: 0.9em">
|
||
{{ showTarget(task) }}
|
||
</div>
|
||
|
||
<!-- 任务奖励 -->
|
||
<div style="display: flex; align-items: center; gap: 8px">
|
||
<div style="color: #fff; font-weight: 590">{{ t('Rewards:') }}</div>
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('ticket')"
|
||
:alt="t('ticket')"
|
||
width="15%"
|
||
style="display: block"
|
||
/>
|
||
<div style="color: #fff; font-weight: 590">*{{ task.rewardValue }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 按钮 -->
|
||
<div style="width: 20%">
|
||
<!-- 前往任务 -->
|
||
<itemCenter
|
||
v-if="task.taskStatus == 0"
|
||
style="min-height: 7.79vw"
|
||
:imgUrl="imageUrl('taskBtGo')"
|
||
>
|
||
<div style="font-size: 1em; font-weight: 600; white-space: nowrap">
|
||
{{ t('task_go') }}
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- 领取抽奖券 -->
|
||
<itemCenter
|
||
v-else-if="task.taskStatus === 1"
|
||
style="min-height: 7.79vw"
|
||
:imgUrl="imageUrl('taskBtReceive')"
|
||
@click="receiveTaskReward(task.taskCode)"
|
||
>
|
||
<div style="font-size: 1em; font-weight: 600; white-space: nowrap">
|
||
{{ t('task_receive') }}
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- 已完成 -->
|
||
<itemCenter
|
||
v-else
|
||
style="min-height: 7.79vw"
|
||
:imgUrl="imageUrl('taskBtReceived')"
|
||
>
|
||
<div style="font-size: 0.9em; font-weight: 600; white-space: nowrap">
|
||
{{ t('task_received') }}
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收益模块 -->
|
||
<div
|
||
v-show="withdrawShow"
|
||
style="width: 100%; padding: 4vw; display: flex; flex-direction: column; gap: 3vw"
|
||
>
|
||
<!-- 个人信息 -->
|
||
<div
|
||
style="
|
||
border-radius: 12px;
|
||
background:
|
||
linear-gradient(
|
||
99deg,
|
||
rgba(211, 212, 213, 0.15) 12.86%,
|
||
rgba(139, 145, 147, 0.15) 15.34%,
|
||
rgba(87, 95, 99, 0.15) 17.82%,
|
||
rgba(55, 65, 69, 0.15) 18.64%,
|
||
rgba(43, 54, 58, 0.15) 19.47%,
|
||
rgba(52, 62, 66, 0.15) 22.77%,
|
||
rgba(77, 85, 89, 0.15) 26.9%,
|
||
rgba(117, 123, 126, 0.15) 32.68%,
|
||
rgba(173, 176, 177, 0.15) 38.46%,
|
||
rgba(205, 205, 206, 0.15) 41.76%,
|
||
rgba(198, 199, 200, 0.15) 43.41%,
|
||
rgba(180, 182, 184, 0.15) 45.06%,
|
||
rgba(151, 156, 158, 0.15) 46.71%,
|
||
rgba(111, 118, 122, 0.15) 49.19%,
|
||
rgba(72, 83, 87, 0.15) 50.84%,
|
||
rgba(76, 86, 90, 0.15) 52.49%,
|
||
rgba(89, 98, 102, 0.15) 54.97%,
|
||
rgba(112, 117, 120, 0.15) 57.45%,
|
||
rgba(143, 144, 146, 0.15) 59.1%,
|
||
rgba(152, 152, 154, 0.15) 59.92%,
|
||
rgba(165, 165, 166, 0.15) 63.23%,
|
||
rgba(199, 199, 200, 0.15) 70.66%,
|
||
rgba(255, 255, 255, 0.15) 78.91%,
|
||
rgba(209, 209, 210, 0.15) 81.39%,
|
||
rgba(79, 79, 83, 0.15) 87.17%,
|
||
rgba(27, 27, 32, 0.15) 90.47%,
|
||
rgba(49, 49, 54, 0.15) 91.3%,
|
||
rgba(77, 77, 81, 0.15) 92.12%,
|
||
rgba(116, 116, 118, 0.15) 92.95%,
|
||
rgba(165, 165, 167, 0.15) 94.6%,
|
||
rgba(233, 233, 233, 0.15) 95.43%
|
||
),
|
||
linear-gradient(0deg, #1f0f67 0%, #1f0f67 100%), #e8e8e8;
|
||
background-blend-mode: hard-light, normal, normal;
|
||
|
||
padding: 16px 12px;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
position: relative;
|
||
"
|
||
>
|
||
<!-- 头像 -->
|
||
<img
|
||
:src="userInfo.userAvatar || ''"
|
||
alt=""
|
||
style="
|
||
width: 12vw;
|
||
min-width: 0;
|
||
|
||
border-radius: 50%;
|
||
aspect-ratio: 1/1;
|
||
object-fit: cover;
|
||
"
|
||
@error="handleAvatarImageError"
|
||
/>
|
||
|
||
<!-- 基本信息 -->
|
||
<div
|
||
style="
|
||
flex: 1;
|
||
min-width: 0;
|
||
align-self: stretch;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
gap: 4px;
|
||
"
|
||
>
|
||
<!-- 帮助按钮 -->
|
||
<!-- <img
|
||
v-smart-img
|
||
src="/src/assets/icon/Azizi/helpWhite.png"
|
||
alt=""
|
||
class="ruleBt"
|
||
@click="openPopup('withdrawalHelp')"
|
||
/> -->
|
||
<!-- 名称 -->
|
||
<div
|
||
style="
|
||
max-width: 70%;
|
||
min-width: 0;
|
||
font-weight: 500;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
"
|
||
>
|
||
{{ userInfo.userNickname || '' }}
|
||
</div>
|
||
<!-- <div style="display: flex; justify-content: space-between; align-items: center">
|
||
<div style="min-width: 0">
|
||
{{ $t('user_id_prefix') }} {{ userInfo.account || '' }}
|
||
</div>
|
||
<div style="width: auto; font-weight: 600">
|
||
{{ t('current_earnings', { amount: currentAmount.availableAmount }) }}
|
||
</div>
|
||
</div> -->
|
||
<div style="display: flex; align-items: center; gap: 2px">
|
||
<div style="font-weight: 600">{{ t('current_earnings_label') }}</div>
|
||
<img
|
||
v-smart-img
|
||
src="/src/assets/icon/Azizi/dollar.png"
|
||
alt=""
|
||
style="display: block; width: 1.5em; object-fit: cover"
|
||
/>
|
||
<div style="font-size: 1.2em; font-weight: 600">
|
||
{{ currentAmount.availableAmount }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作抽屉 -->
|
||
<div
|
||
style="
|
||
border-radius: 12px;
|
||
background:
|
||
linear-gradient(
|
||
99deg,
|
||
rgba(211, 212, 213, 0.15) 12.86%,
|
||
rgba(139, 145, 147, 0.15) 15.34%,
|
||
rgba(87, 95, 99, 0.15) 17.82%,
|
||
rgba(55, 65, 69, 0.15) 18.64%,
|
||
rgba(43, 54, 58, 0.15) 19.47%,
|
||
rgba(52, 62, 66, 0.15) 22.77%,
|
||
rgba(77, 85, 89, 0.15) 26.9%,
|
||
rgba(117, 123, 126, 0.15) 32.68%,
|
||
rgba(173, 176, 177, 0.15) 38.46%,
|
||
rgba(205, 205, 206, 0.15) 41.76%,
|
||
rgba(198, 199, 200, 0.15) 43.41%,
|
||
rgba(180, 182, 184, 0.15) 45.06%,
|
||
rgba(151, 156, 158, 0.15) 46.71%,
|
||
rgba(111, 118, 122, 0.15) 49.19%,
|
||
rgba(72, 83, 87, 0.15) 50.84%,
|
||
rgba(76, 86, 90, 0.15) 52.49%,
|
||
rgba(89, 98, 102, 0.15) 54.97%,
|
||
rgba(112, 117, 120, 0.15) 57.45%,
|
||
rgba(143, 144, 146, 0.15) 59.1%,
|
||
rgba(152, 152, 154, 0.15) 59.92%,
|
||
rgba(165, 165, 166, 0.15) 63.23%,
|
||
rgba(199, 199, 200, 0.15) 70.66%,
|
||
rgba(255, 255, 255, 0.15) 78.91%,
|
||
rgba(209, 209, 210, 0.15) 81.39%,
|
||
rgba(79, 79, 83, 0.15) 87.17%,
|
||
rgba(27, 27, 32, 0.15) 90.47%,
|
||
rgba(49, 49, 54, 0.15) 91.3%,
|
||
rgba(77, 77, 81, 0.15) 92.12%,
|
||
rgba(116, 116, 118, 0.15) 92.95%,
|
||
rgba(165, 165, 167, 0.15) 94.6%,
|
||
rgba(233, 233, 233, 0.15) 95.43%
|
||
),
|
||
linear-gradient(0deg, #1f0f67 0%, #1f0f67 100%), #e8e8e8;
|
||
background-blend-mode: hard-light, normal, normal;
|
||
|
||
padding: 12px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
"
|
||
>
|
||
<!-- 转账功能 -->
|
||
<div
|
||
style="display: flex; justify-content: space-between; align-items: center"
|
||
@click="drawerShowBt('transfer')"
|
||
v-if="userIdentity.anchor"
|
||
>
|
||
<div>{{ t('transfer') }}</div>
|
||
<img
|
||
v-smart-img
|
||
class="flipImg"
|
||
src="/src/assets/icon/Azizi/arrowWhite.png"
|
||
alt=""
|
||
style="width: 1em; display: block; transition: all 0.2s ease"
|
||
:class="{ rotated: transferShow }"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 转账抽屉 -->
|
||
<transition name="drawer">
|
||
<div
|
||
v-if="transferShow"
|
||
style="
|
||
background-color: transparent;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
"
|
||
>
|
||
<!-- 转账对象 -->
|
||
<div
|
||
v-if="selectedPayee.id"
|
||
style="
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(64, 64, 64, 0.5);
|
||
background: rgba(240, 240, 240, 0.3);
|
||
box-shadow:
|
||
-42px 103px 31px 0 rgba(145, 145, 145, 0),
|
||
-27px 66px 29px 0 rgba(145, 145, 145, 0.01),
|
||
-15px 37px 24px 0 rgba(145, 145, 145, 0.03),
|
||
-7px 17px 18px 0 rgba(145, 145, 145, 0.04),
|
||
-2px 4px 10px 0 rgba(145, 145, 145, 0.05);
|
||
backdrop-filter: blur(7.5px);
|
||
padding: 12px;
|
||
"
|
||
>
|
||
<!-- 基本信息 -->
|
||
<div style="display: flex; align-items: center">
|
||
<!-- 头像 -->
|
||
<div style="position: relative; width: 50px; margin-right: 12px">
|
||
<img
|
||
:src="selectedPayee.avatar || ''"
|
||
:alt="selectedPayee.name || ''"
|
||
style="width: 100%; object-fit: cover; border-radius: 50%"
|
||
@error="handleAvatarImageError"
|
||
/>
|
||
</div>
|
||
<!-- 个人信息 -->
|
||
<div style="flex: 1">
|
||
<div style="margin: 0 0 4px 0; font-weight: 700">
|
||
{{ selectedPayee.name || '' }}
|
||
</div>
|
||
<div style="margin: 0; font-size: 0.9em; font-weight: 500">
|
||
{{ $t('user_id_prefix') }} {{ selectedPayee.account || '' }}
|
||
</div>
|
||
</div>
|
||
<!-- 换人按钮 -->
|
||
<button
|
||
style="
|
||
border-radius: 12px;
|
||
background: linear-gradient(
|
||
152deg,
|
||
rgba(198, 112, 255, 0.6) 7.01%,
|
||
rgba(119, 38, 255, 0.6) 92.99%
|
||
);
|
||
border: none;
|
||
font-weight: 500;
|
||
padding: 2px 8px;
|
||
"
|
||
@click="searchPayee"
|
||
>
|
||
{{ t('change') }}
|
||
</button>
|
||
</div>
|
||
<!-- 身份图标 -->
|
||
<div style="margin-left: 50px; display: flex; gap: 5px">
|
||
<img
|
||
v-if="selectedPayee.isHost"
|
||
v-smart-img
|
||
src="/src/assets/icon/identity/host.png"
|
||
alt=""
|
||
width="30%"
|
||
/>
|
||
<img
|
||
v-if="selectedPayee.isAgency"
|
||
v-smart-img
|
||
src="/src/assets/icon/identity/agency.png"
|
||
alt=""
|
||
width="30%"
|
||
style="display: block"
|
||
/>
|
||
<img
|
||
v-if="selectedPayee.hasSalary"
|
||
v-smart-img
|
||
src="/src/assets/icon/identity/coinSeller.png"
|
||
alt=""
|
||
width="30%"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 - 默认显示 -->
|
||
<div
|
||
v-else
|
||
style="
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(64, 64, 64, 0.5);
|
||
background: rgba(240, 240, 240, 0.3);
|
||
box-shadow:
|
||
-42px 103px 31px 0 rgba(145, 145, 145, 0),
|
||
-27px 66px 29px 0 rgba(145, 145, 145, 0.01),
|
||
-15px 37px 24px 0 rgba(145, 145, 145, 0.03),
|
||
-7px 17px 18px 0 rgba(145, 145, 145, 0.04),
|
||
-2px 4px 10px 0 rgba(145, 145, 145, 0.05);
|
||
backdrop-filter: blur(7.5px);
|
||
|
||
padding: 12px 0;
|
||
"
|
||
>
|
||
<div
|
||
style="
|
||
font-weight: 590;
|
||
padding: 16px 24px;
|
||
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(156, 156, 156, 0.5);
|
||
background: rgba(240, 240, 240, 0.1);
|
||
box-shadow:
|
||
0 -5px 4px 0 rgba(255, 255, 255, 0.25) inset,
|
||
0 4px 4px 0 rgba(255, 255, 255, 0.25) inset,
|
||
-42px 103px 31px 0 rgba(145, 145, 145, 0),
|
||
-27px 66px 29px 0 rgba(145, 145, 145, 0.01),
|
||
-15px 37px 24px 0 rgba(145, 145, 145, 0.03),
|
||
-7px 17px 18px 0 rgba(145, 145, 145, 0.04),
|
||
-2px 4px 10px 0 rgba(145, 145, 145, 0.05);
|
||
backdrop-filter: blur(10px);
|
||
"
|
||
@click="searchPayee"
|
||
>
|
||
{{ t('select') }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 转账金额选择 -->
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
|
||
<div
|
||
v-for="coin in coinOptions"
|
||
:key="coin.id"
|
||
@click="selectCoin(coin)"
|
||
:class="['coin-item', { selected: selectedCoin?.id === coin.id }]"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
src="/src/assets/icon/Azizi/dollar.png"
|
||
alt=""
|
||
style="width: 40%"
|
||
/>
|
||
<div style="font-weight: 500; color: #fff">{{ coin.price }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 转账按钮 -->
|
||
<div style="display: flex; justify-content: center; align-items: center">
|
||
<div
|
||
style="
|
||
width: 70%;
|
||
padding: 12px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(156, 156, 156, 0.5);
|
||
background: rgba(240, 240, 240, 0.3);
|
||
box-shadow:
|
||
0 -5px 4px 0 rgba(255, 255, 255, 0.25) inset,
|
||
0 4px 4px 0 rgba(255, 255, 255, 0.25) inset,
|
||
-42px 103px 31px 0 rgba(145, 145, 145, 0),
|
||
-27px 66px 29px 0 rgba(145, 145, 145, 0.01),
|
||
-15px 37px 24px 0 rgba(145, 145, 145, 0.03),
|
||
-7px 17px 18px 0 rgba(145, 145, 145, 0.04),
|
||
-2px 4px 10px 0 rgba(145, 145, 145, 0.05);
|
||
backdrop-filter: blur(10px);
|
||
|
||
font-weight: 590;
|
||
"
|
||
@click="transfer"
|
||
:disabled="!selectedCoin || !selectedPayee.value?.id"
|
||
>
|
||
{{ t('transfer') }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
|
||
<!-- 兑换金币 -->
|
||
<div
|
||
style="display: flex; justify-content: space-between; align-items: center"
|
||
@click="drawerShowBt('exchange')"
|
||
>
|
||
<div>{{ t('exchange_gold_coins') }}</div>
|
||
<img
|
||
v-smart-img
|
||
class="flipImg"
|
||
src="/src/assets/icon/Azizi/arrowWhite.png"
|
||
alt=""
|
||
style="width: 1em; display: block; transition: all 0.2s ease"
|
||
:class="{ rotated: exchangeShow }"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 兑换金币抽屉 -->
|
||
<transition name="drawer">
|
||
<div
|
||
v-if="exchangeShow"
|
||
style="
|
||
background-color: transparent;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
"
|
||
>
|
||
<!-- 转账金额选择 -->
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
|
||
<div
|
||
v-for="coin in coinOptions"
|
||
:key="coin.id"
|
||
@click="selectCoin(coin)"
|
||
:class="['coin-item', { selected: selectedCoin?.id == coin.id }]"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
src="/src/assets/icon/Azizi/coin.png"
|
||
alt=""
|
||
style="width: 40%"
|
||
/>
|
||
<div style="font-size: 0.7em">{{ coin.amount }} coins x1</div>
|
||
<div style="display: flex; align-items: center; gap: 2px">
|
||
<img
|
||
v-smart-img
|
||
src="/src/assets/icon/Azizi/dollar.png"
|
||
alt=""
|
||
style="display: block; width: 1.5em; object-fit: cover"
|
||
/>
|
||
<div style="font-weight: 500; color: #fff">x{{ coin.price }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 转账按钮 -->
|
||
<div style="display: flex; justify-content: center; align-items: center">
|
||
<div
|
||
style="
|
||
width: 70%;
|
||
padding: 12px;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(156, 156, 156, 0.5);
|
||
background: rgba(240, 240, 240, 0.3);
|
||
box-shadow:
|
||
0 -5px 4px 0 rgba(255, 255, 255, 0.25) inset,
|
||
0 4px 4px 0 rgba(255, 255, 255, 0.25) inset,
|
||
-42px 103px 31px 0 rgba(145, 145, 145, 0),
|
||
-27px 66px 29px 0 rgba(145, 145, 145, 0.01),
|
||
-15px 37px 24px 0 rgba(145, 145, 145, 0.03),
|
||
-7px 17px 18px 0 rgba(145, 145, 145, 0.04),
|
||
-2px 4px 10px 0 rgba(145, 145, 145, 0.05);
|
||
backdrop-filter: blur(10px);
|
||
|
||
font-weight: 590;
|
||
"
|
||
:disabled="!selectedCoin || !selectedPayee.value?.id"
|
||
@click="exchangeCoinBt"
|
||
>
|
||
{{ t('exchange') }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
|
||
<!-- 提取现金 -->
|
||
<div
|
||
style="display: flex; justify-content: space-between; align-items: center"
|
||
@click="goToWithdraw"
|
||
v-if="currentAmount.availableAmount >= 10"
|
||
>
|
||
<div>{{ t('go_to_withdraw') }}</div>
|
||
<img
|
||
v-smart-img
|
||
class="flipImg"
|
||
src="/src/assets/icon/Azizi/arrowWhite.png"
|
||
alt=""
|
||
style="width: 1em; display: block"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的排名占位 -->
|
||
<div
|
||
v-show="(rankShow && rankingShow) || (rechargeShow && rechargeRankShow)"
|
||
style="height: 25vw"
|
||
></div>
|
||
|
||
<!-- 我的排名 -->
|
||
<itemCenter
|
||
v-show="(rankShow && rankingShow) || (rechargeShow && rechargeRankShow)"
|
||
style="min-height: 22.3vw; position: fixed; bottom: -1px; z-index: 3"
|
||
:imgUrl="imageUrl('myRankingBg')"
|
||
:contentStyle="`padding: 1vw 3vw 0`"
|
||
>
|
||
<!-- 基本信息 -->
|
||
<div
|
||
style="
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
gap: 8px;
|
||
"
|
||
>
|
||
<!-- 排名 -->
|
||
<div style="width: 10vw; display: flex; justify-content: center">
|
||
<div style="color: #ffe601; font-weight: 700">
|
||
{{ (rankShow ? myRanking.rank : myRechargeRanking.rank) || 999 }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 头像 -->
|
||
<img
|
||
:src="(rankShow ? myRanking.avatar : myRechargeRanking.userAvatar) || ''"
|
||
alt=""
|
||
style="
|
||
display: block;
|
||
width: 4em;
|
||
aspect-ratio: 1/1;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
"
|
||
@error="handleAvatarImageError"
|
||
/>
|
||
|
||
<!-- 名称 -->
|
||
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
|
||
<div style="display: flex; min-width: 0">
|
||
<div
|
||
style="
|
||
color: #fff;
|
||
font-size: 1em;
|
||
font-weight: 860;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
direction: ltr;
|
||
"
|
||
>
|
||
{{ rankShow ? myRanking.nickname : myRechargeRanking.userName }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 贡献值 -->
|
||
<div
|
||
style="
|
||
width: auto;
|
||
min-width: 0;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<div
|
||
v-if="rankShow"
|
||
style="display: flex; justify-content: center; align-items: center"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
src="/src/assets/icon/Azizi/coin.png"
|
||
alt=""
|
||
style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
|
||
/>
|
||
<div style="color: #ffe601; font-weight: 700">
|
||
{{ myRanking.quantity || 0 }}
|
||
</div>
|
||
</div>
|
||
<div v-else style="color: #fff; font-weight: 700">
|
||
${{ myRechargeRanking?.amount || 0 }}
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
|
||
<!-- 弹窗遮罩层 -->
|
||
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
|
||
<!-- 居中弹窗 -->
|
||
<div
|
||
style="
|
||
width: 100vw;
|
||
height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
@click="closedPopup"
|
||
>
|
||
<!-- 抽奖结果 -->
|
||
<div v-show="resultShow" style="position: relative; width: 90%" @click.stop>
|
||
<itemCenter
|
||
style="min-height: 92.39vw"
|
||
:imgUrl="imageUrl('resultBg')"
|
||
:contentStyle="`inset: 20vw 7vw 8vw;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
gap:2vw`"
|
||
>
|
||
<!-- 奖品图展示 -->
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 45vw;
|
||
"
|
||
>
|
||
<!-- 上一个奖品 -->
|
||
<div
|
||
style="
|
||
width: 8vw;
|
||
align-self: stretch;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
class="flipImg"
|
||
v-show="result.length > 1 && resultShowIndex > 0"
|
||
:src="imageUrl('resultBack')"
|
||
alt=""
|
||
style="display: block; width: 80%; object-fit: cover"
|
||
@click="resultShowIndex--"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 奖品 -->
|
||
<img
|
||
:src="result[resultShowIndex]?.prize?.prizeImage"
|
||
alt=""
|
||
width="50%"
|
||
style="display: block"
|
||
/>
|
||
|
||
<!-- 下一个奖品 -->
|
||
<div
|
||
style="
|
||
width: 8vw;
|
||
align-self: stretch;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
class="flipImg"
|
||
v-show="result.length > 1 && resultShowIndex + 1 < result.length"
|
||
:src="imageUrl('resultNext')"
|
||
alt=""
|
||
style="display: block; width: 80%; object-fit: cover"
|
||
@click="resultShowIndex++"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 奖品说明 -->
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
height: 5vw;
|
||
text-align: center;
|
||
font-size: 1.2em;
|
||
font-weight: 590;
|
||
|
||
position: relative;
|
||
color: #efd47a;
|
||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||
"
|
||
>
|
||
{{ t('you_get') }} {{ result[resultShowIndex]?.prize?.prizeName }}
|
||
<div v-if="result.length > 1" class="resultNum">
|
||
{{ resultShowIndex + 1 }} / {{ result.length }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关闭弹窗按钮 -->
|
||
<div
|
||
style="
|
||
display: block;
|
||
width: 30vw;
|
||
cursor: pointer;
|
||
-webkit-tap-highlight-color: transparent;
|
||
-webkit-touch-callout: none;
|
||
user-select: none;
|
||
touch-action: manipulation;
|
||
"
|
||
@click="closedPopup"
|
||
@touchend="closedPopup"
|
||
>
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('resultGoOnBt')"
|
||
alt=""
|
||
style="display: block; width: 100%; object-fit: cover; pointer-events: none"
|
||
/>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
|
||
<!-- 中奖历史 -->
|
||
<div v-show="historyShow" style="position: relative; width: 95%" @click.stop>
|
||
<itemCenter
|
||
style="min-height: 97.53vw"
|
||
:imgUrl="imageUrl('historyBg')"
|
||
:contentStyle="`padding: 22vw 6vw 11vw;`"
|
||
>
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
"
|
||
class="scrollY"
|
||
>
|
||
<div
|
||
v-for="(record, index) in myRecords"
|
||
style="
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(64, 64, 64, 0.5);
|
||
background: rgba(240, 240, 240, 0.3);
|
||
box-shadow:
|
||
-42px 103px 31px 0 rgba(145, 145, 145, 0),
|
||
-27px 66px 29px 0 rgba(145, 145, 145, 0.01),
|
||
-15px 37px 24px 0 rgba(145, 145, 145, 0.03),
|
||
-7px 17px 18px 0 rgba(145, 145, 145, 0.04),
|
||
-2px 4px 10px 0 rgba(145, 145, 145, 0.05);
|
||
backdrop-filter: blur(7.5px);
|
||
|
||
display: flex;
|
||
padding: 12px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<div style="display: flex; align-items: center; gap: 4px">
|
||
<img
|
||
:src="record?.prize?.prizeImage || ''"
|
||
alt=""
|
||
style="width: 10vw; min-width: 0; object-fit: cover; display: block"
|
||
/>
|
||
<div
|
||
style="font-weight: 590; font-size: 0.9em; direction: ltr; text-align: left"
|
||
>
|
||
{{ record?.prize?.prizeName }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="font-weight: 510; font-size: 0.8em; direction: ltr; text-align: left"
|
||
>
|
||
{{ formatUTCCustom(record.drawTime) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
|
||
<!-- 排行榜帮助弹窗 -->
|
||
<div v-show="rankingHelpShow" style="position: relative; z-index: 0" @click.stop>
|
||
<!-- 关闭按钮 -->
|
||
<img
|
||
v-smart-img
|
||
:src="imageUrl('closeBt')"
|
||
alt=""
|
||
style="width: 8vw; position: absolute; z-index: 9; top: -5vw; right: 3vw"
|
||
@click="closedPopup"
|
||
/>
|
||
<itemCenter
|
||
style="min-height: 142.39vw"
|
||
:imgUrl="imageUrl(getImgName('helpBg'))"
|
||
:contentStyle="`inset:27vw 6vw 10vw;overflow-y: auto;display:block;`"
|
||
>
|
||
<div class="helpInfo">
|
||
<p>{{ $t('ranking_help_rule_1') }}</p>
|
||
<p>{{ $t('ranking_help_rule_2') }}</p>
|
||
<p>{{ $t('ranking_help_rule_3') }}</p>
|
||
<p>{{ $t('ranking_help_rule_4') }}</p>
|
||
<p>{{ $t('ranking_help_rule_5') }}</p>
|
||
<p>{{ $t('ranking_help_rule_6') }}</p>
|
||
<p style="color: darkgray">{{ $t('activity_apple_disclaimer') }}</p>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
|
||
<!-- 充值奖励帮助弹窗 -->
|
||
<div v-show="rechargeRankingHelpShow" @click.stop>
|
||
<itemCenter
|
||
style="min-height: 112.26vw"
|
||
:imgUrl="imageUrl('rechargeHelpBg')"
|
||
:contentStyle="`inset:26vw 6vw 11vw;overflow-y: auto;display:block;`"
|
||
>
|
||
<div class="helpInfo">
|
||
<p>{{ $t('recharge_help_rule_1') }}</p>
|
||
<p>{{ $t('recharge_help_rule_2') }}</p>
|
||
<p>{{ $t('recharge_help_rule_3') }}</p>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
|
||
<!-- 兑换规则弹窗 -->
|
||
<div v-show="withdrawalHelpShow" @click.stop>
|
||
<itemCenter
|
||
style="min-height: 103.46vw"
|
||
:imgUrl="imageUrl('withdrawHelpBg')"
|
||
:contentStyle="`inset:27vw 6vw 10vw;overflow-y: auto;display:block;`"
|
||
>
|
||
<div class="helpInfo">
|
||
<p>{{ $t('withdrawal_help_rule_1') }}</p>
|
||
<p>{{ $t('withdrawal_help_rule_2') }}</p>
|
||
<p>{{ $t('withdrawal_help_rule_3') }}</p>
|
||
</div>
|
||
</itemCenter>
|
||
</div>
|
||
</div>
|
||
</maskLayer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||
import { connectToApp } from '@/utils/appConnector.js'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { setDocumentDirection } from '@/locales/i18n'
|
||
import { viewUserInfo } from '@/utils/appBridge.js'
|
||
import { useLangStore } from '@/stores/lang'
|
||
import { getPngUrl } from '@/config/imagePaths.js'
|
||
import { toCssBackgroundImage } from '@/utils/protectedAssets.js'
|
||
import { preloadImages, preloadImagesIdle } from '@/utils/image/imagePreloader.js'
|
||
import { setUserInfo } from '@/utils/userStore.js'
|
||
import { formatUTCCustom } from '@/utils/utcFormat.js'
|
||
import { showError, showMessage, showSuccess } from '@/utils/toast.js'
|
||
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
|
||
import { getSelectedPayee, clearSelectedPayee } from '@/utils/payeeStore.js'
|
||
import { useThrottle } from '@/utils/useDebounce'
|
||
import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
|
||
|
||
import { getMemberProfile, getUserIdentity } from '@/api/wallet'
|
||
import {
|
||
getThisWeekRewardsAndGifts,
|
||
getRankingListAndMyRanking,
|
||
getOverallRankingTop3, // 获取总榜前三
|
||
} from '@/api/activity.js'
|
||
import {
|
||
ranklist, //获取排行榜
|
||
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 TopUser from './components/topUser.vue'
|
||
import itemCenter from '@/components/itemCenter.vue'
|
||
import maskLayer from '@/components/MaskLayer.vue'
|
||
|
||
const isLoading = ref(true) // 预加载状态
|
||
|
||
const { t, locale } = useI18n()
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
const langStore = useLangStore()
|
||
// 当前语言类型
|
||
const currentLangType = computed(() => {
|
||
return langStore.selectedLang?.type || 'en'
|
||
})
|
||
|
||
// 获取OSS图片URL的函数
|
||
const imageUrl = (filename) => getPngUrl('Activities/LesserBairam/', filename)
|
||
|
||
// 根据语言获取图片名
|
||
const getImgName = (filename) => {
|
||
return currentLangType.value == 'en' ? filename : `${filename}_${currentLangType.value}`
|
||
}
|
||
|
||
// 倒计时
|
||
const Days = ref(0)
|
||
const Hours = ref(0)
|
||
const Minutes = ref(0)
|
||
const Second = ref(0)
|
||
let timer = null
|
||
|
||
// 弹窗展示
|
||
const rankingHelpShow = ref(false) // 排行榜帮助弹窗
|
||
const rechargeRankingHelpShow = ref(false) // 充值排行榜帮助弹窗
|
||
const withdrawalHelpShow = ref(false) // 提现帮助弹窗
|
||
const resultShow = ref(false) // 抽奖结果
|
||
const historyShow = ref(false) // 历史
|
||
|
||
const maskLayerShow = computed(() => {
|
||
return (
|
||
rankingHelpShow.value ||
|
||
rechargeRankingHelpShow.value ||
|
||
withdrawalHelpShow.value ||
|
||
resultShow.value ||
|
||
historyShow.value
|
||
)
|
||
})
|
||
|
||
// 模块切换展示
|
||
const rankShow = ref(true) // 排行榜标签页
|
||
const rechargeShow = ref(false) // 充值标签页
|
||
const lotteryShow = ref(false) // 抽奖标签页
|
||
|
||
// 标签页切换
|
||
const rankingShow = ref(true) // 排行标签页
|
||
const rewardsShow = ref(false) // 奖励标签页
|
||
const rechargeRankShow = ref(true) // 充值排行标签页
|
||
const rechargeRewardsShow = ref(false) // 充值奖励标签页
|
||
const taskShow = ref(true) // 抽奖&任务标签页
|
||
const withdrawShow = ref(false) // 提现标签页
|
||
|
||
// 抽屉展示
|
||
const transferShow = ref(false) //转账
|
||
const exchangeShow = ref(false) //兑换
|
||
|
||
const selectedCoin = ref(null) // 选择的币种
|
||
|
||
const barrageList = ref([]) // 弹幕数据
|
||
|
||
// 排名模块
|
||
const Ranking = ref([]) // 原始排行榜
|
||
const myRanking = ref({}) // 我的排名
|
||
const rankingPageNo = ref(1) //分页页码
|
||
const rankingAdd = ref([]) //加载排行榜项
|
||
|
||
// 完整排行榜
|
||
const rankingTotal = computed(() => {
|
||
return [...Ranking.value, ...rankingAdd.value]
|
||
})
|
||
|
||
// 排行榜前3名
|
||
const RankingHasTop3 = computed(() => {
|
||
let RankingTop3 = rankingTotal.value.filter((_, index) => index < 3)
|
||
if (RankingTop3.length < 3) {
|
||
let addNullUser = Array.from({ length: 3 - RankingTop3.length }, () => ({
|
||
avatar: '',
|
||
nickname: '',
|
||
account: '',
|
||
amount: '',
|
||
}))
|
||
RankingTop3.push(...addNullUser)
|
||
}
|
||
return RankingTop3
|
||
})
|
||
|
||
// 排行榜4名开始
|
||
const showRanking = computed(() => {
|
||
return rankingTotal.value.filter((_, index) => index >= 3)
|
||
// return []
|
||
})
|
||
|
||
const rewardsTop3 = ref([]) // 原前3名奖励列表
|
||
// 处理后的前3名奖励列表
|
||
const showRewardsTop3 = computed(() => {
|
||
let newRewardsTop3 = JSON.parse(JSON.stringify(rewardsTop3.value)) // 对 rewardsTop3 进行深拷贝，避免引用问题
|
||
return newRewardsTop3
|
||
})
|
||
|
||
// 充值排名模块
|
||
const rechargePageNo = ref(1) // 充值排名页码
|
||
const rechargeRanking = ref([]) // 充值排名
|
||
const addRechargeRanking = ref([]) // 补充的充值排名
|
||
const RankingLoadmore = ref(null) //触底模块
|
||
const myRechargeRanking = ref({}) // 我的充值排名
|
||
|
||
// 完整充值排行榜
|
||
const rechargeRankingTotal = computed(() => {
|
||
return [...rechargeRanking.value, ...addRechargeRanking.value]
|
||
})
|
||
|
||
// 充值排行榜前3名
|
||
const rechargeRankingHasTop3 = computed(() => {
|
||
let RankingTop3 = rechargeRankingTotal.value.filter((_, index) => index < 3)
|
||
if (RankingTop3.length < 3) {
|
||
let addNullUser = Array.from({ length: 3 - RankingTop3.length }, () => ({
|
||
userAvatar: '',
|
||
userName: '',
|
||
amount: '',
|
||
}))
|
||
RankingTop3.push(...addNullUser)
|
||
}
|
||
return RankingTop3
|
||
})
|
||
|
||
// 排行榜4名开始
|
||
const showRechargeRanking = computed(() => {
|
||
return rechargeRankingTotal.value.filter((_, index) => index >= 3)
|
||
// return []
|
||
})
|
||
|
||
// 充值奖池模块
|
||
const myRechargeRecode = ref([]) // 我的充值记录
|
||
const RechargeRewards = ref([]) // 充值奖池
|
||
|
||
const giftsList = ref([]) // 礼物列表
|
||
|
||
const activity = ref({}) //活动详情和奖池
|
||
const activeIndex = ref(0) // 当前高亮格子
|
||
const isRolling = ref(false) // 抽奖状态
|
||
const rollTimes = ref(0) // 拥有抽奖券量
|
||
const totalDraw = ref({}) // 我的总抽奖次数
|
||
const currentAmount = ref({ availableAmount: 0 }) //可提现金额
|
||
const result = ref([]) // 抽奖结果
|
||
const resultShowIndex = ref(0)
|
||
const myRecords = ref([]) // 抽奖记录
|
||
|
||
const userInfo = ref({}) //用户信息
|
||
const userIdentity = ref({}) //用户身份
|
||
|
||
const taskList = ref([]) //任务列表
|
||
|
||
// 活动截止时间（北京时间 3 月 19 号早上 5 点）
|
||
const ACTIVITY_END_TIME = new Date('2026-04-04 05:00:00').getTime()
|
||
|
||
// 获取每周一早上5点的时间戳（沙特时间0点 = 北京时间5点）
|
||
const getNextMondayInBeijing = () => {
|
||
const now = new Date()
|
||
const targetDate = new Date(now.getTime()) // 创建一个基于当前时间的新日期对象
|
||
|
||
// 转换为北京时间来判断星期几
|
||
const utcTime = now.getTime() + now.getTimezoneOffset() * 60000
|
||
const beijingTime = new Date(utcTime + 8 * 3600000) // UTC+8
|
||
|
||
const beijingDay = beijingTime.getDay() // 0=周日, 1=周一, ..., 6=周六
|
||
const beijingHour = beijingTime.getHours()
|
||
|
||
// 转换为 0=周一, 1=周二, ..., 6=周日
|
||
const normalizedDay = beijingDay === 0 ? 6 : beijingDay - 1
|
||
|
||
let daysToAdd
|
||
if (normalizedDay === 0) {
|
||
// 今天是周一
|
||
if (beijingHour >= 5) {
|
||
daysToAdd = 7 // 超过5点，计算到下周一的所需时间
|
||
} else {
|
||
daysToAdd = 0 // 今天
|
||
}
|
||
} else {
|
||
daysToAdd = 7 - normalizedDay // 到下周一的天数
|
||
}
|
||
|
||
// 正确地添加天数
|
||
targetDate.setDate(targetDate.getDate() + daysToAdd) // 添加天数到下周一的当前时间
|
||
targetDate.setHours(5, 0, 0, 0) // 将时间重新设置为早上5点，作为目标时间戳
|
||
|
||
return targetDate.getTime()
|
||
}
|
||
|
||
// 判断是否进入最后一周（下周一超过截止时间）
|
||
const isLastWeek = () => {
|
||
const nextMonday = getNextMondayInBeijing()
|
||
return nextMonday > ACTIVITY_END_TIME
|
||
}
|
||
|
||
// 获取倒计时目标时间
|
||
const getTargetTime = () => {
|
||
// // 最后一周：使用活动截止时间
|
||
// if (isLastWeek()) {
|
||
// return ACTIVITY_END_TIME
|
||
// }
|
||
// // 普通周：使用下周一早上 5 点
|
||
// return getNextMondayInBeijing()
|
||
|
||
return ACTIVITY_END_TIME
|
||
}
|
||
|
||
const targetTime = ref(getTargetTime()) // 闭包保存目标时间 (核心修正)
|
||
|
||
// 格式化时间
|
||
const formatTime = (value) => {
|
||
return value < 10 ? `0${value}` : value
|
||
}
|
||
|
||
// 倒计时
|
||
const getCountdown = () => {
|
||
const now = Date.now()
|
||
let diff = targetTime.value - now
|
||
|
||
if (diff <= 0) {
|
||
// 初始化数据
|
||
initData()
|
||
|
||
targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
|
||
diff = targetTime.value - now
|
||
}
|
||
|
||
const totalSeconds = Math.floor(diff / 1000)
|
||
Days.value = Math.floor(totalSeconds / (24 * 3600))
|
||
Hours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
|
||
Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
|
||
Second.value = formatTime(Math.floor(totalSeconds % 60))
|
||
}
|
||
|
||
// 切换模块
|
||
const handleBt = (type) => {
|
||
rankShow.value = type == 'ranking' ? true : false
|
||
rechargeShow.value = type == 'recharge' ? true : false
|
||
lotteryShow.value = type == 'lottery' ? true : false
|
||
drawerShowBt('') // 收起抽屉
|
||
selectedCoin.value = null // 清除选择币种
|
||
}
|
||
|
||
// 切换标签页
|
||
const changeModule = (module) => {
|
||
switch (module) {
|
||
case 'ranking':
|
||
rankingShow.value = true
|
||
rewardsShow.value = false
|
||
break
|
||
case 'rewards':
|
||
rankingShow.value = false
|
||
rewardsShow.value = true
|
||
break
|
||
case 'rechargeRank':
|
||
rechargeRankShow.value = true
|
||
rechargeRewardsShow.value = false
|
||
break
|
||
case 'rechargeRewards':
|
||
rechargeRankShow.value = false
|
||
rechargeRewardsShow.value = true
|
||
break
|
||
case 'task':
|
||
taskShow.value = true
|
||
withdrawShow.value = false
|
||
break
|
||
case 'withdraw':
|
||
taskShow.value = false
|
||
withdrawShow.value = true
|
||
break
|
||
}
|
||
}
|
||
|
||
// 抽屉展示
|
||
const drawerShowBt = (type) => {
|
||
transferShow.value = type == 'transfer' ? !transferShow.value : false
|
||
exchangeShow.value = type == 'exchange' ? !exchangeShow.value : false
|
||
selectedCoin.value = null
|
||
}
|
||
|
||
const rechargehidden = ref(true) //金额是否隐藏
|
||
// 根据隐藏状态处理金额显示的方法
|
||
const formatRechargeAmount = (amount) => {
|
||
if (rechargehidden.value) {
|
||
// 如果隐藏，则将数字替换为*
|
||
return String(amount || '0').replace(/\d/g, '*')
|
||
} else {
|
||
// 如果不隐藏，则正常显示
|
||
return amount || '0'
|
||
}
|
||
}
|
||
|
||
const topImg = ref([
|
||
imageUrl('rechargeReward100'),
|
||
imageUrl('rechargeReward500'),
|
||
imageUrl('rechargeReward1000'),
|
||
imageUrl('rechargeReward3000'),
|
||
imageUrl('rechargeReward5000'),
|
||
imageUrl('rechargeReward10000'),
|
||
]) // top图片
|
||
|
||
//充值奖励的内容样式
|
||
const rewardContentLayer = (index) => {
|
||
let gridStyle = ''
|
||
if (currentLangType.value == 'ar') {
|
||
gridStyle = 'direction: ltr;'
|
||
}
|
||
if (index == 0) {
|
||
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 7vw 26vw 7vw;${gridStyle}`
|
||
} else if (index == 1 || index == 2) {
|
||
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 7vw 26vw 7vw;${gridStyle}`
|
||
} else if (index == 3 || index == 4 || index == 5) {
|
||
return `display: grid;grid-template-columns: repeat(3, 1fr);gap:3vw 3.5vw;padding: 29vw 7vw 26vw 7vw;${gridStyle}`
|
||
}
|
||
}
|
||
|
||
// 前往搜索代理页
|
||
const searchPayee = () => {
|
||
router.push({
|
||
path: '/search-payee',
|
||
query: { from: '/activities/lesser-bairam', activeAction: 'withdraw' },
|
||
})
|
||
}
|
||
|
||
// 前往提现页
|
||
const goToWithdraw = () => {
|
||
router.push({ path: '/cash-out', query: { activityId: '2006671533912581569' } })
|
||
}
|
||
|
||
// 判断文本是否溢出（需要滚动）
|
||
const isTextOverflow = (text) => {
|
||
// 创建临时元素来测量文本宽度
|
||
const tempDiv = document.createElement('div')
|
||
tempDiv.style.position = 'absolute'
|
||
tempDiv.style.fontSize = '1em'
|
||
tempDiv.style.fontWeight = '860'
|
||
tempDiv.textContent = text
|
||
document.body.appendChild(tempDiv) // 将临时元素添加到文档中
|
||
|
||
const containerWidth = window.innerWidth * 0.3 // 所在容器宽度
|
||
const textWidth = tempDiv.getBoundingClientRect().width // 文本宽度
|
||
|
||
document.body.removeChild(tempDiv) // 删除临时元素
|
||
|
||
// 如果文本宽度超过容器宽度，则需要滚动
|
||
return textWidth > containerWidth
|
||
}
|
||
|
||
// 转账金币选项
|
||
const coinOptions = ref([
|
||
{ id: 1, amount: 10500, price: 1 },
|
||
{ id: 2, amount: 52500, price: 5 },
|
||
{ id: 3, amount: 105000, price: 10 },
|
||
])
|
||
|
||
//选择金币
|
||
const selectCoin = (coin) => {
|
||
// 单选逻辑：如果已经选中相同的金币，则取消选择；否则选中新的金币
|
||
if (selectedCoin.value?.id == coin.id) {
|
||
selectedCoin.value = null
|
||
} else {
|
||
selectedCoin.value = coin
|
||
}
|
||
}
|
||
|
||
// 转账
|
||
const transfer = async () => {
|
||
if (!selectedCoin.value) {
|
||
showError(t('please_select_amount'))
|
||
return
|
||
}
|
||
|
||
if (!selectedPayee.value?.id) {
|
||
showError(t('please_select_payee'))
|
||
return
|
||
}
|
||
|
||
// 构造请求参数
|
||
const transferData = {
|
||
amount: selectedCoin.value.price,
|
||
acceptUserId: selectedPayee.value?.id,
|
||
activityId: '2006671533912581569',
|
||
}
|
||
|
||
try {
|
||
// 调用转账接口
|
||
const response = await transferActivityDollar(transferData)
|
||
if (response.status) {
|
||
showSuccess(
|
||
t('transfer_dollar_success', {
|
||
price: selectedCoin.value.price,
|
||
name: selectedPayee.value?.name,
|
||
}),
|
||
)
|
||
} else {
|
||
showError(t('transfer_dollar_failed', { price: selectedCoin.value.price }))
|
||
}
|
||
|
||
selectedCoin.value = null // 重置选择
|
||
|
||
getDrawableAmount() //刷新可提现金额
|
||
} catch (error) {
|
||
if (error.errorCode === 5000) {
|
||
showMessage(t('insufficient_item_vouchers'))
|
||
} else {
|
||
showError(error.errorMsg)
|
||
}
|
||
}
|
||
}
|
||
|
||
//兑换代币
|
||
const exchangeCoinBt = async () => {
|
||
if (!selectedCoin.value) {
|
||
showError(t('please_select_amount'))
|
||
return
|
||
}
|
||
|
||
// 构造请求参数
|
||
const transferData = {
|
||
amount: selectedCoin.value.price,
|
||
activityId: '2006671533912581569',
|
||
}
|
||
|
||
try {
|
||
// 调用转账接口
|
||
const response = await exchangeCoin(transferData)
|
||
if (response.status) {
|
||
showSuccess(t('exchange_success_coins', { amount: selectedCoin.value.amount }))
|
||
} else {
|
||
showError(t('exchange_failed_coins', { amount: selectedCoin.value.amount }))
|
||
}
|
||
|
||
// 重置选择
|
||
selectedCoin.value = null
|
||
|
||
getDrawableAmount() //刷新可提现金额
|
||
} catch (error) {
|
||
if (error.errorCode === 5000) {
|
||
showMessage(t('insufficient_item_vouchers'))
|
||
} else {
|
||
showError(error.errorMsg)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 打开弹窗
|
||
const openPopup = (type) => {
|
||
closedPopup(false) //先关闭其他弹窗，不清除抽奖结果
|
||
switch (type) {
|
||
case 'rankingHelp':
|
||
rankingHelpShow.value = true
|
||
break
|
||
case 'rechargeRankingHelp':
|
||
rechargeRankingHelpShow.value = true
|
||
break
|
||
case 'withdrawalHelp':
|
||
withdrawalHelpShow.value = true
|
||
break
|
||
case 'result':
|
||
resultShow.value = true
|
||
break
|
||
case 'history':
|
||
historyShow.value = true
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
|
||
// 关闭弹窗
|
||
const closedPopup = (clear = true) => {
|
||
rankingHelpShow.value = false
|
||
rechargeRankingHelpShow.value = false
|
||
withdrawalHelpShow.value = false
|
||
resultShow.value = false
|
||
historyShow.value = false
|
||
if (clear) {
|
||
result.value = []
|
||
}
|
||
resultShowIndex.value = 0
|
||
}
|
||
|
||
//奖盘布局
|
||
const getGridPosition = (index) => {
|
||
//顺时针位置
|
||
const positions = [
|
||
{ gridArea: '1/1' }, //上左
|
||
{ gridArea: '1/2' }, //上中
|
||
{ gridArea: '1/3' }, //上右
|
||
{ gridArea: '2/3' }, //中右
|
||
{ gridArea: '3/3' }, //下右
|
||
{ gridArea: '3/2' }, //下中
|
||
{ gridArea: '3/1' }, //下左
|
||
{ gridArea: '2/1' }, //中左
|
||
]
|
||
return positions[index]
|
||
}
|
||
|
||
// 抽奖动画
|
||
const startLottery = (resultIndex) => {
|
||
console.log('开始抽奖动画')
|
||
|
||
return new Promise((resolve) => {
|
||
activeIndex.value = -1
|
||
|
||
let speed = 200 // 初始速度
|
||
let currentCycle = 0 // 当前圈数
|
||
let constantSpeedCycle = 0 // 当前匀速圈数
|
||
let totalCycles = 1 // 至少旋转2圈数
|
||
|
||
const roll = () => {
|
||
activeIndex.value = (activeIndex.value + 1) % activity.value.prizeList.length
|
||
console.log('当前索引:', activeIndex.value)
|
||
|
||
if (activeIndex.value === resultIndex && speed > 200) {
|
||
setTimeout(() => {
|
||
resolve() // 抽奖结束
|
||
}, 500)
|
||
} else {
|
||
if (activeIndex.value === activity.value.prizeList.length - 1) {
|
||
currentCycle++
|
||
}
|
||
// 加速旋转
|
||
if (currentCycle < totalCycles) {
|
||
speed -= 20
|
||
} else {
|
||
// 匀速旋转
|
||
if (activeIndex.value === activity.value.prizeList.length - 1) {
|
||
constantSpeedCycle++
|
||
}
|
||
if (constantSpeedCycle > 2) {
|
||
// 最后减速效果
|
||
speed += 20
|
||
}
|
||
}
|
||
setTimeout(roll, speed)
|
||
}
|
||
}
|
||
|
||
roll()
|
||
})
|
||
}
|
||
|
||
// 连抽
|
||
const sweepstakes = async (consecutive = 1) => {
|
||
if (isRolling.value) return // 防止重复点击
|
||
// 检查抽奖次数
|
||
if (rollTimes.value >= consecutive) {
|
||
isRolling.value = true
|
||
let data = {
|
||
activityId: '2006671533912581569',
|
||
drawCount: consecutive,
|
||
}
|
||
try {
|
||
// 单抽
|
||
if (consecutive == 1) {
|
||
const resOnceDraw = await onceDraw(data)
|
||
if (resOnceDraw.status && resOnceDraw.body) {
|
||
getTotalDrawCount() //刷新累计抽奖次数
|
||
// getConfigsBadgeInfo() //刷新累计抽奖-徽章信息
|
||
getTickets() //重新获取拥有的抽奖券
|
||
getDrawableAmount() //刷新可提现金额
|
||
|
||
result.value = [resOnceDraw.body] // 中奖结果赋值
|
||
|
||
const resItem = resOnceDraw.body //接口获取的抽奖结果（单抽为对象）
|
||
//取抽奖结果的位置
|
||
const index = activity.value.prizeList.findIndex(
|
||
(prize) => prize.prizeName == resItem?.prize.prizeName,
|
||
) //转盘第几位停下
|
||
console.log('index:', index)
|
||
await startLottery(index)
|
||
}
|
||
}
|
||
//连抽
|
||
else {
|
||
const resMultiDraw = await multiDraw(data)
|
||
if (resMultiDraw.status && resMultiDraw.body) {
|
||
getTotalDrawCount() //刷新累计抽奖次数
|
||
// getConfigsBadgeInfo() //刷新累计抽奖-徽章信息
|
||
getTickets() //重新获取拥有的抽奖券
|
||
getDrawableAmount() //刷新可提现金额
|
||
|
||
result.value = resMultiDraw.body.results // 中奖结果赋值
|
||
|
||
//取第一个抽奖结果的位置
|
||
let index = activity.value.prizeList.findIndex(
|
||
(prize) => prize.prizeName == result.value[0]?.prize.prizeName,
|
||
)
|
||
console.log('index:', index)
|
||
await startLottery(index)
|
||
}
|
||
}
|
||
getDrawRecords() // 获取中奖记录
|
||
openPopup('result') //打开中奖结果弹窗
|
||
isRolling.value = false
|
||
} catch (error) {
|
||
isRolling.value = false
|
||
if (error.response.errorCode == 3274) {
|
||
showError('Device has been used by another account')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 展示任务目标
|
||
const showTarget = (task) => {
|
||
if (task.targetType == 'MIC_TIME') {
|
||
let timeType = task.targetValue < 60
|
||
let currentValue = timeType ? task.currentValue : task.currentValue / 60
|
||
let targetValue = timeType ? task.targetValue : task.targetValue / 60
|
||
// 直接去除小数部分（向下取整）
|
||
currentValue = Math.floor(currentValue * 10) / 10
|
||
targetValue = Math.floor(targetValue * 10) / 10
|
||
let timeUnit = timeType ? t('minutes_short') : t('hours_short')
|
||
|
||
return t('on_mic_progress', {
|
||
current: currentValue,
|
||
total: targetValue,
|
||
unit: timeUnit,
|
||
})
|
||
} else if (task.targetType == 'SEND_GIFT') {
|
||
if (task.taskCode == 'SP_SEND_GIFT_5') {
|
||
return t('Send 5 Ramadan gifts ({currentValue}/{targetValue})', {
|
||
currentValue: task.currentValue,
|
||
targetValue: task.targetValue,
|
||
})
|
||
}
|
||
} else if (task.targetType == 'SAVE_COINS') {
|
||
if (task.taskCode == 'SP_SAVE_50000') {
|
||
return t('Win 50,000 coins in total across any games ({currentValue}/{targetValue})', {
|
||
currentValue: task.currentValue,
|
||
targetValue: task.targetValue,
|
||
})
|
||
} else if (task.taskCode == 'SP_SAVE_100000') {
|
||
return t('Win 100,000 coins in total across any games ({currentValue}/{targetValue})', {
|
||
currentValue: task.currentValue,
|
||
targetValue: task.targetValue,
|
||
})
|
||
} else if (task.taskCode == 'SP_SAVE_500000') {
|
||
return t('Win 500,000 coins in total across any games ({currentValue}/{targetValue})', {
|
||
currentValue: task.currentValue,
|
||
targetValue: task.targetValue,
|
||
})
|
||
}
|
||
} else if (task.targetType == 'RECHARGE_AMOUNT') {
|
||
if (task.taskCode == 'SP_RECHARGE_1') {
|
||
return t('Daily total recharge amount: $1 ({currentValue}/{targetValue})', {
|
||
currentValue: task.currentValue,
|
||
targetValue: task.targetValue,
|
||
})
|
||
} else if (task.taskCode == 'SP_RECHARGE_10') {
|
||
return t('Daily total recharge amount: $10 ({currentValue}/{targetValue})', {
|
||
currentValue: task.currentValue,
|
||
targetValue: task.targetValue,
|
||
})
|
||
} else if (task.taskCode == 'SP_RECHARGE_50') {
|
||
return t('Daily total recharge amount: $50 ({currentValue}/{targetValue})', {
|
||
currentValue: task.currentValue,
|
||
targetValue: task.targetValue,
|
||
})
|
||
} else if (task.taskCode == 'SP_RECHARGE_100') {
|
||
return t('Daily total recharge amount: $100 ({currentValue}/{targetValue})', {
|
||
currentValue: task.currentValue,
|
||
targetValue: task.targetValue,
|
||
})
|
||
}
|
||
} else {
|
||
return `${task.taskName}(${task.currentValue}/${task.targetValue})`
|
||
}
|
||
}
|
||
|
||
// 选中的收款人
|
||
const selectedPayee = ref({})
|
||
|
||
// 初始化收款人信息
|
||
const initializePayee = () => {
|
||
const savedPayee = getSelectedPayee()
|
||
if (savedPayee) {
|
||
Object.assign(selectedPayee.value, savedPayee)
|
||
handleBt('lottery') // 抽奖模块
|
||
changeModule('withdraw') // 提现标签页
|
||
drawerShowBt('transfer') // 转账抽屉
|
||
}
|
||
}
|
||
|
||
// 清除当前选中的收款人
|
||
const clearPayee = () => {
|
||
Object.assign(selectedPayee.value, {
|
||
id: null,
|
||
account: '',
|
||
name: '',
|
||
avatar: '',
|
||
type: '',
|
||
isHost: false,
|
||
isAgency: false,
|
||
hasSalary: false,
|
||
})
|
||
clearSelectedPayee()
|
||
}
|
||
|
||
// 获取中奖用户列表
|
||
const getWinners = async () => {
|
||
const resWinners = await winnerHistory('2006671533912581569')
|
||
if (resWinners.status && resWinners.body) {
|
||
barrageList.value = resWinners.body
|
||
}
|
||
}
|
||
|
||
// 获取用户信息
|
||
const getUserInfo = async () => {
|
||
if (Object.keys(userInfo.value).length === 0) {
|
||
const resUserInfo = await getMemberProfile()
|
||
if (resUserInfo.status && resUserInfo.body) {
|
||
setUserInfo(resUserInfo.body, null)
|
||
userInfo.value = resUserInfo.body
|
||
}
|
||
}
|
||
const resIdentity = await getUserIdentity()
|
||
if (resIdentity.status && resIdentity.body) {
|
||
userIdentity.value = resIdentity.body
|
||
}
|
||
}
|
||
|
||
// 获取排行榜
|
||
const getRanking = async () => {
|
||
let data = {
|
||
activityType: 16,
|
||
}
|
||
const resRanking = await getRankingListAndMyRanking(data)
|
||
if (resRanking.status && resRanking.body) {
|
||
myRanking.value = resRanking.body?.currentUserRank //我的排名信息
|
||
Ranking.value = resRanking.body?.rankingList
|
||
getRewardsAndGifts() // 获取前十名奖励列表
|
||
} else {
|
||
Ranking.value = []
|
||
myRanking.value = {}
|
||
}
|
||
}
|
||
|
||
// 获取前3名奖励列表
|
||
const getRewardsAndGifts = async () => {
|
||
const resRewardsAndGifts = await getThisWeekRewardsAndGifts('2033805143824084994')
|
||
if (resRewardsAndGifts.status && resRewardsAndGifts.body) {
|
||
giftsList.value = resRewardsAndGifts.body.gifts // 每周礼物
|
||
let tempRewardsTop3 = resRewardsAndGifts.body.butOneRewards // 前3奖励
|
||
|
||
rewardsTop3.value = tempRewardsTop3.filter((_, index) => index < 3)
|
||
}
|
||
}
|
||
|
||
// 获取充值排行榜
|
||
const getRechargeRanking = async () => {
|
||
if (rechargePageNo.value == 0) {
|
||
rechargePageNo.value = 1
|
||
}
|
||
let data = {
|
||
activityId: '2006671533912581569',
|
||
pageNo: rechargePageNo.value,
|
||
pageSize: 20,
|
||
}
|
||
const resRanking = await ranklist(data)
|
||
if (resRanking.status && resRanking.body) {
|
||
myRechargeRanking.value = resRanking.body?.currentUser // 我的充值排名
|
||
|
||
if (resRanking.body.topList.length > 0) {
|
||
if (resRanking.body.topList.length == 20) {
|
||
addRechargeRanking.value = []
|
||
rechargeRanking.value.push(...resRanking.body?.topList)
|
||
rechargePageNo.value++
|
||
} else {
|
||
addRechargeRanking.value = resRanking.body?.topList
|
||
}
|
||
}
|
||
} else {
|
||
myRechargeRanking.value = {}
|
||
rechargeRanking.value = []
|
||
addRechargeRanking.value = []
|
||
rechargePageNo.value = 1
|
||
}
|
||
}
|
||
|
||
// 获取充值记录
|
||
const getMyRecharge = async () => {
|
||
const resMyRecharge = await myRecharge('2006671533912581569')
|
||
if (resMyRecharge.status && resMyRecharge.body) {
|
||
myRechargeRecode.value = resMyRecharge.body
|
||
} else {
|
||
myRechargeRecode.value = {}
|
||
}
|
||
}
|
||
|
||
// 获取充值奖励列表
|
||
const getRechargeReward = async () => {
|
||
let data = {
|
||
activityType: 'CONSUMPTION_ACTIVITY',
|
||
activityId: '2006671533912581569',
|
||
}
|
||
const resActivityReward = await activityRewardConfigs(data)
|
||
if (resActivityReward.status && resActivityReward.body) {
|
||
RechargeRewards.value = resActivityReward.body.map((rewards) => {
|
||
let jsonData = JSON.parse(rewards.jsonData)
|
||
let addReward = []
|
||
|
||
if (rewards.sort == 1) {
|
||
addReward = []
|
||
} else if (rewards.sort == 2) {
|
||
addReward = []
|
||
} else if (rewards.sort == 3) {
|
||
addReward = []
|
||
} else if (rewards.sort == 4) {
|
||
addReward = [
|
||
{
|
||
type: 'GIFT',
|
||
cover: imageUrl('reward_gift'),
|
||
content: 1,
|
||
},
|
||
]
|
||
} else if (rewards.sort == 5) {
|
||
addReward = [
|
||
{
|
||
type: 'GIFT',
|
||
cover: imageUrl('reward_gift'),
|
||
content: 1,
|
||
},
|
||
]
|
||
} else if (rewards.sort == 6) {
|
||
addReward = [
|
||
{
|
||
type: 'GIFT',
|
||
cover: imageUrl('reward_gift'),
|
||
content: 1,
|
||
},
|
||
{
|
||
type: 'PROPS',
|
||
detailType: 'AVATAR_FRAME',
|
||
cover: imageUrl('reward_frame'),
|
||
quantity: 365,
|
||
},
|
||
{
|
||
type: 'PROPS',
|
||
detailType: 'RIDE',
|
||
cover: imageUrl('reward_ride'),
|
||
quantity: 60,
|
||
},
|
||
]
|
||
}
|
||
|
||
rewards.rewardProps.push(...addReward) //补充奖励项
|
||
|
||
rewards = {
|
||
...rewards,
|
||
...jsonData,
|
||
}
|
||
return rewards
|
||
})
|
||
} else {
|
||
RechargeRewards.value = []
|
||
}
|
||
}
|
||
|
||
// 领取充值奖励
|
||
const receiveReward = async (rewards) => {
|
||
let data = {
|
||
activityType: rewards.activityType,
|
||
activityId: '2006671533912581569',
|
||
ruleId: rewards.ruleId,
|
||
}
|
||
try {
|
||
const resReceive = await receiveRechargeReward(data)
|
||
if (resReceive.status && resReceive.body) {
|
||
getRechargeReward() // 刷新充值奖励
|
||
}
|
||
} catch (error) {
|
||
showError(error.errorMsg)
|
||
}
|
||
}
|
||
|
||
// 获取抽奖奖池
|
||
const getActivityDetail = async () => {
|
||
getDrawableAmount() //获取可提现金额
|
||
const resDetail = await activityDetail('81569')
|
||
if (resDetail.status && resDetail.body) {
|
||
activity.value = resDetail.body
|
||
} else {
|
||
activity.value = {}
|
||
}
|
||
}
|
||
|
||
// 格式化奖励的展示信息
|
||
const showDetail = (type, reward) => {
|
||
let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS', 'TICKET']
|
||
if (showamount.includes(type)) {
|
||
return `*${reward.content}`
|
||
} else if (type === 'DOLLARS') {
|
||
return `$${reward.content}`
|
||
} else {
|
||
return `${reward.quantity}Days`
|
||
}
|
||
}
|
||
|
||
// 获取拥有的抽奖券
|
||
const getTickets = async () => {
|
||
const resTickets = await myTickets('2006671533912581569')
|
||
if (resTickets.status && resTickets.body) {
|
||
rollTimes.value = resTickets.body
|
||
} else {
|
||
rollTimes.value = 0
|
||
}
|
||
}
|
||
|
||
// 获取累计抽奖次数
|
||
const getTotalDrawCount = async () => {
|
||
const resTotalDrawCount = await myTotalDrawCount('2006671533912581569')
|
||
if (resTotalDrawCount.status && resTotalDrawCount.body) {
|
||
totalDraw.value = resTotalDrawCount.body
|
||
}
|
||
}
|
||
|
||
// 可提现金额
|
||
const getDrawableAmount = async () => {
|
||
const resDrawableAmount = await withdrawableAmount('2006671533912581569')
|
||
if (resDrawableAmount.status && resDrawableAmount.body) {
|
||
currentAmount.value = resDrawableAmount.body
|
||
}
|
||
}
|
||
|
||
// 获取任务列表
|
||
const getTaskList = async () => {
|
||
const resTaskList = await ActTaskList('2006671533912581569')
|
||
if (resTaskList.status && resTaskList.body) {
|
||
taskList.value = resTaskList.body
|
||
}
|
||
}
|
||
|
||
// 获取中奖记录
|
||
const getDrawRecords = async () => {
|
||
const resDrawRecords = await drawRecords('81569')
|
||
if (resDrawRecords.status && resDrawRecords.body) {
|
||
myRecords.value = resDrawRecords.body?.records || []
|
||
}
|
||
}
|
||
|
||
// 领取任务奖励
|
||
const receiveTaskReward = async (code) => {
|
||
let data = {
|
||
activityId: '2006671533912581569',
|
||
taskCode: code,
|
||
}
|
||
try {
|
||
const resReceive = await receiveTickets(data)
|
||
if (resReceive.status && resReceive.body) {
|
||
getTaskList() //获取任务列表
|
||
getTickets() //获取拥有的抽奖券
|
||
}
|
||
} catch (error) {
|
||
showError(error.errorMsg)
|
||
}
|
||
}
|
||
|
||
// 刷新页面数据
|
||
const initData = async () => {
|
||
await Promise.all([
|
||
getUserInfo(), //获取用户信息
|
||
initializePayee(), //获取收款人信息
|
||
getWinners(), //获取历史中奖用户
|
||
getRanking(), //获取排行榜
|
||
|
||
getRechargeRanking(), // 获取充值排行榜
|
||
getMyRecharge(), // 获取充值记录
|
||
getRechargeReward(), // 获取充值奖励列表
|
||
|
||
getActivityDetail(), //获取奖池
|
||
getTotalDrawCount(), //刷新累计抽奖次数
|
||
getTickets(), //重新获取拥有的抽奖券
|
||
getTaskList(), //获取任务列表
|
||
getDrawRecords(), // 获取中奖记录
|
||
])
|
||
}
|
||
|
||
// 预加载关键图片
|
||
const preloadCriticalImages = async () => {
|
||
const criticalImages = [
|
||
// 背景
|
||
imageUrl('bg1'),
|
||
imageUrl('bg2'),
|
||
// imageUrl('bg3'),
|
||
|
||
imageUrl('timeBg'), // 倒计时
|
||
|
||
// 模块按钮
|
||
imageUrl(getImgName('rankBt')),
|
||
imageUrl(getImgName('rankBtActive')),
|
||
imageUrl(getImgName('rechargeBt')),
|
||
imageUrl(getImgName('rechargeBtActive')),
|
||
imageUrl(getImgName('lotteryBt')),
|
||
imageUrl(getImgName('lotteryBtActive')),
|
||
|
||
// 排行榜标签页
|
||
// 标签页按钮
|
||
imageUrl(getImgName('rankingBt')),
|
||
imageUrl('rewardsBt'),
|
||
|
||
// 每周礼物
|
||
imageUrl('eventGiftsBg'),
|
||
imageUrl('giftBg'),
|
||
|
||
// 排行榜
|
||
imageUrl('rankingImgBg'),
|
||
imageUrl('RankingTopBorder'),
|
||
imageUrl('RankingBottomBorder'),
|
||
imageUrl('RankingBorder'),
|
||
imageUrl('historyBt'),
|
||
imageUrl('itemFrom4Bg'),
|
||
imageUrl('userNameBorder'),
|
||
|
||
// 前三头像框
|
||
imageUrl('top1'),
|
||
imageUrl('top2'),
|
||
imageUrl('top3'),
|
||
|
||
// 前三奖励
|
||
// imageUrl(`rewardTop1`),
|
||
// imageUrl(`rewardTop2`),
|
||
// imageUrl(`rewardTop3`),
|
||
|
||
// 充值排行榜标签页
|
||
// 标签页按钮
|
||
imageUrl(getImgName('rechargeRankBt')),
|
||
|
||
// 我的充值
|
||
// imageUrl('earningInfoBg'),
|
||
// imageUrl('rechargeNumHidden'),
|
||
// imageUrl('rechargeNumShow'),
|
||
|
||
// 充值奖励
|
||
// imageUrl('rechargeReward100'),
|
||
// imageUrl('rechargeReward500'),
|
||
// imageUrl('rechargeReward1000'),
|
||
// imageUrl('rechargeReward3000'),
|
||
// imageUrl('rechargeReward5000'),
|
||
// imageUrl('rechargeReward10000'),
|
||
// imageUrl(getImgName('receiveBt')),
|
||
// imageUrl(getImgName('receivedBt')),
|
||
|
||
// 提现标签页
|
||
// 标签页按钮
|
||
// imageUrl(getImgName('taskBt')),
|
||
// imageUrl(getImgName('redeemBt')),
|
||
|
||
// 抽奖模块
|
||
// imageUrl('resultBt'),
|
||
// imageUrl('lottery'),
|
||
// imageUrl('prizeActiveFrame'),
|
||
// imageUrl('draw1BtBg'),
|
||
// imageUrl('draw10BtBg'),
|
||
|
||
// 任务列表
|
||
// imageUrl('taskTalk'),
|
||
// imageUrl('taskGift'),
|
||
// imageUrl('taskGame'),
|
||
// imageUrl('taskRecharge'),
|
||
// imageUrl('ticket'),
|
||
// imageUrl('taskBtGo'),
|
||
// imageUrl('taskBtReceive'),
|
||
// imageUrl('taskBtReceived'),
|
||
|
||
// imageUrl('myRankingBg'), // 我的排名
|
||
|
||
// // 中奖结果弹窗
|
||
// imageUrl('resultBg'),
|
||
// imageUrl('resultBack'),
|
||
// imageUrl('resultNext'),
|
||
// imageUrl('resultGoOnBt'),
|
||
|
||
// imageUrl('historyBg'), // 中奖历史弹窗
|
||
|
||
// imageUrl(getImgName('helpBg')), // 帮助弹窗
|
||
|
||
// imageUrl('rechargeHelpBg'), // 充值帮助弹窗
|
||
|
||
// imageUrl('withdrawHelpBg'), // 提现帮助弹窗
|
||
]
|
||
|
||
await preloadImages(criticalImages)
|
||
}
|
||
|
||
// 预加载其他图片
|
||
const preloadOtherImages = async () => {
|
||
const criticalImages = []
|
||
await preloadImagesIdle(criticalImages)
|
||
}
|
||
|
||
// 完成预加载
|
||
const completePreloading = async () => {
|
||
try {
|
||
// 执行所有初始化操作
|
||
await Promise.all([
|
||
// initData(),
|
||
preloadCriticalImages(),
|
||
])
|
||
} catch (error) {
|
||
console.error('预加载过程中发生错误:', error)
|
||
} finally {
|
||
// 无论成功或失败都结束加载状态
|
||
isLoading.value = false
|
||
|
||
// 等待 DOM 更新后执行 observe
|
||
await nextTick()
|
||
if (RankingLoadmore.value) {
|
||
console.log('监控加载模块')
|
||
observer.observe(RankingLoadmore.value)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 使用工具函数连接APP
|
||
const connectToAppHandler = async () => {
|
||
await connectToApp(() => {
|
||
// 连接成功回调
|
||
completePreloading() // 完成预加载
|
||
})
|
||
}
|
||
|
||
// 启动倒计时
|
||
const startCountdown = () => {
|
||
getCountdown() // 立即执行一次
|
||
timer = setInterval(getCountdown, 1000) //倒计时每秒更新
|
||
}
|
||
|
||
// 触发节流获取排行榜
|
||
const debouceGetRanking = useThrottle(() => {
|
||
getRechargeRanking() //加载新的排行榜项
|
||
}, 1000)
|
||
|
||
// IntersectionObserver配置
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.intersectionRatio > 0 && rechargeRankingTotal.value.length != 0) {
|
||
console.log('触发RankingLoadmore加载')
|
||
debouceGetRanking()
|
||
}
|
||
})
|
||
})
|
||
|
||
// 组件挂载时检测环境
|
||
onMounted(async () => {
|
||
console.log('route.query.activeAction:', route.query.activeAction)
|
||
if (route.query.activeAction == 'withdraw') {
|
||
handleBt('lottery') // 抽奖模块
|
||
changeModule('withdraw') // 提现标签页
|
||
drawerShowBt('transfer') // 转账抽屉
|
||
} else {
|
||
handleBt('ranking')
|
||
}
|
||
|
||
await connectToAppHandler()
|
||
initData()
|
||
|
||
startCountdown() //开启倒计时
|
||
|
||
preloadOtherImages() // 预加载其他图片
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
clearInterval(timer) //摧毁计时器
|
||
clearPayee() // 清空收款人信息
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
* {
|
||
color: #fff;
|
||
}
|
||
|
||
.fullPage {
|
||
position: relative;
|
||
background: #11032d;
|
||
}
|
||
|
||
.bg {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
position: relative;
|
||
z-index: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.background-overlay {
|
||
position: absolute;
|
||
inset: 236vw 0 0;
|
||
background-image: var(--bg2-url);
|
||
background-repeat: repeat-y;
|
||
background-position: top center;
|
||
background-size: 100% auto;
|
||
z-index: 0; /* 确保在.bg之下 */
|
||
}
|
||
|
||
.grayscale-container {
|
||
filter: grayscale(100%) brightness(90%);
|
||
}
|
||
|
||
.ranking-bg {
|
||
background-color: #450b08;
|
||
background-image: var(--ranking-bg-url);
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
|
||
position: absolute;
|
||
inset: 15vw 2vw 4vw;
|
||
z-index: 1;
|
||
}
|
||
|
||
.timeText {
|
||
color: #fff;
|
||
font-weight: 590;
|
||
font-size: 1.7em;
|
||
}
|
||
|
||
.timeGap {
|
||
width: 6px;
|
||
align-self: stretch;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.btTitle {
|
||
color: #fff;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.topTitle {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
.history-name {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.history-time {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.Textlittle {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.timeBox {
|
||
padding: 4vw 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 添加加载动画样式 */
|
||
.loading-container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #666;
|
||
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.reward-wrapper {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
[dir='rtl'] .reward-wrapper {
|
||
left: 4vw;
|
||
right: 15vw;
|
||
}
|
||
|
||
@keyframes scroll-left {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
@keyframes scroll-right {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(50%);
|
||
}
|
||
}
|
||
|
||
.scroll-wrapper {
|
||
display: flex;
|
||
width: fit-content;
|
||
}
|
||
|
||
[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;
|
||
}
|
||
|
||
.scroll-content {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
[dir='ltr'] .scroll-content {
|
||
margin-left: 4vw;
|
||
}
|
||
|
||
[dir='rtl'] .scroll-content {
|
||
margin-left: auto;
|
||
margin-right: 4vw;
|
||
}
|
||
|
||
.ruleBt {
|
||
width: 5vw;
|
||
min-width: 0;
|
||
display: block;
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 5px;
|
||
}
|
||
|
||
[dir='rtl'] .ruleBt {
|
||
left: 5px;
|
||
right: auto;
|
||
}
|
||
|
||
.scrollY::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 金币网格 */
|
||
.coin-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
// transition: all 0.2s;
|
||
aspect-ratio: 1/1;
|
||
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(64, 64, 64, 0.5);
|
||
background: rgba(240, 240, 240, 0.3);
|
||
box-shadow:
|
||
-42px 103px 31px 0 rgba(145, 145, 145, 0),
|
||
-27px 66px 29px 0 rgba(145, 145, 145, 0.01),
|
||
-15px 37px 24px 0 rgba(145, 145, 145, 0.03),
|
||
-7px 17px 18px 0 rgba(145, 145, 145, 0.04),
|
||
-2px 4px 10px 0 rgba(145, 145, 145, 0.05);
|
||
backdrop-filter: blur(7.5px);
|
||
direction: ltr;
|
||
}
|
||
|
||
.coin-item.selected {
|
||
border-radius: 11px;
|
||
border: 2px solid #ced1ff;
|
||
box-shadow:
|
||
-0.25px -0.25px 1px 0 #655dff,
|
||
0.25px 0.25px 1px 0 #735dff,
|
||
0 0 3px 0 rgba(93, 96, 255, 0.8),
|
||
0 0 5px 0 rgba(93, 104, 255, 0.6),
|
||
0 0 4px 0 rgba(0, 0, 210, 0.3);
|
||
}
|
||
|
||
.coin-item:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.resultNum {
|
||
position: absolute;
|
||
z-index: 9999;
|
||
inset: 0;
|
||
top: -8vw;
|
||
|
||
padding-right: 8%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
font-size: 0.9em;
|
||
font-weight: 590;
|
||
|
||
background: linear-gradient(0deg, #f3b700 0%, #ffeec6 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
[dir='rtl'] .resultNum {
|
||
direction: ltr;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.rotated {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
[dir='rtl'] .flipImg {
|
||
transform: scaleX(-1);
|
||
}
|
||
|
||
[dir='rtl'] .flipImg.rotated {
|
||
transform: scaleX(-1) rotate(90deg);
|
||
}
|
||
|
||
@media screen and (max-width: 360px) {
|
||
* {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 360px) {
|
||
* {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
* {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1024px) {
|
||
* {
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
|
||
[dir='rtl'] .timeBox {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.helpInfo {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
gap: 1vw;
|
||
}
|
||
|
||
.helpInfo > p {
|
||
color: #fff;
|
||
font-size: 1.2em;
|
||
font-weight: 700;
|
||
}
|
||
</style>
|