功能：论坛详情

src/api/interface/forumManageType.ts

-import { InterItemFunction } from '~/api/interface';
+import { InterFunction, InterItemFunction } from '~/api/interface';
 
+//论坛-列表
 export type forumListType = InterItemFunction<
   { keyword?: string },
   {
@@ -11,5 +12,30 @@ export type forumListType = InterItemFunction<
       userImg: string;
       userName: string;
     };
+    show: number;
+    id: number;
   }[]
 >;
+//论坛-删除
+export type deleteForumType = InterFunction<{ dynamicId: number }, any>;
+//论坛-隐藏
+export type hiddenForumType = InterFunction<{ dynamicId: number }, any>;
+//论坛-详情
+type detailResponseType = {
+  userBaseInfo: {
+    nickName: string;
+    phone: string;
+    uid: string;
+    userImg: string;
+    userName: string;
+  };
+  description: string;
+  dynamicPublishTime: string;
+  id: number;
+  likes: boolean;
+  likesCount: number;
+  mediaVO: { type: number; url: string }[];
+  commentCount: number;
+  commentAndReplyVO: detailResponseType[];
+};
+export type forumDetailType = InterFunction<{ dynamicId: number }, detailResponseType>;

src/api/modules/forumManageAPI.ts

-import { forumListType } from '~/api/interface/forumManageType';
+import {
+  deleteForumType,
+  forumDetailType,
+  forumListType,
+  hiddenForumType,
+} from '~/api/interface/forumManageType';
 import axios from '~/api/request';
 
 export class ForumManageAPI {
+  //论坛-列表
   static getForumList: forumListType = (data) =>
     axios.post('/release/backstage/forum/listDynamic', data);
+  //论坛-删除
+  static deleteForum: deleteForumType = (params) =>
+    axios.get('/release/backstage/forum/deleteDynamic', { params });
+  //论坛-隐藏
+  static hiddenForum: hiddenForumType = (params) =>
+    axios.get('/release/backstage/forum/hiddenDynamic', { params });
+  // 论坛-详情
+  static getForumDetail: forumDetailType = (params) =>
+    axios.get('/release/dynamic/dynamicDetails', { params });
 }

src/pages/forumManage/dynamicList/components/dynamicDetailModal/index.scss

 .dynamic-detail{
   padding: 20px 0;
   &-media{
-
+    display: flex;
+    align-items: center;
+    .media-item{
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
   }
   &-info{
-    margin-top: 40px;
     .info-title{
       color: #000;
       font-size: 15px;
@@ -62,4 +66,11 @@
       }
     }
   }
+  .no-comment{
+    text-align: center;
+    margin-top: 50px;
+    font-size: 15px;
+    color: rgba(0,0,0,0.5);
+    font-weight: bold;
+  }
 }

src/pages/forumManage/dynamicList/components/dynamicDetailModal/index.tsx

-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { Button, Image, Modal, ModalProps } from 'antd';
 import './index.scss';
