170 lines
7.0 KiB
Vue
170 lines
7.0 KiB
Vue
<template>
|
||
<KlNavTab />
|
||
<div class="ml-auto mr-auto mt-20px w1440 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">
|
||
<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-938px 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 = route.query.channelId as string
|
||
|
||
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
|
||
}
|
||
})
|
||
}
|
||
const query = reactive({
|
||
pageNo: 1,
|
||
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
|
||
}
|
||
})
|
||
}
|
||
watch(
|
||
() => channelId,
|
||
(val) => {
|
||
if (val) {
|
||
getChannel()
|
||
getComment()
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
}
|
||
)
|
||
|
||
const commentContent = ref('')
|
||
const handleCreateComment = () => {
|
||
if (!commentContent.value) {
|
||
ElMessage.error('请输入评论内容')
|
||
return
|
||
}
|
||
createPostsComment({
|
||
postsId: channelId,
|
||
content: commentContent.value,
|
||
}).then((res) => {
|
||
if (res.code === 0) {
|
||
getComment()
|
||
commentContent.value = ''
|
||
}
|
||
})
|
||
}
|
||
const handleCurrentChange = (pageNo: number) => {
|
||
query.pageNo = pageNo
|
||
getComment()
|
||
}
|
||
</script>
|