From ed387b7090d6575f9a92df6da552fe0537f51e0d Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Mon, 5 Jan 2026 19:24:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=94=B3=E8=AF=B7=E9=9D=93=E5=8F=B7?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2):=20=E8=A1=A5=E5=85=85=E9=A2=84=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/GoodID/index.vue | 319 ++++++++++++++++++++++---------------
 1 file changed, 193 insertions(+), 126 deletions(-)

diff --git a/src/views/GoodID/index.vue b/src/views/GoodID/index.vue
index 68521c0..9fad832 100644
--- a/src/views/GoodID/index.vue
+++ b/src/views/GoodID/index.vue
@@ -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;