From bfdd4cdcf0e16fd3ac7b968bbbdf6b89d5772c50 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 25 Dec 2025 18:50:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=82=80=E8=AF=B7=E6=96=B0=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E9=A1=B5=E9=9D=A2):=20=E6=96=B0=E5=A2=9E=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E9=A2=84=E5=8A=A0=E8=BD=BD=E7=BC=93=E5=86=B2=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=EF=BC=8C=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=9A=84=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Invitation/InviteToRegister.vue | 917 ++++++++++++----------
 1 file changed, 491 insertions(+), 426 deletions(-)

diff --git a/src/views/Invitation/InviteToRegister.vue b/src/views/Invitation/InviteToRegister.vue
index 48c35c2..431d127 100644
--- a/src/views/Invitation/InviteToRegister.vue
+++ b/src/views/Invitation/InviteToRegister.vue
@@ -1,299 +1,248 @@
 <!-- src/views/Invitation/InviteToRegister.vue -->
 <template>
   <div class="fullPage" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
-    <div style="position: absolute; top: 0; left: 0; width: 100%">
-      <GeneralHeader
-        :isHomePage="true"
-        :showHelp="true"
-        :backImg="imgUrl"
-        :title="t('invitation_to_register')"
-        @help="helpInfoShow = true"
-      />
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
     </div>
 
-    <!-- 确认邀请码 -->
-    <div class="leftBt">
-      <img
-        v-if="leftBtType === 'enterCode'"
-        v-smart-img
-        :src="imageUrl(getImgName('enterCode'))"
-        alt=""
-        width="40%"
-        @click="enterCodeShow = true"
-        style="display: block"
-      />
-      <img
-        v-else-if="leftBtType === 'privateChat'"
-        v-smart-img
-        :src="imageUrl(getImgName('privateChat'))"
-        alt=""
-        width="40%"
-        @click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
-        style="display: block"
-      />
-    </div>
-
-    <!-- 主体内容 -->
-    <div
-      style="
-        padding: 93vw 3vw 0;
-
-        display: flex;
-        flex-direction: column;
-        gap: 2vw;
-      "
-    >
-      <!-- 我的邀请码 -->
-      <itemCenter
-        style=""
-        :imgUrl="imageUrl(getImgName('myCode'))"
-        :contentStyle="`padding: 26vw 6vw 16vw;`"
-      >
-        <div
-          style="
-            width: 100%;
-            padding: 3vw 1vw;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 4px;
-          "
-        >
-          <div style="font-weight: 590; font-size: 1.1em">{{ myInviteInfo.inviteCode || '' }}</div>
-          <img
-            v-if="myInviteInfo.inviteCode"
-            v-smart-img
-            src="../../assets/icon/copy.png"
-            alt=""
-            style="display: block; width: 2em; object-fit: cover"
-            @click="copyCode(myInviteInfo.inviteCode || '')"
-          />
-        </div>
-      </itemCenter>
-
-      <!-- 模块切换按钮 -->
-      <div style="display: flex; justify-content: space-around; align-items: center">
-        <!-- 奖励按钮 -->
-        <div style="width: 40%; position: relative">
-          <img
-            v-smart-img
-            :src="imageUrl(getImgName('processBt'))"
-            alt=""
-            style="display: block; width: 100%"
-            :style="{ opacity: showModule === 'process' ? 0 : 1 }"
-            @click="showModule = 'process'"
-          />
-          <img
-            v-smart-img
-            :src="imageUrl(getImgName('processBtActive'))"
-            alt=""
-            style="display: block; width: 100%; position: absolute; top: 0; left: 0"
-            :style="{ opacity: showModule === 'process' ? 1 : 0 }"
-            @click="showModule = 'process'"
-          />
-        </div>
-
-        <!-- 列表按钮 -->
-        <div style="width: 40%; position: relative">
-          <img
-            v-smart-img
-            :src="imageUrl(getImgName('listBt'))"
-            alt=""
-            style="display: block; width: 100%"
-            :style="{ opacity: showModule === 'list' ? 0 : 1 }"
-            @click="showModule = 'list'"
-          />
-          <img
-            v-smart-img
-            :src="imageUrl(getImgName('listBtActive'))"
-            alt=""
-            style="display: block; width: 100%; position: absolute; top: 0; left: 0"
-            :style="{ opacity: showModule === 'list' ? 1 : 0 }"
-            @click="showModule = 'list'"
-          />
-        </div>
+    <!-- 主要内容 -->
+    <div v-else>
+      <div style="position: absolute; top: 0; left: 0; width: 100%">
+        <GeneralHeader
+          :isHomePage="true"
+          :showHelp="true"
+          :backImg="imgUrl"
+          :title="t('invitation_to_register')"
+          @help="helpInfoShow = true"
+        />
       </div>
 
