Refactor API requests and update component structure

2025-08-20 22:58:08 +08:00
parent 1ef219878c
commit 2fe36051f8
8 changed files with 123 additions and 109 deletions
--- a/pages/home/components/LearningRecommendations.vue
+++ b/pages/home/components/LearningRecommendations.vue
@ -31,14 +31,20 @@
    status: 0,
  })

-  const bannerList = ref<PageResultIndexSettingRespVO[]>([])
-  const getBanner = async () => {
+  const { data: bannerList } = useAsyncData('get-setting-Page', async () => {
    const res = await getSettingPage(pageReq)
-    if (res.code === 0) {
-      bannerList.value = res.data
-    }
-  }
-  getBanner()
+    return res.data
+  })
+
+
+  // const bannerList = ref<PageResultIndexSettingRespVO[]>([])
+  // const getBanner = async () => {
+  //   const res = await getSettingPage(pageReq)
+  //   if (res.code === 0) {
+  //     bannerList.value = res.data
+  //   }
+  // }
+  // getBanner()

  const handleClick = (url: string) => {
    navigateTo(url)
--- a/pages/home/components/MainContent.vue
+++ b/pages/home/components/MainContent.vue
@ -1,53 +1,74 @@
-`<template>
+`
+<template>
  <div class="main-content">
    <div class="flex">
      <div class="h-424px w-957px">
        <el-carousel height="424px" indicator-position="none">
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
-            <el-image :src="item.content" class="w-100%" :class="{ 'cursor-pointer': item.url }" fit="cover" @click="handleClick(item.url)" />
+            <el-image
+              :src="item.content"
+              class="w-100%"
+              :class="{ 'cursor-pointer': item.url }"
+              fit="cover"
+              @click="handleClick(item.url)"
+            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <LoginForm />
    </div>
-    <div class="box-border h-56px w-1219px flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-10px line-height-46px">
-      <img src="~/assets/images/voice.png" alt="" srcset="" class="mr-10px h-15px w-16px" />
-      <Vue3Marquee :duration="10" direction="normal" pause-on-hover>· 经典来袭，SolidWorks装配经典案例之气动发动机 </Vue3Marquee>
+    <div
+      class="box-border h-56px w-1219px flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-10px line-height-46px"
+    >
+      <img
+        src="~/assets/images/voice.png"
+        alt=""
+        srcset=""
+        class="mr-10px h-15px w-16px"
+      />
+      <Vue3Marquee :duration="10" direction="normal" pause-on-hover
+        >· 经典来袭，SolidWorks装配经典案例之气动发动机
+      </Vue3Marquee>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-  import { reactive, ref } from 'vue'
-  import LoginForm from './LoginForm.vue'
-  import { Vue3Marquee } from 'vue3-marquee'
+import { reactive, ref } from "vue";
+import LoginForm from "./LoginForm.vue";
+import { Vue3Marquee } from "vue3-marquee";

-  import { getSettingPage } from '~/api/home/index'
-  import type { PageResultIndexSettingRespVO } from '~/api/home/type'
+import { getSettingPage } from "~/api/home/index";
+import type { PageResultIndexSettingRespVO } from "~/api/home/type";

-  const pageReq = reactive({
-    type: 1,
-    status: 0,
-  })
+const pageReq = reactive({
+  type: 1,
+  status: 0,
+});

-  const bannerList = ref<PageResultIndexSettingRespVO[]>([])
-  const getBanner = async () => {
-    const res = await getSettingPage(pageReq)
-    if (res.code === 0) {
-      bannerList.value = res.data
-    }
-  }
-  getBanner()
-
-  const handleClick = (url: string) => {
-    if (url) {
-      navigateTo(url)
-    }
+const { data: bannerList } = useAsyncData("get-setting-Page", async () => {
+  const res = await getSettingPage(pageReq);
+  return res.data;
+});
+
+// const bannerList = ref<PageResultIndexSettingRespVO[]>([])
+// const getBanner = async () => {
+//   const res = await getSettingPage(pageReq)
+//   if (res.code === 0) {
+//     bannerList.value = res.data
+//   }
+// }
+// getBanner()
+
+const handleClick = (url: string) => {
+  if (url) {
+    navigateTo(url);
  }
+};
 </script>

 <style scoped lang="scss">
-  .main-content {
-    flex: 1;
-  }
+.main-content {
+  flex: 1;
+}
 </style>
--- a/pages/home/components/RecommendedColumns.vue
+++ b/pages/home/components/RecommendedColumns.vue
@ -1,7 +1,8 @@
 <template>
-  <div class="mt-34px w-100%">
+  <div class="mt-[34px] w-[100%]">
    <KlTabBar v-model="query.type" :data="tabBar" :show-icon="true" />
-    <div class="content mt-10px">
+
+    <div class="content mt-[10px]">
      <el-row :gutter="20">
        <el-col v-for="i in recommendTopList" :key="i.id" :span="6">
          <CardPicture :item-info="i" />
@ -9,8 +10,8 @@
      </el-row>
    </div>
    <!-- 暂无数据 -->
-    <el-empty v-if="recommendTopList.length === 0" description="暂无数据"></el-empty>
-    <div v-if="recommendTopList.length > 0" class="cursor-pointer text-right text-16px text-[#1A65FF] font-normal" @click="handleClick"> 查看更多 >> </div>
+    <el-empty v-if="recommendTopList?.length === 0" description="暂无数据"></el-empty>
+    <!-- <div v-else class="cursor-pointer text-right text-16px text-[#1A65FF] font-normal" @click="handleClick"> 查看更多 >> </div> -->
  </div>
 </template>

@ -43,15 +44,22 @@
    },
  ])

