Refactor API requests and update component styles

pages/drawe/index.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 导航 -->
   <KlNavTab active="图纸" :type="1" />
-  <div class="ma-auto w-1440px">
+  <div class="ma-auto w-[1440px]">
     <!-- 图纸分类 -->
     <KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
     <!-- 推荐栏目 -->
@@ -9,12 +9,12 @@
     <!-- 精选专题 -->
     <!-- <FeaturedSpecials></FeaturedSpecials> -->
     <!-- 分页 -->
-    <div class="mt-10px flex justify-center">
+    <div class="mt-[10px] flex justify-center">
       <el-pagination
         v-model:current-page="query.pageNo"
         v-model:page-size="query.pageSize"
         :page-sizes="[12, 24, 48]"
-        :total="result.total"
+        :total="result?.total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="handleClickSize"
         @current-change="handeClickCurrent"
@@ -33,8 +33,8 @@
   import type { pageRes, pageReq } from '~/api/upnew/types'
   const route = useRoute()
   const level = ref(
-    route.query.level
-      ? JSON.parse(route.query.level as string)
+    route.query?.valuelevel
+      ? JSON.parse(route.query.valuelevel as string)
       : [
           {
             id: '0',
@@ -43,9 +43,9 @@
           },
         ]
   )
-  const keywords = ref(route.query.keywords as string)
+  const keywords = ref(route.query?.valuekeywords as string || '')
 
-  const query = reactive<pageReq>({
+  const query = ref<pageReq>({
     pageNo: 1,
     pageSize: 12,
     projectType: '',
@@ -54,39 +54,45 @@
     type: 1,
     title: keywords.value,
   })
-  const result = reactive<pageRes>({
-    list: [],
-    total: 0,
-  })
+  // const result = reactive<pageRes>({
+  //   list: [],
+  //   total: 0,
+  // })
 
   // 如果id存在，则设置projectType
   if (level.value.length) {
-    query.projectType = level.value[level.value.length - 1].id || ''
+    query.value.projectType = level.value[level.value.length - 1].id || ''
   }
 
   const handleClickSize = (val: number) => {
-    query.pageSize = val
+    query.value.pageSize = val
     getPage()
   }
 
   const handeClickCurrent = (val: number) => {
-    query.pageNo = val
+    query.value.pageNo = val
     getPage()
   }
 
-  const getPage = () => {
-    page(query).then((res) => {
-      const { data, code } = res
-      if (code === 0) {
-        result.list = data.list
-        result.total = data.total
-      }
-    })
-  }
 
-  getPage()
+  const { data:result, refresh:getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
+    const res = await page(query.value)
+    return res.data
+    
+  },{
+    immediate: true,
+  })
+  // const getPage = () => {
+  //   page(query).then((res) => {
+  //     const { data, code } = res
+  //     if (code === 0) {
+  //       result.list = data.list
+  //       result.total = data.total
+  //     }
+  //   })
+  // }
 
-  watch([() => query.projectType, () => query.editions, () => query.source], (val) => {
+  watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
     if (val) {
       getPage()
     }