perf: 个人中心代码整理

src/pages/follow/index.vue

@@ -5,8 +5,8 @@
               title-active-color="#FD9A00"
               title-inactive-color="#333333">
       <van-tab
-          v-for="item in tabList"
-          :key="item.value"
+          v-for="(item, i) in tabList"
+          :key="i"
           :title="item.label"
           :name="item.listType"
       >
@@ -25,34 +25,15 @@ const currentTab = ref(route?.query?.listType ?? 'friend');
 const tabList = ref([
   {
     label: "互关",
-    value: 0,
     listType: 'friend',
-    apiUrl: 'getFriends',
-    empty: '暂无互关',
-    buttonConfig: {
-      activeText: '关注',
-      inactiveText: '相互关注'
-    }
   },
   {
     label: "关注",
-    value: 1,
     listType: 'follow',
-    empty: '暂无关注',
-    apiUrl: 'getMyConCern',
-    buttonConfig: {
-      activeText: '关注', inactiveText: '已关注'
-    }
   },
   {
     label: "粉丝",
-    value: 2,
     listType: 'fans',
-    empty: '暂无粉丝',
-    apiUrl: '',
-    buttonConfig: {
-      activeText: '', inactiveText: ''
-    }
   }
 ]);
 </script>

src/pages/profile/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-[#f8f8f8]">
+  <div class="profile-page bg-[#f8f8f8]">
     <div class="h-215 relative w-full bg-[url('~/assets/img/profile/profile_banner.png')] bg-no-repeat bg-cover"
     >
       <div class="absolute w-335 left-20 bottom-10 right-20 ">
@@ -23,14 +23,14 @@
             <template v-if="tab.listType">
               <NuxtLink :to="`/follow?listType=${tab.listType}`">
                 <div class="text-[#fff] text-base text-center ">
-                  <div class="font-semibold">{{tab.value}} </div>
+                  <div class="font-semibold">{{tab.numText}} </div>
                   <div class="text-sm">{{ tab.label }}</div>
                 </div>
               </NuxtLink>
             </template>
             <template v-else>
               <div class="text-[#fff] text-base text-center ">
-                <div class="font-semibold">{{tab.value}} </div>
+                <div class="font-semibold">{{tab.numText}} </div>
                 <div class="text-sm">{{ tab.label }}</div>
               </div>
             </template>
@@ -58,9 +58,9 @@
       <div class="text-xl font-semibold ml-20">常用功能</div>
       <div class="grid grid-cols-4 gap-y-20 mt-20">
         <NuxtLink
-            :to="item.to"
             class="flex flex-col items-center"
             v-for="item in menuData"
+            :to="item.to"
             :key="item.to"
         >
           <img :src="item.icon" class="w-40 h-40" alt="" srcset=""/>
@@ -91,10 +91,10 @@ onMounted(() => {
 });
 
 const tabList = ref([
-  {label: '互关', value: 0, listType: 'friend'},
-  {label: '关注', value: 0, listType: 'follow'},
-  {label: '粉丝', value: 0, listType: 'fans'},
-  {label: '获赞', value: 0, listType: null},
+  {label: '互关', listType: 'friend', numText: ''},
+  {label: '关注', listType: 'follow', numText: ''},
+  {label: '粉丝', listType: 'fans', numText: ''},
+  {label: '获赞', listType: null, numText: ''},
 ])
 const getData = async () => {
   try {
@@ -109,10 +109,10 @@ const getData = async () => {
       request('/website/tourism/fans/getMyFansCount'),
       request('/website/tourism/fans/getMylikeCount'),
     ])
-    tabList.value[0].value = formatNumber(friendsData);
-    tabList.value[1].value = formatNumber(concernData);
-    tabList.value[2].value = formatNumber(fansData);
-    tabList.value[3].value = formatNumber(likeData);
+    tabList.value[0].numText = formatNumber(friendsData);
+    tabList.value[1].numText = formatNumber(concernData);
+    tabList.value[2].numText = formatNumber(fansData);
+    tabList.value[3].numText = formatNumber(likeData);
   } catch (e) {
   } finally {
   }
@@ -152,4 +152,8 @@ const menuData = [
 ];
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.profile-page {
+  height: calc(100vh -  50px);
+}
+</style>