|
|
|
@ -57,6 +57,11 @@
|
|
|
|
|
</button>
|
|
|
|
|
</span>
|
|
|
|
|
<button class="reply-btn" @click="startReply(comment)">回复</button>
|
|
|
|
|
<button
|
|
|
|
|
class="delete-btn"
|
|
|
|
|
v-if="String(comment.userId) === String(userStore.userInfo?.userid)"
|
|
|
|
|
@click="handleDelete(comment)"
|
|
|
|
|
>删除</button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 子评论列表 -->
|
|
|
|
|
<ul v-if="comment.showReplies && comment.replies && comment.replies.length > 0" class="replies-list">
|
|
|
|
@ -78,6 +83,11 @@
|
|
|
|
|
<span class="comment-time">{{ reply.createTime ? formatTime(reply.createTime) : '' }}</span>
|
|
|
|
|
<span class="comment-likes">赞 {{ reply.likeCount ?? 0 }}</span>
|
|
|
|
|
<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)"
|
|
|
|
|
>删除</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
@ -108,6 +118,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 { usePostDetailStore } from '@/stores/postdetail.js';
|
|
|
|
|
import { useUserStore } from '@/stores/user.js';
|
|
|
|
|
|
|
|
|
@ -185,13 +196,24 @@ const sendComment = () => {
|
|
|
|
|
topId: replyingComment.value ? replyingComment.value.topId : null,
|
|
|
|
|
isLike: false,
|
|
|
|
|
}
|
|
|
|
|
console.log('回复:', replyingComment.value);
|
|
|
|
|
console.log('发送评论:', newCommentData);
|
|
|
|
|
postDetailStore.sendComment(newCommentData);
|
|
|
|
|
newComment.value = '';
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function handleDelete(comment, parentCommentId = null) {
|
|
|
|
|
ElMessageBox.confirm(
|
|
|
|
|
'确定要删除这条评论吗?',
|
|
|
|
|
'提示',
|
|
|
|
|
{
|
|
|
|
|
confirmButtonText: '删除',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
}
|
|
|
|
|
).then(() => {
|
|
|
|
|
postDetailStore.deleteComment(comment.id, parentCommentId);
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
}
|
|
|
|
|
// 监听 postDetailStore.post 加载完成后再允许滚动加载评论
|
|
|
|
|
watch(
|
|
|
|
|
() => postDetailStore.post,
|
|
|
|
@ -507,4 +529,15 @@ onUnmounted(() => {
|
|
|
|
|
.reply-btn:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
.delete-btn {
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
color: #f56c6c;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
.delete-btn:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
</style>
|