功能：首页论坛列表

src/api/interface/home.ts

@@ -561,3 +561,119 @@ export type GetPageHomeCategoriesType = InterFunction<
     categoryName: string;
   }[]
 >;
+// 论坛列表
+export type ForumListType = InterItemFunction<
+  {
+    userId?: number;
+    gambitId?: number;
+    userAccountId?: number;
+    gambitName?: string;
+  },
+  {
+    id: number;
+    commentCount: number;
+    description: string;
+    likes: boolean;
+    likesCount: number;
+    transpond: number;
+    title: string;
+    mediaVO: { type: number; url: string }[];
+    userAccountId: number;
+    userBaseInfo: {
+      nickName: string;
+      userImg: string;
+    };
+    forumGambitDTOList?: {
+      /**
+       * 话题参与讨论数量
+       */
+      discussionCount?: number;
+      /**
+       * 话题封面
+       */
+      gambitCover?: string;
+      /**
+       * 话题图标
+       */
+      gambitIcon?: string;
+      /**
+       * 话题名称
+       */
+      gambitName?: string;
+      /**
+       * 话题属性
+       */
+      gambitProperty?: number;
+      id: number;
+      /**
+       * 贴子数
+       */
+      postCount?: number;
+    }[];
+    status: number;
+    gambitName?: string[];
+    dynamicPublishTime: string;
+    commentAndReplyVO: {
+      commentAndReplyVO: null;
+      commentCount: null;
+      description: string;
+      dynamicPublishTime: string;
+      id: number;
+      lat: null;
+      likes: null;
+      likesCount: null;
+      location: null;
+      lon: null;
+      mediaVO: null;
+      userAccountId: number;
+      userBaseInfo: {
+        nickName: string;
+        userImg: string;
+      };
+    }[];
+    forumReviewVO?: {
+      /**
+       * 评论内容
+       */
+      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;
+      userAccountVO: {
+        nickName: string;
+        userImg: string;
+        id: number;
+      };
+    };
+  }[]
+>;

src/api/modules/home.ts

