功能：话题详情

src/api/interface/home.ts

@@ -189,6 +189,118 @@ export type GetAppGambitListType = InterListFunction<
     postCount?: number;
   }
 >;
+// 话题-话题下的帖子
+export type AppGambitListsType = InterListFunction<
+  { gambitId?: number },
+  {
+    /**
+     * 评论数
+     */
+    commentsCount?: number;
+    /**
+     * 创建时间
+     */
+    createTime?: string;
+    /**
+     * 描述
+     */
+    description?: string;
+    /**
+     * 话题
+     */
+    forumGambitDOList?: {
+      /**
+       * 话题参与讨论数量
+       */
+      discussionCount?: number;
+      /**
+       * 话题封面
+       */
+      gambitCover?: string;
+      /**
+       * 话题图标
+       */
+      gambitIcon?: string;
+      /**
+       * 话题名称
+       */
+      gambitName?: string;
+      /**
+       * 话题属性
+       */
+      gambitProperty?: number;
+      id?: number;
+      /**
+       * 贴子数
+       */
+      postCount?: number;
+    }[];
+    /**
+     * 图片
+     */
+    forumResourceDOList?: {
+      createTime?: Date;
+      dynamicId?: number;
+      resourceUrl?: string;
+      type?: number;
+      updateTime?: Date;
+    }[];
+    forumReviewDO?: {
+      /**
+       * 评论内容
+       */
+      content?: string;
+      /**
+       * 创建时间
+       */
+      createTime?: string;
+      /**
+       * 动态id
+       */
+      dynamicId?: number;
+      /**
+       * id
+       */
+      id?: number;
+      /**
+       * 评论点赞数
+       */
+      likeCount?: number;
+      /**
+       * pid
+       */
+      pid?: number;
+      /**
+       * 回复id
+       */
+      reviewId?: number;
+      /**
+       * 更新时间
+       */
+      updateTime?: string;
+      /**
+       * 用户id
+       */
+      userAccountId?: number;
+    }[];
+    /**
+     * id
+     */
+    id?: number;
+    /**
+     * 点赞数
+     */
+    likesCount?: number;
+    /**
+     * 转发数
+     */
+    transpond?: number;
+    /**
+     * 发布者用户
+     */
+    userAccountId?: number;
+  }
+>;
 // 小程序-列表——需求发布
 export type AppPublishListType = InterFunction<
   {

src/api/modules/home.ts

 import {
   AppCategoryInfoType,
+  AppGambitListsType,
   AppListPilotType,
   AppPublishListType,
   ForumListType,
@@ -37,10 +38,14 @@ export class HomeAPI {
   static appListPilot: AppListPilotType = (params) =>
     request.post('/userapp/pilot/appListPilot', params);
 
-  //  话题-列表（小程序）
+  // 话题-列表（小程序）
   static getAppGambitList: GetAppGambitListType = (data) =>
     request.post('/release/dynamic/appGambitList', data);
 
+  // 话题-话题下的帖子
+  static getAppGambitLists: AppGambitListsType = (data) =>
+    request.post('/release/gambit/appGambitLists', data);
+
   // 小程序-列表——需求发布
   static appPublishList: AppPublishListType = (params) =>
     request.post('/release/requirements/appPublishList', params);

src/components/forumItem/index.tsx

@@ -26,7 +26,10 @@ const ForumItemView: React.FC<{ detail: DetailType }> = ({ detail }) => {
       <div className="relative mb-2 flex w-full items-center justify-start">
         <img
           className="h-9 w-9 rounded-full"
-          src={detail?.userBaseInfo?.userImg}
+          src={
+            detail?.userBaseInfo?.userImg ||
+            'https://file.iuav.com/file/sharefly-logo.png'
+          }
           alt="头像"
         />
         <div className="ml-2">

src/components/home-comp/home-topic/index.tsx

@@ -34,7 +34,7 @@ const HomeTopicView = () => {
   };
   // 跳转详情
   const handleDetail = async (item: ListType[0]) => {
-    await router.push(`/forum/detail/${item.id}`);
+    await router.push(`/forum/topic/${item.id}`);
   };
   // 组件挂载
   useEffect(() => {

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

+import React, { useEffect, useState } from 'react';
+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 styled from 'styled-components';
+import { HomeAPI } from '@/api';
+import { InterListType, PaginationProps } from '@/api/interface';
+import { ForumListType, GetAppGambitListType } from '@/api/interface/home';
+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';
+
+// 详情类型
+type DetailType = InterListType<GetAppGambitListType>[0];
+// 列表类型
+type ListType = InterListType<ForumListType>;
+
+// 每次加载页面都会执行
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  // 商品id
+  const id: number = Number(context.params?.id);
+  // 话题详情
+  let topicDetail: DetailType | undefined;
+  // 获取话题详情
+  const getListGambit = async () => {
+    const res = await HomeAPI.getAppGambitList({
+      gambitId: id,
+      pageNo: 1,
+      pageSize: 999,
+    });
+    if (res && res.code === '200') {
+      topicDetail = res.result?.list?.[0];
+    }
+  };
+  // 依次获取接口数据
+  await (async () => {
+    await getListGambit();
+  })();
+  return { props: { topicDetail } };
+}
+const ForumTopicDetailPage: React.FC<{ topicDetail: DetailType }> = ({
+  topicDetail,
+}) => {
+  // store
+  const { message } = App.useApp();
+  // 路由钩子
+  const router = useRouter();
+  // store
+  const dispatch = useDispatch();
+  // system
+  const system = useSelector((state: RootState) => state.system) as SystemState;
+  // 帖子列表
+  const [forumList, setForumList] = useState<ListType>([]);
+  // 翻页数据
+  const [pagination, setPagination] = useState<
+    { totalPage: number } & PaginationProps
+  >({
+    pageNo: 1,
+    pageSize: 10,
+    totalPage: 0,
+  });
+  // 获取帖子列表
+  const getAppGambitLists = async () => {
+    const res = await HomeAPI[system?.token ? 'getForumList' : 'getForumList1'](
+      {
+        gambitId: Number(router.query?.id),
+        pageNo: pagination.pageNo,
+        pageSize: pagination.pageSize,
+      },
+    );
+    if (res && res.code === '200') {
+      const { list, totalPage, pageNo, pageSize } = res.result || {};
+      setForumList((prevList) => [...prevList, ...(list || [])]);
+      pagination.totalPage = totalPage;
+      setPagination({ pageNo, pageSize, totalPage });
+    }
+  };
+  // 添加 handleReachBottom 函数
+  const handleReachBottom = async () => {
+    if (pagination.pageNo < pagination.totalPage) {
+      pagination.pageNo += 1;
+      await getAppGambitLists();
+    } else {
+      message.success('没有更多数据了');
+    }
+  };
+  useEffect(() => {
+    if (!system?.token) {
+      dispatch(
+        setGlobalData({
+          loginModalVisible: true,
+          loginModalBack: true,
+        }),
+      );
+    } else {
+      if (!topicDetail?.id) return;
+      getAppGambitLists().then();
+    }
+  }, [topicDetail]);
+  return (
+    <LayoutView>
+      <ForumTopicDetailWrap>
+        <div
+          className="topic-bg"
+          style={{
+            backgroundImage: `url(${
+              topicDetail?.gambitCover ||
+              'https://file.iuav.com/file/sharefly-forum-topic-bg.png'
+            })`,
+          }}
+        ></div>
+        <div className="topic-wrap">
+          <div className="topic-head">
+            <img
+              className="item-image"
+              src={topicDetail?.gambitIcon || topicDetail?.gambitCover}
+              alt={topicDetail?.gambitName}
+            />
+            <div className="item-content">
+              <div className="content-name two-line-ellipsis cursor-pointer">
+                {topicDetail.gambitName}
+              </div>
+              <div className="content-desc">
+                <span>{topicDetail?.discussionCount}个帖子</span>
+                <span>{topicDetail?.discussionCount}个讨论</span>
+              </div>
+            </div>
+            <Button icon={<PlusOutlined />} shape={'round'} type="primary">
+              发帖
+            </Button>
+          </div>
+          <InfiniteScrollList
+            bottomDistance={300}
+            onReachBottom={handleReachBottom}
+          >
+            <div className="topic-list">
+              {forumList?.map((i, j) => <ForumItemView key={j} detail={i} />)}
+            </div>
+          </InfiniteScrollList>
+        </div>
+      </ForumTopicDetailWrap>
+    </LayoutView>
+  );
+};
+
+export default ForumTopicDetailPage;
+// 样式
+const ForumTopicDetailWrap = styled.div`
+  .topic-bg {
+    position: absolute;
+    top: -10px;
+    left: 0;
+    background-image: url('https://file.iuav.com/file/sharefly-forum-topic-bg.png');
+    background-size: cover;
+    height: 15rem;
+    width: 100%;
+    z-index: -1;
+    opacity: 0.86;
+  }
+  .topic-wrap {
+    position: relative;
+    max-width: 1190px;
+    box-sizing: border-box;
+    padding: 2rem 0 0 0;
+    margin: 0 auto;
+    .topic-head {
+      position: relative;
+      width: 100%;
+      min-height: 5rem;
+      box-sizing: border-box;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      margin-bottom: 1.86rem;
+      .item-image {
+        height: 5rem;
+        width: 8rem;
+        object-fit: cover;
+        margin-right: 0.67rem;
+        border-radius: 0.68rem;
+      }
+      .item-content {
+        position: relative;
+        width: 30rem;
+        margin-right: 5rem;
+        .content-name {
+          width: 100%;
+          font-size: 13px;
+          font-weight: bold;
+          &:hover {
+            color: #ff392b;
+          }
+        }
+        .content-desc {
+          span:not(:last-child) {
+            margin-right: 0.5rem;
+          }
+        }
+      }
+    }
+    .topic-list {
+      position: relative;
+      width: 100%;
+      min-height: 20rem;
+      background: #fff;
+      border-radius: 1.86rem;
+      box-sizing: border-box;
+      padding: 1rem 35% 1rem 1.5rem;
+      margin-bottom: 2rem;
+    }
+  }
+`;