-      <!-- 邀请列表模块 -->
-      <div v-if="showModule == 'list'" style="display: flex; flex-direction: column; gap: 2vw">
-        <!-- 收入展示 -->
+      <!-- 确认邀请码 -->
+      <div class="leftBt">
+        <img
+          v-if="leftBtType === 'enterCode'"
+          v-smart-img
+          :src="imageUrl(getImgName('enterCode'))"
+          alt=""
+          width="40%"
+          @click="enterCodeShow = true"
+          style="display: block"
+        />
+        <img
+          v-else-if="leftBtType === 'privateChat'"
+          v-smart-img
+          :src="imageUrl(getImgName('privateChat'))"
+          alt=""
+          width="40%"
+          @click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
+          style="display: block"
+        />
+      </div>
+
+      <!-- 主体内容 -->
+      <div
+        style="
+          padding: 93vw 3vw 0;
+
+          display: flex;
+          flex-direction: column;
+          gap: 2vw;
+        "
+      >
+        <!-- 我的邀请码 -->
         <itemCenter
           style=""
-          :imgUrl="imageUrl(getImgName('incomeBg'))"
-          :contentStyle="`padding: 32vw 6vw 18vw;display:grid;grid-template-columns: repeat(2, 1fr);gap: 3.8vw;`"
-        >
-          <!-- 总邀请人数 -->
-          <div
-            style="
-              align-self: stretch;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              padding: 2vw;
-            "
-          >
-            <div style="font-weight: 700; font-size: 0.9em">{{ t('total_invitations') }}</div>
-            <div style="font-weight: 600; font-size: 1.2em">
-              {{ myInviteIncome.validInviteCount || 0 }}
-            </div>
-          </div>
-
-          <!-- 今日邀请人数 -->
-          <div
-            style="
-              align-self: stretch;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              padding: 2vw;
-            "
-          >
-            <div style="font-weight: 700; font-size: 0.9em">{{ t('todays_invitation') }}</div>
-            <div style="font-weight: 600; font-size: 1.2em">
-              {{ myInviteIncome.todayInviteCount || 0 }}
-            </div>
-          </div>
-
-          <!-- 总收入 -->
-          <div
-            style="
-              align-self: stretch;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              padding: 2vw;
-            "
-          >
-            <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
-                src="/src/assets/icon/coin.png"
-                alt=""
-                style="display: block; width: 1.5em"
-              />
-              <div style="font-weight: 600; font-size: 1.2em">
-                {{ myInviteIncome.totalIncome || 0 }}
-              </div>
-            </div>
-          </div>
-
-          <!-- 今日收入 -->
-          <div
-            style="
-              align-self: stretch;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              padding: 2vw;
-            "
-          >
-            <div style="font-weight: 700; font-size: 0.9em">{{ t('todays_income') }}</div>
-            <div style="display: flex; align-items: center">
-              <img
-                v-smart-img
-                src="/src/assets/icon/coin.png"
-                alt=""
-                style="display: block; width: 1.5em"
-              />
-              <div style="font-weight: 600; font-size: 1.2em">
-                {{ myInviteIncome.todayIncome || 0 }}
-              </div>
-            </div>
-          </div>
-        </itemCenter>
-
-        <!-- 列表 -->
-        <itemCenter
-          style=""
-          :imgUrl="imageUrl(getImgName('listBg'))"
-          :contentStyle="`padding: 25vw 6vw 10vw;`"
+          :imgUrl="imageUrl(getImgName('myCode'))"
+          :contentStyle="`padding: 26vw 6vw 16vw;`"
         >
           <div
             style="
-              align-self: stretch;
               width: 100%;
-              border-radius: 8px;
-              background: rgba(194, 174, 232, 0.2);
-              backdrop-filter: blur(32px);
-              padding: 8px;
-
+              padding: 3vw 1vw;
               display: flex;
