Browse Source

feat: 添加获取个人徽章的接口,优化个人主页徽章展示逻辑

EvilDragon 3 months ago
parent
commit
08e64a4a7d

+ 5 - 0
packages/app/src/core/libs/requests.ts

@@ -913,6 +913,11 @@ export const getMyStudyTours = (query = {}) =>
 export const getBadges = (query = {}) =>
   httpGet<{ [key: string]: Badge[] }>('/app-api/member/stylist-honor/get-badge-list')
 /**
+ * 获取个人徽章
+ */
+export const getOwnBadges = (query = {}) =>
+  httpGet<Badge[]>('/app-api/member/stylist-honor/getConferBadgeList')
+/**
  * 获取证书列表
  */
 export const getCertificates = (query = {}) =>

+ 10 - 9
packages/app/src/pages/mine/homepage/index.vue

@@ -15,6 +15,7 @@ import {
   getUserInfoById,
   updateDesignerInfo,
   shareCircle,
+  getOwnBadges,
 } from '../../../core/libs/requests'
 import { useUserStore } from '../../../store'
 import { storeToRefs } from 'pinia'
@@ -56,6 +57,7 @@ const { data: memberInfo, run: setMemberInfo } = useRequest(() => getUserInfoByI
 const { data: designerInfo, run: setDesignerInfo } = useRequest(() => getDesignerInfo(id.value), {
   initialData: {},
 })
+const { data: badges, run: setBadges } = useRequest(() => getOwnBadges())
 const isOwn = computed(() => userInfo.value?.userId === id.value)
 const skills = computed(() =>
   [
@@ -138,11 +140,10 @@ onLoad(async (query: { id: string; isShared?: string }) => {
   if (query.isShared) {
     isShared.value = true
   }
-  await setMemberInfo()
-  await setDesignerInfo()
   if (!isOwn.value) {
     viewStartAt.value = new Date()
   }
+  await Promise.all([setMemberInfo(), setBadges()])
 })
 onShow(async () => {
   await setDesignerInfo()
@@ -208,7 +209,7 @@ defineExpose({
             <div class="pb-8 flex-1">
               <div class="flex items-center justify-between">
                 <div class="text-white text-2xl font-normal font-['PingFang_SC'] leading-normal">
-                  {{ memberInfo.name }}
+                  {{ memberInfo.nickname }}
                 </div>
                 <div
                   class="flex items-center"
@@ -264,13 +265,13 @@ defineExpose({
           class="h-full left-0 pl-20 pr-6 right-20 top-0 bottom-0 absolute bg-gradient-to-r from-[#ffe9e9] via-[#fff7f7] to-[#fff8f8] rounded-tl-md rounded-bl-md flex flex-col justify-center"
         >
           <div class="">
-            <div class="flex justify-between">
-              <template v-for="(it, i) in [1, 2, 3, 4]" :key="i">
-                <div class="bg-[#fa9d3b]">
-                  <wd-img width="26" mode="widthFix" src=""></wd-img>
-                </div>
+            <div class="flex items-center gap-4">
+              <template v-for="(it, i) in badges.slice(0, badges.length > 5 ? 3 : 4)" :key="i">
+                <!-- <div class="bg-[#fa9d3b]"> -->
+                <wd-img width="26" mode="widthFix" :src="it.badgeYesObtainedImage"></wd-img>
+                <!-- </div> -->
               </template>
-              <div class="flex">
+              <div v-if="badges.length > 5" class="flex">
                 <wd-img custom-class="m-a" width="26" mode="widthFix" :src="more"></wd-img>
               </div>
             </div>