论坛首页接口对接

pages/forum/api/index.tsx

+import request, { Response } from "~/api/request";
+
+export interface DynamicListParams {
+  pageNo: number,
+  pageSize: number,
+  userId: number
+}
+
+export interface Dynamic {
+  userId: number;
+  id: number;
+  title: string;
+  description: string;
+  location: string;
+  lat: number;
+  lon: number;
+  mediaVO: {
+    picture: string[];
+    videoUrl: string;
+  };
+  likesCount: number;
+  commentCount: number;
+  likes: boolean;
+}
+
+export interface DynamicListResp {
+  pageNo: 1;
+  pageSize: 10;
+  list: Array<Dynamic>;
+  totalCount: 0;
+  totalPage: 0;
+}
+
+export default {
+  /**
+   * 论坛动态列表
+   * @param params
+   * @returns
+   */
+  dynamicList(params: DynamicListParams): Promise<Response<DynamicListResp>> {
+    return request("/release/dynamic/dynamicList", "get", params);
+  },
+};

pages/forum/index.module.scss

@@ -30,6 +30,7 @@
 .item {
   padding: 18px 0 0;
   background: #ffffff;
+  width: 100%;
 
   .headImg {
     margin-left: 16px;

pages/forum/index.page.tsx

@@ -3,18 +3,57 @@ import Layout from "~/components/layout";
 import styles from "./index.module.scss";
 import errImg from "~/assets/errImg";
 import { RightOutlined } from "@ant-design/icons";
-import { useState } from "react";
-import PublishMessage from './components/publishMessage'
+import { useEffect, useState } from "react";
+import PublishMessage from "./components/publishMessage";
+import api, { Dynamic } from "./api";
+
+interface Item extends Dynamic {
+  openComment?: boolean; //是否开启评论
+  showCommentAll?: boolean; //是否展示全部评论
+}
 
 export default function Forum() {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [list, setList] = useState<Array<Item>>([]);
+  const [pageParams, setPageParams] = useState({
+    pageNo: 1,
+    pageSize: 16,
+  });
+
+  useEffect(() => {
+    api
+      .dynamicList({
+        userId: 1,
+        ...pageParams,
+      })
+      .then((res) => {
+        setList(res.result?.list || []);
+      });
+  }, []);
+
+  /**
+   * 展示发布模态框
+   */
   const showModal = () => {
     setIsModalOpen(true);
   };
 
+  /**
+   * 取消发布
+   */
   const onPublishCancel = () => {
     setIsModalOpen(false);
   };
+
+  /**
+   * 打开评论
+   * @param item 当前点击项
+   */
+  const openComment = (item: Item) => {
+    item.openComment = true;
+    const temp = [...list];
+    setList(temp);
+  };
   return (
     <Layout>
       <div className={styles.forum}>
@@ -25,14 +64,14 @@ export default function Forum() {
           </Button>
         </div>
         <Space direction="vertical" size={8}>
-          <div className={styles.item}>
+          {list.map((item) => {
+            return (
+              <div key={item.id} className={styles.item}>
                 <Space size={10} align="start">
                   <Image alt="" className={styles.headImg}></Image>
                   <div className={styles.info}>
                     <div className={styles.name}>给**的</div>
-                <div className={styles.desc}>
-                  今天飞的航拍效果，喜欢的给我点个赞
-                </div>
+                    <div className={styles.desc}>{item.title}</div>
                     <div className={styles.imgs}>
                       <Image.PreviewGroup
                         preview={{
@@ -43,14 +82,19 @@ export default function Forum() {
                         }}
                       >
                         <Space size={6} wrap>
+                          {item?.mediaVO?.picture.map((img) => {
+                            return (
                               <Image
+                                key={img}
                                 alt=""
                                 className="img"
                                 width={132}
                                 height={132}
-                        src="error"
+                                src={img}
                                 fallback={errImg}
                               />
+                            );
+                          })}
                         </Space>
                       </Image.PreviewGroup>
                     </div>
@@ -58,18 +102,22 @@ export default function Forum() {
                       <div className={styles.ctrlsItem}>
                         <div
                           className={`${styles.ctrlsItemIcon} ${styles.iconComment}`}
+                          onClick={() => openComment(item)}
                         ></div>
-                    15评论
+                        {item.commentCount}评论
                       </div>
                       <div className={styles.ctrlsItem}>
                         <div
-                      className={`${styles.ctrlsItemIcon} ${styles.iconPraise} ${styles.active}`}
+                          className={`${styles.ctrlsItemIcon} ${
+                            styles.iconPraise
+                          } ${item.likes && styles.active}`}
                         ></div>
-                    11赞
+                        {item.likesCount}赞
                       </div>
                     </div>
                   </div>
                 </Space>
+                {item.openComment && (
                   <div className={styles.commentWrap}>
                     <div className={styles.draftWrap}>
                       <div className={styles.commentHeadImg}>自已</div>
@@ -113,12 +161,17 @@ export default function Forum() {
                         </div>
                       </div>
                     </div>
+                    {!item.showCommentAll && (
                       <div className={styles.showAll}>
                         查看全部15条评论
                         <RightOutlined size={14} />
                       </div>
+                    )}
                   </div>
+                )}
               </div>
+            );
+          })}
         </Space>
       </div>
       <PublishMessage