⚡ updated comment

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']

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">
+                       v-if="showReplyComment && showReplyComment === item.id">
-                  <ASpin :spinning="replyLoading">
+                  <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)=>{
+          <APagination class="reply-pagination" @change="(page: number, pageSize: number)=>{
-            console.log(page, pageSize)
+            getCommentList(page, pageSize);
-          }" v-model:current="commentList.current" :size="commentList.size.toString()" :total="commentList.total"
+          }" :current="commentList.current" :page-size="commentList.size" :total="commentList.total"
-                       show-less-items/>
+                       :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",
+    topic_id: topicId.value,
-    page: 1,
+    page: page,
-    size: 5,
+    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",
+    topic_id: topicId.value,
-    page: 1,
+    page: page,
-    size: 5,
+    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,

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;
 

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,