Skip to content

W
web
提交 b30fcef2 作者: 翁进城
操作

论坛评价列表接口对接

上级 fa814afd
正在显示 包含 112 行增加 和 33 行删除
pages/forum/api/index.tsx
...@@ -40,10 +40,9 @@ export interface CommentParams { ...@@ -40,10 +40,9 @@ export interface CommentParams {
content: string; //评论内容 content: string; //评论内容
dynamicId: number; //动态id dynamicId: number; //动态id
parentId?: number; //父级评论 parentId?: number; //父级评论
userId: number; //用户id
} }
export interface ByDynamicParams { export interface ByDynamicResp {
id: number; id: number;
dynamicId: number; dynamicId: number;
parentId: number; parentId: number;
...@@ -51,7 +50,12 @@ export interface ByDynamicParams { ...@@ -51,7 +50,12 @@ export interface ByDynamicParams {
content: string; content: string;
likesCount: number; likesCount: number;
createTime: string; createTime: string;
children: ByDynamicParams[]; children: ByDynamicResp[];
userBaseInfoVO: {
id: number,
nickName: string,
userImg: string
}
} }
export default { export default {
...@@ -70,7 +74,14 @@ export default { ...@@ -70,7 +74,14 @@ export default {
}, },
//根据动态查看评论 //根据动态查看评论
byDynamic(params: { dynamicId: number }): Promise<Response<Array<ByDynamicParams>>> { byDynamic(params: {
dynamicId: number;
}): Promise<Response<Array<ByDynamicResp>>> {
return request("/release/dynamic/byDynamic", "get", params); return request("/release/dynamic/byDynamic", "get", params);
}, },
//点赞或取消点赞
likeOrCancel(params: { dynamicId: number }) {
return request("/release/dynamic/likeOrCancel", "get", params);
},
}; };
pages/forum/index.page.tsx
...@@ -15,14 +15,15 @@ import errImg from "~/assets/errImg"; ...@@ -15,14 +15,15 @@ import errImg from "~/assets/errImg";
import { RightOutlined } from "@ant-design/icons"; import { RightOutlined } from "@ant-design/icons";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import PublishMessage from "./components/publishMessage"; import PublishMessage from "./components/publishMessage";
import api, { ByDynamicParams, Dynamic } from "./api"; import api, { ByDynamicResp, Dynamic } from "./api";
import InfiniteScroll from "react-infinite-scroll-component"; import InfiniteScroll from "react-infinite-scroll-component";
import { UserContext } from "~/lib/userProvider"; import { UserContext } from "~/lib/userProvider";
import moment from "moment";
interface Item extends Dynamic { interface Item extends Dynamic {
openComment?: boolean; //是否开启评论 openComment?: boolean; //是否开启评论
showCommentAll?: boolean; //是否展示全部评论 showCommentAll?: boolean; //是否展示全部评论
commentList?: Array<ByDynamicParams>; commentList?: Array<ByDynamicResp>; //评论列表
} }
export default function Forum() { export default function Forum() {
...@@ -34,6 +35,7 @@ export default function Forum() { ...@@ -34,6 +35,7 @@ export default function Forum() {
}); });
const [count, setCount] = useState(0); //动态总数 const [count, setCount] = useState(0); //动态总数
const { userInfo, setNeedLogin } = useContext(UserContext); const { userInfo, setNeedLogin } = useContext(UserContext);
const [form] = Form.useForm(); //评论区的form
useEffect(() => { useEffect(() => {
api api
...@@ -78,27 +80,74 @@ export default function Forum() { ...@@ -78,27 +80,74 @@ export default function Forum() {
item.openComment = !item.openComment; item.openComment = !item.openComment;
const temp = [...list]; const temp = [...list];
setList(temp); setList(temp);
getCommentList(item);
}; };
//评论内容 //获取评论列表
const onComment = (values: any, id: number, i: number) => { const getCommentList = (item: Item) => {
api
.byDynamic({
dynamicId: item.id,
})
.then((res) => {
if (res?.code === "200") {
item.commentList = res.result || [];
}
const temp = [...list];
setList(temp);
});
};
//展示所有评论
const showCommentAll = (item: Item) => {
item.showCommentAll = true;
const temp = [...list];
setList(temp);
};
//评论内容
const onComment = (values: any, item: Item) => {
if (userInfo) { if (userInfo) {
api api
.comment({ .comment({
content: values.content, content: values.content,
dynamicId: id, dynamicId: item.id,
userId: userInfo.id,
}) })
.then((res) => { .then((res) => {
if (res.code === "200") { if (res.code === "200") {
window.messageApi.success("评论成功"); window.messageApi.success("评论成功");
form.resetFields(["content"]);
item.commentCount += 1;
getCommentList(item);
} }
}); });
} else { } else {
setNeedLogin(true); setNeedLogin(true);
} }
}; };
//点赞或取消
const onLike = (item: Item) => {
if (userInfo) {
api
.likeOrCancel({
dynamicId: item.id,
})
.then((res) => {
if (res.code === "200") {
item.likes = !item.likes;
if (item.likes) {
item.likesCount++;
} else {
item.likesCount--;
}
const temp = [...list];
setList(temp);
}
});
}
};
return ( return (
<Layout> <Layout>
<div className={styles.forum}> <div className={styles.forum}>
...@@ -169,7 +218,10 @@ export default function Forum() { ...@@ -169,7 +218,10 @@ export default function Forum() {
></div> ></div>
{item.commentCount}评论 {item.commentCount}评论
</div> </div>
<div className={styles.ctrlsItem}> <div
className={styles.ctrlsItem}
onClick={() => onLike(item)}
>
<div <div
className={`${styles.ctrlsItemIcon} ${ className={`${styles.ctrlsItemIcon} ${
styles.iconPraise styles.iconPraise
...@@ -183,8 +235,9 @@ export default function Forum() { ...@@ -183,8 +235,9 @@ export default function Forum() {
{item.openComment && ( {item.openComment && (
<div className={styles.commentWrap}> <div className={styles.commentWrap}>
<Form <Form
form={form}
onFinish={(values) => { onFinish={(values) => {
onComment(values, item.id, i); onComment(values, item, i);
}} }}
> >
<Form.Item <Form.Item
...@@ -213,38 +266,53 @@ export default function Forum() { ...@@ -213,38 +266,53 @@ export default function Forum() {
</Form> </Form>
<div className={styles.comments}> <div className={styles.comments}>
<div className={styles.commentItem}> {/* 判断是否展示所有评论 */}
<div className={styles.commentHeadImg}></div> {item.commentList
<div className={styles.info}> ?.filter((comment, i) => {
<div className={styles.nameWrap}> if (item.showCommentAll) {
<div className={styles.commentName}> return true;
无人机爱好者111： } else {
<div className={styles.date}>05-16</div> if (i < 2) {
</div> return true;
<div className={styles.commentContent}> }
无人机记录生活 }
</div> })
</div> .map((comment) => {
</div> return (
<div
key={comment.id}
className={styles.commentItem}
>
<div className={styles.commentHeadImg}>
<Image
src={comment.userBaseInfoVO?.userImg}
></Image>
</div> </div>
<div className={styles.commentItem}>
<div className={styles.commentHeadImg}></div>
<div className={styles.info}> <div className={styles.info}>
<div className={styles.nameWrap}> <div className={styles.nameWrap}>
<div className={styles.commentName}> <div className={styles.commentName}>
无人机爱好者111： {comment.userBaseInfoVO?.nickName}：
<div className={styles.date}>05-16</div> <div className={styles.date}>
{moment(comment.createTime).format(
"YYYY-MM-DD"
)}
</div>
</div> </div>
<div className={styles.commentContent}> <div className={styles.commentContent}>
无人机记录生活 {comment.content}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
);
})}
</div> </div>
{!item.showCommentAll && ( {!item.showCommentAll && item.commentCount > 2 && (
<div className={styles.showAll}> <div
查看全部15条评论 className={styles.showAll}
onClick={() => showCommentAll(item)}
>
查看全部{item.commentCount}条评论
<RightOutlined size={14} /> <RightOutlined size={14} />
</div> </div>
)} )}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论