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 2025-12-25 18:50:58 +08:00
parent 042de97624
commit bfdd4cdcf0
1 changed files with 491 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/views/Invitation/InviteToRegister.vue
View File

@ -1,6 +1,14 @@
<!-- src/views/Invitation/InviteToRegister.vue -->
<template>
<div class="fullPage" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
<!-- 预加载状态 -->
<div v-if="isLoading" class="loading-container">
<div class="loading-spinner"></div>
<p>{{ $t('loading') }}...</p>
</div>
<!-- 主要内容 -->
<div v-else>
<div style="position: absolute; top: 0; left: 0; width: 100%">
<GeneralHeader
:isHomePage="true"
@ -59,7 +67,9 @@
gap: 4px;
"
>
<div style="font-weight: 590; font-size: 1.1em">{{ myInviteInfo.inviteCode || '' }}</div>
<div style="font-weight: 590; font-size: 1.1em">
{{ myInviteInfo.inviteCode || '' }}
</div>
<img
v-if="myInviteInfo.inviteCode"
v-smart-img
@ -76,7 +86,7 @@
<!-- 奖励按钮 -->
<div style="width: 40%; position: relative">
<img
v-smart-img
v-smart-img.noFade
:src="imageUrl(getImgName('processBt'))"
alt=""
style="display: block; width: 100%"
@ -84,7 +94,7 @@
@click="showModule = 'process'"
/>
<img
v-smart-img
v-smart-img.noFade
:src="imageUrl(getImgName('processBtActive'))"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
@ -96,7 +106,7 @@
<!-- 列表按钮 -->
<div style="width: 40%; position: relative">
<img
v-smart-img
v-smart-img.noFade
:src="imageUrl(getImgName('listBt'))"
alt=""
style="display: block; width: 100%"
@ -104,7 +114,7 @@
@click="showModule = 'list'"
/>
<img
v-smart-img
v-smart-img.noFade
:src="imageUrl(getImgName('listBtActive'))"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
@ -164,7 +174,9 @@
padding: 2vw;
"
>
<div style="font-weight: 700; font-size: 0.9em">{{ t('invitation_total_income') }}</div>
<div style="font-weight: 700; font-size: 0.9em">
{{ t('invitation_total_income') }}
</div>
<div style="display: flex; align-items: center">
<img
v-smart-img
@ -484,12 +496,18 @@
style="position: fixed; top: 50vh; display: flex; justify-content: center; width: 100vw"
>
<div
style="padding: 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.4); font-weight: 600"
style="
padding: 12px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.4);
font-weight: 600;
"
>
{{ t('copied_successfully') }}
</div>
</div>
</div>
</div>
</template>
<script setup>
@ -536,6 +554,9 @@ const imageUrl = (filename) => getPngUrl('invitation/InviteNewUser/', filename)
const { copy, isSupported } = useClipboard()
// 预加载状态
const isLoading = ref(true)
const helpInfoShow = ref(false) //帮助模块
const enterCodeShow = ref(false) //交易弹窗
const tipShow = ref(false) //提示弹窗
@ -686,9 +707,9 @@ const getBindingUserRewards = async () => {
}
// 预加载关键图片
const preloadCriticalImages = () => {
const preloadCriticalImages = async () => {
const criticalImages = [
imageUrl('bg'),
// imageUrl('bg'),
imageUrl('enterCode'),
imageUrl('enterCodeBg'),
imageUrl('example'),
@ -704,7 +725,7 @@ const preloadCriticalImages = () => {
]
const criticalImages_ar = [
imageUrl('bg'),
// imageUrl('bg'),
imageUrl('enterCode_ar'),
imageUrl('enterCodeBg_ar'),
imageUrl('example_ar'),
@ -720,27 +741,41 @@ const preloadCriticalImages = () => {
]
if (currentLangType.value == 'en') {
preloadImages(criticalImages)
await preloadImages(criticalImages)
} else if (currentLangType.value == 'ar') {
preloadImages(criticalImages_ar)
await preloadImages(criticalImages_ar)
}
}
// 页面初始化数据
const initData = () => {
apiGetMyInviteCode() // 获取我的邀请码
apiGetMyInviter() // 获取我的邀请人信息
apiGetMyInviteIncome() // 获取收益统计
apiGetMyInviteUsers() // 有效邀请用户列表
getBindingUserRewards() // 绑定用户奖励
const initData = async () => {
await Promise.all([
apiGetMyInviteCode(), // 获取我的邀请码
apiGetMyInviter(), // 获取我的邀请人信息
apiGetMyInviteIncome(), // 获取收益统计
apiGetMyInviteUsers(), // 有效邀请用户列表
getBindingUserRewards(), // 绑定用户奖励
])
}
// 完成预加载
const completePreloading = async () => {
try {
// 执行所有初始化操作
await Promise.all([initData(), preloadCriticalImages()])
} catch (error) {
console.error('预加载过程中发生错误:', error)
} finally {
// 无论成功或失败都结束加载状态
isLoading.value = false
}
}
// 使用工具函数连接APP
const connectToAppHandler = async () => {
await connectToApp(() => {
// 连接成功回调
initData()
preloadCriticalImages() // 预加载关键图片
completePreloading() // 完成预加载
})
}
@ -794,6 +829,36 @@ onMounted(() => {
justify-content: space-between;
}
/* 添加加载动画样式 */
.loading-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #666;
}
.loading-spinner {
width: 32px;
height: 32px;
border: 3px solid #f3f3f3;
border-top: 3px solid #f59e0b;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 12px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media screen and (max-width: 360px) {
* {
font-size: 12px;