Skip to content

W
web
提交 901caea0 作者: 翁进城
操作

论坛首页接口对接

上级 cade5f35
正在显示 包含 183 行增加 和 86 行删除
pages/forum/api/index.tsx 0 → 100644
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,100 +64,114 @@ export default function Forum() {
</Button>
</div>
<Space direction="vertical" size={8}>
<div 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.imgs}>
<Image.PreviewGroup
preview={{
onChange: (current, prev) =>
console.log(
`current index: ${current}, prev index: ${prev}`
),
}}
>
<Space size={6} wrap>
<Image
alt=""
className="img"
width={132}
height={132}
src="error"
fallback={errImg}
/>
</Space>
</Image.PreviewGroup>
</div>
<div className={styles.ctrls}>
<div className={styles.ctrlsItem}>
<div
className={`${styles.ctrlsItemIcon} ${styles.iconComment}`}
></div>
15评论
</div>
<div className={styles.ctrlsItem}>
<div
className={`${styles.ctrlsItemIcon} ${styles.iconPraise} ${styles.active}`}
></div>
11赞
</div>
</div>
</div>
</Space>
<div className={styles.commentWrap}>
<div className={styles.draftWrap}>
<div className={styles.commentHeadImg}>自已</div>
<Input
className={styles.commentInput}
placeholder="说点什么吧，万一火了呢~"
></Input>
</div>
<div className={styles.btnCommentWrap}>
<Button type="primary" className="btnComment">
评论
</Button>
</div>
<div className={styles.comments}>
<div className={styles.commentItem}>
<div className={styles.commentHeadImg}></div>
{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.nameWrap}>
<div className={styles.commentName}>
无人机爱好者111：
<div className={styles.date}>05-16</div>
<div className={styles.name}>给**的</div>
<div className={styles.desc}>{item.title}</div>
<div className={styles.imgs}>
<Image.PreviewGroup
preview={{
onChange: (current, prev) =>
console.log(
`current index: ${current}, prev index: ${prev}`
),
}}
>
<Space size={6} wrap>
{item?.mediaVO?.picture.map((img) => {
return (
<Image
key={img}
alt=""
className="img"
width={132}
height={132}
src={img}
fallback={errImg}
/>
);
})}
</Space>
</Image.PreviewGroup>
</div>
<div className={styles.ctrls}>
<div className={styles.ctrlsItem}>
<div
className={`${styles.ctrlsItemIcon} ${styles.iconComment}`}
onClick={() => openComment(item)}
></div>
{item.commentCount}评论
</div>
<div className={styles.commentContent}>
无人机记录生活
<div className={styles.ctrlsItem}>
<div
className={`${styles.ctrlsItemIcon} ${
styles.iconPraise
} ${item.likes && styles.active}`}
></div>
{item.likesCount}赞
</div>
</div>
</div>
</div>
<div className={styles.commentItem}>
<div className={styles.commentHeadImg}></div>
<div className={styles.info}>
<div className={styles.nameWrap}>
<div className={styles.commentName}>
无人机爱好者111：
<div className={styles.date}>05-16</div>
</Space>
{item.openComment && (
<div className={styles.commentWrap}>
<div className={styles.draftWrap}>
<div className={styles.commentHeadImg}>自已</div>
<Input
className={styles.commentInput}
placeholder="说点什么吧，万一火了呢~"
></Input>
</div>
<div className={styles.btnCommentWrap}>
<Button type="primary" className="btnComment">
评论
</Button>
</div>
<div className={styles.comments}>
<div className={styles.commentItem}>
<div className={styles.commentHeadImg}></div>
<div className={styles.info}>
<div className={styles.nameWrap}>
<div className={styles.commentName}>
无人机爱好者111：
<div className={styles.date}>05-16</div>
</div>
<div className={styles.commentContent}>
无人机记录生活
</div>
</div>
</div>
</div>
<div className={styles.commentContent}>
无人机记录生活
<div className={styles.commentItem}>
<div className={styles.commentHeadImg}></div>
<div className={styles.info}>
<div className={styles.nameWrap}>
<div className={styles.commentName}>
无人机爱好者111：
<div className={styles.date}>05-16</div>
</div>
<div className={styles.commentContent}>
无人机记录生活
</div>
</div>
</div>
</div>
</div>
{!item.showCommentAll && (
<div className={styles.showAll}>
查看全部15条评论
<RightOutlined size={14} />
</div>
)}
</div>
</div>
</div>
<div className={styles.showAll}>
查看全部15条评论
<RightOutlined size={14} />
)}
</div>
</div>
</div>
);
})}
</Space>
</div>
<PublishMessage
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论