功能：首页热门话题

send-webhook.sh

-#!/bin/bash # 指定解释器
 # webhook地址
 api="https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=a9a79936-bbbb-4a20-a40e-c0bc01a83e8c"
 # 参数

src/components/forumItem/index.tsx

 import React from 'react';
+import {
+  ExportOutlined,
+  LikeOutlined,
+  MessageOutlined,
+} from '@ant-design/icons';
 import { Image } from 'antd';
 import styled from 'styled-components';
 import { InterListType } from '@/api/interface';
@@ -12,6 +17,10 @@ const ForumItemView: React.FC<{ detail: DetailType }> = ({ detail }) => {
   const getForumMedia = (type: number) => {
     return detail?.mediaVO?.filter((i) => i?.type === type)?.slice(0, 4);
   };
+  // 帖子相关操作
+  const handleAction = (type: number) => {
+    console.log(type);
+  };
   return (
     <ForumItemWrap>
       <div className="relative mb-2 flex w-full items-center justify-start">
@@ -43,13 +52,30 @@ const ForumItemView: React.FC<{ detail: DetailType }> = ({ detail }) => {
           : undefined}
         {getForumMedia(1)?.length
           ? getForumMedia(1)?.map((i, j) => (
-              <div className="h-64 w-3/5 overflow-hidden rounded-lg" key={j}>
+              <div
+                className="media-video relative box-border overflow-hidden rounded-lg"
+                key={j}
+              >
                 {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-                <video src={i.url} controls={true} className="h-full" />
+                <video src={i.url} controls={true} />
               </div>
             ))
           : undefined}
       </div>
+      <div className="forum-action flex pb-2 text-777">
+        <div className="action-item mr-8 flex" onClick={() => handleAction(1)}>
+          <LikeOutlined />
+          <div className="ml-1">{detail?.likesCount}</div>
+        </div>
+        <div className="action-item mr-8 flex" onClick={() => handleAction(2)}>
+          <MessageOutlined />
+          <div className="ml-1">{detail?.commentCount}</div>
+        </div>
+        <div className="action-item mr-8 flex" onClick={() => handleAction(3)}>
+          <ExportOutlined />
+          <div className="ml-1">{detail?.transpond}</div>
+        </div>
+      </div>
     </ForumItemWrap>
   );
 };
@@ -61,6 +87,25 @@ const ForumItemWrap = styled.div`
   width: 100%;
   box-sizing: border-box;
   margin-bottom: 1rem;
+  .forum-media {
+    .media-video {
+      width: 500px;
+      height: calc(500px / 16 * 9);
+      margin-bottom: 1rem;
+      video {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .forum-action {
+    .action-item {
+      cursor: pointer;
+      &:hover {
+        color: #ff552d;
+      }
+    }
+  }
   .ant-image {
     width: calc((100% - 0.67rem * 3) / 4);
     height: 8.6rem;

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

@@ -23,12 +23,12 @@ const HomeForumView = () => {
   // 获取论坛列表
   const getForumList = async () => {
     const res = await HomeAPI.getForumList({
-      pageNo: 1,
+      pageNo: 5,
       pageSize: 10,
     });
     if (res && res.code === '200') {
       setForumList(res.result?.list || []);
-      console.log('论坛列表 --->', res.result?.list);
+      // console.log('论坛列表 --->', res.result?.list);
     }
   };
   // 页面挂载

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

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Affix } from 'antd';
 import styled from 'styled-components';
+import { HomeAPI } from '@/api';
+import { InterListType } from '@/api/interface';
+import { GetAppGambitListType } from '@/api/interface/home';
+
+// 列表类型
+type ListType = InterListType<GetAppGambitListType>;
+// 帖子类型
+const indexList = [
+  { label: 1, value: 'text-[#FF392B]' },
+  { label: 2, value: 'text-[#FE792B]' },
+  { label: 3, value: 'text-[#FEA32B]' },
+  { label: 4, value: 'text-[#FEA32B]' },
+  { label: 5, value: 'text-[#FEA32B]' },
+];
 
 const HomeTopicView = () => {
+  // 话题列表
+  const [topicList, setTopicList] = useState<ListType>();
+  // 获取话题列表
+  const getListGambit = async () => {
+    const res = await HomeAPI.getAppGambitList({
+      pageNo: 1,
+      pageSize: 10,
+    });
+    if (res && res.code === '200') {
+      setTopicList(res.result.list || []);
+    }
+  };
+  // 组件挂载
+  useEffect(() => {
+    getListGambit().then();
+  }, []);
   return (
     <Affix offsetTop={58}>
       <HomeTopicWrap>
-        <div>212341</div>
-        <div>HomeTopicView</div>
+        <div className="title">热门话题</div>
+        {topicList?.map((i, j) => (
+          <div key={j} className="mb-3 flex">
+            <div className={`${indexList[j]?.value} font-bold`}>{j + 1}</div>
+            <div className="hover:text-tag ml-2 cursor-pointer text-ellipsis">
+              {i.gambitName}
+            </div>
+          </div>
+        ))}
       </HomeTopicWrap>
     </Affix>
   );
@@ -18,7 +55,7 @@ export default HomeTopicView;
 const HomeTopicWrap = styled.div`
   position: relative;
   width: 20rem;
-  height: 20rem;
+  min-height: 20rem;
   //background: linear-gradient(
   //  180deg,
   //  #fff9f8 2%,
@@ -29,5 +66,14 @@ const HomeTopicWrap = styled.div`
   //);
   border-radius: 0.42rem;
   box-sizing: border-box;
-  background: lightpink;
+  background-image: url('https://file.iuav.com/file/sharefly-topic-bg.png');
+  background-size: cover;
+  border: 1px solid #e3e3e3;
+  padding: 0.75rem 1.25rem 0 1.25rem;
+  .title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 1rem;
+  }
 `;