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