hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(邀请新用户活动): 补充图片预加载和最小高度

Browse Source
This commit is contained in:
hzj 2026-03-04 18:56:45 +08:00
parent 717b2c34ed
commit 2c5d184beb
1 changed files with 60 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/views/Invitation/inviteNewUser.vue
View File

@ -31,14 +31,15 @@
<!-- 打开输入邀请码 -->
<itemCenter
v-if="leftBtType === 'enterCode'"
style="width: 40%"
style="width: 40%; min-height: 15.63vw"
:imgUrl="imageUrl('BtBg')"
:contentStyle="``"
@click="enterCodeShow = true"
>
<div style="font-weight: 590; font-size: 0.7em">{{ t('enter_invitation_code') }}</div>
</itemCenter>
<!-- <itemCenter
style="width: 40%"
style="width: 40%; min-height: 15.63vw"
:imgUrl="imageUrl('BtBg')"
:contentStyle="`direction: ltr;justify-content: center;inset: 1vw 6vw 0 1vw;`"
@click="enterCodeShow = true"
@ -49,7 +50,7 @@
<!-- 前往邀请人信息页 -->
<itemCenter
v-else-if="leftBtType === 'privateChat'"
style="width: 40%"
style="width: 40%; min-height: 15.63vw"
:imgUrl="imageUrl('BtBg')"
:contentStyle="``"
@click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
@ -57,7 +58,7 @@
<div style="font-weight: 590; font-size: 1.1em">{{ t('contact_your_inviter') }}</div>
</itemCenter>
<!-- <itemCenter
style="width: 40%"
style="width: 40%; min-height: 15.63vw"
:imgUrl="imageUrl('BtBg')"
:contentStyle="`direction: ltr;justify-content: center;inset: 1vw 6vw 0 1vw;`"
@click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
@ -69,7 +70,7 @@
<!-- 主体内容 -->
<div
style="
padding: 130vw 3vw 0;
padding-top: 130vw;
display: flex;
flex-direction: column;
@ -78,9 +79,9 @@
>
<!-- 我的邀请码 -->
<itemCenter
style=""
style="min-height: 141vw"
:imgUrl="imageUrl(getImgName('myCode'))"
:contentStyle="`padding: 98vw 10vw 14vw;flex-direction: column;justify-content: flex-start;gap: 0vw;`"
:contentStyle="`padding: 105vw 10vw 14vw;flex-direction: column;justify-content: flex-start;gap: 0vw;`"
>
<!-- 邀请码 -->
<div
@ -113,7 +114,14 @@
</itemCenter>
<!-- 模块切换按钮 -->
<div style="display: flex; justify-content: space-around; align-items: center">
<div
style="
min-height: 22.07vw;
display: flex;
justify-content: space-around;
align-items: center;
"
>
<!-- 收益模块按钮 -->
<div style="width: 40%; position: relative; min-height: max-content">
<img
@ -162,18 +170,18 @@
>
<!-- 收入展示 -->
<itemCenter
style=""
style="min-height: 100vw"
:imgUrl="imageUrl('incomeBg')"
:contentStyle="`padding: 42vw 8vw 18vw 7vw;display:grid;grid-template-columns: repeat(2, 1fr);gap: 4vw;`"
:contentStyle="`padding: 44vw 8vw 18vw 7vw;display:grid;grid-template-columns: repeat(2, 1fr);gap: 4vw;`"
>
<!-- 更多按钮 -->
<div
style="
position: absolute;
z-index: 2;
width: 20vw;
height: 7.5vw;
top: 30vw;
width: 22vw;
height: 10vw;
top: 31vw;
right: 6vw;
"
@click="incomeShow = true"
@ -314,12 +322,16 @@
<!-- 排行榜 -->
<div v-show="rankShow">
<itemCenter
style=""
style="min-height: 205.33vw"
:imgUrl="imageUrl('rankingBg')"
:contentStyle="`padding: 10vw 6vw 10vw;flex-direction: column;justify-content: flex-start;gap:4vw`"
>
<!-- 倒计时 -->
<itemCenter style="width: 85%" :imgUrl="imageUrl('timeBg')" :contentStyle="``">
<itemCenter
style="width: 85%; min-height: 11.33vw"
:imgUrl="imageUrl('timeBg')"
:contentStyle="``"
>
<div class="timeBox">
<div class="timeText" style="">{{ WDays }}Day</div>
<div class="timeText timeGap"></div>
@ -349,7 +361,7 @@
style="display: flex; flex-direction: column; width: 100%; gap: 2vw"
>
<itemCenter
style=""
style="min-height: 22.33vw"
v-for="(listItem, index) in rankingTotal"
:key="listItem.userId"
:imgUrl="imageUrl('rankItemBg')"
@ -456,7 +468,7 @@
>
<itemCenter
v-for="(rewardsTop, index) in rankingRewards"
style=""
style="min-height: 100vw"
:imgUrl="imageUrl(`rewardTop${index + 1}Bg`)"
:contentStyle="`padding: 35vw 9vw 18vw;align-items: flex-start;gap: 10vw;`"
>
@ -514,7 +526,7 @@
<!-- 我的排名 -->
<itemCenter
v-show="showModule == 'ranking' && rankShow"
style="position: fixed; bottom: 0; z-index: 3"
style="min-height: 25.33vw; position: fixed; bottom: 0; z-index: 3"
:imgUrl="imageUrl('rankItemBg')"
:contentStyle="`padding: 0 7vw`"
>
@ -617,7 +629,7 @@
@click="closedPopup"
>
<itemCenter
style="width: 100vw"
style="width: 100vw; min-height: 240.66vw"
:imgUrl="imageUrl(getImgName('enterCodeBg'))"
:contentStyle="`padding: 31.5vw 6vw 10vw;display: flex;flex-direction: column;justify-content: flex-start;`"
@click.stop
@ -787,7 +799,7 @@
>
<!-- 收益&列表 -->
<itemCenter
style=""
style="min-height: 176.66vw"
:imgUrl="imageUrl('incomeListBg')"
:contentStyle="`padding: 37vw 6.5vw 10vw 5.5vw;flex-direction: column;gap: 4vw;justify-content: flex-start;`"
@click.stop
@ -799,7 +811,7 @@
height: 37vw;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5vw;
gap: 6vw;
"
>
<!-- 总邀请人数 -->
@ -1433,7 +1445,32 @@ const getRanking = async () => {
// 预加载关键图片
const preloadCriticalImages = async () => {
const criticalImages = []
const criticalImages = [
imageUrl('bg1'),
imageUrl('bg2'),
imageUrl('bg3'),
imageUrl('BtBg'),
imageUrl(getImgName('myCode')),
imageUrl(getImgName('incomeBtActive')),
imageUrl(getImgName('incomeBt')),
imageUrl(getImgName('earningsRankingBtActive')),
imageUrl(getImgName('earningsRankingBt')),
imageUrl('incomeBg'),
imageUrl(getImgName('example')),
imageUrl(getImgName('rankBt')),
imageUrl(getImgName('rewardBt')),
imageUrl('rankingBg'),
imageUrl('timeBg'),
imageUrl('rankItemBg'),
imageUrl('rewardTop1Bg'),
imageUrl('rewardTop2Bg'),
imageUrl('rewardTop3Bg'),
imageUrl('inviteFriendsBt'),
imageUrl('rankItemBg'),
imageUrl(getImgName('helpInfo')),
imageUrl(getImgName('enterCodeBg')),
imageUrl('incomeListBg'),
]
await preloadImages(criticalImages)
}
@ -1494,7 +1531,7 @@ onUnmounted(() => {
.fullPage {
width: 100vw;
min-height: 100vh;
background-color: #220c34;
background-color: #c7432d;
position: relative;
}