From d28977202a628ba1c539333df5477430c31f2208 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 5 Dec 2025 11:39:52 +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):=20=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/invitation.js                     |   8 +-
 src/main.js                               |   1 -
 src/views/Invitation/InviteToRegister.vue | 763 ++++++++++++----------
 3 files changed, 429 insertions(+), 343 deletions(-)

diff --git a/src/api/invitation.js b/src/api/invitation.js
index a253cac..31f783f 100644
--- a/src/api/invitation.js
+++ b/src/api/invitation.js
@@ -60,13 +60,13 @@ export const getMyInviteUsers = async () => {
   }
 }
 
-// 邀请用户奖励池
-export const getInviteAwardPool = async () => {
+// 获取绑定用户奖励
+export const apiGetBindingUserRewards = async (data) => {
   try {
-    const response = await get(`/activity/invite/user/award/pool`)
+    const response = await post(`/props-activity/reward/client/map/config-info`, data)
     return response
   } catch (error) {
-    console.error('Failed to fetch get my invite award pool:', error)
+    console.error('Failed to fetch get binding user rewards:', error)
     console.error('error:' + error.response.errorMsg)
     throw error
   }
diff --git a/src/main.js b/src/main.js
index 0086a96..e2935d8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,7 +43,6 @@ const RankingPage = [
 
 // 活动页面
 const ACTIVITIES = [
-  '/invitation-to-register', //邀请新用户（邀请码）
   '/recharge-reward', //充值奖励页面
 
   '/Lebanon-independence-day', //黎巴嫩独立日
diff --git a/src/views/Invitation/InviteToRegister.vue b/src/views/Invitation/InviteToRegister.vue
index 6fb0709..c4fe3f2 100644
--- a/src/views/Invitation/InviteToRegister.vue
+++ b/src/views/Invitation/InviteToRegister.vue
@@ -11,11 +11,11 @@
     </div>
 
     <!-- 确认邀请码 -->
-    <div style="padding: 87% 0 5%">
+    <div class="leftBt">
       <img
         v-if="showBindingBt"
         v-smart-img
-        :src="imageUrl('enterCode')"
+        :src="imageUrl(getImgName('enterCode'))"
         alt=""
         width="40%"
         @click="enterCodeShow = true"
@@ -24,7 +24,7 @@
       <img
         v-else-if="myInviter.inviterInfo?.userId"
         v-smart-img
-        :src="imageUrl('privateChat')"
+        :src="imageUrl(getImgName('privateChat'))"
         alt=""
         width="40%"
         @click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
@@ -34,28 +34,24 @@
 
     <!-- 主体内容 -->
     <div
-      style="padding: 0 3%; display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px"
+      style="
+        padding: 91vw 3vw 0;
+
+        display: flex;
+        flex-direction: column;
+        gap: 2vw;
+      "
     >
       <!-- 我的邀请码 -->
-      <div
-        style="
-          width: 100%;
-          border-radius: 8px;
-          background: rgba(194, 174, 232, 0.2);
-          backdrop-filter: blur(32px);
-          padding: 12px;
-          display: flex;
-          flex-direction: column;
-          gap: 4px;
-        "
-        @click.stop
+      <itemCenter
+        style=""
+        :imgUrl="imageUrl(getImgName('myCode'))"
+        :contentStyle="`padding: 26vw 6vw 16vw;`"
       >
-        <div style="font-weight: 590">My invitation code:</div>
         <div
           style="
-            border-radius: 8px;
-            background: rgba(255, 255, 255, 0.2);
-            padding: 12px;
+            width: 100%;
+            padding: 3vw 1vw;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -67,22 +63,39 @@
             v-smart-img
             src="../../assets/icon/copy.png"
             alt=""
-            width="24px"
+            style="display: block; width: 2em; object-fit: cover"
             @click="copyCode(myInviteInfo.inviteCode || '')"
           />
         </div>
-        <div style="font-weight: 510; font-size: 0.7em">
-          *Copy your invitation code and send it to your new friends.
-        </div>
-      </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('listBt')"
+            :src="imageUrl(getImgName('listBt'))"
             alt=""
             style="display: block; width: 100%"
             :style="{ opacity: showModule === 'list' ? 0 : 1 }"
@@ -90,58 +103,63 @@
           />
           <img
             v-smart-img
-            :src="imageUrl('listBtActive')"
+            :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 style="width: 40%; position: relative">
-          <img
-            v-smart-img
-            :src="imageUrl('rewardBt')"
-            alt=""
-            style="display: block; width: 100%"
-            :style="{ opacity: showModule === 'reward' ? 0 : 1 }"
-            @click="showModule = 'reward'"
-          />
-          <img
-            v-smart-img
-            :src="imageUrl('rewardBtActive')"
-            alt=""
-            style="display: block; width: 100%; position: absolute; top: 0; left: 0"
-            :style="{ opacity: showModule === 'reward' ? 1 : 0 }"
-            @click="showModule = 'reward'"
-          />
-        </div>
       </div>
 
       <!-- 邀请列表模块 -->
-      <div v-if="showModule == 'list'" style="display: flex; flex-direction: column; gap: 12px">
+      <div v-if="showModule == 'list'" style="display: flex; flex-direction: column; gap: 2vw">
         <!-- 收入展示 -->
-        <div style="display: flex; justify-content: space-around; align-items: center">
-          <div style="position: relative; width: 47%">
-            <img
-              v-smart-img
-              :src="imageUrl('totalIncome')"
-              alt=""
-              width="100%"
-              style="display: block"
-            />
-            <div
-              style="
-                position: absolute;
-                top: 40%;
-                width: 100%;
-                height: 60%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-              "
-            >
+        <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>Total invitations:</div>
+            <div>{{ myInviteIncome.validInviteCount || 0 }}</div>
+          </div>
+
+          <!-- 今日邀请人数 -->
+          <div
+            style="
+              align-self: stretch;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              padding: 2vw;
+            "
+          >
+            <div>Today's invitation:</div>
+            <div>{{ myInviteIncome.todayInviteCount || 0 }}</div>
+          </div>
+
+          <!-- 总收入 -->
+          <div
+            style="
+              align-self: stretch;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              padding: 2vw;
+            "
+          >
+            <div>Total income:</div>
+            <div style="display: flex; align-items: center">
               <img
                 v-smart-img
                 src="/src/assets/icon/coin.png"
@@ -152,25 +170,19 @@
               <div style="font-weight: 590">{{ myInviteIncome.totalIncome || 0 }}</div>
             </div>
           </div>
-          <div style="position: relative; width: 47%">
-            <img
-              v-smart-img
-              :src="imageUrl('todayIncome')"
-              alt=""
-              width="100%"
-              style="display: block"
-            />
-            <div
-              style="
-                position: absolute;
-                top: 40%;
-                width: 100%;
-                height: 60%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-              "
-            >
+
+          <!-- 今日邀请人数 -->
+          <div
+            style="
+              align-self: stretch;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              padding: 2vw;
+            "
+          >
+            <div>Today's income:</div>
+            <div style="display: flex; align-items: center">
               <img
                 v-smart-img
                 src="/src/assets/icon/coin.png"
@@ -181,198 +193,142 @@
               <div style="font-weight: 590">{{ myInviteIncome.todayIncome || 0 }}</div>
             </div>
           </div>
-        </div>
-
-        <!-- 邀请人数 -->
-        <div
-          style="
-            border-radius: 8px;
-            background: rgba(194, 174, 232, 0.2);
-            backdrop-filter: blur(32px);
-            padding: 12px;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-          "
-        >
-          <div
-            style="
-              width: 3px;
-              height: 12px;
-              flex-shrink: 0;
-              background: radial-gradient(323.25% 50.32% at 50% 50%, #d58ef4 0%, #7a5aff 100%);
-            "
-          ></div>
-          <div style="font-weight: 590">
-            Number of valid users invited: {{ myInviteIncome.validInviteCount || 0 }}
-          </div>
-        </div>
+        </itemCenter>
 
         <!-- 列表 -->
-        <div
-          style="
-            border-radius: 8px;
-            background: rgba(194, 174, 232, 0.2);
-            backdrop-filter: blur(32px);
-            padding: 8px;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-          "
+        <itemCenter
+          style=""
+          :imgUrl="imageUrl(getImgName('listBg'))"
+          :contentStyle="`padding: 25vw 6vw 10vw;`"
         >
-          <!-- 头部 -->
-          <div style="width: 100%; display: flex; align-items: center">
-            <div style="flex: 1; font-weight: 590; font-size: 0.85em">Users</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: 0.82em">Remaining time</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: 0.82em">
-              Prowide income
-            </div>
-          </div>
-
-          <!-- 列表项 -->
-          <div
-            v-for="user in myInviteUsers"
-            style="width: 100%; display: flex; align-items: center"
-          >
-            <div style="flex: 1; font-weight: 590; font-size: 0.7em">
-              ID:{{ 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: 0.7em">{{ user.remainingDays || 0 }}Day</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: flex-end;
-                align-items: center;
-                gap: 4px;
-              "
-            >
-              <img v-smart-img src="/src/assets/icon/coin.png" alt="" width="15%" />
-              <div style="color: #ffb627; font-size: 0.8em; font-weight: 590">
-                {{ user.provideIncome || 0 }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 奖励说明模块 -->
-      <div v-if="showModule == 'reward'" style="display: flex; flex-direction: column; gap: 12px">
-        <div style="position: relative" v-for="poolItem in inviteAwardPool">
-          <img
-            v-smart-img
-            :src="imageUrl(`reward${poolItem.quantity}people`)"
-            alt=""
-            width="100%"
-            style="display: block"
-          />
           <div
             style="
-              position: absolute;
-              inset: 12% 0 0;
+              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;
-              justify-content: space-around;
+              gap: 4px;
             "
           >
-            <div style="display: flex; justify-content: space-around">
+            <!-- 头部 -->
+            <div style="width: 100%; display: flex; align-items: center">
+              <div style="flex: 1; font-weight: 590; font-size: 0.85em">Users</div>
               <div
-                style="width: 45%; position: relative"
-                v-for="(award, index) in poolItem.activityRewardPropsList"
+                style="
+                  flex: 1;
+                  font-weight: 590;
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                "
               >
-                <img v-smart-img :src="imageUrl('rewardItemBg')" alt="" width="100%" />
                 <div
                   style="
-                    position: absolute;
-                    inset: 0;
+                    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: 0.82em">Remaining time</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: 0.82em">
+                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: 0.7em">
+                  ID:{{ user.invitedUserAccount || '-' }}
+                </div>
+                <div
+                  style="
+                    flex: 1;
+                    font-weight: 590;
                     display: flex;
-                    flex-direction: column;
-                    justify-content: center;
+                    justify-content: space-between;
                     align-items: center;
                   "
                 >
-                  <img v-smart-img :src="award.cover" alt="" width="50%" />
-                  <div>{{ showAwardText(award) }}</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 style="font-weight: 590; font-size: 0.7em">
+                    {{ user.remainingDays || 0 }}Day
+                  </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: flex-end;
+                    align-items: center;
+                    gap: 4px;
+                  "
+                >
+                  <img v-smart-img src="/src/assets/icon/coin.png" alt="" width="15%" />
+                  <div style="color: #ffb627; font-size: 0.8em; font-weight: 590">
+                    {{ user.provideIncome || 0 }}
+                  </div>
                 </div>
               </div>
             </div>
-            <div style="display: flex; justify-content: center">
-              <img
-                v-if="poolItem.state == '1'"
-                v-smart-img
-                :src="imageUrl('receiveBtActive')"
-                alt=""
-                width="35%"
-                @click="receiveAward(poolItem.id)"
-              />
-              <img v-else v-smart-img :src="imageUrl('receiveBt')" alt="" width="35%" />
-            </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>
 
@@ -380,11 +336,13 @@
     <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
       <!-- 帮助模块 -->
       <div v-if="helpInfoShow" style="margin: 20% 10%; position: relative" @click.stop>
-        <img v-smart-img :src="imageUrl('helpInfo')" alt="" width="100%" />
-        <div
-          style="position: absolute; width: 8%; aspect-ratio: 1/1; top: 3.8%; right: 7%"
-          @click="closedPopup"
-        ></div>
+        <img
+          v-smart-img
+          :src="imageUrl(getImgName('helpInfo'))"
+          alt=""
+          width="100%"
+          style="display: block"
+        />
       </div>
 
       <!-- 输入邀请码模块 -->
@@ -394,53 +352,95 @@
           width: 100vw;
           height: 100vh;
           display: flex;
+          flex-direction: column;
           justify-content: center;
           align-items: center;
         "
         @click="closedPopup"
       >
-        <div
-          style="
-            width: 80%;
-            border-radius: 12px;
-            background: #fff;
-            padding: 12px;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-          "
+        <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="color: rgba(0, 0, 0, 0.8); font-weight: 800">Enter Invitation Code</div>
-          <div style="display: flex; justify-content: space-between; align-items: center; gap: 8px">
-            <!-- 邀请码 -->
-            <div style="flex: 1">
-              <input
-                v-model="invitationCode"
-                type="text"
+          <!-- 邀请码 -->
+          <div class="bindingUserCode">
+            <!-- 输入框 -->
+            <input
+              v-model="invitationCode"
+              type="text"
+              style="
+                width: 44.5vw;
+                min-width: 0;
+                align-self: stretch;
+
+                color: rgba(0, 0, 0, 0.4);
+                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%;
-                  height: 100%;
-                  color: rgba(0, 0, 0, 0.4);
-                  font-weight: 510;
-                  border-radius: 8px;
-                  padding: 4px 8px;
-                  border: 1px solid rgba(0, 0, 0, 0.4);
-                  outline: none;
-                  background-color: transparent;
-                "
-                @keyup.enter="confirmInvitationCode"
-              />
-            </div>
+                  min-width: 0;
+                  aspect-ratio: 1/1;
 
-            <!-- 确认按钮 -->
-            <img v-smart-img :src="imageUrl('confirm')" alt="" width="25%" @click="confirm" />
+                  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) => handleImageError(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>
-          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 510; font-size: 0.7em">
-            *Only users who registered within 72 hours can fill in the invitation code. Once the
-            invitation code is flled in, itcannot be modifed.
-          </div>
-        </div>
+        </itemCenter>
       </div>
     </maskLayer>
 
@@ -459,27 +459,42 @@
 </template>
 
 <script setup>
-import { gotoPrivateChat } from '@/utils/appBridge.js'
 import { computed, onMounted, ref } from 'vue'
-import GeneralHeader from '@/components/GeneralHeader.vue'
-import maskLayer from '../../components/MaskLayer.vue'
+import { useLangStore } from '@/stores/lang'
+import { gotoPrivateChat } from '@/utils/appBridge.js'
 import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
 import { useClipboard } from '@vueuse/core'
+import { connectToApp } from '@/utils/appConnector.js'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+
 import {
   getMyInviteCode, // 获取我的邀请码
   bindInviteCode, // 绑定邀请码
   getMyInviteIncome, // 获取收益统计
   getMyInviteUsers, // 有效邀请用户列表
-  getInviteAwardPool, // 邀请用户奖励池
+  apiGetBindingUserRewards, // 获取绑定用户奖励
   getInviteReceiveAward, // 邀请用户领取奖励
   getMyInviter, // 获取我的邀请人信息
 } from '@/api/invitation.js'
-import { connectToApp } from '@/utils/appConnector.js'
-import { getPngUrl } from '@/config/imagePaths.js'
-import { preloadImages } from '@/utils/imagePreloader.js'
+
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import itemCenter from '@/components/itemCenter.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
 
 // 获取OSS图片URL的函数
-const imageUrl = (filename) => getPngUrl('invitation/InviteNewUser/', filename)
+const imageUrl = (filename) => getPngUrl('invitation/InviteNewUser2/', filename)
 
 const { copy, isSupported } = useClipboard()
 
@@ -492,9 +507,9 @@ const myInviteInfo = ref({}) //我的邀请信息
 const myInviter = ref({}) //我的邀请人信息
 const myInviteIncome = ref({}) //邀请用户收益统计
 const myInviteUsers = ref([]) //邀请用户列表
-const inviteAwardPool = ref({})
+const bindingUserRewards = ref([]) //绑定用户奖励
 
-const showModule = ref('list') //显示模块
+const showModule = ref('process') //显示模块
 
 const showBindingBt = computed(() => {
   return !myInviter.value.myInfo?.expired && !myInviter.value.inviterInfo
@@ -511,6 +526,30 @@ const closedPopup = () => {
   enterCodeShow.value = false
 }
 
+// 奖励图片资源出错处理
+const handleImageError = (e, type) => {
+  console.log('图片资源出错')
+  e.target.onerror = null //防止循环
+  if (type == 'GOLD') {
+    e.target.src = new URL('/src/assets/icon/coin.png', import.meta.url).href
+  }
+  if (type == 'DOLLARS') {
+    e.target.src = new URL('/src/assets/icon/dollar.png', import.meta.url).href
+  }
+}
+
+// 格式化奖励的展示信息
+const showDetail = (reward) => {
+  let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
+  if (showamount.includes(reward.type)) {
+    return reward.content
+  } else if (reward.type === 'DOLLARS') {
+    return `$${reward.content}`
+  } else {
+    return `${reward.quantity}Days`
+  }
+}
+
 // 复制到剪贴板（原生方法）
 const copyCode = (text) => {
   if (isSupported.value) {
@@ -595,14 +634,17 @@ const apiGetMyInviteUsers = async () => {
   const resUserList = await getMyInviteUsers()
   if (resUserList.status && resUserList.body) {
     myInviteUsers.value = resUserList.body
+    // myInviteUsers.value = Array(2).fill(resUserList.body).flat()
+    // myInviteUsers.value = []
   }
 }
 
-// 邀请用户奖励池
-const apiGetInviteAwardPool = async () => {
-  const resAwardPool = await getInviteAwardPool()
+// 绑定用户奖励
+const getBindingUserRewards = async () => {
+  let data = ['1983474358707736577']
+  const resAwardPool = await apiGetBindingUserRewards(data)
   if (resAwardPool.status && resAwardPool.body) {
-    inviteAwardPool.value = resAwardPool.body
+    bindingUserRewards.value = resAwardPool.body['1983474358707736577']
   }
 }
 
@@ -610,11 +652,10 @@ const apiGetInviteAwardPool = async () => {
 const receiveAward = async (awardId) => {
   try {
     await getInviteReceiveAward(awardId)
-    // apiGetInviteAwardPool() // 刷新奖励池
   } catch (error) {
     console.error('Failed to fetch receive award:', error)
   } finally {
-    apiGetInviteAwardPool() // 刷新奖励池
+    getBindingUserRewards() // 绑定用户奖励
   }
 }
 
@@ -623,31 +664,40 @@ const preloadCriticalImages = () => {
   const criticalImages = [
     imageUrl('bg'),
     imageUrl('enterCode'),
-    imageUrl('privateChat'),
-    imageUrl('listBtActive'),
-    imageUrl('rewardBt'),
-    imageUrl('listBt'),
-    imageUrl('rewardBtActive'),
-    imageUrl('totalIncome'),
-    imageUrl('todayIncome'),
+    imageUrl('enterCodeBg'),
+    imageUrl('example'),
     imageUrl('helpInfo'),
-    imageUrl('confirm'),
-    imageUrl('rewardItemBg'),
-    imageUrl('receiveBtActive'),
-    imageUrl('receiveBt'),
-    imageUrl('reward5people'),
-    imageUrl('reward10people'),
-    imageUrl('reward15people'),
+    imageUrl('incomeBg'),
+    imageUrl('listBg'),
+    imageUrl('listBt'),
+    imageUrl('listBtActive'),
+    imageUrl('myCode'),
+    imageUrl('privateChat'),
+    imageUrl('processBt'),
+    imageUrl('processBtActive'),
   ]
 
-  // 动态添加奖励图片
-  if (inviteAwardPool.value && Array.isArray(inviteAwardPool.value)) {
-    inviteAwardPool.value.forEach((poolItem) => {
-      criticalImages.push(imageUrl(`reward${poolItem.quantity}people`))
-    })
-  }
+  const criticalImages_ar = [
+    imageUrl('bg'),
+    imageUrl('enterCode_ar'),
+    imageUrl('enterCodeBg_ar'),
+    imageUrl('example_ar'),
+    imageUrl('helpInfo_ar'),
+    imageUrl('incomeBg_ar'),
+    imageUrl('listBg_ar'),
+    imageUrl('listBt_ar'),
+    imageUrl('listBtActive_ar'),
+    imageUrl('myCode_ar'),
+    imageUrl('privateChat_ar'),
+    imageUrl('processBt_ar'),
+    imageUrl('processBtActive_ar'),
+  ]
 
-  preloadImages(criticalImages)
+  if (currentLangType.value == 'en') {
+    preloadImages(criticalImages)
+  } else if (currentLangType.value == 'ar') {
+    preloadImages(criticalImages_ar)
+  }
 }
 
 // 页面初始化数据
@@ -656,7 +706,7 @@ const initData = () => {
   apiGetMyInviter() // 获取我的邀请人信息
   apiGetMyInviteIncome() // 获取收益统计
   apiGetMyInviteUsers() // 有效邀请用户列表
-  apiGetInviteAwardPool() // 邀请用户奖励池
+  getBindingUserRewards() // 绑定用户奖励
 }
 
 // 使用工具函数连接APP
@@ -689,6 +739,14 @@ onMounted(() => {
   position: relative;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-y-auto::-webkit-scrollbar {
+  display: none;
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
@@ -697,7 +755,7 @@ onMounted(() => {
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 16px;
+    font-size: 12px;
   }
 }
 
@@ -712,4 +770,33 @@ onMounted(() => {
     font-size: 32px;
   }
 }
+.leftBt {
+  position: absolute;
+  top: 75vw;
+  left: 0;
+  width: 100vw;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.bindingUserCode {
+  width: 100%;
+  padding-left: 3.5vw;
+  padding-right: 5vw;
+  height: 8vw;
+
+  display: flex;
+  justify-content: space-between;
+}
+
+[dir='rtl'] .leftBt {
+  align-items: flex-end;
+}
+
+[dir='rtl'] .bindingUserCode {
+  padding-left: 5vw;
+  padding-right: 3.5vw;
+}
 </style>