feat(充值奖励页): 对接接口

src/views/Reward/RechargeReward.vue

@@ -8,7 +8,7 @@
         style="
           position: absolute;
           inset: 35% 20%;
-          height: 19%;
+          height: 18%;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
@@ -33,7 +33,7 @@
               "
             >
               <img
-                :src="''"
+                :src="userInfo.userAvatar || ''"
                 alt=""
                 style="
                   display: block;
@@ -48,20 +48,39 @@
           </div>
           <div
             style="
+              width: 100%;
+              min-width: 0; /* 关键：允许在 flex 容器中正确截断 */
               display: flex;
               flex-direction: column;
               justify-content: space-around;
-              align-items: center;
             "
           >
-            <div style="font-weight: 700">Nanfangjian</div>
-            <div style="font-weight: 700">ID:123456789</div>
+            <div
+              style="
+                font-weight: 700;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
+            >
+              {{ userInfo.userNickname }}111111111111111
+            </div>
+            <div
+              style="
+                font-weight: 700;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
+            >
+              ID:{{ userInfo.account }}
+            </div>
           </div>
         </div>
-        <div class="textGold" style="font-size: 0.9em; font-weight: 700">
-          Accumulated recharge:$999
-        </div>
         <div class="textGold" style="font-size: 0.8em; font-weight: 700">
+          Accumulated recharge:${{ userInfo.recharge }}
+        </div>
+        <div class="textGold" style="font-size: 0.7em; font-weight: 700">
           *Each user can only claim the reward for this event once.
         </div>
       </div>
@@ -77,6 +96,17 @@
 </template>
 
 <script setup>
+import { ref, watch, onMounted } from 'vue'
+import { connectToApp } from '@/utils/appConnector.js'
+import { getMemberProfile, getTotalRecharge } from '@/api/wallet'
+
+const userInfo = ref({
+  account: '',
+  userNickname: '',
+  userAvatar: '',
+  recharge: '',
+}) //个人信息
+
 // 使用与Lottery.vue相同的方式导入图片
 const imageModules = import.meta.glob('@/assets/images/RechargeReward/*.{jpg,png,svg}', {
   eager: true,
@@ -89,12 +119,42 @@ const images = Object.fromEntries(
   })
 )
 
+//获取累积充值信息
+const getTotalRechargeInfo = async () => {
+  // 连接成功回调
+  const resUserInfo = await getMemberProfile()
+  if (resUserInfo.status && resUserInfo.body) {
+    const res = await getTotalRecharge(resUserInfo.body.id)
+    if (res.status && res.body) {
+      console.log('resUserInfo:', resUserInfo.body)
+
+      userInfo.value = {
+        account: resUserInfo.body.account,
+        userNickname: resUserInfo.body.userNickname,
+        userAvatar: resUserInfo.body.userAvatar,
+        recharge: res.body,
+      }
+    }
+  }
+}
+
 // 出错头像
 const defaultAvatarUrl = (e) => {
   console.log('头像资源出错')
   e.target.onerror = null //防止循环
   e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
 }
+
+// 使用工具函数连接APP
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    getTotalRechargeInfo() //获取累积充值信息
+  })
+}
+
+onMounted(() => {
+  connectToAppHandler()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -126,7 +186,7 @@ const defaultAvatarUrl = (e) => {
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 14px;
+    font-size: 12px;
   }
 }