功能：贴子详情

src/api/interface/home.ts

@@ -898,3 +898,54 @@ export type GetSecondDistrictInfo = InterFunction<
     }>;
   }[]
 >;
+// 论坛详情
+type DetailType = {
+  id: number;
+  commentAndReplyVO: DetailType[];
+  description: string;
+  likes: boolean;
+  likesCount: number;
+  title: string;
+  commentCount: number;
+  dynamicPublishTime: string;
+  mediaVO: { type: number; url: string }[];
+  userBaseInfo: {
+    nickName: string;
+    userImg: string;
+  };
+  userAccountId: number;
+  location: string;
+  gambitName?: string[];
+  forumGambitDTOList?: {
+    /**
+     * 话题参与讨论数量
+     */
+    discussionCount?: number;
+    /**
+     * 话题封面
+     */
+    gambitCover?: string;
+    /**
+     * 话题图标
+     */
+    gambitIcon?: string;
+    /**
+     * 话题名称
+     */
+    gambitName?: string;
+    /**
+     * 话题属性
+     */
+    gambitProperty?: number;
+    id: number;
+    /**
+     * 贴子数
+     */
+    postCount?: number;
+  }[];
+};
+// 论坛详情
+export type ForumDetailType = InterFunction<
+  { dynamicId: number; userAccountId?: number },
+  DetailType
+>;

src/api/modules/home.ts

@@ -3,6 +3,7 @@ import {
   AppGambitListsType,
   AppListPilotType,
   AppPublishListType,
+  ForumDetailType,
   ForumListType,
   GetAppGambitListType,
   GetInfoById,
@@ -101,4 +102,8 @@ export class HomeAPI {
   // 地域
   static getSecondDistrictInfo: GetSecondDistrictInfo = (params) =>
     request.get('/pms/webDevice/getSecondDistrictInfo', params);
+
+  //  论坛-详情
+  static getForumDetail: ForumDetailType = (params, config) =>
+    request.get('/release/dynamic/dynamicDetails', { params, ...config });
 }

src/components/forumItem/index.tsx

@@ -5,6 +5,7 @@ import {
   MessageOutlined,
 } from '@ant-design/icons';
 import { Image } from 'antd';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { InterListType } from '@/api/interface';
 import { ForumListType } from '@/api/interface/home';
@@ -13,13 +14,19 @@ import { ForumListType } from '@/api/interface/home';
 type DetailType = InterListType<ForumListType>[0];
 
 const ForumItemView: React.FC<{ detail: DetailType }> = ({ detail }) => {
+  // 路由钩子
+  const router = useRouter();
   // 获取帖子的媒体信息 0图片 1视频
   const getForumMedia = (type: number) => {
     return detail?.mediaVO?.filter((i) => i?.type === type)?.slice(0, 4);
   };
   // 帖子相关操作
-  const handleAction = (type: number) => {
-    console.log(type);
+  const handleAction = async (type: number) => {
+    // 评论
+    if (type === 2) {
+      // 跳转到评论页
+      await router.push(`/forum/detail/${detail?.id}`);
+    }
   };
   return (
     <ForumItemWrap>

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

@@ -21,9 +21,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
     // 获取课程详情
     const getCourseDetail = async () => {
       const res = await CourseAPI.getCourseDetail(
-        {
-          id,
-        },
+        { id },
         { headers: { token: ctx.req.cookies['SHAREFLY-WEB-TOKEN'] } },
       );
       if (res && res.code === '200') {

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

+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { HomeAPI } from '@/api';
+import { InterDataType } from '@/api/interface';
+import { 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';
+
+// 详情类型
+type DetailType = InterDataType<ForumDetailType>;
+
+// 每次加载页面都会执行
+export const getServerSideProps = wrapper.getServerSideProps(
+  (store) => async (ctx) => {
+    // 贴子id
+    const id: number = Number(ctx.params?.id);
+    // 贴子详情
+    let forumDetail: DetailType | undefined;
+    // 获取贴子详情
+    const getForumDetail = async () => {
+      const res = await HomeAPI.getForumDetail(
+        { dynamicId: id },
+        { headers: { token: ctx.req.cookies['SHAREFLY-WEB-TOKEN'] } },
+      );
+      if (res && res.code === '200') {
+        forumDetail = res.result;
+      }
+    };
+    // 依次获取接口数据
+    await (async () => {
+      // 如果未登录，则弹出登录框
+      if (!ctx.req.cookies['SHAREFLY-WEB-TOKEN']) {
+        store.dispatch(
+          setGlobalData({ loginModalVisible: true, loginModalBack: true }),
+        );
+      } else {
+        await getForumDetail();
+      }
+    })();
+    return { props: { forumDetail } };
+  },
+);
+const ForumDetailPage: React.FC<{ forumDetail: DetailType }> = ({
+  forumDetail,
+}) => {
+  // 组件挂载
+  useEffect(() => {
+    console.log('组件挂载 ====>', forumDetail);
+  }, []);
+  return (
+    <LayoutView>
+      <ForumDetailWrap>
+        <div className="forum-wrap">
+          <div className="forum-detail">
+            <ForumItemView detail={forumDetail as any} />
+          </div>
+          <div className="forum-order">45345</div>
+        </div>
+      </ForumDetailWrap>
+    </LayoutView>
+  );
+};
+
+export default ForumDetailPage;
+// 样式
+const ForumDetailWrap = styled.div`
+  position: relative;
+  max-width: 1190px;
+  box-sizing: border-box;
+  padding: 2rem 0 0 0;
+  margin: 0 auto;
+  .forum-wrap {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    box-sizing: border-box;
+    .forum-detail {
+      position: relative;
+      width: calc(70% - 2rem);
+      margin-right: 2rem;
+    }
+    .forum-order {
+      position: relative;
+      width: 30%;
+      background: lightgreen;
+    }
+  }
+`;

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

@@ -3,7 +3,7 @@ import { PlusOutlined } from '@ant-design/icons';
 import { App, Button } from 'antd';
 import { GetServerSidePropsContext } from 'next';
 import { useRouter } from 'next/router';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterListType, PaginationProps } from '@/api/interface';
@@ -12,7 +12,6 @@ import ForumItemView from '@/components/forumItem';
 import InfiniteScrollList from '@/components/InfiniteScrollList';
 import LayoutView from '@/components/layout';
 import { RootState } from '@/store';
-import { setGlobalData } from '@/store/module/globalData';
 import { SystemState } from '@/store/module/system';
 
 // 详情类型
@@ -51,7 +50,7 @@ const ForumTopicDetailPage: React.FC<{ topicDetail: DetailType }> = ({
   // 路由钩子
   const router = useRouter();
   // store
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
   // system
   const system = useSelector((state: RootState) => state.system) as SystemState;
   // 帖子列表
@@ -90,17 +89,8 @@ const ForumTopicDetailPage: React.FC<{ topicDetail: DetailType }> = ({
     }
   };
   useEffect(() => {
-    if (!system?.token) {
-      dispatch(
-        setGlobalData({
-          loginModalVisible: true,
-          loginModalBack: true,
-        }),
-      );
-    } else {
-      if (!topicDetail?.id) return;
-      getAppGambitLists().then();
-    }
+    if (!topicDetail?.id) return;
+    getAppGambitLists().then();
   }, [topicDetail]);
   return (
     <LayoutView>