【需求 17679】 perf: 优化进入其他用户页面的数据展示

src/api/otherUserPage/index.ts

 import service from '@/utils/request/index'
 import type { BooleanFlag } from '@/constants'
+import type { OtherUserInfoDto } from '@/types'
 
 // 其他用户页面数据
 
@@ -7,7 +8,7 @@ import type { BooleanFlag } from '@/constants'
  * 获取其他用户的用户信息
  */
 export const getOtherUserData = (data: { userId: string; isReal: BooleanFlag }) => {
-  return service.request<string>({
+  return service.request<OtherUserInfoDto>({
     url: '/api/personalCenter/userData',
     method: 'POST',
     data,

src/api/otherUserPage/types.ts

@@ -17,3 +17,17 @@ export interface AddOrUpdateCaseDto {
   isSync: BooleanFlag
   releaseStatus: ReleaseStatusTypeEnum
 }
+export interface OtherUserInfoDto {
+  ayabiAvailable: number
+  ayabiTotal: number
+  createTime: string
+  expTotal: number
+  id: number
+  isDelete: BooleanFlag
+  level: number
+  remark: string
+  showAvatar: string
+  showName: string
+  signature: string
+  updateTime: string
+}

src/views/otherUserPage/index.vue

@@ -15,12 +15,16 @@
             <div class="flex items-start gap-4">
               <el-avatar
                 :size="80"
-                :src="userInfo?.avatar"
+                :src="userInfo?.showAvatar"
                 class="border-4 border-white shadow-lg"
               />
               <div class="flex-1">
-                <h2 class="text-xl font-semibold text-gray-800 mb-1 mt-4">{{ userInfo?.name }}</h2>
-                <p class="text-gray-500 text-sm mb-2">{{ userInfo?.signature }}</p>
+                <h2 class="text-xl font-semibold text-gray-800 mb-1 mt-4">
+                  {{ userInfo?.showName }}
+                </h2>
+                <p v-if="!+(route.params.isReal as string)" class="text-gray-500 text-sm mb-2">
+                  {{ userInfo?.signature }}
+                </p>
                 <!-- <el-button type="warning" size="small" plain @click="handleEdit">
                   <el-icon>
                     <Edit />
@@ -99,11 +103,11 @@ import { wxLogin } from '@/utils/wxUtil'
 import dayjs from 'dayjs'
 import { usePageSearch } from '@/hooks'
 import { ArticleTypeEnum, articleTypeListOptions } from '@/constants'
+import type { OtherUserInfoDto } from '@/api/otherUserPage/types'
 
 const route = useRoute()
 
 const userStore = useUserStore()
-const { userInfo } = storeToRefs(userStore)
 
 const { list, total, loading, searchParams, search, reset, goToPage, changePageSize, refresh } =
   usePageSearch(getOtherUserPostData, {
@@ -119,11 +123,13 @@ const getIsOfficial = async () => {
   console.log(data)
   officialAccountList.value = data
 }
-onMounted(() => {
-  getOtherUserData({
+const userInfo = ref<OtherUserInfoDto>({} as OtherUserInfoDto)
+onMounted(async () => {
+  const { data } = await getOtherUserData({
     userId: route.params.userId as string,
     isReal: +(route.params.isReal as string),
   })
+  userInfo.value = data
 })
 
 const handleSwitchAccount = async () => {