feat(申请靓号页面): 补充预加载动画
This commit is contained in:
hzj
parent
f2fad920da
commit
ed387b7090
@ -1,135 +1,149 @@
|
||||
<!-- src/views/Activities/Reward/RechargeReward.vue -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- Rewards0.png 使用相对定位容器 -->
|
||||
<itemCenter :imgUrl="imageUrl('goodID0')" :contentStyle="`display: block;`">
|
||||
<!-- 帮助按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl('help')"
|
||||
alt=""
|
||||
style="
|
||||
position: absolute;
|
||||
top: 57%;
|
||||
right: 4%;
|
||||
display: block;
|
||||
width: 10vw;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
"
|
||||
@click="maskLayerShow = true"
|
||||
/>
|
||||
<div class="fullPage">
|
||||
<!-- 预加载状态 -->
|
||||
<div v-if="isLoading" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>{{ $t('loading') }}...</p>
|
||||
</div>
|
||||
|
||||
<!-- 用户财富等级、靓号申请窗口 -->
|
||||
<itemCenter
|
||||
style="position: absolute; top: 65%"
|
||||
:imgUrl="imageUrl('applyBg')"
|
||||
:contentStyle="`display: block;`"
|
||||
>
|
||||
<!-- 财富等级 -->
|
||||
<div style="height: 46%; display: flex; justify-content: center; align-items: center">
|
||||
<div
|
||||
style="
|
||||
width: 50%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
font-weight: 700;
|
||||
font-size: 0.9em;
|
||||
|
||||
background: linear-gradient(0deg, #fff 0%, #ffe656 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
>
|
||||
{{ t('my_wealth_level') }} {{ wealthLevel }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 22%;
|
||||
|
||||
width: 79%;
|
||||
height: 30%;
|
||||
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<!-- 输入框 -->
|
||||
<input
|
||||
v-model="goodId"
|
||||
type="text"
|
||||
:placeholder="t('good_id_placeholder')"
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 1.1em;
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
"
|
||||
@keyup.enter="confirm"
|
||||
/>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('applyBt'))"
|
||||
alt=""
|
||||
style="height: 70%; display: block"
|
||||
@click="confirm"
|
||||
/>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 其他图片直接引入 -->
|
||||
<img v-smart-img :src="imageUrl('goodID1')" alt="" style="width: 100%; display: block" />
|
||||
<img v-smart-img :src="imageUrl('goodID2')" alt="" style="width: 100%; display: block" />
|
||||
|
||||
<!-- 弹窗遮罩层 -->
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||
<!-- help弹窗 -->
|
||||
<div style="margin: 20% 0" @click.stop>
|
||||
<!-- 主要内容 -->
|
||||
<div v-else>
|
||||
<!-- Rewards0.png 使用相对定位容器 -->
|
||||
<itemCenter :imgUrl="imageUrl('goodID0')" :contentStyle="`display: block;`">
|
||||
<!-- 帮助按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rule'))"
|
||||
:src="imageUrl('help')"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 57%;
|
||||
right: 4%;
|
||||
display: block;
|
||||
width: 10vw;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
"
|
||||
@click="maskLayerShow = true"
|
||||
/>
|
||||
</div>
|
||||
</maskLayer>
|
||||
|
||||
<!-- 提示弹窗 -->
|
||||
<div
|
||||
v-show="tipShow"
|
||||
style="position: fixed; top: 50vh; display: flex; justify-content: center; width: 100vw"
|
||||
>
|
||||
<!-- 用户财富等级、靓号申请窗口 -->
|
||||
<itemCenter
|
||||
style="position: absolute; top: 65%"
|
||||
:imgUrl="imageUrl('applyBg')"
|
||||
:contentStyle="`display: block;`"
|
||||
>
|
||||
<!-- 财富等级 -->
|
||||
<div style="height: 46%; display: flex; justify-content: center; align-items: center">
|
||||
<div
|
||||
style="
|
||||
width: 50%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
font-weight: 700;
|
||||
font-size: 0.9em;
|
||||
|
||||
background: linear-gradient(0deg, #fff 0%, #ffe656 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
>
|
||||
{{ t('my_wealth_level') }} {{ wealthLevel }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 22%;
|
||||
|
||||
width: 79%;
|
||||
height: 30%;
|
||||
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<!-- 输入框 -->
|
||||
<input
|
||||
v-model="goodId"
|
||||
type="text"
|
||||
:placeholder="t('good_id_placeholder')"
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 1.1em;
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
"
|
||||
@keyup.enter="confirm"
|
||||
/>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('applyBt'))"
|
||||
alt=""
|
||||
style="height: 70%; display: block"
|
||||
@click="confirm"
|
||||
/>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 其他图片直接引入 -->
|
||||
<img v-smart-img :src="imageUrl('goodID1')" alt="" style="width: 100%; display: block" />
|
||||
<img v-smart-img :src="imageUrl('goodID2')" alt="" style="width: 100%; display: block" />
|
||||
|
||||
<!-- 弹窗遮罩层 -->
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||
<!-- help弹窗 -->
|
||||
<div style="margin: 20% 0" @click.stop>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="imageUrl(getImgName('rule'))"
|
||||
alt=""
|
||||
style="display: block; width: 100%"
|
||||
/>
|
||||
</div>
|
||||
</maskLayer>
|
||||
|
||||
<!-- 提示弹窗 -->
|
||||
<div
|
||||
style="padding: 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.4); font-weight: 600"
|
||||
v-show="tipShow"
|
||||
style="position: fixed; top: 50vh; display: flex; justify-content: center; width: 100vw"
|
||||
>
|
||||
{{ tipText }}
|
||||
<div
|
||||
style="
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
{{ tipText }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -160,6 +174,9 @@ const currentLangType = computed(() => {
|
||||
return langStore.selectedLang?.type || 'en'
|
||||
})
|
||||
|
||||
// 预加载状态
|
||||
const isLoading = ref(true)
|
||||
|
||||
// 获取OSS图片URL的函数
|
||||
const imageUrl = (filename) => getPngUrl('GoodID/', filename)
|
||||
// 根据语言获取图片名
|
||||
@ -254,17 +271,30 @@ const preloadCriticalImages = () => {
|
||||
]
|
||||
|
||||
if (currentLangType.value == 'en') {
|
||||
preloadImages(criticalImages)
|
||||
return preloadImages(criticalImages)
|
||||
} else if (currentLangType.value == 'ar') {
|
||||
preloadImages(criticalImages_ar)
|
||||
return preloadImages(criticalImages_ar)
|
||||
}
|
||||
}
|
||||
|
||||
// 完成预加载
|
||||
const completePreloading = async () => {
|
||||
try {
|
||||
// 执行所有初始化操作
|
||||
await Promise.all([initData(), preloadCriticalImages()])
|
||||
} catch (error) {
|
||||
console.error('预加载过程中发生错误:', error)
|
||||
} finally {
|
||||
// 无论成功或失败都结束加载状态
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 使用工具函数连接APP
|
||||
const connectToAppHandler = async () => {
|
||||
await connectToApp(() => {
|
||||
preloadCriticalImages() //预加载关键图片
|
||||
initData() // 初始化数据
|
||||
// 连接成功回调
|
||||
completePreloading() // 完成预加载
|
||||
})
|
||||
}
|
||||
|
||||
@ -278,6 +308,13 @@ onMounted(() => {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
background-color: #9d5225;
|
||||
}
|
||||
|
||||
.textGold {
|
||||
background: linear-gradient(
|
||||
255deg,
|
||||
@ -297,6 +334,36 @@ input::placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 添加加载动画样式 */
|
||||
.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: 10px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user