|
|
@@ -1,27 +1,57 @@
|
|
|
<template>
|
|
|
<div style="display: flex; justify-content: center" class="main-content-wrapper">
|
|
|
- <div style="width: 1200px">
|
|
|
+ <div class="box-width">
|
|
|
<a-card>
|
|
|
- <div style="display: flex; justify-content: space-between" v-if="detailObj.userNickName">
|
|
|
- <div style="display: flex">
|
|
|
- <a-avatar
|
|
|
- style="width: 60px; height: 60px"
|
|
|
- :src="detailObj.userAvatar"
|
|
|
- :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }"
|
|
|
- />
|
|
|
- <div class="snowy-index-card-left-one-username">
|
|
|
- <span style="font-weight: 600; margin: 2px; font-size: 18px">{{ detailObj.userNickName }}</span>
|
|
|
- <span style="color: #6d737b; margin: 2px">
|
|
|
- {{ detailObj.typeName }} | {{ formatDateTime(detailObj.lastReplyTime) }}
|
|
|
- </span>
|
|
|
+ <div class="flt">
|
|
|
+ <div class="flex-1">
|
|
|
+ <div style="display: flex; justify-content: space-between" v-if="detailObj.userNickName">
|
|
|
+ <div style="display: flex">
|
|
|
+ <a-avatar
|
|
|
+ style="width: 60px; height: 60px"
|
|
|
+ :src="detailObj.userAvatar"
|
|
|
+ :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }"
|
|
|
+ />
|
|
|
+ <div class="snowy-index-card-left-one-username">
|
|
|
+ <span style="font-weight: 600; margin: 2px; font-size: 18px; min-height: 20px">{{
|
|
|
+ detailObj.userNickName
|
|
|
+ }}</span>
|
|
|
+ <span style="color: #6d737b; margin: 2px">
|
|
|
+ {{ detailObj.typeName ? detailObj.typeName + '|' : '' }}
|
|
|
+ {{ formatDateTime(detailObj.lastReplyTime) }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="forum-list-title">{{ detailObj.postTitle }}</div>
|
|
|
</div>
|
|
|
+ <a-tooltip :getPopupContainer="(trigger) => trigger.parentElement">
|
|
|
+ <template #title>
|
|
|
+ <span>返回</span>
|
|
|
+ </template>
|
|
|
+ <a-button @click="goToHome" type="primary">
|
|
|
+ <rollback-outlined />
|
|
|
+ </a-button>
|
|
|
+ </a-tooltip>
|
|
|
</div>
|
|
|
- <div class="forum-list-title">{{ detailObj.postTitle }}</div>
|
|
|
+ <a-descriptions title="设备信息" class="equ" v-if="detailObj.forumSupportEnv">
|
|
|
+ <a-descriptions-item label="浏览器类型:">
|
|
|
+ <span>{{ detailObj.forumSupportEnv.browserType }}</span>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item label="浏览器版本号:">
|
|
|
+ <span>{{ detailObj.forumSupportEnv.browserVersion }}</span>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item label="操作系统:">
|
|
|
+ <span>{{ detailObj.forumSupportEnv.osType }}</span>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item label="操作系统版本号:">
|
|
|
+ <span>{{ detailObj.forumSupportEnv.osVersion }}</span>
|
|
|
+ </a-descriptions-item>
|
|
|
+ </a-descriptions>
|
|
|
<div class="htmlContent" v-html="detailObj.postContent"></div>
|
|
|
- <div>
|
|
|
- <span v-if="detailObj.userNickName">
|
|
|
- <a-tooltip title="点赞">
|
|
|
+ <a-divider />
|
|
|
+ <div class="flc">
|
|
|
+ <div v-if="detailObj.userNickName">
|
|
|
+ <a-tooltip title="顶">
|
|
|
<template v-if="detailObj.isLike == 1">
|
|
|
<HeartOutlined :style="{ color: '#fa6c8d' }" @click="like(detailObj, 0)" />
|
|
|
</template>
|
|
|
@@ -29,23 +59,47 @@
|
|
|
<HeartOutlined @click="like(detailObj, 1)" />
|
|
|
</template>
|
|
|
</a-tooltip>
|
|
|
- <span style="padding-left: 8px">
|
|
|
+ <span style="padding-left: 3px">
|
|
|
{{ detailObj.likeCount }}
|
|
|
</span>
|
|
|
- </span>
|
|
|
- <a-tooltip title="编辑" v-if="detailObj.isSelf == 1">
|
|
|
- <EditOutlined class="ml-2" @click="formRef.onOpen(detailObj, detailObj.postId)" />
|
|
|
- </a-tooltip>
|
|
|
-
|
|
|
- <span class="ml-2" style="cursor: pointer" @click="replyFormRef.onOpen(detailObj, detailObj.postId)">
|
|
|
- <span>回复</span>
|
|
|
- <span style="padding-left: 8px">{{ detailObj.replyCount }}</span>
|
|
|
- </span>
|
|
|
- <a-tooltip title="举报" v-if="detailObj.userNickName">
|
|
|
- <WarningOutlined class="ml-2" @click="reportFormRef.onOpen(detailObj, detailObj.postId)" />
|
|
|
- </a-tooltip>
|
|
|
+ </div>
|
|
|
+ <div v-if="detailObj.userNickName" class="ml-2">
|
|
|
+ <a-tooltip title="踩">
|
|
|
+ <template v-if="detailObj.isNotLike == 1">
|
|
|
+ <dislike-outlined :style="{ color: '#fa6c8d' }" @click="postnotlike(detailObj, 0)" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <dislike-outlined @click="postnotlike(detailObj, 1)" />
|
|
|
+ </template>
|
|
|
+ </a-tooltip>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="detailObj.isSelf == 1"
|
|
|
+ style="cursor: pointer"
|
|
|
+ @click="formRef.onOpen(detailObj, detailObj.postId)"
|
|
|
+ >
|
|
|
+ <EditOutlined class="ml-2" />
|
|
|
+ <span style="padding-left: 3px">编辑</span>
|
|
|
+ </div>
|
|
|
+ <div class="ml-2" style="cursor: pointer" @click="replyFormRef.onOpen(detailObj, detailObj.postId)">
|
|
|
+ <span>评论</span>
|
|
|
+ <span style="padding-left: 3px">{{ detailObj.replyCount }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="ml-2"
|
|
|
+ style="cursor: pointer"
|
|
|
+ v-if="detailObj.userNickName"
|
|
|
+ @click="reportFormRef.onOpen(detailObj, detailObj.postId)"
|
|
|
+ >
|
|
|
+ <WarningOutlined />
|
|
|
+ <span style="padding-left: 3px">举报</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</a-card>
|
|
|
+ <a-button type="primary" class="mt-2" @click="replyFormRef.onOpen(detailObj, detailObj.postId)">
|
|
|
+ <template #icon><comment-outlined /></template>
|
|
|
+ 评论
|
|
|
+ </a-button>
|
|
|
<a-card class="mt-2">
|
|
|
<Comment
|
|
|
:commentList="detailObj.replyList?.records"
|
|
|
@@ -76,6 +130,7 @@
|
|
|
const replyFormRef = ref()
|
|
|
const formRef = ref()
|
|
|
const route = useRoute()
|
|
|
+ const router = useRouter()
|
|
|
const detailObj = ref({})
|
|
|
const moreType = ref(true)
|
|
|
const commentParams = ref({
|
|
|
@@ -92,6 +147,17 @@
|
|
|
resetGetList()
|
|
|
})
|
|
|
}
|
|
|
+ function postnotlike(item, l) {
|
|
|
+ forumApi
|
|
|
+ .postPostnotlikeSubmit(
|
|
|
+ { likeType: 0, targetId: route.query.postId, notLikeId: route.query.postId },
|
|
|
+ item.isNotLike
|
|
|
+ )
|
|
|
+ .then((data) => {
|
|
|
+ item.isNotLike = l
|
|
|
+ resetGetList()
|
|
|
+ })
|
|
|
+ }
|
|
|
function formatDateTime(val) {
|
|
|
if (!val) return ''
|
|
|
return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
|
|
|
@@ -140,6 +206,7 @@
|
|
|
chapterId: route.query.chapterId,
|
|
|
courseName: route.query.courseName,
|
|
|
chapterName: route.query.chapterName,
|
|
|
+ courseName: `${route.query.courseName}-${route.query.title}-${route.query.chapterName}`,
|
|
|
...pagination.value
|
|
|
})
|
|
|
.then((data) => {
|
|
|
@@ -155,6 +222,10 @@
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+ //回到首页
|
|
|
+ const goToHome = () => {
|
|
|
+ router.push('/forum')
|
|
|
+ }
|
|
|
onMounted(() => {
|
|
|
if (route.query.postId) {
|
|
|
getDetail()
|
|
|
@@ -168,6 +239,9 @@
|
|
|
:deep(.htmlContent img) {
|
|
|
max-width: 100% !important;
|
|
|
}
|
|
|
+ :deep(.equ .ant-descriptions-header) {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
.snowy-index-card-left-one-username {
|
|
|
margin-left: 8px;
|
|
|
display: flex;
|
|
|
@@ -183,4 +257,17 @@
|
|
|
font-size: 14px;
|
|
|
color: #696969;
|
|
|
}
|
|
|
+ .flt {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+ .flc {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .box-width {
|
|
|
+ width: 1624px;
|
|
|
+ }
|
|
|
</style>
|