feat(邀请新用户页面): 使用网络图片，并对接图片的缓存，预加载等功能
This commit is contained in:
hzj
parent
e47f2b9299
commit
f95db045c9
@ -1,5 +1,6 @@
|
||||
<!-- src/views/Invitation/InviteToRegister.vue -->
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<div class="fullPage" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
|
||||
<div style="position: absolute; top: 0; left: 0; width: 100%">
|
||||
<GeneralHeader
|
||||
:isHomePage="true"
|
||||
@ -13,7 +14,8 @@
|
||||
<div style="padding: 87% 0 5%">
|
||||
<img
|
||||
v-if="showBindingBt"
|
||||
:src="images.enterCode"
|
||||
v-smart-img
|
||||
:src="imageUrl('enterCode')"
|
||||
alt=""
|
||||
width="40%"
|
||||
@click="enterCodeShow = true"
|
||||
@ -21,7 +23,8 @@
|
||||
/>
|
||||
<img
|
||||
v-else-if="myInviter.inviterInfo?.userId"
|
||||
:src="images.privateChat"
|
||||
v-smart-img
|
||||
:src="imageUrl('privateChat')"
|
||||
alt=""
|
||||
width="40%"
|
||||
@click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
|
||||
@ -33,26 +36,6 @@
|
||||
<div
|
||||
style="padding: 0 3%; display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px"
|
||||
>
|
||||
<!-- 倒计时 -->
|
||||
<!-- <div style="position: relative">
|
||||
<img :src="images.countdownBg" alt="" width="100%" style="display: block" />
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.2em;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
"
|
||||
>
|
||||
29D 23：23:23
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 我的邀请码 -->
|
||||
<div
|
||||
style="
|
||||
@ -81,6 +64,7 @@
|
||||
>
|
||||
<div style="font-weight: 590">{{ myInviteInfo.inviteCode || '' }}</div>
|
||||
<img
|
||||
v-smart-img
|
||||
src="../../assets/icon/copy.png"
|
||||
alt=""
|
||||
width="24px"
|
||||
@ -93,29 +77,45 @@
|
||||
</div>
|
||||
|
||||
<!-- 模块切换按钮 -->
|
||||
<div>
|
||||
<div
|
||||
v-if="showModule == 'list'"
|
||||
style="display: flex; justify-content: space-around; align-items: center"
|
||||
>
|
||||
<img :src="images.listBtActive" alt="" width="40%" style="display: block" />
|
||||
<div style="display: flex; justify-content: space-around; align-items: center">
|
||||
<!-- 列表按钮 -->
|
||||
<div style="width: 40%; position: relative">
|
||||
<img
|
||||
:src="images.rewardBt"
|
||||
v-smart-img
|
||||
:src="imageUrl('listBt')"
|
||||
alt=""
|
||||
width="40%"
|
||||
style="display: block"
|
||||
@click="showModule = 'reward'"
|
||||
/>
|
||||
</div>
|
||||
<div v-else style="display: flex; justify-content: space-around; align-items: center">
|
||||
<img
|
||||
:src="images.listBt"
|
||||
alt=""
|
||||
width="40%"
|
||||
style="display: block"
|
||||
style="display: block; width: 100%"
|
||||
:style="{ opacity: showModule === 'list' ? 0 : 1 }"
|
||||
@click="showModule = 'list'"
|
||||
/>
|
||||
<img :src="images.rewardBtActive" alt="" width="40%" style="display: block" />
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('listBtActive')"
|
||||
alt=""
|
||||
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
|
||||
:style="{ opacity: showModule === 'list' ? 1 : 0 }"
|
||||
@click="showModule = 'list'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 奖励按钮 -->
|
||||
<div style="width: 40%; position: relative">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('rewardBt')"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
:style="{ opacity: showModule === 'reward' ? 0 : 1 }"
|
||||
@click="showModule = 'reward'"
|
||||
/>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('rewardBtActive')"
|
||||
alt=""
|
||||
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
|
||||
:style="{ opacity: showModule === 'reward' ? 1 : 0 }"
|
||||
@click="showModule = 'reward'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -124,7 +124,13 @@
|
||||
<!-- 收入展示 -->
|
||||
<div style="display: flex; justify-content: space-around; align-items: center">
|
||||
<div style="position: relative; width: 47%">
|
||||
<img :src="images.totalIncome" alt="" width="100%" style="display: block" />
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('totalIncome')"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
@ -136,12 +142,24 @@
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img src="/src/assets/icon/coin.png" alt="" width="10%" style="display: block" />
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
width="10%"
|
||||
style="display: block"
|
||||
/>
|
||||
<div style="font-weight: 590">{{ myInviteIncome.totalIncome || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative; width: 47%">
|
||||
<img :src="images.todayIncome" alt="" width="100%" style="display: block" />
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('todayIncome')"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
@ -153,7 +171,13 @@
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img src="/src/assets/icon/coin.png" alt="" width="10%" style="display: block" />
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/coin.png"
|
||||
alt=""
|
||||
width="10%"
|
||||
style="display: block"
|
||||
/>
|
||||
<div style="font-weight: 590">{{ myInviteIncome.todayIncome || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -287,7 +311,7 @@
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<img src="../../assets/icon/coin.png" alt="" width="15%" />
|
||||
<img v-smart-img src="/src/assets/icon/coin.png" alt="" width="15%" />
|
||||
<div style="color: #ffb627; font-size: 0.8em; font-weight: 590">
|
||||
{{ user.provideIncome || 0 }}
|
||||
</div>
|
||||
@ -300,7 +324,8 @@
|
||||
<div v-if="showModule == 'reward'" style="display: flex; flex-direction: column; gap: 12px">
|
||||
<div style="position: relative" v-for="poolItem in inviteAwardPool">
|
||||
<img
|
||||
:src="images[`reward${poolItem.quantity}people`]"
|
||||
v-smart-img
|
||||
:src="imageUrl(`reward${poolItem.quantity}people`)"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block"
|
||||
@ -319,7 +344,7 @@
|
||||
style="width: 45%; position: relative"
|
||||
v-for="(award, index) in poolItem.activityRewardPropsList"
|
||||
>
|
||||
<img :src="images.rewardItemBg" alt="" width="100%" />
|
||||
<img v-smart-img :src="imageUrl('rewardItemBg')" alt="" width="100%" />
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
@ -330,7 +355,7 @@
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img :src="award.cover" alt="" width="50%" />
|
||||
<img v-smart-img :src="award.cover" alt="" width="50%" />
|
||||
<div>{{ showAwardText(award) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -338,12 +363,13 @@
|
||||
<div style="display: flex; justify-content: center">
|
||||
<img
|
||||
v-if="poolItem.state == '1'"
|
||||
:src="images.receiveBtActive"
|
||||
v-smart-img
|
||||
:src="imageUrl('receiveBtActive')"
|
||||
alt=""
|
||||
width="35%"
|
||||
@click="receiveAward(poolItem.id)"
|
||||
/>
|
||||
<img v-else :src="images.receiveBt" alt="" width="35%" />
|
||||
<img v-else v-smart-img :src="imageUrl('receiveBt')" alt="" width="35%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -354,7 +380,7 @@
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
|
||||
<!-- 帮助模块 -->
|
||||
<div v-if="helpInfoShow" style="margin: 20% 10%; position: relative" @click.stop>
|
||||
<img :src="images.helpInfo" alt="" width="100%" />
|
||||
<img v-smart-img :src="imageUrl('helpInfo')" alt="" width="100%" />
|
||||
<div
|
||||
style="position: absolute; width: 8%; aspect-ratio: 1/1; top: 3.8%; right: 7%"
|
||||
@click="closedPopup"
|
||||
@ -408,7 +434,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 确认按钮 -->
|
||||
<img :src="images.confirm" alt="" width="25%" @click="confirm" />
|
||||
<img v-smart-img :src="imageUrl('confirm')" alt="" width="25%" @click="confirm" />
|
||||
</div>
|
||||
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 510; font-size: 0.7em">
|
||||
*Only users who registered within 72 hours can fill in the invitation code. Once the
|
||||
@ -434,7 +460,7 @@
|
||||
|
||||
<script setup>
|
||||
import { gotoPrivateChat } from '@/utils/appBridge.js'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import maskLayer from '../../components/MaskLayer.vue'
|
||||
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
|
||||
@ -449,18 +475,11 @@ import {
|
||||
getMyInviter, // 获取我的邀请人信息
|
||||
} from '@/api/invitation.js'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
import { getPngUrl } from '@/config/imagePaths.js'
|
||||
import { preloadImages } from '@/utils/imagePreloader.js'
|
||||
|
||||
// vite动态导入图片
|
||||
const imageModules = import.meta.glob('@/assets/images/InvitationNewUser/*.{png,jpg,svg}', {
|
||||
eager: true,
|
||||
})
|
||||
// 生成文件名映射对象（自动移除路径和扩展名）
|
||||
const images = Object.fromEntries(
|
||||
Object.entries(imageModules).map(([path, module]) => {
|
||||
const fileName = path.split('/').pop().split('.')[0]
|
||||
return [fileName, module.default]
|
||||
})
|
||||
)
|
||||
// 获取OSS图片URL的函数
|
||||
const imageUrl = (filename) => getPngUrl('invitation/InviteNewUser/', filename)
|
||||
|
||||
const { copy, isSupported } = useClipboard()
|
||||
|
||||
@ -599,6 +618,38 @@ const receiveAward = async (awardId) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 预加载关键图片
|
||||
const preloadCriticalImages = () => {
|
||||
const criticalImages = [
|
||||
imageUrl('bg'),
|
||||
imageUrl('enterCode'),
|
||||
imageUrl('privateChat'),
|
||||
imageUrl('listBtActive'),
|
||||
imageUrl('rewardBt'),
|
||||
imageUrl('listBt'),
|
||||
imageUrl('rewardBtActive'),
|
||||
imageUrl('totalIncome'),
|
||||
imageUrl('todayIncome'),
|
||||
imageUrl('helpInfo'),
|
||||
imageUrl('confirm'),
|
||||
imageUrl('rewardItemBg'),
|
||||
imageUrl('receiveBtActive'),
|
||||
imageUrl('receiveBt'),
|
||||
imageUrl('reward5people'),
|
||||
imageUrl('reward10people'),
|
||||
imageUrl('reward15people'),
|
||||
]
|
||||
|
||||
// 动态添加奖励图片
|
||||
if (inviteAwardPool.value && Array.isArray(inviteAwardPool.value)) {
|
||||
inviteAwardPool.value.forEach((poolItem) => {
|
||||
criticalImages.push(imageUrl(`reward${poolItem.quantity}people`))
|
||||
})
|
||||
}
|
||||
|
||||
preloadImages(criticalImages, { useSmartCache: true })
|
||||
}
|
||||
|
||||
// 页面初始化数据
|
||||
const initData = () => {
|
||||
apiGetMyInviteCode() // 获取我的邀请码
|
||||
@ -613,6 +664,7 @@ const connectToAppHandler = async () => {
|
||||
await connectToApp(() => {
|
||||
// 连接成功回调
|
||||
initData()
|
||||
preloadCriticalImages() // 预加载关键图片
|
||||
})
|
||||
}
|
||||
|
||||
@ -631,7 +683,7 @@ onMounted(() => {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-color: #5b4a8a;
|
||||
background-image: url(../../assets/images/InvitationNewUser/bg.png);
|
||||
background-image: var(--bg-url);
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user