feat(邀请新用户页面): 新增图片预加载缓冲动画，并修复切换按钮的显示问题

src/views/Invitation/InviteToRegister.vue

@@ -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 = () => {
+const initData = async () => {
-  apiGetMyInviteCode() // 获取我的邀请码
+  await Promise.all([
-  apiGetMyInviter() // 获取我的邀请人信息
+    apiGetMyInviteCode(), // 获取我的邀请码
-  apiGetMyInviteIncome() // 获取收益统计
+    apiGetMyInviter(), // 获取我的邀请人信息
-  apiGetMyInviteUsers() // 有效邀请用户列表
+    apiGetMyInviteIncome(), // 获取收益统计
-  getBindingUserRewards() // 绑定用户奖励
+    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()
+    completePreloading() // 完成预加载
-    preloadCriticalImages() // 预加载关键图片
   })
 }
 
@@ -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;