From e4b9214840c238201fdf91eca7c5371147c1cfc9 Mon Sep 17 00:00:00 2001
From: landaiqing <3517283258@qq.com>
Date: Tue, 24 Sep 2024 21:38:48 +0800
Subject: [PATCH] :zap: updated comment
---
components.d.ts | 1 +
src/components/CommentReply/CommentReply.vue | 455 ++++++++++---------
src/components/CommentReply/index.scss | 6 +
src/types/comment.d.ts | 2 +-
4 files changed, 254 insertions(+), 210 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index a49fd00..798c8c1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -45,6 +45,7 @@ declare module 'vue' {
DeleteOutlined: typeof import('@ant-design/icons-vue')['DeleteOutlined']
DynamicTitle: typeof import('./src/components/DynamicTitle/DynamicTitle.vue')['default']
EffectsCard: typeof import('./src/components/EffectsCard/EffectsCard.vue')['default']
+ EyeOutlined: typeof import('@ant-design/icons-vue')['EyeOutlined']
ForgetPage: typeof import('./src/views/Forget/ForgetPage.vue')['default']
GithubOutlined: typeof import('@ant-design/icons-vue')['GithubOutlined']
LandingPage: typeof import('./src/views/Landing/LandingPage.vue')['default']
diff --git a/src/components/CommentReply/CommentReply.vue b/src/components/CommentReply/CommentReply.vue
index ce817cb..ea25e4c 100644
--- a/src/components/CommentReply/CommentReply.vue
+++ b/src/components/CommentReply/CommentReply.vue
@@ -122,7 +122,11 @@
-
+
+
+
+
+
@@ -139,7 +143,9 @@
{{ item.dislikes }}
-
{{ item.reply_count }}
@@ -289,209 +295,220 @@
-
-
-
-
-
-
-
-
- {{ child.nickname }}
- @{{ child.reply_username }}
- Lv.5
-
-
-
-
- {{ child.location }}
-
- {{ formatTimeAgo(child.created_time) }}
-
+ v-if="showReplyComment && showReplyComment === item.id">
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+ {{ child.nickname }}
+ @{{ child.reply_username }}
+ Lv.5
+
-
-
-
-
-
- {{ child.likes }}
-
-
-
-
- {{ child.dislikes }}
-
-
-
- {{ t('comment.reply') }}
-
-
-
-
-
- {{ child.operating_system }}
-
-
- {{ child.browser }}
-
-
-
-
-
-
-
-
- {{ t('comment.report') }}
-
-
- {{ t('comment.copy') }}
-
-
- {{ t('comment.delete') }}
-
-
-
-
+
+
+ {{ child.location }}
+ {{ formatTimeAgo(child.created_time) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -502,10 +519,11 @@
-
+
@@ -552,6 +570,7 @@ const showReplyComment = ref(null);
const replyList = ref({} as Comment);
const commentLoading = ref(true);
const replyLoading = ref(true);
+const topicId = ref("123");
/**
* 聚焦事件
@@ -647,7 +666,7 @@ async function commentSubmit() {
const commentParams: object = {
user_id: user.user.uid,
- topic_id: "123",
+ topic_id: topicId.value,
content: content,
images: imageList.value,
author: user.user.uid,
@@ -658,6 +677,8 @@ async function commentSubmit() {
commentContent.value = "";
fileList.value = [];
imageList.value = [];
+ commentList.value = {} as Comment;
+ commentLoading.value = true;
await getCommentList();
} else {
message.error("评论失败");
@@ -683,9 +704,17 @@ async function replySubmit(data: ReplyCommentParams) {
}
const content = replyContent.value.replace(/\r\n/g, '
').replace(/\n/g, '
').replace(/\s/g, ' ');
- const replyParams: ReplyCommentParams = {
+ const replyParams: {
+ images: any;
+ reply_id: number;
+ reply_user: string;
+ user_id: any;
+ author: any;
+ topic_id: string;
+ content: any
+ } = {
user_id: user.user.uid,
- topic_id: "123",
+ topic_id: topicId.value,
content: content,
images: imageList.value,
author: user.user.uid,
@@ -698,6 +727,9 @@ async function replySubmit(data: ReplyCommentParams) {
replyContent.value = "";
fileList.value = [];
imageList.value = [];
+ replyList.value = {} as Comment;
+ replyLoading.value = true;
+ await getReplyList(data.reply_id);
} else {
message.error("回复失败");
}
@@ -706,12 +738,14 @@ async function replySubmit(data: ReplyCommentParams) {
/**
* 获取评论列表
*/
-async function getCommentList() {
+async function getCommentList(page: number = 1, size: number = 5) {
const params = {
- topic_id: "123",
- page: 1,
- size: 5,
+ topic_id: topicId.value,
+ page: page,
+ size: size,
};
+ commentLoading.value = true;
+ commentList.value = {} as Comment;
// 获取评论列表
const result: any = await commentListApi(params);
if (result.code === 200 && result.success && result.data) {
@@ -724,7 +758,7 @@ async function getCommentList() {
* 格式化时间
* @param dateString
*/
-function formatTimeAgo(dateString) {
+function formatTimeAgo(dateString: string) {
const now: any = new Date();
const date: any = new Date(dateString);
const seconds = Math.floor((now - date) / 1000);
@@ -773,19 +807,22 @@ const replyListThrottled = useThrottleFn(getReplyList, 500);
/**
* 获取回复列表
* @param reply_id
+ * @param page
+ * @param size
*/
-async function getReplyList(reply_id: number) {
+async function getReplyList(reply_id: number, page: number = 1, size: number = 5) {
const params: any = {
- topic_id: "123",
- page: 1,
- size: 5,
+ topic_id: topicId.value,
+ page: page,
+ size: size,
comment_id: reply_id,
};
+ replyLoading.value = true;
+ replyList.value = {} as Comment;
// 获取评论列表
const result: any = await replyListApi(params);
if (result.code === 200 && result.success && result.data) {
replyList.value = result.data;
- handleShowReplyComment(reply_id);
replyLoading.value = false;
}
}
@@ -812,7 +849,7 @@ async function replyReplySubmit(data: any) {
const replyParams: ReplyCommentParams = {
user_id: user.user.uid,
- topic_id: "123",
+ topic_id: topicId.value,
content: content,
images: imageList.value,
author: user.user.uid,
diff --git a/src/components/CommentReply/index.scss b/src/components/CommentReply/index.scss
index 793cc8d..360ebaa 100644
--- a/src/components/CommentReply/index.scss
+++ b/src/components/CommentReply/index.scss
@@ -222,6 +222,12 @@
background-color: #f5f5f5;
padding: 10px;
+ .reply-pagination-child {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 10px;
+ }
+
.reply-item-child-content {
margin-left: 10px;
diff --git a/src/types/comment.d.ts b/src/types/comment.d.ts
index fdfadd7..468fad8 100644
--- a/src/types/comment.d.ts
+++ b/src/types/comment.d.ts
@@ -27,7 +27,7 @@ interface CommentContent {
images: string[];
}
-interface ReplyCommentParams {
+export interface ReplyCommentParams {
user_id: string,
topic_id: string,
content: string,