189 lines
7.9 KiB
Vue
189 lines
7.9 KiB
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-[14px]" />
|
||
<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-[20px]" />
|
||
<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-[14px]" />
|
||
<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))
|
||
|
||
|
||
// 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>
|