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

<template>
  <KlNavTab />
  <div class="ml-auto mr-auto mt-[20px] w-[1440px] flex">
    <div class="left box-border w-[100%] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[42px] py-[30px]">
      <div class="title text-[20px] 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]">
        <div class="flex items-center">
          <img :src="channelDetail?.creatorAvatar" alt="" srcset="" class="h-[50px] w-[49px] rounded-full" />
          <div class="ml-[10px]">
            <div class="text-[16px] text-[#333333] font-normal">{{ channelDetail?.creatorName }}</div>
            <div class="text-[12px] text-[#999999] font-normal">发表时间：{{ dayjs(channelDetail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
        </div>
        <div class="mt-[19px] flex items-center justify-between">
          <div class="flex items-center">
            <img src="~/assets/images/look.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
            <span class="text-[#666666]">{{ channelDetail?.likeNum || 0 }}人赞过</span>
            <div class="ml-[16px] flex items-center">
              <img src="~/assets/images/add.png" alt="" class="mr-[4px] h-[23px]" />
              <span class="text-[#666666]">{{ channelDetail?.commentNum || 0 }}评论</span>
            </div>
          </div>
          <div class="ml-[16px] flex items-center">
            <img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
            <span class="text-[#666666]">{{ channelDetail?.browseNum || 0 }}人看过</span>
          </div>
        </div>
      </div>
      <div>
        <img :src="channelDetail?.postsCover" alt="" srcset="" class="h-[396px] w-auto" />
        <div class="mt-[20px] text-[14px] text-[#333333] font-normal" v-html="channelDetail?.postsContent"></div>
      </div>
      <div class="mt-[30px]">
        <div class="h-[48px] w-[100%] rounded-[1px] bg-[#F8F8F8] pl-[10px] text-[16px] text-[#333333] font-normal line-height-[50px]"
          >共有{{ 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 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" />
              <div class="ml-[10px]">
                <span>{{ item.creatorName }}</span>
              </div>
            </div>
            <div class="text-[12px] text-[#999999] font-normal">发表时间：{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
          <div class="ml-[60px] mt-[-10px] box-border rd-[4px] bg-[#F8F8F8] pa-[6px] px-[8px] text-[14px] text-[#999999] font-normal">{{ item.content }}</div>
        </div>
        <!-- 添加element-plus分页 -->
        <el-pagination
          v-model:current-page="query.pageNo"
          :page-size="query.pageSize"
          layout="prev, pager, next"
          :total="commentList?.total"
          class="mt-[10px]"
          @current-change="handleCurrentChange"
        />
        <el-input v-model="commentContent" type="textarea" :rows="6" placeholder="请输入内容" class="mt-[20px] w-[100%]"></el-input>
      </div>

      <div>
        <el-button type="primary" class="mt-[10px] h-[40px] w-[101px] rounded-[4px] text-[16px] text-[#FFFFFF] font-bold" @click="handleCreateComment"
          >发表评论</el-button
        >
      </div>
    </div>
    <!-- <div class="right ml-23px w-100%">
      <div class="mt-20px w-398px border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid bg-[#FFFFFF]">
        <img src="~/assets/images/sign.png" alt="" srcset="" class="h-206px w-100%" />
        <div class="box-border border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid border-t-none bg-[#FFFFFF] pa-18px">
          <div class="mt-10px flex items-center">
            <div class="text-18px text-[#333333] font-bold">王琦</div>
            <div class="ml-10px box-border border border-[#1A65FF] rounded-13px border-solid px-8px py-3px color-#1a65ff">五金工具</div>
            <div class="ml-10px box-border border border-[#1A65FF] rounded-13px border-solid px-8px py-3px color-#1a65ff">电子产品</div>
          </div>
          <div class="mt-10px text-14px text-[#333333] font-normal"
            >你好！我是专注于工业设计和机械设计领域的专业设计师， 擅长进行外观设计、结构设计、钣金设计等各类工程设计 工作。我拥有丰富的经</div
          >
          <div class="mt-20px h-1px w-336px rounded-1px bg-[#EEEEEE]"></div>
          <div class="mt-20px flex items-center">
            <div class="h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
            <span class="ml-10px text-16px">相关内容</span>
          </div>
          <div class="mt-10px">
            <div v-for="item in 10" :key="item" class="flex items-center justify-between py-10px">
              <div class="text-16px text-[#333333] font-normal">Microsoft .NET Framework</div>
              <span class="color-##999999 ml-10px">11-12</span>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { watch, ref, reactive } from 'vue'
  import KlNavTab from '~/components/kl-nav-tab/index.vue'
  import { useRoute } from 'vue-router'
  import { getChannelDetail, postscommentpage, createPostsComment } from '~/api/channel'
  import type { TGetChannelPostsRes, PageResultPostsCommentRespVO } from '~/api/channel/types'
  const route = useRoute()
  const channelId = computed(() => route.params.channelId as string)
  const pageNo = computed(() => Number(route.params.pageNo))

  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: pageNo.value,
    pageSize: 4,
  })

  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,
    })
    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 = () => {
    if (!commentContent.value) {
      ElMessage.error('请输入评论内容')
      return
    }
    createPostsComment({
      postsId: channelId.value,
      content: commentContent.value,
    }).then((res) => {
      if (res.code === 0) {
        refresh()
        commentContent.value = ''
      }
    })
  }
  const handleCurrentChange = (pageNo: number) => {
    // query.pageNo = pageNo
    // getComment()
    navigateTo(`/chat-detail/${channelId.value}-${pageNo}`)
  }
</script>