论坛评价列表接口对接

pages/forum/api/index.tsx

@@ -40,10 +40,9 @@ export interface CommentParams {
   content: string; //评论内容
   dynamicId: number; //动态id
   parentId?: number; //父级评论
-  userId: number; //用户id
 }
 
-export interface ByDynamicParams {
+export interface ByDynamicResp {
   id: number;
   dynamicId: number;
   parentId: number;
@@ -51,7 +50,12 @@ export interface ByDynamicParams {
   content: string;
   likesCount: number;
   createTime: string;
-  children: ByDynamicParams[];
+  children: ByDynamicResp[];
+  userBaseInfoVO: {
+    id: number,
+    nickName: string,
+    userImg: string
+  }
 }
 
 export default {
@@ -70,7 +74,14 @@ export default {
   },
 
   //根据动态查看评论
-  byDynamic(params: { dynamicId: number }): Promise<Response<Array<ByDynamicParams>>> {
+  byDynamic(params: {
+    dynamicId: number;
+  }): Promise<Response<Array<ByDynamicResp>>> {
     return request("/release/dynamic/byDynamic", "get", params);
   },
+
+  //点赞或取消点赞
+  likeOrCancel(params: { dynamicId: number }) {
+    return request("/release/dynamic/likeOrCancel", "get", params);
+  },
 };

pages/forum/index.page.tsx

@@ -15,14 +15,15 @@ import errImg from "~/assets/errImg";
 import { RightOutlined } from "@ant-design/icons";
 import { useContext, useEffect, useState } from "react";
 import PublishMessage from "./components/publishMessage";
-import api, { ByDynamicParams, Dynamic } from "./api";
+import api, { ByDynamicResp, Dynamic } from "./api";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { UserContext } from "~/lib/userProvider";
+import moment from "moment";
 
 interface Item extends Dynamic {
   openComment?: boolean; //是否开启评论
   showCommentAll?: boolean; //是否展示全部评论
-  commentList?: Array<ByDynamicParams>;
+  commentList?: Array<ByDynamicResp>; //评论列表
 }
 
 export default function Forum() {
@@ -34,6 +35,7 @@ export default function Forum() {
   });
   const [count, setCount] = useState(0); //动态总数
   const { userInfo, setNeedLogin } = useContext(UserContext);
+  const [form] = Form.useForm(); //评论区的form
 
   useEffect(() => {
     api
@@ -78,27 +80,74 @@ export default function Forum() {
     item.openComment = !item.openComment;
     const temp = [...list];
     setList(temp);
+    getCommentList(item);
   };
 
-  //评论内容
-  const onComment = (values: any, id: number, i: number) => {
+  //获取评论列表
+  const getCommentList = (item: Item) => {
+    api
+      .byDynamic({
+        dynamicId: item.id,
+      })
+      .then((res) => {
+        if (res?.code === "200") {
+          item.commentList = res.result || [];
+        }
+        const temp = [...list];
+        setList(temp);
+      });
+  };
 
+  //展示所有评论
+  const showCommentAll = (item: Item) => {
+    item.showCommentAll = true;
+    const temp = [...list];
+    setList(temp);
+  };
+
+  //评论内容
+  const onComment = (values: any, item: Item) => {
     if (userInfo) {
       api
         .comment({
           content: values.content,
-          dynamicId: id,
-          userId: userInfo.id,
+          dynamicId: item.id,
         })
         .then((res) => {
           if (res.code === "200") {
             window.messageApi.success("评论成功");
+            form.resetFields(["content"]);
+            item.commentCount += 1;
+            getCommentList(item);
           }
         });
     } else {
       setNeedLogin(true);
     }
   };
+
+  //点赞或取消
+  const onLike = (item: Item) => {
+    if (userInfo) {
+      api
+        .likeOrCancel({
+          dynamicId: item.id,
+        })
+        .then((res) => {
+          if (res.code === "200") {
+            item.likes = !item.likes;
+            if (item.likes) {
+              item.likesCount++;
+            } else {
+              item.likesCount--;
+            }
+            const temp = [...list];
+            setList(temp);
+          }
+        });
+    }
+  };
+
   return (
     <Layout>
       <div className={styles.forum}>
@@ -169,7 +218,10 @@ export default function Forum() {
                           ></div>
                           {item.commentCount}评论
                         </div>
-                        <div className={styles.ctrlsItem}>
+                        <div
+                          className={styles.ctrlsItem}
+                          onClick={() => onLike(item)}
+                        >
                           <div
                             className={`${styles.ctrlsItemIcon} ${
                               styles.iconPraise
@@ -183,8 +235,9 @@ export default function Forum() {
                   {item.openComment && (
                     <div className={styles.commentWrap}>
                       <Form
+                        form={form}
                         onFinish={(values) => {
-                          onComment(values, item.id, i);
+                          onComment(values, item, i);
                         }}
                       >
                         <Form.Item
@@ -213,38 +266,53 @@ export default function Forum() {
                       </Form>
 
                       <div className={styles.comments}>
-                        <div className={styles.commentItem}>
-                          <div className={styles.commentHeadImg}></div>
-                          <div className={styles.info}>
-                            <div className={styles.nameWrap}>
-                              <div className={styles.commentName}>
-                                无人机爱好者111：
-                                <div className={styles.date}>05-16</div>
-                              </div>
-                              <div className={styles.commentContent}>
-                                无人机记录生活
-                              </div>
-                            </div>
-                          </div>
+                        {/* 判断是否展示所有评论 */}
+                        {item.commentList
+                          ?.filter((comment, i) => {
+                            if (item.showCommentAll) {
+                              return true;
+                            } else {
+                              if (i < 2) {
+                                return true;
+                              }
+                            }
+                          })
+                          .map((comment) => {
+                            return (
+                              <div
+                                key={comment.id}
+                                className={styles.commentItem}
+                              >
+                                <div className={styles.commentHeadImg}>
+                                  <Image
+                                    src={comment.userBaseInfoVO?.userImg}
+                                  ></Image>
                                 </div>
-                        <div className={styles.commentItem}>
-                          <div className={styles.commentHeadImg}></div>
                                 <div className={styles.info}>
                                   <div className={styles.nameWrap}>
                                     <div className={styles.commentName}>
-                                无人机爱好者111：
-                                <div className={styles.date}>05-16</div>
+                                      {comment.userBaseInfoVO?.nickName}：
+                                      <div className={styles.date}>
+                                        {moment(comment.createTime).format(
+                                          "YYYY-MM-DD"
+                                        )}
+                                      </div>
                                     </div>
                                     <div className={styles.commentContent}>
-                                无人机记录生活
+                                      {comment.content}
                                     </div>
                                   </div>
                                 </div>
                               </div>
+                            );
+                          })}
                       </div>
-                      {!item.showCommentAll && (
-                        <div className={styles.showAll}>
-                          查看全部15条评论
+                      {!item.showCommentAll && item.commentCount > 2 && (
+                        <div
+                          className={styles.showAll}
+                          onClick={() => showCommentAll(item)}
+                        >
+                          查看全部{item.commentCount}条评论
                           <RightOutlined size={14} />
                         </div>
                       )}