refactor: 重构文本页面组件和数据获取方式

2025-08-29 22:07:46 +08:00
parent f0e65ee2ab
commit ede6eec78b
4 changed files with 182 additions and 38 deletions
--- a/components/text-components/FeaturedSpecials.vue
+++ b/components/text-components/FeaturedSpecials.vue
--- a/components/text-components/RecommendedColumnsV2.vue
+++ b/components/text-components/RecommendedColumnsV2.vue
@ -1,13 +1,13 @@
 <template>
-  <div class="relative mt-34px w-100%">
+  <div class="relative mt-[34px] w-[100%]">
    <KlTabBar v-model="query.source" :data="tabBar" />
-    <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>
@ -27,14 +27,14 @@
    required: true,
  })

-  const result = defineModel<pageRes>('result', {
+  const result = defineModel<pageRes | null>('result', {
    required: true,
  })

  const tabBar = ref([
    {
      label: '文本推荐',
-      value: '',
+      value: -1
    },
    {
      label: '原创文本',
--- a/pages/text/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue
+++ b/pages/text/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue
@ -0,0 +1,125 @@
+<template>
+  <!-- 导航 -->
+  <KlNavTab active="文本" :type="2" />
+  <div class="ma-auto w-[1440px]">
+    <!-- 图纸分类 -->
+    <KlWallpaperCategory v-model="query" v-model:level="level" :type="2" />
+    <!-- 推荐栏目 -->
+    <RecommendedColumnsV2 v-model="query" v-model:result="result"></RecommendedColumnsV2>
+    <!-- 精选专题 -->
+    <!-- <FeaturedSpecials></FeaturedSpecials> -->
+    <!-- 分页 -->
+    <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"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleClickSize"
+        @current-change="handeClickCurrent"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import KlNavTab from '~/components/kl-nav-tab/index.vue'
+  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
+  import RecommendedColumnsV2 from '~/components/text-components/RecommendedColumnsV2.vue'
+  // import FeaturedSpecials from './components/FeaturedSpecials.vue'
+  import { useRoute } from 'vue-router'
+  import { reactive, watch, ref } from 'vue'
+  import { page } from '~/api/upnew/index'
+  import { getDictTree } from '~/api/home/index'
+  import type { pageRes, pageReq } from '~/api/upnew/types'
+  const route = useRoute()
+  const projectType = computed(() => (route.params?.projectType ? route.params?.projectType : ''))
+  const pageNo = computed(() => Number(route.params?.pageNo))
+  const pageSize = computed(() => Number(route.params?.pageSize))
+  const editions = computed(() => (route.params?.editions ? route.params?.editions : ''))
+  const source = computed(() => (route.params?.source ? Number(route.params?.source) : ''))
+
+  console.log('route.params----', route.params)
+
+  const level = ref(
+    route.query?.valuelevel
+      ? JSON.parse(route.query.valuelevel as string)
+      : [
+          {
+            id: -1,
+            name: '文本库',
+            isChildren: false,
+          },
+        ]
+  )
+  const keywords = ref((route.query?.valuekeywords as string) || '')
+
+  const query = ref<pageReq>({
+    pageNo: pageNo.value || 1,
+    pageSize: pageSize.value || 12,
+    projectType: projectType.value || '-1',
+    editions: editions.value || '-1',
+    source: source.value || -1,
+    type: 2,
+    title: keywords.value,
+  })
+  // const result = reactive<pageRes>({
+  //   list: [],
+  //   total: 0,
+  // })
+
+  // 如果id存在，则设置projectType
+  if (level.value.length) {
+    // query.value.projectType = level.value[level.value.length - 1].id || ''
+  }
+
+  const handleClickSize = (val: number) => {
+    query.value.pageSize = val
+    // getPage()
+    navigateTo(`/text/${query.value.projectType}/${query.value.pageNo}/${val}/${query.value.editions}/${query.value.source}`)
+  }
+
+  const handeClickCurrent = (val: number) => {
+    query.value.pageNo = val
+    // getPage()
+    navigateTo(`/text/${query.value.projectType}/${val}/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
+  }
+
+  const { data: result, refresh: getPage } = useAsyncData(
+    `draw-page-list-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}-${query.value.title}`,
+    async () => {
+      const res = await page({
+        ...query.value,
+        editions: query.value.editions === '-1' ? '' : query.value.editions,
+        source: query.value.source === -1 ? '' : query.value.source,
+        projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
+      })
+      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.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
+    if (val) {
+      navigateTo(`/text/${query.value.projectType}/1/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
+    }
+  })
+</script>
+<style lang="scss" scoped>
+  :deep(.el-pagination) {
+    .el-input__inner {
+      text-align: center !important;
+    }
+  }
+</style>
--- a/pages/text/index.vue
+++ b/pages/text/index.vue
@ -1,7 +1,7 @@
 <template>
  <!-- 导航 -->
  <KlNavTab active="文本" :type="2" />
-  <div class="ma-auto w-1440px">
+  <div class="ma-auto w-[1440px]">
    <!-- 图纸分类 -->
    <KlWallpaperCategory v-model="query" v-model:level="level" :type="2" />
    <!-- 推荐栏目 -->
@ -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="handeChangeSize"
        @current-change="handeChangeCurrent"
@ -25,7 +25,7 @@
 <script setup lang="ts">
  import KlNavTab from '~/components/kl-nav-tab/index.vue'
  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
-  import RecommendedColumnsV2 from './components/RecommendedColumnsV2.vue'
+  import RecommendedColumnsV2 from '~/components/text-components/RecommendedColumnsV2.vue'
  // import FeaturedSpecials from './components/FeaturedSpecials.vue'

  import { reactive, watch, ref } from 'vue'
@ -39,57 +39,76 @@
      ? JSON.parse(route.query.level as string)
      : [
          {
-            id: '0',
+            id: -1,
            name: '文本库',
            isChildren: false,
          },
        ]
  )

-  const query = reactive<pageReq>({
+  const query = ref<pageReq>({
    pageNo: 1,
    pageSize: 12,
-    projectType: '',
-    editions: '',
-    source: '',
+    projectType: '-1',
+    editions: '-1',
+    source: -1,
    type: 2,
  })
-  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.projectType = level.value[level.value.length - 1].id || ''
  }

-  const getPage = () => {
-    page(query).then((res) => {
-      const { data, code } = res
-      if (code === 0) {
-        result.list = data.list
-        result.total = data.total
-      }
+  const { data: result } = useAsyncData(
+    `draw-page-list-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}-${query.value.title}`,
+    async () => {
+      const res = await page({
+        ...query.value,
+        editions: query.value.editions === '-1' ? '' : query.value.editions,
+        source: query.value.source === -1 ? '' : query.value.source,
+        projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
      })
+      return res.data
+    },
+    {
+      immediate: true,
    }
+  )

-  getPage()
+  // const getPage = () => {
+  //   page(query).then((res) => {
+  //     const { data, code } = res
+  //     if (code === 0) {
+  //       result.list = data.list
+  //       result.total = data.total
+  //     }
+  //   })
+  // }
+
+  // getPage()

  const handeChangeSize = (val: number) => {
-    query.pageSize = val
-    query.pageNo = 1
-    getPage()
+    query.value.pageSize = val
+    // query.pageNo = 1
+    // getPage()
+    navigateTo(`/text/${query.value.projectType}/${query.value.pageNo}/${val}/${query.value.editions}/${query.value.source}`)
  }

  const handeChangeCurrent = (val: number) => {
-    query.pageNo = val
-    getPage()
+    query.value.pageNo = val
+    // getPage()
+    navigateTo(`/text/${query.value.projectType}/${val}/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
  }

-  watch([() => query.projectType, () => query.editions, () => query.source], (val) => {
+  watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
    if (val) {
-      getPage()
+      // getPage()
+      navigateTo(`/text/${query.value.projectType}/${query.value.pageNo}/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
    }
  })
 </script>