feat(申请靓号页面): 补充预加载动画

src/views/GoodID/index.vue

@@ -1,6 +1,14 @@
 <!-- src/views/Activities/Reward/RechargeReward.vue -->
 <template>
-  <div>
+  <div class="fullPage">
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
+    </div>
+
+    <!-- 主要内容 -->
+    <div v-else>
       <!-- Rewards0.png 使用相对定位容器 -->
       <itemCenter :imgUrl="imageUrl('goodID0')" :contentStyle="`display: block;`">
         <!-- 帮助按钮 -->
@@ -127,12 +135,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;
+          "
         >
           {{ tipText }}
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -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;