-              flex-direction: column;
+              justify-content: center;
+              align-items: center;
               gap: 4px;
             "
           >
-            <!-- 头部 -->
-            <div style="width: 100%; display: flex; align-items: center">
-              <!-- user项 -->
-              <div style="flex: 1; font-weight: 590; font-size: 1em; text-align: center">
-                {{ t('users') }}
-              </div>
+            <div style="font-weight: 590; font-size: 1.1em">
+              {{ myInviteInfo.inviteCode || '' }}
+            </div>
+            <img
+              v-if="myInviteInfo.inviteCode"
+              v-smart-img
+              src="../../assets/icon/copy.png"
+              alt=""
+              style="display: block; width: 2em; object-fit: cover"
+              @click="copyCode(myInviteInfo.inviteCode || '')"
+            />
+          </div>
+        </itemCenter>
 
-              <!-- 时间项 -->
-              <div
-                style="
-                  flex: 1;
-                  font-weight: 590;
-                  display: flex;
-                  justify-content: space-between;
-                  align-items: center;
-                "
-              >
-                <!-- 分割线 -->
-                <div
-                  style="
-                    width: 1px;
-                    height: 16px;
-                    background: linear-gradient(
-                      rgba(217, 217, 217, 0) 0%,
-                      #d9d9d9 50%,
-                      rgba(217, 217, 217, 0) 100%
-                    );
-                  "
-                ></div>
+        <!-- 模块切换按钮 -->
+        <div style="display: flex; justify-content: space-around; align-items: center">
+          <!-- 奖励按钮 -->
+          <div style="width: 40%; position: relative">
+            <img
+              v-smart-img.noFade
+              :src="imageUrl(getImgName('processBt'))"
+              alt=""
+              style="display: block; width: 100%"
+              :style="{ opacity: showModule === 'process' ? 0 : 1 }"
+              @click="showModule = 'process'"
+            />
+            <img
+              v-smart-img.noFade
+              :src="imageUrl(getImgName('processBtActive'))"
+              alt=""
+              style="display: block; width: 100%; position: absolute; top: 0; left: 0"
+              :style="{ opacity: showModule === 'process' ? 1 : 0 }"
+              @click="showModule = 'process'"
+            />
+          </div>
 
-                <div style="font-weight: 590; font-size: 1em; text-align: center">
-                  {{ t('unbinding_time') }}
-                </div>
+          <!-- 列表按钮 -->
+          <div style="width: 40%; position: relative">
+            <img
+              v-smart-img.noFade
+              :src="imageUrl(getImgName('listBt'))"
+              alt=""
+              style="display: block; width: 100%"
+              :style="{ opacity: showModule === 'list' ? 0 : 1 }"
+              @click="showModule = 'list'"
+            />
+            <img
+              v-smart-img.noFade
+              :src="imageUrl(getImgName('listBtActive'))"
+              alt=""
+              style="display: block; width: 100%; position: absolute; top: 0; left: 0"
+              :style="{ opacity: showModule === 'list' ? 1 : 0 }"
+              @click="showModule = 'list'"
+            />
+          </div>
+        </div>
 
-                <!-- 分割线 -->
-                <div
-                  style="
-                    width: 1px;
-                    height: 16px;
-                    background: linear-gradient(
-                      rgba(217, 217, 217, 0) 0%,
-                      #d9d9d9 50%,
-                      rgba(217, 217, 217, 0) 100%
-                    );
-                  "
-                ></div>
-              </div>
-
-              <!-- 收入项 -->
-              <div
-                style="
-                  flex: 1;
-                  font-weight: 590;
-                  text-align: end;
-                  font-size: 1em;
-                  text-align: center;
-                "
-              >
-                {{ t('prowide_income') }}
+        <!-- 邀请列表模块 -->
+        <div v-if="showModule == 'list'" style="display: flex; flex-direction: column; gap: 2vw">
+          <!-- 收入展示 -->
+          <itemCenter
+            style=""
+            :imgUrl="imageUrl(getImgName('incomeBg'))"
+            :contentStyle="`padding: 32vw 6vw 18vw;display:grid;grid-template-columns: repeat(2, 1fr);gap: 3.8vw;`"
+          >
+            <!-- 总邀请人数 -->
+            <div
+              style="
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                padding: 2vw;
+              "
+            >
+              <div style="font-weight: 700; font-size: 0.9em">{{ t('total_invitations') }}</div>
+              <div style="font-weight: 600; font-size: 1.2em">
+                {{ myInviteIncome.validInviteCount || 0 }}
               </div>
             </div>
 
