Update API formatting and routing structure

2025-08-28 11:29:20 +08:00
parent 9edc63ff4f
commit 3f1431f972
9 changed files with 263 additions and 118 deletions
--- a/pages/channel/[channelId]/[pageNo].vue
+++ b/pages/channel/[channelId]/[pageNo].vue
@ -0,0 +1,99 @@
+<template>
+  <!-- 导航 -->
+  <KlNavTab active="交流频道" />
+  <div class="ma-auto mt-[30px] w-[1440px] flex">
+    <LeftContent v-model="pageReq.channelId" v-model:channelIdList="channelIdList"></LeftContent>
+    <RightContent v-model="pageRes" v-model:lun-tan-res="lunTanRes" v-model:page-no="pageReq.pageNo" @update-page-no="handleUpdatePageNo"></RightContent>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import KlNavTab from '~/components/kl-nav-tab/index.vue'
+  import LeftContent from '../components/LeftContent.vue'
+  import RightContent from '../components/RightContent.vue'
+  import { page, getChannelLunTanDetail, list } from '~/api/channel/index'
+  import { reactive, watch, ref } from 'vue'
+  import type { TpageRes, ChannelRespVO } from '~/api/channel/types'
+
+  const route = useRoute()
+  const channelId = computed(() => (route.params.channelId as string) || '')
+  const pageNo = computed(() => Number(route.params.pageNo) || 1)
+
+  const pageReq = reactive({
+    pageNo: pageNo.value,
+    pageSize: 10,
+    channelId: channelId.value, //  频道ID
+  })
+  //   const pageRes = reactive<TpageRes>({
+  //     list: [],
+  //     total: 0,
+  //   })
+
+  // 获取频道列表
+  const { data: channelIdList } = await useAsyncData(`prod-api/app-api/business/channel/list-${Date.now()}`, async () => {
+    const res = await list()
+    return res.data as any[]
+  })
+
+  console.log(channelIdList)
+
+  // 获取第一个论坛详情
+  // if (!channelIdList.value?.length) return
+  const { data: lunTanRes, execute: refreshLunTanDetail } = await useAsyncData(
+    `prod-api/app-api/business/channel/detail-${Date.now()}`,
+    async () => {
+      if (!channelId.value) return null // 无参数时不请求
+      const res = await getChannelLunTanDetail({
+        id: channelId.value,
+      })
+      return res.data as ChannelRespVO
+    },
+    {
+      immediate: true,
+    }
+  )
+
+  const { data: pageRes, refresh: getPage } = await useAsyncData(`prod-api/app-api/business/posts/page-${Date.now()}`, async () => {
+    const res = await page(pageReq)
+    return res.data as TpageRes
+  })
+  // 获得频道帖子分页
+  //   const getPage = () => {
+  //     page(pageReq).then((res) => {
+  //       pageRes.list = res.data.list
+  //       pageRes.total = res.data.total
+  //     })
+  //   }
+  //   getPage()
+
+  const handleUpdatePageNo = (pageNo: number) => {
+    pageReq.pageNo = pageNo
+    navigateTo(`/channel/${channelId.value}/${pageNo}`)
+    // getPage()
+  }
+
+  // 获取论坛详情
+  // const lunTanRes = ref({} as ChannelRespVO)
+  // const getLunTanDetaiil = (val: string) => {
+  //   getChannelLunTanDetail({
+  //     id: val,
+  //   }).then((res) => {
+  //     lunTanRes.value = res.data
+  //   })
+  // }
+
+  //   watch(
+  //     () => channelId.value,
+  //     (val) => {
+  //       if (val) {
+  //         // 更新分页请求的channelId
+  //         pageReq.channelId = val
+  //         // 重新请求分页数据和论坛详情
+  //         getPage()
+  //         refreshLunTanDetail() // 刷新论坛详情
+  //       }
+  //     }
+  //   )
+</script>
+
+<style lang="scss" scoped></style>