feat(周星): 完善页面并对接全部接口

src/api/weeklyStar.js

@@ -0,0 +1,105 @@
+import { get, post } from '../utils/http.js'
+
+// 获取礼物榜单
+export const getWeekStarRanking = async (data) => {
+  try {
+    const response = await get(
+      `/activity/week-star/ranking?type=${data.type}&current=${data.current}&size=${data.size}`
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to get week star ranking:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取我的排名
+export const getMyWeekStarRanking = async (type) => {
+  try {
+    const response = await get(`/activity/week-star/my-rank?type=${type}`)
+    return response
+  } catch (error) {
+    console.error('Failed to get my week star ranking:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取本周奖励
+export const getWeekRewards = async () => {
+  try {
+    const response = await get(`/activity/week-star/reward`)
+    return response
+  } catch (error) {
+    console.error('Failed to get this week rewards:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取本周礼物
+export const getWeekGifts = async (type) => {
+  try {
+    const response = await get(`/activity/week-star/gifts?type=${type}`)
+    return response
+  } catch (error) {
+    console.error('Failed to get this week gifts:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取历史周星top1
+export const getHistoryTopOne = async () => {
+  try {
+    const response = await get(`/activity/week-star/history-top1`)
+    return response
+  } catch (error) {
+    console.error('Failed to get history top one:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取本周可兑换商品
+export const getExchangeGoods = async (data) => {
+  try {
+    const response = await get(
+      `/props-activity-cnf/client/listActivityResource?sysOrigin=${data.sysOrigin}&activityType=${data.activityType}`
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to get exchange goods:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取我拥有的碎片
+export const getMyFragment = async (data) => {
+  try {
+    const response = await post(
+      `/user/backpack/client/list/by/user-id?userId=${data.userId}&fragmentsIds=${data.fragmentsIds}`
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to get my fragment:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取我拥有的碎片
+export const exchangeGood = async (data) => {
+  try {
+    const response = await post(
+      `/activity/week-star/exchange?propsGroupId=${data.propsGroupId}&fragmentsId=${data.fragmentsId}`
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to exchange goods:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}

src/components/WeeklyStar/topUser.vue

@@ -27,13 +27,41 @@
             alt=""
             width="100%"
             style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
+            @error="defaultAvatarUrl"
           />
         </div>
       </div>
       <!-- 用户名和贡献值 -->
-      <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 35%; z-index: 3">
-        <div class="showText" style="height: 28%; font-weight: 860">{{ name }}</div>
-        <div class="showText" style="height: 37%; font-weight: 700">{{ distributionValue }}</div>
+      <div
+        style="
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 35%;
+          z-index: 3;
+
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        "
+      >
+        <div
+          style="height: 28%; display: flex; justify-content: center; align-items: center"
+          :style="{ width: isTopOne ? '35%' : '50%' }"
+        >
+          <div style="font-weight: 860" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
+            {{ name }}
+          </div>
+        </div>
+        <div
+          style="height: 36%; display: flex; justify-content: center; align-items: center"
+          :style="{ width: isTopOne ? '30%' : '40%' }"
+        >
+          <div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
+            {{ distributionValue }}
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -66,6 +94,11 @@ const props = defineProps({
     default: '',
   },
 })
+
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.src = '/src/assets/images/WeeklyStar/defaultAvatar.png'
+}
 </script>
 
 <style lang="scss" scoped>
@@ -76,9 +109,37 @@ const props = defineProps({
 
 .showText {
   color: #fff;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.top1Text {
+  font-size: 12px;
+}
+
+.text {
+  font-size: 10px;
+}
+
+@media screen and (min-width: 768px) {
+  .top1Text {
+    font-size: 24px;
+  }
+
+  .text {
+    font-size: 20px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .top1Text {
+    font-size: 32px;
+  }
+
+  .text {
+    font-size: 28px;
+  }
 }
 </style>

src/views/WeeklyStar/WeeklyStar.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="fullPage">
-    <div class="bg">
     <!-- 状态栏占位区域（仅在APP中显示） -->
     <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
@@ -133,17 +132,16 @@
         </div>
 
         <!-- 主体内容 -->
-          <div
-            style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%"
-          >
+        <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%">
           <!-- 前3名 -->
           <div style="margin-top: 3%">
             <!-- 第一 -->
             <div style="display: flex; justify-content: center">
               <TopUser
                 BorderImgUrl="/src/assets/images/WeeklyStar/topOne.png"
-                  name="aaa"
-                  distributionValue="111"
+                :avatarUrl="RankingHasTop3[0].userAvatar"
+                :name="RankingHasTop3[0].userNickname"
+                :distributionValue="RankingHasTop3[0].quantity"
                 style="width: 70%"
               />
             </div>
@@ -152,15 +150,17 @@
               <TopUser
                 :isTopOne="false"
                 BorderImgUrl="/src/assets/images/WeeklyStar/topTwo.png"
-                  name="bbb"
-                  distributionValue="222"
+                :avatarUrl="RankingHasTop3[1].userAvatar"
+                :name="RankingHasTop3[1].userNickname"
+                :distributionValue="RankingHasTop3[1].quantity"
                 style="width: 35%"
               />
               <TopUser
                 :isTopOne="false"
                 BorderImgUrl="/src/assets/images/WeeklyStar/topThree.png"
-                  name="ccc"
-                  distributionValue="333"
+                :avatarUrl="RankingHasTop3[2].userAvatar"
+                :name="RankingHasTop3[2].userNickname"
+                :distributionValue="RankingHasTop3[2].quantity"
                 style="width: 35%"
               />
             </div>
@@ -202,9 +202,7 @@
                   "
                 />
 
-                  <div
-                    style="width: calc(72% - 28px - 26px); display: flex; flex-direction: column"
-                  >
+                <div style="width: calc(72% - 28px - 26px); display: flex; flex-direction: column">
                   <div
                     style="
                       color: #fff;
@@ -230,6 +228,8 @@
               </div>
             </div>
           </div>
+          <!-- 触发加载功能 -->
+          <div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
         </div>
       </div>
 
@@ -250,7 +250,7 @@
           <div
             style="
               position: absolute;
-                top: 8%;
+              top: 6%;
               left: 25%;
               right: 25%;
               height: 11%;
@@ -262,7 +262,7 @@
             "
             class="topTitle"
           >
-              TOP{{ topIndex + 1 }}
+            TOP{{ topItem.rule.sort }}
           </div>
           <!-- 主体内容 -->
           <div
@@ -272,14 +272,139 @@
               bottom: 0;
               left: 0;
               right: 0;
-                padding: 30% 5% 20%;
+              padding: 30% 6% 13%;
               display: grid;
               grid-template-columns: repeat(2, 1fr);
-                gap: 10px;
             "
           >
-              <div v-for="gift in topItem" style="position: relative">
+            <div
+              v-for="gift in topItem.propsGroup.activityRewardProps"
+              style="display: flex; flex-direction: column; align-items: center"
+            >
+              <div
+                style="
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  position: relative;
+                  margin-bottom: 3px;
+                "
+              >
                 <!-- gift背景图 -->
+                <img
+                  src="/src/assets/images/WeeklyStar/giftItemBg.png"
+                  alt=""
+                  style="width: 90%; display: block"
+                />
+                <div
+                  style="
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <!-- gift图 -->
+                  <img
+                    :src="gift.cover"
+                    alt=""
+                    style="width: 50%; display: block"
+                    @error="(e) => handleImageError(e, gift.type)"
+                  />
+                </div>
+              </div>
+              <div style="position: relative; width: 75%">
+                <img src="/src/assets/images/WeeklyStar/btBg.png" alt="" width="100%" />
+                <div
+                  style="
+                    position: absolute;
+                    top: 0;
+                    bottom: 8%;
+                    left: 0;
+                    right: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-weight: 700;
+                  "
+                >
+                  {{ showDetail(gift.type, gift.quantity) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Exchange -->
+      <div v-show="exchargeShow" style="display: flex; justify-content: center">
+        <div style="position: relative; width: 90%">
+          <!-- 背景图 -->
+          <img
+            src="/src/assets/images/WeeklyStar/longBg.png"
+            alt=""
+            style="width: 100%; display: block"
+          />
+          <!-- 标题 -->
+          <div
+            style="
+              position: absolute;
+              top: 6%;
+              left: 25%;
+              right: 25%;
+              height: 11%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              color: #fff;
+              font-weight: 860;
+            "
+            class="topTitle"
+          >
+            Props
+          </div>
+          <div
+            style="
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              padding: 30% 7% 13%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+            "
+          >
+            <!-- 碎片 -->
+            <div style="display: flex; align-items: center">
+              <img
+                src="/src/assets/images/WeeklyStar/debris.png"
+                alt=""
+                style="width: 15%; display: block; margin-right: 5px"
+              />
+              <div style="font-weight: 590; font-size: 1.3em">:{{ myFragment.quantity || 0 }}</div>
+            </div>
+
+            <!-- 礼品 -->
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
+              <div
+                v-for="(goods, goodsIndex) in exchangeGoodsList"
+                :key="goodsIndex"
+                style="display: flex; flex-direction: column; align-items: center"
+              >
+                <div
+                  style="
+                    position: relative;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
                   <img
                     src="/src/assets/images/WeeklyStar/giftItemBg.png"
                     alt=""
@@ -298,15 +423,44 @@
                     "
                   >
                     <!-- gift图 -->
-                  <img src="/src/assets/icon/coin.png" alt="" style="width: 50%; display: block" />
+                    <img
+                      :src="goods.propsGroup.activityRewardProps[0].cover"
+                      alt=""
+                      style="width: 50%; display: block"
+                    />
+                  </div>
+                </div>
+                <div class="needDebris">
+                  Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
+                </div>
+                <div style="position: relative; width: 75%" @click="selectGood(goods)">
+                  <img
+                    src="/src/assets/images/WeeklyStar/btBg.png"
+                    alt=""
+                    width="100%"
+                    style="display: block"
+                  />
+                  <div
+                    style="
+                      position: absolute;
+                      top: 0;
+                      bottom: 8%;
+                      left: 0;
+                      right: 0;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      font-weight: 700;
+                    "
+                    class="needDebris"
+                  >
+                    Redeem
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-
-        <!-- Exchange -->
-        <div v-show="exchargeShow"></div>
       </div>
     </div>
 
@@ -343,12 +497,12 @@
           padding: 0 8%;
         "
       >
-        <div style="width: 70%; display: flex; align-items: center">
+        <div style="width: 70%; display: flex; justify-content: space-around; align-items: center">
           <!-- 排名 -->
-          <div style="color: #edb247; font-weight: 700">999</div>
+          <div style="color: #edb247; font-weight: 700">{{ myRanking.rank }}</div>
           <!-- 头像 -->
           <img
-            src="/src/assets/icon/coin.png"
+            :src="myRanking.userAvatar"
             alt=""
             style="
               width: 30%;
@@ -357,6 +511,7 @@
               object-fit: cover;
               margin: 0 12px;
             "
+            @error="defaultAvatarUrl"
           />
           <!-- 名称 -->
           <div style="display: flex; flex-direction: column; width: calc(70% - 24px - 20%)">
@@ -369,22 +524,17 @@
                 text-overflow: ellipsis;
               "
             >
-              aaaaaaaaaaaaaaaaaa
+              {{ myRanking.userNickname }}
             </div>
           </div>
         </div>
 
         <!-- 贡献值 -->
-        <div style="display: flex; width: 30%; display: flex; align-items: center">
+        <div style="width: 30%; display: flex; justify-content: center; align-items: center">
           <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
-          <!-- 1:男,0:女 -->
-          <!-- <div
-            v-if="myRanking.userSex == 1"
-            style="color: #edb247; font-weight: 700; margin-left: 8px"
-          >
-            {{ myRanking.wealthQuantity }}
-          </div> -->
-          <div style="color: #edb247; font-weight: 700; margin-left: 8px">10000</div>
+          <div style="color: #edb247; font-weight: 700; margin-left: 8px">
+            {{ myRanking.quantity || 0 }}
+          </div>
         </div>
       </div>
     </div>
@@ -393,11 +543,150 @@
     <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
       <!-- help弹窗 -->
       <div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
-        <img src="/src/assets/images/TopList/helpInfo.png" alt="" style="width: 100%" />
+        <img src="/src/assets/images/WeeklyStar/helpInfo.png" alt="" style="width: 100%" />
       </div>
 
       <!-- history弹窗 -->
-      <div></div>
+      <div v-if="historyShow" style="position: relative; margin: 20% 0" @click.stop>
+        <!-- 背景图 -->
+        <img
+          src="/src/assets/images/WeeklyStar/mediumBg.png"
+          alt=""
+          style="width: 100%; display: block"
+        />
+        <!-- 标题 -->
+        <div
+          style="
+            position: absolute;
+            top: 10%;
+            left: 25%;
+            right: 25%;
+            height: 13%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+            font-weight: 860;
+          "
+          class="topTitle"
+        >
+          History
+        </div>
+        <!-- 内容 -->
+        <div
+          style="
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 31% 7% 15%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <!-- 头像 -->
+          <div style="position: relative; width: 75%">
+            <!-- 头像框 -->
+            <img
+              src="/src/assets/images/WeeklyStar/topOneHistory.png"
+              alt=""
+              style="width: 100%; display: block; position: relative; z-index: 1"
+            />
+            <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
+              <div
+                style="height: 100%; display: flex; justify-content: center; align-items: center"
+              >
+                <img
+                  :src="showTopOne.userAvatar"
+                  alt=""
+                  style="
+                    width: 50%;
+                    display: block;
+                    border-radius: 50%;
+                    aspect-ratio: 1/1;
+                    object-fit: cover;
+                  "
+                  @error="defaultAvatarUrl"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- 名字 -->
+          <div style="position: relative; width: 25%">
+            <!-- 背景图 -->
+            <img
+              src="/src/assets/images/WeeklyStar/nameBg.png"
+              alt=""
+              style="width: 100%; display: block"
+            />
+            <div
+              style="
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                padding-bottom: 1%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <div
+                style="
+                  width: 90%;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  text-align: center;
+                "
+                class="history-name"
+              >
+                {{ showTopOne.userNickname }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 历史时间 -->
+          <div
+            style="width: 50%; display: flex; justify-content: space-between; align-items: center"
+          >
+            <img
+              src="/src/assets/images/TopList/timeBack.png"
+              alt=""
+              width="13%"
+              @click="changeHistoryIndex(1)"
+            />
+            <div
+              style="
+                flex: 1;
+                text-align: center;
+                font-weight: 590;
+                background-image: -webkit-linear-gradient(
+                  top,
+                  rgba(243, 183, 0, 1),
+                  rgba(255, 238, 198, 1)
+                );
+                background-clip: text;
+                color: transparent;
+              "
+              class="history-time"
+            >
+              {{ showTopOne.group }}
+            </div>
+            <img
+              src="/src/assets/images/TopList/timeNext.png"
+              alt=""
+              width="13%"
+              @click="changeHistoryIndex(-1)"
+            />
+          </div>
+        </div>
+      </div>
 
       <!-- gifts弹窗 -->
       <div v-if="giftsShow" style="position: relative; margin: 20% 0" @click.stop>
@@ -421,7 +710,7 @@
           "
         >
           <!-- 礼物单元 -->
-          <div style="width: 30%" v-for="value in gifts">
+          <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
             <!-- 礼物背景 -->
             <div style="position: relative">
               <img
@@ -443,7 +732,7 @@
               >
                 <!-- 礼物 -->
                 <img
-                  src="/src/assets/icon/coin.png"
+                  :src="gift.giftPhoto"
                   alt=""
                   style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
                 />
@@ -457,11 +746,69 @@
                 alt=""
                 style="width: 20%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
               />
-              <div style="color: #fff; font-weight: 590; margin-left: 2px">99999</div>
+              <div style="color: #fff; font-weight: 590; margin-left: 2px">
+                {{ gift.giftCandy }}
               </div>
             </div>
           </div>
         </div>
+      </div>
+
+      <!-- 交易商品弹窗 -->
+      <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
+        <!-- 背景图 -->
+        <img
+          src="/src/assets/images/WeeklyStar/mediumBg.png"
+          alt=""
+          style="width: 100%; display: block"
+        />
+        <!-- 标题 -->
+        <div
+          style="
+            position: absolute;
+            top: 10%;
+            left: 25%;
+            right: 25%;
+            height: 13%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+            font-weight: 860;
+          "
+          class="topTitle"
+        >
+          Exchange
+        </div>
+        <!-- 内容 -->
+        <div
+          style="
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 30% 7% 15%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <img
+            :src="selectedGood.propsGroup.activityRewardProps[0].cover"
+            alt=""
+            style="width: 50%; display: block"
+          />
+          <div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
+          <img
+            src="/src/assets/images/WeeklyStar/ConfirmBt.png"
+            alt=""
+            style="width: 30%; display: block"
+            @click="exchangeSelectedGood(selectedGood.rule.id)"
+          />
+        </div>
+      </div>
     </maskLayer>
   </div>
 </template>
@@ -472,14 +819,29 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import itemCenter from '@/components/WeeklyStar/itemCenter.vue'
 import TopUser from '@/components/WeeklyStar/topUser.vue'
 import maskLayer from '../../components/MaskLayer.vue'
+import { useDebounce, useThrottle } from '@/utils/useDebounce'
+import { getUserId } from '@/utils/userStore.js'
+import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
+import {
+  getWeekStarRanking,
+  getWeekRewards,
+  getWeekGifts,
+  getHistoryTopOne,
+  getMyWeekStarRanking,
+  getMyFragment,
+  getExchangeGoods,
+  exchangeGood,
+} from '@/api/weeklyStar.js'
 
 const isInAppEnvironment = ref(false) // 检测是否在APP环境中
 const helpInfoShow = ref(false) //帮助模块
 const historyShow = ref(false) //历史模块
 const giftsShow = ref(false) //礼物模块
+const exchargeGoodsShow = ref(false) //交易弹窗
 
+// 展示遮罩层
 const maskLayerShow = computed(() => {
-  return helpInfoShow.value || historyShow.value || giftsShow.value
+  return helpInfoShow.value || historyShow.value || giftsShow.value || exchargeGoodsShow.value
 })
 
 // 倒计时
@@ -489,46 +851,110 @@ const Minutes = ref(0)
 const Second = ref(0)
 let timer = null
 
-const rankingShow = ref(true)
-const rewardShow = ref(false)
-const exchargeShow = ref(false)
+// 模块切换展示
+const rankingShow = ref(true) //排行榜
+const rewardShow = ref(false) //奖励
+const exchargeShow = ref(false) //交易
 
-// 排行榜
-const Ranking = ref(
-  Array.from({ length: 5 }, () => ({
-    rank: 111,
-    userNickname: 'aaaaaaaaaaaaaa',
-    account: '8826602',
-    quantity: '111',
+const current = ref(1) //排行榜第几页
+const RankingLoadmore = ref(null) //触底模块
+const showRankingLoading = ref(true) //触底加载功能
+const Ranking = ref([]) // 排行榜
+
+const RankingLoadParams = computed(() => {
+  return {
+    type: 'THIS_WEEK',
+    current: current.value,
+    size: 10,
+  }
+})
+
+const myRanking = ref([]) // 我的排名
+const rewardsList = ref([]) // 奖励列表
+const gifts = ref([]) // 本周礼物
+
+const historyRankingTop1 = ref([]) // 历史榜首
+const historyIndex = ref(0)
+const showTopOne = computed(() => {
+  return historyRankingTop1.value[historyIndex.value]
+})
+
+const exchangeGoodsList = ref([])
+const myFragment = ref({})
+const selectedGood = ref({})
+
+const changeHistoryIndex = (num) => {
+  let targetIndex = historyIndex.value + num
+  let length = historyRankingTop1.value.length
+  if (targetIndex >= 0 && targetIndex < length) {
+    historyIndex.value = targetIndex
+  }
+}
+
+// 处理排行榜小于3人时的情况
+const RankingHasTop3 = computed(() => {
+  let RankingShow = [...Ranking.value]
+  if (Ranking.value.length < 3) {
+    let addNullUser = Array.from({ length: 3 - Ranking.value.length }, () => ({
+      userAvatar: '',
+      userNickname: '',
+      quantity: '',
     }))
-)
+    RankingShow.push(...addNullUser)
+  }
+  return RankingShow
+})
 
 // 展示用的榜单
 const showRanking = computed(() => {
   return Ranking.value.filter((_, index) => index >= 3)
 })
 
-// 本周礼物
-const gifts = ref(
-  Array.from({ length: 3 }, () => ({
-    quantity: '111',
-  }))
-)
+// 图片资源出错处理
+const handleImageError = (e, type) => {
+  console.log('图片资源出错')
+  e.target.onerror = null
+  if ((type = 'GOLD')) {
+    e.target.src = '/src/assets/icon/coin.png'
+  }
+}
 
-// 奖励列表
-const rewardsList = ref(
-  Array.from({ length: 3 }, () =>
-    Array.from({ length: 4 }, () => ({
-      userNickname: 'aaa',
-    }))
-  )
-)
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.src = '/src/assets/images/WeeklyStar/defaultAvatar.png'
+}
+
+// 选中要兑换的商品
+const selectGood = (good) => {
+  exchargeGoodsShow.value = true
+  selectedGood.value = good
+}
+
+const exchangeSelectedGood = async (propsGroupId) => {
+  try {
+    let data = {
+      propsGroupId,
+      fragmentsId: '1968948330210508801',
+    }
+    const resExchangeGood = await exchangeGood(data)
+
+    if (resExchangeGood.status) {
+      getThisWeekExchangeGoods() //刷新我的碎片
+    }
+  } catch (error) {
+    console.log('error:', error)
+    // 信息提示id有误
+    showWarning(error.response.errorMsg)
+  }
+}
 
 // 关闭弹窗
 const closedPopup = () => {
   helpInfoShow.value = false
   historyShow.value = false
   giftsShow.value = false
+  exchargeGoodsShow.value = false
+  selectedGood.value = {} //选中商品置空
 }
 
 // 点击展示主体内容
@@ -538,22 +964,21 @@ const handleBt = (type) => {
   exchargeShow.value = type == 'Exchange' ? true : false
 }
 
-// 获取下周的时间戳
-const getNextMonday = () => {
-  const now = new Date() //当前时间
-  const day = now.getDay() //0周日6周六
+// 获取沙特下周一早上六点的时间戳
+const getNextMondayInSaudi = () => {
+  const now = new Date()
+  const utcDay = now.getUTCDay() //获取UTC星期几，0(周日)-6(周六)
 
-  // 计算到下周的所需天数
-  const dayToAdd = day === 1 ? 7 : (7 + 1 - day) % 7
-  const nextMonday = new Date(now) //以当前时间为基准，而不是重新获取时间
+  // 计算到下周一的所需天数
+  const daysToAdd = utcDay === 1 ? 7 : (1 + 7 - utcDay) % 7
+  const nextMondayUTC = new Date(now) //以当前UTC时间为基准，而不是重新获取
 
-  nextMonday.setDate(now.getDate() + dayToAdd) //增加到下周一那天
-  nextMonday.setHours(0, 0, 0, 0)
-
-  return nextMonday.getTime() //得到下周一00:00:00.000的时间戳
+  nextMondayUTC.setUTCDate(now.getUTCDate() + daysToAdd) //增加到下周一那天
+  nextMondayUTC.setUTCHours(3, 0, 0, 0) // 设置为沙特下周一当天早上6点（北京时间3点）
+  return nextMondayUTC.getTime() //得到下周一00:00:00.000的时间戳
 }
 
-const targetTime = ref(getNextMonday()) // 闭包保存目标时间 (核心修正)
+const targetTime = ref(getNextMondayInSaudi()) // 闭包保存目标时间 (核心修正)
 
 // 格式化时间
 const formatTime = (value) => {
@@ -566,6 +991,8 @@ const getCountdown = () => {
   let diff = targetTime.value - now
 
   if (diff <= 0) {
+    // 初始化数据
+    resetPage()
     targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
     diff = targetTime.value - now
   }
@@ -577,12 +1004,147 @@ const getCountdown = () => {
   Second.value = formatTime(Math.floor(totalSeconds % 60))
 }
 
+// 重置数据
+const resetPage = () => {
+  current.value = 1 //排行榜第几页
+  showRankingLoading.value = true //触底加载功能
+  Ranking.value = [] // 排行榜
+
+  historyIndex.value = 0 //历史榜首重置展示当前
+
+  updatePageData() // 刷新页面数据
+}
+
+// 格式化奖励的展示信息
+const showDetail = (type, quantity) => {
+  let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
+  if (showamount.includes(type)) {
+    return quantity
+  } else {
+    return `${quantity}Days`
+  }
+}
+
+// 获取本周排名
+const getThisWeekRanking = async () => {
+  const resWeekStarRanking = await getWeekStarRanking(RankingLoadParams.value)
+  console.log('resWeekStarRanking:', resWeekStarRanking)
+  if (
+    resWeekStarRanking.status &&
+    resWeekStarRanking.body &&
+    resWeekStarRanking.body.rankUsers.records
+  ) {
+    let rankUsers = resWeekStarRanking.body.rankUsers
+    Ranking.value.push(...rankUsers.records)
+    if (current.value * rankUsers.size >= rankUsers.total) {
+      showRankingLoading.value = false
+    }
+  }
+}
+
+// 获取历史榜首
+const getHistoryRankingTop1 = async () => {
+  const resHistoryTopOne = await getHistoryTopOne()
+  console.log('resHistoryTopOne:', resHistoryTopOne)
+  if (resHistoryTopOne.status && resHistoryTopOne.body) {
+    historyRankingTop1.value = resHistoryTopOne.body
+  }
+}
+
+// 获取本周我的排名
+const getMyThisWeekRanking = async () => {
+  const resMyWeekStarRanking = await getMyWeekStarRanking('THIS_WEEK')
+  console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
+  if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
+    myRanking.value = resMyWeekStarRanking.body
+  }
+}
+
+// 获取本周礼物
+const getThisWeekGifts = async () => {
+  const resThisWeekGifts = await getWeekGifts('THIS_WEEK')
+  console.log('resThisWeekGifts:', resThisWeekGifts)
+  if (resThisWeekGifts.status && resThisWeekGifts.body) {
+    gifts.value = resThisWeekGifts.body
+  }
+}
+
+// 获取本周奖励
+const getThisWeekRewards = async () => {
+  const resThisWeekRewards = await getWeekRewards()
+  console.log('resThisWeekRewards:', resThisWeekRewards)
+  if (resThisWeekRewards.status && resThisWeekRewards.body) {
+    rewardsList.value = resThisWeekRewards.body
+  }
+}
+
+// 获取本周可兑换商品
+const getThisWeekExchangeGoods = async () => {
+  let data = {
+    sysOrigin: 'LIKEI',
+    activityType: 'STAR_EXCHANGE',
+  }
+  const resExchangeGoods = await getExchangeGoods(data)
+  console.log('resExchangeGoods:', resExchangeGoods)
+  if (resExchangeGoods.status && resExchangeGoods.body) {
+    exchangeGoodsList.value = resExchangeGoods.body
+  }
+}
+
+// 获取本周我拥有的碎片
+const getThisWeekMyFragment = async () => {
+  let data = {
+    userId: getUserId(),
+    fragmentsIds: ['1968948330210508801'],
+  }
+
+  const resMyFragment = await getMyFragment(data)
+  console.log('resMyFragment:', resMyFragment)
+  if (resMyFragment.status && resMyFragment.body) {
+    myFragment.value =
+      resMyFragment.body.find((item) => item.fragmentsId == '1968948330210508801') || {}
+  }
+}
+
+// 刷新页面数据
+const updatePageData = () => {
+  getThisWeekRanking() // 获取本周排名
+  getHistoryRankingTop1() // 获取历史top1
+  getMyThisWeekRanking() // 获取本周我的排名
+  getThisWeekRewards() // 获取本周奖励
+  getThisWeekGifts() // 获取本周礼物
+  getThisWeekExchangeGoods() // 获取本周可兑换商品
+  getThisWeekMyFragment() // 获取本周我的碎片
+}
+
+const debouceGetThisWeekRanking = useThrottle(() => {
+  getThisWeekRanking()
+}, 1000)
+
+// IntersectionObserver配置
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.intersectionRatio > 0 && Ranking.value.length != 0) {
+      console.log('触发RankingLoadmore加载')
+      current.value++
+      debouceGetThisWeekRanking()
+    }
+  })
+})
+
 // 组件挂载时检测环境
 onMounted(() => {
   isInAppEnvironment.value = isInApp()
 
   getCountdown()
   timer = setInterval(getCountdown, 1000) //每秒更新
+
+  updatePageData() // 刷新页面数据
+
+  // 监听加载模块
+  if (RankingLoadmore.value) {
+    observer.observe(RankingLoadmore.value)
+  }
 })
 
 onUnmounted(() => {
@@ -592,19 +1154,14 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 * {
-  color: black;
+  color: #fff;
   font-family: 'SF Pro';
 }
 
 .fullPage {
-  background-color: #311300;
-  min-height: 100vh;
-  position: relative;
-}
-
-.bg {
   width: 100vw;
   min-height: 100vh;
+  background-color: #311300;
   background-image: url(../../assets/images/WeeklyStar/bg.png);
   background-size: 100% auto;
   background-repeat: no-repeat;
@@ -628,7 +1185,31 @@ onUnmounted(() => {
 }
 
 .topTitle {
-  font-size: 1.2rem;
+  font-size: 1.5em;
+}
+
+.needDebris {
+  font-size: 0.6em;
+}
+
+.history-name {
+  font-size: 0.8em;
+}
+
+.history-time {
+  font-size: 0.8em;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
 }
 
 @media screen and (min-width: 768px) {