-const DynamicDetailModal: FC<ModalProps> = ({ open, onCancel }) => {
+import { InterDataType } from '~/api/interface';
+import { forumDetailType } from '~/api/interface/forumManageType';
+//论坛详情返回类型
+type detailType = InterDataType<forumDetailType>;
+interface selfProps {
+  forumDetail?: detailType;
+}
+const DynamicDetailModal: FC<ModalProps & selfProps> = ({ open, onCancel, forumDetail }) => {
   return (
-    <Modal open={open} onCancel={onCancel} title='查看详情' width={800}>
+    <Modal open={open} onCancel={onCancel} title='查看详情' width={800} footer={null}>
       <div className='dynamic-detail'>
         <div className='dynamic-detail-media'>
-          <Image width={200} height={200} />
+          {forumDetail?.mediaVO?.map((v, index: number) => {
+            if (v.type === 0) {
+              return (
+                <div className='media-item' key={index}>
+                  <Image src={v.url} width={200} height={200} />
+                </div>
+              );
+            } else {
+              return (
+                <div className='media-item' key={index}>
+                  <video
+                    src={v.url}
+                    style={{
+                      width: '200px',
+                      height: '200px',
+                      verticalAlign: 'top',
+                    }}
+                    controls
+                  />
+                </div>
+              );
+            }
+          })}
         </div>
         <div className='dynamic-detail-info'>
-          <div className='info-title'>和男同事两人去夜爬华山，男友提分手怎么办？</div>
-          <div className='info-meta'>十一假期和和男同事两人去夜爬华山，男友提分手怎么办？</div>
+          <div className='info-title'>{forumDetail?.description}</div>
           <div className='info-footer'>
-            <div className='time'>发布于10-18</div>
+            <div className='time'>发布于{forumDetail?.dynamicPublishTime}</div>
             <div className='operate'>
-              <div>15人回答</div>
-              <Button type='link'>88人爱心赞</Button>
+              <div>{forumDetail?.commentCount}人回答</div>
+              <Button type='link'>{forumDetail?.likesCount}人爱心赞</Button>
             </div>
           </div>
         </div>
-        <div className='dynamic-detail-comment'>
-          <div className='comment-title'>15条评论</div>
-          <div className='comment-item'>
-            <div className='comment-item-header'>
-              <div className='user-avatar'>
-                <img
-                  src='https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/cf528825-b958-4ccf-bf0b-a880df9e464c.jpg'
-                  alt='头像'
-                />
+        {forumDetail?.commentAndReplyVO.length ? (
+          <div className='dynamic-detail-comment'>
+            <div className='comment-title'>{forumDetail?.commentCount}条评论</div>
+            {forumDetail.commentAndReplyVO.map((v) => (
+              <div className='comment-item'>
+                <div className='comment-item-header'>
+                  <div className='user-avatar'>
+                    <img src={v.userBaseInfo.userImg} alt='头像' />
+                  </div>
+                  <div className='user-name'>{v.userBaseInfo.nickName}</div>
+                </div>
+                <div className='comment-item-info'>
+                  <div className='info-content'>{v.description}</div>
+                  <div className='info-time'>{v.dynamicPublishTime}</div>
+                </div>
               </div>
-              <div className='user-name'>张三</div>
-            </div>
-            <div className='comment-item-info'>
-              <div className='info-content'>不吐槽不骂街，咱们平和来聊聊这件事的底层逻辑。</div>
-              <div className='info-time'>10-18</div>
-            </div>
+            ))}
           </div>
-        </div>
+        ) : (
+          <div className='no-comment'>暂无评论</div>
+        )}
       </div>
     </Modal>
   );

src/pages/forumManage/dynamicList/index.tsx

 import SearchBox, { searchColumns } from '~/components/search-box';
-import { Button, Table, Tooltip } from 'antd';
+import { Button, message, Modal, Table, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { useEffect, useState } from 'react';
 import DynamicDetailModal from './components/dynamicDetailModal';
 import { ForumManageAPI } from '../../../api';
 import { InterDataType, InterReqListType, PaginationProps } from '../../../api/interface';
-import { forumListType } from '../../../api/interface/forumManageType';
+import { forumDetailType, forumListType } from '../../../api/interface/forumManageType';
 import './index.scss';
 
 //论坛列表返回类型
 type forumType = InterDataType<forumListType>['list'];
 //论坛列表参数类型
 type forumParameters = InterReqListType<forumListType>;
+//论坛详情返回类型
+type detailType = InterDataType<forumDetailType>;
 const DynamicList = () => {
   const searchColumnsData: searchColumns[] = [
     {
@@ -54,13 +56,17 @@ const DynamicList = () => {
     {
       title: '操作',
       align: 'center',
-      render: () => (
+      render: (_text: string, record) => (
         <>
-          <Button type='link' onClick={lookDynamicDetail}>
+          <Button type='link' onClick={() => lookDynamicDetail(record)}>
             查看详情
           </Button>
-          <Button type='link'>强制删除</Button>
-          <Button type='link'>强制隐藏</Button>
+          <Button type='link' onClick={() => deleteForumClick(record)}>
+            强制删除
+          </Button>
+          <Button type='link' onClick={() => hiddenForumClick(record)} disabled={!!record.show}>
+            强制隐藏
+          </Button>
         </>
       ),
     },
@@ -71,6 +77,7 @@ const DynamicList = () => {
     pageSize: 10,
     totalCount: 0,
   });
+  const [forumDetail, setForumDetail] = useState<detailType>();
   const [query, setQuery] = useState<forumParameters>();
   const [dynamicDetailModalShow, setDynamicDetailModalShow] = useState<boolean>(false);
 
@@ -99,13 +106,56 @@ const DynamicList = () => {
     pagination.pageSize = pageSize;
     getDynamicList(query);
   };
+  //强制删除论坛
+  const deleteForumClick = (record: forumType[0]) => {
+    Modal.confirm({
+      title: '强制删除',
+      content: '确认删除这条动态？',
+      onOk: () => {
+        ForumManageAPI.deleteForum({ dynamicId: record.id }).then(({ code }) => {
+          if (code === '200') {
+            message.success('删除成功');
+            if (pagination.pageNo !== 1 && tableData.length === 1) {
+              pagination.pageNo -= 1;
+            }
+            getDynamicList(query);
+          }
+        });
+      },
+    });
+  };
+  //强制隐藏
+  const hiddenForumClick = (record: forumType[0]) => {
+    Modal.confirm({
+      title: '强制隐藏',
+      content: '确认隐藏这条动态？',
+      onOk: () => {
+        ForumManageAPI.hiddenForum({ dynamicId: record.id }).then(({ code }) => {
+          if (code === '200') {
+            message.success('隐藏成功');
+            getDynamicList(query);
+          }
+        });
+      },
+    });
+  };
   const dynamicDetailModalOnCancel = () => {
     setDynamicDetailModalShow(false);
   };
   //查看详情
-  const lookDynamicDetail = () => {
-    setDynamicDetailModalShow(true);
+  const lookDynamicDetail = (record: forumType[0]) => {
+    getForumDetail(record.id);
+  };
+  //获取论坛-详情
+  const getForumDetail = (id: number) => {
+    ForumManageAPI.getForumDetail({ dynamicId: id }).then(({ code, result }) => {
+      if (code === '200') {
+        setDynamicDetailModalShow(true);
+        setForumDetail(result);
+      }
+    });
   };
+
   useEffect(() => {
     getDynamicList();
   }, []);
@@ -127,7 +177,11 @@ const DynamicList = () => {
           showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
         }}
       />
-      <DynamicDetailModal open={dynamicDetailModalShow} onCancel={dynamicDetailModalOnCancel} />
+      <DynamicDetailModal
+        open={dynamicDetailModalShow}
+        onCancel={dynamicDetailModalOnCancel}
+        forumDetail={forumDetail}
+      />
     </div>
   );
 };