Update API formatting and routing structure

pages/chat-detail/[channelId]-[pageNo].vue

@@ -1,6 +1,6 @@
 <template>
   <KlNavTab />
-  <div class="ml-auto mr-auto mt-20px w1440 flex">
+  <div class="ml-auto mr-auto mt-20px w-1440px flex">
     <div class="left box-border w-1019px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-42px py-30px">
       <div class="title text-24px text-[#333333] font-bold">{{ channelDetail?.postsTitle }}</div>
       <div class="mt-20px flex items-center justify-between border-b-1px border-b-[#eee] border-b-solid pb-14px">
@@ -32,9 +32,9 @@
       </div>
       <div class="mt-30px">
         <div class="h-48px w-938px rounded-1px bg-[#F8F8F8] pl-10px text-16px text-[#333333] font-normal line-height-50px"
-          >共有{{ commentList.total || 0 }}条评论</div
+          >共有{{ commentList?.total || 0 }}条评论</div
         >
-        <div v-for="item in commentList.list" :key="item.commentId" class="mt-10px border-b-1px border-b-[#eee] border-b-solid pb-14px">
+        <div v-for="item in commentList?.list" :key="item.commentId" class="mt-10px border-b-1px border-b-[#eee] border-b-solid pb-14px">
           <div class="flex items-center justify-between">
             <div class="flex items-center">
               <img :src="item.creatorAvatar" alt="" srcset="" class="relative top-12px h-50px w-49px rounded-full" />
@@ -51,7 +51,7 @@
           v-model:current-page="query.pageNo"
           :page-size="query.pageSize"
           layout="prev, pager, next"
-          :total="commentList.total"
+          :total="commentList?.total"
           class="mt-10px"
           @current-change="handleCurrentChange"
         />
@@ -101,50 +101,69 @@
   import { getChannelDetail, postscommentpage, createPostsComment } from '~/api/channel'
   import type { TGetChannelPostsRes, PageResultPostsCommentRespVO } from '~/api/channel/types'
   const route = useRoute()
-  const channelId = route.query.channelId as string
+  const channelId = computed(() => route.params.channelId as string)
+  const pageNo = computed(() => Number(route.params.pageNo))
 
-  const channelDetail = ref<TGetChannelPostsRes>()
-  const commentList = reactive<PageResultPostsCommentRespVO>({
-    list: [],
-    total: 0,
-  })
-  const getChannel = () => {
-    getChannelDetail({
-      id: channelId,
-    }).then((res) => {
-      if (res.code === 0) {
-        channelDetail.value = res.data
-      }
+  console.log(channelId.value, pageNo.value)
+
+  // const channelDetail = ref<TGetChannelPostsRes>()
+  // const commentList = reactive<PageResultPostsCommentRespVO>({
+  //   list: [],
+  //   total: 0,
+  // })
+
+  const { data: channelDetail } = await useAsyncData(`prod-api/app-api/business/posts/detail-${Date.now()}`, async () => {
+    const res = await getChannelDetail({
+      id: channelId.value,
     })
-  }
+    return res.data as TGetChannelPostsRes
+  })
+  // const getChannel = () => {
+  //   getChannelDetail({
+  //     id: channelId,
+  //   }).then((res) => {
+  //     if (res.code === 0) {
+  //       channelDetail.value = res.data
+  //     }
+  //   })
+  // }
   const query = reactive({
-    pageNo: 1,
+    pageNo: pageNo.value,
     pageSize: 4,
   })
-  const getComment = () => {
-    postscommentpage({
-      postsId: channelId,
-      pageNo: query.pageNo,
-      pageSize: query.pageSize,
-    }).then((res) => {
-      if (res.code === 0) {
-        commentList.list = res.data.list
-        commentList.total = res.data.total
-      }
+
+  const { data: commentList, refresh } = await useAsyncData(`prod-api/app-api/business/posts/comment/page-${Date.now()}`, async () => {
+    const res = await postscommentpage({
+      postsId: channelId.value,
+      pageNo: pageNo.value,
+      pageSize: 4,
     })
-  }
-  watch(
-    () => channelId,
-    (val) => {
-      if (val) {
-        getChannel()
-        getComment()
-      }
-    },
-    {
-      immediate: true,
-    }
-  )
+    return res.data as PageResultPostsCommentRespVO
+  })
+  // const getComment = () => {
+  //   postscommentpage({
+  //     postsId: channelId,
+  //     pageNo: query.pageNo,
+  //     pageSize: query.pageSize,
+  //   }).then((res) => {
+  //     if (res.code === 0) {
+  //       commentList.list = res.data.list
+  //       commentList.total = res.data.total
+  //     }
+  //   })
+  // }
+  // watch(
+  //   () => channelId,
+  //   (val) => {
+  //     if (val) {
+  //       getChannel()
+  //       getComment()
+  //     }
+  //   },
+  //   {
+  //     immediate: true,
+  //   }
+  // )
 
   const commentContent = ref('')
   const handleCreateComment = () => {
@@ -153,17 +172,18 @@
       return
     }
     createPostsComment({
-      postsId: channelId,
+      postsId: channelId.value,
       content: commentContent.value,
     }).then((res) => {
       if (res.code === 0) {
-        getComment()
+        refresh()
         commentContent.value = ''
       }
     })
   }
   const handleCurrentChange = (pageNo: number) => {
-    query.pageNo = pageNo
-    getComment()
+    // query.pageNo = pageNo
+    // getComment()
+    navigateTo(`/chat-detail/${channelId.value}-${pageNo}`)
   }
 </script>