Skip to content

A
admin
提交 405bd0f3 作者: 龚洪江
操作

功能：论坛详情

上级 1d080448
正在显示 包含 175 行增加 和 38 行删除
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>
);
};
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论