-  const recommendTopList = ref<ProjectDrawPageRespVO[]>([])
-  const getRecommendTop = () => {
+  // const recommendTopList = ref<ProjectDrawPageRespVO[]>([])
+  // const getRecommendTop = () => {
+  //   // @ts-ignore
+  //   recommendTop(query).then((res) => {
+  //     if (Array.isArray(res.data) && res.data.length > 0) {
+  //       recommendTopList.value = res.data
+  //     }
+  //   })
+  // }
+
+  const { data: recommendTopList, refresh: getRecommendTop} = useAsyncData('recommendTop', async () => {
    // @ts-ignore
-    recommendTop(query).then((res) => {
-      if (Array.isArray(res.data) && res.data.length > 0) {
-        recommendTopList.value = res.data
-      }
-    })
-  }
+    const res = await recommendTop(query)
+    return res.data || []
+  })
+

  const handleClick = () => {
    if (query.type === 1) {
@ -69,9 +77,6 @@
      if (val) {
        getRecommendTop()
      }
-    },
-    {
-      immediate: true,
    }
  )
 </script>
--- a/pages/home/components/SideMenu.vue
+++ b/pages/home/components/SideMenu.vue
@ -58,7 +58,26 @@ const submenuTop = ref(0);
 const sideMenu = ref();
 const menuItemRefs = ref<HTMLElement[]>([]);

-const menuItems = ref<ProjectDictNodeVO[]>([]);
+// const menuItems = ref<ProjectDictNodeVO[]>([]);
+
+// 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值
+const { data: menuItems, pending, error } = useAsyncData(
+  'tab2-list',
+  async () => {
+    const res = await tab2()
+      const arr = [];
+      for (let i = 0; i < res.data?.length; i += 2) {
+        arr.push({
+          children: res.data.slice(i, i + 2),
+          name: getName(res.data.slice(i, i + 2)),
+        });
+      }
+    return arr
+  }
+)
+
+
+

 const showSubMenu = (index: number) => {
  // if (menuItems.value.length === index + 1) {
@ -108,18 +127,6 @@ const setMenuItemRef = (
    menuItemRefs.value[index] = el as HTMLElement;
  }
 };
-const getLabel = () => {
-  tab2().then((res) => {
-    const arr = [];
-    for (let i = 0; i < res.data.length; i += 2) {
-      arr.push({
-        children: res.data.slice(i, i + 2),
-        name: getName(res.data.slice(i, i + 2)),
-      });
-    }
-    menuItems.value = arr;
-  });
-};

 const getName = (arr: any[]) => {
  if (arr.length === 1) {
@ -131,11 +138,11 @@ const getName = (arr: any[]) => {

 const init = () => {
  // 获取标签
-  getLabel()
+  // getLabel()
 };

 onMounted(() => {
-  init();
+  // init();
 });
 </script>