Update API formatting and routing structure
This commit is contained in:
wangqiao
189
pages/chat-detail/[channelId]-[pageNo].vue
Normal file
189
pages/chat-detail/[channelId]-[pageNo].vue
Normal file
@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<KlNavTab />
|
||||
<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">
|
||||
<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 = 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>
|
||||
Reference in New Issue
Block a user