refactor: 重构国外专区组件结构和路由配置

pages/foreign/index.vue

@@ -26,9 +26,9 @@
 </template>
 <script setup lang="ts">
   import KlNavTab from '~/components/kl-nav-tab/index.vue'
-  import RecommendedColumnsV2 from './components/RecommendedColumnsV2.vue'
+  import RecommendedColumnsV2 from '~/components/foreign-components/RecommendedColumnsV2.vue'
   // import FeaturedSpecials from './components/FeaturedSpecials.vue'
-  import BannerTips from './components/BannerTips.vue'
+  import BannerTips from '~/components/foreign-components/BannerTips.vue'
   // import ImageTips from './components/ImageTips.vue'
 
   import { reactive, watch } from 'vue'
@@ -38,9 +38,9 @@
   const query = reactive<pageReq>({
     pageNo: 1,
     pageSize: 10,
-    projectType: '',
-    editions: '',
-    source: '',
+    projectType: '-1',
+    editions: '-1',
+    source: -1,
     type: 1,
   })
   // const result = reactive<pageRes>({
@@ -48,8 +48,13 @@
   //   total: 0,
   // })
 
-  const {data:result, refresh:getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
-    const res = await page(query)
+  const { data: result } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
+    const res = await page({
+      ...query,
+      editions: query.editions === '-1' ? '' : query.editions,
+      source: query.source === -1 ? '' : query.source,
+      projectType: query.projectType === '-1' ? '' : query.projectType,
+    })
     return res.data
   })
   // const getPage = () => {
@@ -66,18 +71,23 @@
 
   const handleChangeSize = (val: number) => {
     query.pageSize = val
-    query.pageNo = 1
-    getPage()
+    // query.pageNo = 1
+    // getPage()
+
+    navigateTo(`/foreign/${query.projectType}/${query.pageNo}/${val}/${query.editions}/${query.source}`)
   }
 
   const handleChangeCurrent = (val: number) => {
     query.pageNo = val
-    getPage()
+    // getPage()
+    navigateTo(`/foreign/${query.projectType}/${val}/${query.pageSize}/${query.editions}/${query.source}`)
   }
 
   watch([() => query.projectType, () => query.editions, () => query.source], (val) => {
     if (val) {
-      getPage()
+      // getPage()
+
+      navigateTo(`/foreign/${query.projectType}/1/${query.pageSize}/${query.editions}/${query.source}`)
     }
   })
 </script>