@@ -2,6 +2,7 @@ import {
   AppCategoryInfoType,
   AppListPilotType,
   AppPublishListType,
+  ForumListType,
   GetAppGambitListType,
   GetPageHomeCategoriesType,
   IndustryListPagesType,
@@ -67,4 +68,8 @@ export class HomeAPI {
   // web-首页分类数据-展示
   static getPageHomeCategories: GetPageHomeCategoriesType = (params) =>
     request.get('/pms/product/mall/getPageHomeCategories', { params });
+
+  // 论坛列表
+  static getForumList: ForumListType = (params) =>
+    request.get('/release/dynamic/dynamicList', { params });
 }

src/components/forumItem/index.tsx

+import React from 'react';
+import { Image } from 'antd';
+import styled from 'styled-components';
+import { InterListType } from '@/api/interface';
+import { ForumListType } from '@/api/interface/home';
+
+// 详情类型
+type DetailType = InterListType<ForumListType>[0];
+
+const ForumItemView: React.FC<{ detail: DetailType }> = ({ detail }) => {
+  // 获取帖子的媒体信息 0图片 1视频
+  const getForumMedia = (type: number) => {
+    return detail?.mediaVO?.filter((i) => i?.type === type)?.slice(0, 4);
+  };
+  return (
+    <ForumItemWrap>
+      <div className="relative mb-2 flex w-full items-center justify-start">
+        <img
+          className="h-9 w-9 rounded-full"
+          src={detail?.userBaseInfo?.userImg}
+          alt="头像"
+        />
+        <div className="ml-2">
+          <div className="font-bold">
+            {detail?.userBaseInfo?.nickName || '微信用户'}
+          </div>
+          <div className="text-aaa">{detail?.dynamicPublishTime}</div>
+        </div>
+      </div>
+      <div className="mb-3 w-full leading-5 tracking-wide">
+        {detail?.forumGambitDTOList?.map((i, j) => (
+          <span key={j} className="text-tag mr-1 cursor-pointer font-bold">
+            {i.gambitName}
+          </span>
+        ))}
+        <span>{detail?.description}</span>
+      </div>
+      <div className="forum-media flex w-full flex-wrap items-start justify-start">
+        {getForumMedia(0)?.length
+          ? getForumMedia(0)?.map((i, j) => (
+              <Image src={i.url} alt="图片" key={j} />
+            ))
+          : undefined}
+        {getForumMedia(1)?.length
+          ? getForumMedia(1)?.map((i, j) => (
+              <div className="h-64 w-3/5 overflow-hidden rounded-lg" key={j}>
+                {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+                <video src={i.url} controls={true} className="h-full" />
+              </div>
+            ))
+          : undefined}
+      </div>
+    </ForumItemWrap>
+  );
+};
+
+export default ForumItemView;
+// 样式
+const ForumItemWrap = styled.div`
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 1rem;
+  .ant-image {
+    width: calc((100% - 0.67rem * 3) / 4);
+    height: 8.6rem;
+    margin: 0 0.67rem 0.67rem 0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+    .ant-image-img {
+      object-fit: cover;
+      height: 8.6rem;
+    }
+  }
+`;

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

+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
+import { HomeAPI } from '@/api';
+import { InterListType } from '@/api/interface';
+import { ForumListType } from '@/api/interface/home';
+import ForumItemView from '@/components/forumItem';
+import HomeTopicView from '@/components/home-comp/home-topic';
+import { RootState } from '@/store';
+import { setGlobalData } from '@/store/module/globalData';
+import { SystemState } from '@/store/module/system';
+
+// 列表类型
+type ListType = InterListType<ForumListType>;
+
+const HomeForumView = () => {
+  // store
+  const dispatch = useDispatch();
+  // system
+  const system = useSelector((state: RootState) => state.system) as SystemState;
+  // 论坛列表
+  const [forumList, setForumList] = useState<ListType>([]);
+  // 获取论坛列表
+  const getForumList = async () => {
+    const res = await HomeAPI.getForumList({
+      pageNo: 1,
+      pageSize: 10,
+    });
+    if (res && res.code === '200') {
+      setForumList(res.result?.list || []);
+      console.log('论坛列表 --->', res.result?.list);
+    }
+  };
+  // 页面挂载
+  useEffect(() => {
+    if (!system?.token) {
+      dispatch(setGlobalData({ loginModalVisible: true }));
+    } else {
+      getForumList().then();
+    }
+  }, [system]);
+  return (
+    <HomeForumWrap>
+      <div className="forum-list">
+        {forumList.map((i, j) => (
+          <ForumItemView key={j} detail={i} />
+        ))}
+      </div>
+      <HomeTopicView />
+    </HomeForumWrap>
+  );
+};
+
+export default HomeForumView;
+// 样式
+const HomeForumWrap = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  .forum-list {
+    position: relative;
+    width: calc(100% - 20rem - 10rem);
+    margin-right: 10rem;
+    box-sizing: border-box;
+  }
+`;

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

+import React from 'react';
+import { Affix } from 'antd';
+import styled from 'styled-components';
+
+const HomeTopicView = () => {
+  return (
+    <Affix offsetTop={58}>
+      <HomeTopicWrap>
+        <div>212341</div>
+        <div>HomeTopicView</div>
+      </HomeTopicWrap>
+    </Affix>
+  );
+};
+
+export default HomeTopicView;
+// 样式
+const HomeTopicWrap = styled.div`
+  position: relative;
+  width: 20rem;
+  height: 20rem;
+  //background: linear-gradient(
+  //  180deg,
+  //  #fff9f8 2%,
+  //  #fff9f8 2%,
+  //  #fffdfc 15%,
+  //  #ffffff 24%,
+  //  #ffffff 100%
+  //);
+  border-radius: 0.42rem;
+  box-sizing: border-box;
+  background: lightpink;
+`;

src/pages/home/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import HomeBottomView from '@/components/home-comp/home-bottom';
 import HomeBrandView from '@/components/home-comp/home-brand';
 import HomeCourseView from '@/components/home-comp/home-course';
+import HomeForumView from '@/components/home-comp/home-forum';
 import HomeMapView from '@/components/home-comp/home-map';
 import HomeNewsView from '@/components/home-comp/home-news';
 import HomeProductView from '@/components/home-comp/home-product';
@@ -54,6 +55,8 @@ const HomeView = () => {
         <HomeTitleView title="无人机服务" path="/service" />
         {/* 服务列表 */}
         <HomeServiceView />
+        {/* 话题/论坛 */}
+        <HomeForumView />
         {/* 底部标签 */}
         <HomeBottomView />
       </div>

src/pages/index.tsx

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import LayoutView from '@/components/layout';
 import HomeView from '@/pages/home';
 
 const App = () => {
+  // 定义一个状态变量，用于存储滚动距离
+  const [scrollY, setScrollY] = useState(0);
+  // 定义一个副作用函数，用于获取滚动距离并更新状态
+  const handleScroll = () => {
+    // 获取滚动距离，兼容多种浏览器
+    const scrollTop =
+      document.documentElement.scrollTop ||
+      window.pageYOffset ||
+      document.body.scrollTop;
+    // 更新状态
+    setScrollY(scrollTop);
+  };
+  // 使用 useEffect 钩子来添加和移除滚动事件的监听器
+  useEffect(() => {
+    // 组件挂载后，添加监听器
+    window.addEventListener('scroll', handleScroll);
+    // 组件卸载前，移除监听器
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []); // 依赖数组为空，表示只执行一次
   return (
-    <LayoutView placeholder={false}>
+    <LayoutView placeholder={scrollY >= 200}>
       <HomeView></HomeView>
     </LayoutView>
   );

tailwind.config.js

@@ -21,6 +21,7 @@ module.exports = {
         777: '#777',
         999: '#999',
         aaa: '#aaa',
+        tag: '#001D85',
       },
     },
   },