功能：贴子详情

src/api/interface/home.ts

@@ -949,3 +949,53 @@ export type ForumDetailType = InterFunction<
   { dynamicId: number; userAccountId?: number },
   DetailType
 >;
+// 话题-所有评论
+export type AllCommentListType = InterListFunction<
+  { dynamicId: number; userAccountId: number },
+  {
+    /**
+     * 评论内容
+     */
+    content: string;
+    /**
+     * 创建时间
+     */
+    createTime?: string;
+    /**
+     * 动态id
+     */
+    dynamicId: number;
+    /**
+     * id
+     */
+    id: number;
+    /**
+     * 评论点赞数
+     */
+    likeCount?: number;
+    /**
+     * pid
+     */
+    pid?: number;
+    /**
+     * 回复id
+     */
+    reviewId?: number;
+    /**
+     * 更新时间
+     */
+    updateTime?: string;
+    /**
+     * 用户id
+     */
+    userAccountId?: number;
+    status: number;
+    replyCount: number;
+    userAccountVO: {
+      userImg: string;
+      userName: string;
+      nickName: string;
+      id: number;
+    };
+  }
+>;

src/api/modules/home.ts

 import {
+  AllCommentListType,
   AppCategoryInfoType,
   AppGambitListsType,
   AppListPilotType,
@@ -106,4 +107,8 @@ export class HomeAPI {
   // 论坛-详情
   static getForumDetail: ForumDetailType = (params, config) =>
     request.get('/release/dynamic/dynamicDetails', { params, ...config });
+
+  // 话题-所有评论
+  static getAllCommentList: AllCommentListType = (params) =>
+    request.post('/release/gambit/allCommentList', params);
 }

src/components/forumItem/index.tsx

@@ -6,26 +6,36 @@ import {
 } from '@ant-design/icons';
 import { Image } from 'antd';
 import { useRouter } from 'next/router';
+import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { InterListType } from '@/api/interface';
 import { ForumListType } from '@/api/interface/home';
+import { setGlobalData } from '@/store/module/globalData';
 
 // 详情类型
 type DetailType = InterListType<ForumListType>[0];
 
-const ForumItemView: React.FC<{ detail: DetailType }> = ({ detail }) => {
+const ForumItemView: React.FC<{ detail: DetailType; isDetail?: Boolean }> = ({
+  detail,
+  isDetail = false,
+}) => {
   // 路由钩子
   const router = useRouter();
+  // store
+  const dispatch = useDispatch();
   // 获取帖子的媒体信息 0图片 1视频
   const getForumMedia = (type: number) => {
     return detail?.mediaVO?.filter((i) => i?.type === type)?.slice(0, 4);
   };
   // 帖子相关操作
-  const handleAction = async (type: number) => {
+  const handleAction = (type: number) => {
     // 评论
     if (type === 2) {
+      // 如果是在详情页面则不执行跳转
+      if (isDetail) return;
       // 跳转到评论页
-      await router.push(`/forum/detail/${detail?.id}`);
+      dispatch(setGlobalData({ loadingSpinnerVisible: true }));
+      router.push(`/forum/detail/${detail?.id}`).then();
     }
   };
   return (

src/pages/forum/detail/[id].tsx

-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Button, Input } from 'antd';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
-import { InterDataType } from '@/api/interface';
-import { ForumDetailType } from '@/api/interface/home';
+import { InterDataType, InterListType, PaginationProps } from '@/api/interface';
+import { AllCommentListType, ForumDetailType } from '@/api/interface/home';
 import ForumItemView from '@/components/forumItem';
 import LayoutView from '@/components/layout';
 import { wrapper } from '@/store';
 import { setGlobalData } from '@/store/module/globalData';
+import { UserInfoState } from '@/store/module/userInfo';
 
 // 详情类型
 type DetailType = InterDataType<ForumDetailType>;
+// 评论类型
+type CommentType = InterListType<AllCommentListType>;
 
 // 每次加载页面都会执行
 export const getServerSideProps = wrapper.getServerSideProps(
@@ -17,7 +22,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
     // 贴子id
     const id: number = Number(ctx.params?.id);
     // 贴子详情
-    let forumDetail: DetailType | undefined;
+    let forumDetail: DetailType | null = null;
     // 获取贴子详情
     const getForumDetail = async () => {
       const res = await HomeAPI.getForumDetail(
@@ -45,16 +50,70 @@ export const getServerSideProps = wrapper.getServerSideProps(
 const ForumDetailPage: React.FC<{ forumDetail: DetailType }> = ({
   forumDetail,
 }) => {
+  // userInfo
+  const userInfo = useSelector((state: any) => state.userInfo) as UserInfoState;
+  // 翻页数据
+  const [pagination, setPagination] = useState<
+    { totalPage: number; totalCount: number } & PaginationProps
+  >({
+    pageNo: 1,
+    pageSize: 10,
+    totalPage: 0,
+    totalCount: 0,
+  });
+  // 评论列表
+  const [commentList, setCommentList] = useState<CommentType>([]);
+  // 获取评论列表
+  const getAllCommentList = async () => {
+    const res = await HomeAPI.getAllCommentList({
+      dynamicId: forumDetail?.id,
+      userAccountId: userInfo?.id,
+      pageNo: pagination.pageNo,
+      pageSize: pagination.pageSize,
+    });
+    if (res && res.code === '200') {
+      const { list, totalPage, pageNo, pageSize, totalCount } =
+        res.result || {};
+      console.log('评论列表 ===>', list);
+      setCommentList((prevList) => [...prevList, ...(list || [])]);
+      pagination.totalPage = totalPage;
+      setPagination({ pageNo, pageSize, totalPage, totalCount });
+    }
+  };
   // 组件挂载
   useEffect(() => {
+    if (!forumDetail?.id) return;
+    getAllCommentList().then();
     console.log('组件挂载 ====>', forumDetail);
-  }, []);
+  }, [forumDetail]);
   return (
     <LayoutView>
       <ForumDetailWrap>
         <div className="forum-wrap">
           <div className="forum-detail">
-            <ForumItemView detail={forumDetail as any} />
+            <ForumItemView detail={forumDetail as any} isDetail={true} />
+            <div className="detail-comment">
+              <div className="comment-title">发表评论</div>
+              <div className="comment-view">
+                <img className="image" src={userInfo?.userImg} alt="我的头像" />
+                <div className="content">
+                  <Input.TextArea
+                    placeholder={'发表评论'}
+                    showCount
+                    style={{ height: 86 }}
+                    maxLength={140}
+                  />
+                  <div className="action">
+                    <Button type="primary" shape="round">
+                      发布
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="detail-list">
+              <div className="list-title">评论列表</div>
+            </div>
           </div>
           <div className="forum-order">45345</div>
         </div>
@@ -83,6 +142,49 @@ const ForumDetailWrap = styled.div`
       position: relative;
       width: calc(70% - 2rem);
       margin-right: 2rem;
+      .detail-comment {
+        position: relative;
+        width: 100%;
+        .comment-title {
+          font-size: 14px;
+          font-weight: bold;
+          margin-bottom: 1rem;
+        }
+        .comment-view {
+          position: relative;
+          width: 100%;
+          display: flex;
+          align-items: flex-start;
+          justify-content: flex-start;
+          box-sizing: border-box;
+          .image {
+            width: 2.5rem;
+            height: 2.5rem;
+            border-radius: 50%;
+            margin-right: 1rem;
+          }
+          .content {
+            position: relative;
+            width: calc(100% - 3.5rem);
+            box-sizing: border-box;
+            .action {
+              margin-top: 1.5rem;
+              width: 100%;
+              display: flex;
+              justify-content: flex-end;
+            }
+          }
+        }
+      }
+      .detail-list {
+        position: relative;
+        width: 100%;
+        .list-title {
+          font-size: 14px;
+          font-weight: bold;
+          margin-bottom: 1rem;
+        }
+      }
     }
     .forum-order {
       position: relative;