-            <!-- 列表项 -->
-            <div class="overflow-y-auto" style="align-self: stretch; width: 100%">
-              <div
-                v-for="user in myInviteUsers"
-                style="width: 100%; display: flex; align-items: center"
-              >
-                <div style="flex: 1; font-weight: 590; font-size: 1em; text-align: center">
-                  {{ t('user_id_prefix') }}{{ user.invitedUserAccount || '-' }}
+            <!-- 今日邀请人数 -->
+            <div
+              style="
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                padding: 2vw;
+              "
+            >
+              <div style="font-weight: 700; font-size: 0.9em">{{ t('todays_invitation') }}</div>
+              <div style="font-weight: 600; font-size: 1.2em">
+                {{ myInviteIncome.todayInviteCount || 0 }}
+              </div>
+            </div>
+
+            <!-- 总收入 -->
+            <div
+              style="
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                padding: 2vw;
+              "
+            >
+              <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
+                  src="/src/assets/icon/coin.png"
+                  alt=""
+                  style="display: block; width: 1.5em"
+                />
+                <div style="font-weight: 600; font-size: 1.2em">
+                  {{ myInviteIncome.totalIncome || 0 }}
                 </div>
+              </div>
+            </div>
+
+            <!-- 今日收入 -->
+            <div
+              style="
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                padding: 2vw;
+              "
+            >
+              <div style="font-weight: 700; font-size: 0.9em">{{ t('todays_income') }}</div>
+              <div style="display: flex; align-items: center">
+                <img
+                  v-smart-img
+                  src="/src/assets/icon/coin.png"
+                  alt=""
+                  style="display: block; width: 1.5em"
+                />
+                <div style="font-weight: 600; font-size: 1.2em">
+                  {{ myInviteIncome.todayIncome || 0 }}
+                </div>
+              </div>
+            </div>
+          </itemCenter>
+
+          <!-- 列表 -->
+          <itemCenter
+            style=""
+            :imgUrl="imageUrl(getImgName('listBg'))"
+            :contentStyle="`padding: 25vw 6vw 10vw;`"
+          >
+            <div
+              style="
+                align-self: stretch;
+                width: 100%;
+                border-radius: 8px;
+                background: rgba(194, 174, 232, 0.2);
+                backdrop-filter: blur(32px);
+                padding: 8px;
+
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+              "
+            >
+              <!-- 头部 -->
+              <div style="width: 100%; display: flex; align-items: center">
+                <!-- user项 -->
+                <div style="flex: 1; font-weight: 590; font-size: 1em; text-align: center">
+                  {{ t('users') }}
+                </div>
+
+                <!-- 时间项 -->
                 <div
                   style="
                     flex: 1;
@@ -303,6 +252,7 @@
                     align-items: center;
                   "
                 >
+                  <!-- 分割线 -->
                   <div
                     style="
                       width: 1px;
@@ -314,9 +264,12 @@
                       );
                     "
                   ></div>
-                  <div style="font-weight: 590; font-size: 1em">
-                    {{ user.remainingDays || 0 }}{{ t('day_unit') }}
+
+                  <div style="font-weight: 590; font-size: 1em; text-align: center">
+                    {{ t('unbinding_time') }}
                   </div>
+
+                  <!-- 分割线 -->
                   <div
                     style="
                       width: 1px;
@@ -329,164 +282,229 @@
                     "
                   ></div>
                 </div>
+
+                <!-- 收入项 -->
                 <div
                   style="
                     flex: 1;
