Refactor API requests and update component styles

pages/foreign/components/RecommendedColumnsV2.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="relative mt-34px w-100%">
+  <div class="relative mt-[34px] w-[100%]">
     <KlTabBar v-model="tabIndex" :data="tabBar" />
     <KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
-    <div class="absolute right-0px top-10px text-16px text-[#999999] font-normal"
-      >共<span class="color-#1A65FF">{{ result.total }}</span
+    <div class="absolute right-[0px] top-[10px] text-[16px] text-[#999999] font-normal"
+      >共<span class="color-[#1A65FF]">{{ result?.total }}</span
       >个筛选结果</div
     >
-    <div class="content mt-10px">
+    <div class="content mt-[10px]">
       <el-row :gutter="20">
-        <el-col v-for="(item, index) in result.list" :key="index" :span="6">
+        <el-col v-for="(item, index) in result?.list" :key="index" :span="6">
           <CardPicture :item-info="item" />
         </el-col>
       </el-row>
-      <el-empty v-if="!result.list.length" description="暂无数据"></el-empty>
+      <el-empty v-if="!result?.list.length" description="暂无数据"></el-empty>
     </div>
   </div>
 </template>
@@ -31,7 +31,7 @@
     },
   ])
 
-  const result = defineModel<pageRes>('modelValue', {
+  const result = defineModel<pageRes| null>('modelValue', {
     required: true,
   })
   const query = defineModel<any>('query', {

pages/foreign/index.vue

@@ -3,7 +3,7 @@
   <KlNavTab active="国外专区" />
   <!-- banneer提示 -->
   <BannerTips />
-  <div class="ma-auto w-1440px">
+  <div class="ma-auto w-[1440px]">
     <!-- 图片展示鼠标移上去展示提示语 -->
     <!-- <ImageTips /> -->
     <!-- 推荐栏目 -->
@@ -11,12 +11,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="[10, 20, 30]"
-        :total="result.total"
+        :total="result?.total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="handleChangeSize"
         @current-change="handleChangeCurrent"
@@ -43,22 +43,26 @@
     source: '',
     type: 1,
   })
-  const result = reactive<pageRes>({
-    list: [],
-    total: 0,
+  // const result = reactive<pageRes>({
+  //   list: [],
+  //   total: 0,
+  // })
+
+  const {data:result, refresh:getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
+    const res = await page(query)
+    return res.data
   })
+  // const getPage = () => {
+  //   page(query).then((res) => {
+  //     const { data, code } = res
+  //     if (code === 0) {
+  //       result.list = data.list
+  //       result.total = data.total
+  //     }
+  //   })
+  // }
 
-  const getPage = () => {
-    page(query).then((res) => {
-      const { data, code } = res
-      if (code === 0) {
-        result.list = data.list
-        result.total = data.total
-      }
-    })
-  }
-
-  getPage()
+  // getPage()
 
   const handleChangeSize = (val: number) => {
     query.pageSize = val