feat(申请靓号页面): 补充预加载动画
This commit is contained in:
hzj
parent
f2fad920da
commit
ed387b7090
@ -1,135 +1,149 @@
|
|||||||
<!-- src/views/Activities/Reward/RechargeReward.vue -->
|
<!-- src/views/Activities/Reward/RechargeReward.vue -->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="fullPage">
|
||||||
<!-- Rewards0.png 使用相对定位容器 -->
|
<!-- 预加载状态 -->
|
||||||
<itemCenter :imgUrl="imageUrl('goodID0')" :contentStyle="`display: block;`">
|
<div v-if="isLoading" class="loading-container">
|
||||||
<!-- 帮助按钮 -->
|
<div class="loading-spinner"></div>
|
||||||
<img
|
<p>{{ $t('loading') }}...</p>
|
||||||
v-smart-img
|
</div>
|
||||||
: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"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 用户财富等级、靓号申请窗口 -->
|
<!-- 主要内容 -->
|
||||||
<itemCenter
|
<div v-else>
|
||||||
style="position: absolute; top: 65%"
|
<!-- Rewards0.png 使用相对定位容器 -->
|
||||||
:imgUrl="imageUrl('applyBg')"
|
<itemCenter :imgUrl="imageUrl('goodID0')" :contentStyle="`display: block;`">
|
||||||
: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
|
<img
|
||||||
v-smart-img
|
v-smart-img
|
||||||
:src="imageUrl(getImgName('rule'))"
|
:src="imageUrl('help')"
|
||||||
alt=""
|
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
|
<itemCenter
|
||||||
v-show="tipShow"
|
style="position: absolute; top: 65%"
|
||||||
style="position: fixed; top: 50vh; display: flex; justify-content: center; width: 100vw"
|
: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
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -160,6 +174,9 @@ const currentLangType = computed(() => {
|
|||||||
return langStore.selectedLang?.type || 'en'
|
return langStore.selectedLang?.type || 'en'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 预加载状态
|
||||||
|
const isLoading = ref(true)
|
||||||
|
|
||||||
// 获取OSS图片URL的函数
|
// 获取OSS图片URL的函数
|
||||||
const imageUrl = (filename) => getPngUrl('GoodID/', filename)
|
const imageUrl = (filename) => getPngUrl('GoodID/', filename)
|
||||||
// 根据语言获取图片名
|
// 根据语言获取图片名
|
||||||
@ -254,17 +271,30 @@ const preloadCriticalImages = () => {
|
|||||||
]
|
]
|
||||||
|
|
||||||
if (currentLangType.value == 'en') {
|
if (currentLangType.value == 'en') {
|
||||||
preloadImages(criticalImages)
|
return preloadImages(criticalImages)
|
||||||
} else if (currentLangType.value == 'ar') {
|
} 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
|
// 使用工具函数连接APP
|
||||||
const connectToAppHandler = async () => {
|
const connectToAppHandler = async () => {
|
||||||
await connectToApp(() => {
|
await connectToApp(() => {
|
||||||
preloadCriticalImages() //预加载关键图片
|
// 连接成功回调
|
||||||
initData() // 初始化数据
|
completePreloading() // 完成预加载
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -278,6 +308,13 @@ onMounted(() => {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fullPage {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
background-color: #9d5225;
|
||||||
|
}
|
||||||
|
|
||||||
.textGold {
|
.textGold {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
255deg,
|
255deg,
|
||||||
@ -297,6 +334,36 @@ input::placeholder {
|
|||||||
color: #fff;
|
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) {
|
@media screen and (max-width: 360px) {
|
||||||
* {
|
* {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user