+                    font-weight: 590;
+                    text-align: end;
+                    font-size: 1em;
+                    text-align: center;
+                  "
+                >
+                  {{ t('prowide_income') }}
+                </div>
+              </div>
+
+              <!-- 列表项 -->
+              <div class="overflow-y-auto" style="align-self: stretch; width: 100%">
+                <div
+                  v-for="user in myInviteUsers"
+                  style="width: 100%; display: flex; align-items: center"
+                >
+                  <div style="flex: 1; font-weight: 590; font-size: 1em; text-align: center">
+                    {{ t('user_id_prefix') }}{{ user.invitedUserAccount || '-' }}
+                  </div>
+                  <div
+                    style="
+                      flex: 1;
+                      font-weight: 590;
+                      display: flex;
+                      justify-content: space-between;
+                      align-items: center;
+                    "
+                  >
+                    <div
+                      style="
+                        width: 1px;
+                        height: 16px;
+                        background: linear-gradient(
+                          rgba(217, 217, 217, 0) 0%,
+                          #d9d9d9 50%,
+                          rgba(217, 217, 217, 0) 100%
+                        );
+                      "
+                    ></div>
+                    <div style="font-weight: 590; font-size: 1em">
+                      {{ user.remainingDays || 0 }}{{ t('day_unit') }}
+                    </div>
+                    <div
+                      style="
+                        width: 1px;
+                        height: 16px;
+                        background: linear-gradient(
+                          rgba(217, 217, 217, 0) 0%,
+                          #d9d9d9 50%,
+                          rgba(217, 217, 217, 0) 100%
+                        );
+                      "
+                    ></div>
+                  </div>
+                  <div
+                    style="
+                      flex: 1;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      gap: 4px;
+                    "
+                  >
+                    <img
+                      v-smart-img
+                      src="/src/assets/icon/coin.png"
+                      alt=""
+                      style="display: block; width: 1.1em"
+                    />
+                    <div style="color: #ffb627; font-size: 1em; font-weight: 590">
+                      {{ user.provideIncome || 0 }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </itemCenter>
+        </div>
+
+        <!-- 流程说明模块 -->
+        <div v-if="showModule == 'process'" style="position: relative">
+          <img
+            v-smart-img
+            :src="imageUrl(getImgName('example'))"
+            alt=""
+            width="100%"
+            style="display: block"
+          />
+        </div>
+      </div>
+
+      <!-- 弹窗遮罩层 -->
+      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+        <!-- 帮助模块 -->
+        <div v-if="helpInfoShow" style="margin: 20% 0; position: relative" @click.stop>
+          <img
+            v-smart-img
+            :src="imageUrl(getImgName('helpInfo'))"
+            alt=""
+            width="100%"
+            style="display: block"
+          />
+        </div>
+
+        <!-- 输入邀请码模块 -->
+        <div
+          v-if="enterCodeShow"
+          style="
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          "
+          @click="closedPopup"
+        >
+          <itemCenter
+            style=""
+            :imgUrl="imageUrl(getImgName('enterCodeBg'))"
+            :contentStyle="`padding: 31.5vw 6vw 10vw;display: flex;flex-direction: column;justify-content: space-between;`"
+            @click.stop
+          >
+            <!-- 邀请码 -->
+            <div class="bindingUserCode">
+              <!-- 输入框 -->
+              <input
+                v-model="invitationCode"
+                type="text"
+                style="
+                  width: 44.5vw;
+                  min-width: 0;
+                  align-self: stretch;
+
+                  color: white;
+                  font-weight: 510;
+
+                  padding: 4px 8px;
+                  border: none;
+                  outline: none;
+                  background-color: transparent;
+                "
+                @keyup.enter="confirmInvitationCode"
+              />
+
+              <!-- 按钮 -->
+              <div style="width: 16vw" @click="confirm"></div>
+            </div>
+
+            <!-- 礼物 -->
+            <div
+              style="
+                width: 100%;
+                height: 28vw;
+
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                gap: 1.5vw;
+              "
+            >
+              <div
+                v-for="reward in bindingUserRewards"
+                style="align-self: stretch; display: flex; flex-direction: column"
+              >
+                <div
+                  style="
+                    width: 100%;
+                    min-width: 0;
+                    aspect-ratio: 1/1;
+
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    gap: 4px;
                   "
                 >
                   <img
                     v-smart-img
-                    src="/src/assets/icon/coin.png"
+                    :src="reward.cover || ''"
                     alt=""
-                    style="display: block; width: 1.1em"
+                    width="70%"
+                    style="display: block; object-fit: cover"
+                    @error="(e) => handleRewardImageError(e, reward.type)"
                   />
-                  <div style="color: #ffb627; font-size: 1em; font-weight: 590">
-                    {{ user.provideIncome || 0 }}
-                  </div>
+                </div>
+                <div
+                  style="
+                    width: 100%;
+                    min-width: 0;
+                    flex: 1;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  {{ showDetail(reward) }}
                 </div>
               </div>
             </div>
-          </div>
-        </itemCenter>
-      </div>
+          </itemCenter>
+        </div>
+      </maskLayer>
 
-      <!-- 流程说明模块 -->
-      <div v-if="showModule == 'process'" style="position: relative">
-        <img
-          v-smart-img
-          :src="imageUrl(getImgName('example'))"
-          alt=""
-          width="100%"
-          style="display: block"
-        />
-      </div>
-    </div>
-
-    <!-- 弹窗遮罩层 -->
-    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
-      <!-- 帮助模块 -->
-      <div v-if="helpInfoShow" style="margin: 20% 0; position: relative" @click.stop>
-        <img
-          v-smart-img
-          :src="imageUrl(getImgName('helpInfo'))"
-          alt=""
-          width="100%"
-          style="display: block"
-        />
-      </div>
-
-      <!-- 输入邀请码模块 -->
+      <!-- 提示弹窗 -->
       <div
-        v-if="enterCodeShow"
-        style="
-          width: 100vw;
-          height: 100vh;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        "
-        @click="closedPopup"
+        v-show="tipShow"
+        style="position: fixed; top: 50vh; display: flex; justify-content: center; width: 100vw"
       >
-        <itemCenter
-          style=""
-          :imgUrl="imageUrl(getImgName('enterCodeBg'))"
-          :contentStyle="`padding: 31.5vw 6vw 10vw;display: flex;flex-direction: column;justify-content: space-between;`"
-          @click.stop
+        <div
+          style="
+            padding: 12px;
+            border-radius: 8px;
+            background: rgba(0, 0, 0, 0.4);
+            font-weight: 600;
+          "
         >
-          <!-- 邀请码 -->
-          <div class="bindingUserCode">
-            <!-- 输入框 -->
-            <input
-              v-model="invitationCode"
-              type="text"
-              style="
-                width: 44.5vw;
-                min-width: 0;
-                align-self: stretch;
-
-                color: white;
-                font-weight: 510;
-
-                padding: 4px 8px;
-                border: none;
-                outline: none;
-                background-color: transparent;
-              "
-              @keyup.enter="confirmInvitationCode"
-            />
-
-            <!-- 按钮 -->
-            <div style="width: 16vw" @click="confirm"></div>
-          </div>
-
-          <!-- 礼物 -->
-          <div
-            style="
-              width: 100%;
-              height: 28vw;
-
-              display: grid;
-              grid-template-columns: repeat(4, 1fr);
-              gap: 1.5vw;
-            "
-          >
-            <div
-              v-for="reward in bindingUserRewards"
-              style="align-self: stretch; display: flex; flex-direction: column"
-            >
-              <div
-                style="
-                  width: 100%;
-                  min-width: 0;
-                  aspect-ratio: 1/1;
-
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                "
-              >
-                <img
-                  v-smart-img
-                  :src="reward.cover || ''"
-                  alt=""
-                  width="70%"
-                  style="display: block; object-fit: cover"
-                  @error="(e) => handleRewardImageError(e, reward.type)"
-                />
-              </div>
-              <div
-                style="
-                  width: 100%;
-                  min-width: 0;
-                  flex: 1;
-
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                "
-              >
-                {{ showDetail(reward) }}
-              </div>
-            </div>
-          </div>
-        </itemCenter>
-      </div>
-    </maskLayer>
-
-    <!-- 提示弹窗 -->
-    <div
-      v-show="tipShow"
-      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"
-      >
-        {{ t('copied_successfully') }}
+          {{ t('copied_successfully') }}
+        </div>
       </div>
     </div>
   </div>
@@ -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 = () => {
-  apiGetMyInviteCode() // 获取我的邀请码
-  apiGetMyInviter() // 获取我的邀请人信息
-  apiGetMyInviteIncome() // 获取收益统计
-  apiGetMyInviteUsers() // 有效邀请用户列表
-  getBindingUserRewards() // 绑定用户奖励
+const initData = async () => {
+  await Promise.all([
+    apiGetMyInviteCode(), // 获取我的邀请码
+    apiGetMyInviter(), // 获取我的邀请人信息
+    apiGetMyInviteIncome(), // 获取收益统计
+    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()
-    preloadCriticalImages() // 预加载关键图片
+    completePreloading() // 完成预加载
   })
 }
 
@@ -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;