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
-        <div class="showText" style="height: 28%; font-weight: 860">{{ name }}</div>
+        style="
-        <div class="showText" style="height: 37%; font-weight: 700">{{ distributionValue }}</div>
+          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;
+.top1Text {
-  justify-content: center;
+  font-size: 12px;
-  align-items: center;
+}
+
+.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>