|
|
|
@ -2,12 +2,12 @@
|
|
|
|
|
<div class="post-detail-container">
|
|
|
|
|
<!-- 作者信息栏 -->
|
|
|
|
|
<div class="author-info" v-if="author && author.userName">
|
|
|
|
|
<img
|
|
|
|
|
<img
|
|
|
|
|
:src="author.userAvatar || require('@/assets/default-avatar/boy_1.png')"
|
|
|
|
|
alt="头像"
|
|
|
|
|
class="author-avatar"
|
|
|
|
|
@click="goUserHome(author.userId)"
|
|
|
|
|
style="cursor: pointer;"
|
|
|
|
|
:style="{ cursor: postDetailStore.post?.status === 1 ? 'not-allowed' : 'pointer' }"
|
|
|
|
|
@click="handleAuthorAvatarClick"
|
|
|
|
|
/>
|
|
|
|
|
<div class="author-details">
|
|
|
|
|
<h3 class="author-name">{{ author.userName || '匿名用户' }}</h3>
|
|
|
|
@ -24,9 +24,19 @@
|
|
|
|
|
<h1 class="post-title">{{ postDetailStore.post?.title || '' }}</h1>
|
|
|
|
|
<p class="post-body">{{ postDetailStore.post?.content || '' }}</p>
|
|
|
|
|
<div class="post-stats">
|
|
|
|
|
<span> 浏览量 {{ postDetailStore.post?.viewCount ?? 0 }}</span>
|
|
|
|
|
<span> 点赞 {{ postDetailStore.post?.likeCount ?? 0 }}</span>
|
|
|
|
|
<span> 评论 {{ postDetailStore.post?.commentCount ?? 0 }}</span>
|
|
|
|
|
<span> 👁 {{ postDetailStore.post?.viewCount ?? 0 }}</span>
|
|
|
|
|
<span> 🗨 {{ postDetailStore.post?.commentCount ?? 0 }}</span>
|
|
|
|
|
<span>
|
|
|
|
|
<button
|
|
|
|
|
@click="postDetailStore.PostLike"
|
|
|
|
|
class="like-btn"
|
|
|
|
|
:class="{ liked: postDetailStore.isLike }"
|
|
|
|
|
>
|
|
|
|
|
<span v-if="!postDetailStore.isLike">♡</span>
|
|
|
|
|
<span v-else>♥</span>
|
|
|
|
|
{{ postDetailStore.post?.likeCount ?? 0 }}
|
|
|
|
|
</button>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="post-time">
|
|
|
|
|
发布时间:{{ postDetailStore.post?.createTime ? formatTime(postDetailStore.post.createTime) : '' }}
|
|
|
|
@ -50,7 +60,14 @@
|
|
|
|
|
<p class="comment-text">{{ comment.content || '' }}</p>
|
|
|
|
|
<div class="comment-meta">
|
|
|
|
|
<span class="comment-time">{{ comment.createTime ? formatTime(comment.createTime) : '' }}</span>
|
|
|
|
|
<span class="comment-likes">赞 {{ comment.likeCount ?? 0 }}</span>
|
|
|
|
|
<button
|
|
|
|
|
@click="postDetailStore.CommentLike(comment)"
|
|
|
|
|
:class="['like-btn', { liked: comment.isLike }]"
|
|
|
|
|
>
|
|
|
|
|
<span v-if="!comment.isLike">♡</span>
|
|
|
|
|
<span v-else>♥</span>
|
|
|
|
|
{{ comment.likeCount ?? 0 }}
|
|
|
|
|
</button>
|
|
|
|
|
<span v-if="comment.replyCount > 0">
|
|
|
|
|
<button @click="loadReplies(comment)">
|
|
|
|
|
{{ comment.showReplies> 0 ? '收起回复' : '展开回复' }} ({{ comment.replyCount }})
|
|
|
|
@ -81,12 +98,19 @@
|
|
|
|
|
<p class="comment-text">{{ reply.content || '' }}</p>
|
|
|
|
|
<div class="comment-meta">
|
|
|
|
|
<span class="comment-time">{{ reply.createTime ? formatTime(reply.createTime) : '' }}</span>
|
|
|
|
|
<span class="comment-likes">赞 {{ reply.likeCount ?? 0 }}</span>
|
|
|
|
|
<button
|
|
|
|
|
@click="postDetailStore.CommentLike(reply)"
|
|
|
|
|
:class="['like-btn', { liked: reply.isLike }]"
|
|
|
|
|
>
|
|
|
|
|
<span v-if="!reply.isLike">♡</span>
|
|
|
|
|
<span v-else>♥</span>
|
|
|
|
|
{{ reply.likeCount ?? 0 }}
|
|
|
|
|
</button>
|
|
|
|
|
<button class="reply-btn" @click="startReply(reply)">回复</button>
|
|
|
|
|
<button
|
|
|
|
|
class="delete-btn"
|
|
|
|
|
v-if="String(reply.userId) === String(userStore.userInfo?.userid)"
|
|
|
|
|
@click="handleDelete(reply, comment.id)"
|
|
|
|
|
@click="handleDelete(reply)"
|
|
|
|
|
>删除</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -118,7 +142,7 @@
|
|
|
|
|
<script setup lang="js" name="PostDetail">
|
|
|
|
|
import { ref, computed, onMounted , onUnmounted, watch } from 'vue';
|
|
|
|
|
import { useRoute,useRouter } from 'vue-router';
|
|
|
|
|
import { ElMessageBox } from 'element-plus';
|
|
|
|
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
|
|
|
|
import { usePostDetailStore } from '@/stores/postdetail.js';
|
|
|
|
|
import { useUserStore } from '@/stores/user.js';
|
|
|
|
|
|
|
|
|
@ -201,7 +225,7 @@ const sendComment = () => {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function handleDelete(comment, parentCommentId = null) {
|
|
|
|
|
function handleDelete(comment) {
|
|
|
|
|
ElMessageBox.confirm(
|
|
|
|
|
'确定要删除这条评论吗?',
|
|
|
|
|
'提示',
|
|
|
|
@ -211,9 +235,22 @@ function handleDelete(comment, parentCommentId = null) {
|
|
|
|
|
type: 'warning',
|
|
|
|
|
}
|
|
|
|
|
).then(() => {
|
|
|
|
|
postDetailStore.deleteComment(comment.id, parentCommentId);
|
|
|
|
|
postDetailStore.deleteComment(comment);
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleAuthorAvatarClick() {
|
|
|
|
|
// 判断用户名为匿名用户且头像为空时不跳转
|
|
|
|
|
if (
|
|
|
|
|
(author.value.userName === '匿名用户' || postDetailStore.post?.status === 1) &&
|
|
|
|
|
(!author.value.userAvatar || author.value.userAvatar === '')
|
|
|
|
|
) {
|
|
|
|
|
ElMessage.info('该用户为匿名用户');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
goUserHome(author.value.userId);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 监听 postDetailStore.post 加载完成后再允许滚动加载评论
|
|
|
|
|
watch(
|
|
|
|
|
() => postDetailStore.post,
|
|
|
|
@ -540,4 +577,15 @@ onUnmounted(() => {
|
|
|
|
|
.delete-btn:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
.like-btn {
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
color: #409eff;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
.like-btn.liked {
|
|
|
|
|
color: #f56c6c;
|
|
|
|
|
}
|
|
|
|
|
</style>
|