⚡ updated comment

2024-09-24 21:38:48 +08:00
parent a5624466ae
commit e4b9214840
4 changed files with 254 additions and 210 deletions
--- 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']
--- a/src/components/CommentReply/CommentReply.vue
+++ b/src/components/CommentReply/CommentReply.vue
@@ -122,7 +122,11 @@
                      <AAvatar shape="square" size="large"
                               v-for="(image, index) in item.images" :key="index">
                        <template #icon>
-                          <AImage :width="40" :height="40" :src="image"/>
+                          <AImage :width="40" :height="40" :src="image">
+                            <template #previewMask>
+                              <EyeOutlined style="font-size: 18px;"/>
+                            </template>
+                          </AImage>
                        </template>
                      </AAvatar>
                    </AFlex>
@@ -139,7 +143,9 @@
                            {{ item.dislikes }}
                          </AButton>
                        </AFlex>
-                        <AButton @click="replyListThrottled(item.id)" type="text" size="small"
+                        <AButton @click="()=>{
+                          handleShowReplyComment(item.id);
+                          replyListThrottled(item.id)}" type="text" size="small"
                                 :icon="h(MessageOutlined)"
                                 class="reply-action-btn">
                          {{ item.reply_count }}
@@ -289,8 +295,9 @@
                <!-- 子回复列表 -->

                <AFlex :vertical="true" class="reply-item-child"
-                       v-if="replyList.comments && showReplyComment && showReplyComment === item.id">
-                  <ASpin :spinning="replyLoading">
+                       v-if="showReplyComment && showReplyComment === item.id">
+                  <ASpin :spinning="replyLoading" size="default">
+                    <AFlex :vertical="true" v-if="replyList.comments">
                      <AFlex :vertical="false" style="margin-top: 5px" v-for="(child, index) in replyList.comments"
                             :key="index">
                        <AFlex :vertical="true" class="reply-item-child-avatar">
@@ -320,7 +327,11 @@
                                <AAvatar shape="square" size="large"
                                         v-for="(image, index) in child.images" :key="index">
                                  <template #icon>
-                                  <AImage :width="40" :height="40" :src="image"/>
+                                    <AImage :width="40" :height="40" :src="image">
+                                      <template #previewMask>
+                                        <EyeOutlined style="font-size: 18px;"/>
+                                      </template>
+                                    </AImage>
                                  </template>
                                </AAvatar>
                              </AFlex>
@@ -493,6 +504,12 @@
                          </AFlex>
                        </AFlex>
                      </AFlex>
+                      <APagination class="reply-pagination-child" size="small" :total="replyList.total"
+                                   :current="replyList.current" :page-size="replyList.size"
+                                   :default-page-size="replyList.size"
+                                   @change="(page: number, pageSize: number)=>{
+                                    getReplyList(item.id, page, pageSize);}"/>
+                    </AFlex>
                  </ASpin>
                </AFlex>

@@ -502,10 +519,11 @@

            </AFlex>
          </div>
-          <APagination class="reply-pagination" @change="(page, pageSize)=>{
-            console.log(page, pageSize)
-          }" v-model:current="commentList.current" :size="commentList.size.toString()" :total="commentList.total"
-                       show-less-items/>
+          <APagination class="reply-pagination" @change="(page: number, pageSize: number)=>{
+            getCommentList(page, pageSize);
+          }" :current="commentList.current" :page-size="commentList.size" :total="commentList.total"
+                       :default-page-size="commentList.size"
+                       :show-less-items="true"/>
        </div>
      </ASkeleton>
    </div>
@@ -552,6 +570,7 @@ const showReplyComment = ref<number | null>(null);
 const replyList = ref<Comment>({} as Comment);
 const commentLoading = ref<boolean>(true);
 const replyLoading = ref<boolean>(true);
+const topicId = ref<string>("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, '<br/>').replace(/\n/g, '<br/>').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,
--- 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;

--- 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,