From 240131e10ebf074acf6f03ca958abc56583104ca Mon Sep 17 00:00:00 2001 From: 1017691525 <1017691525@qq.com> Date: Sun, 28 May 2023 16:03:32 +0800 Subject: [PATCH] =?UTF-8?q?merge:=E7=A4=BE=E5=8C=BA=E4=BA=A4=E6=B5=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/community/community.css | 13 +- src/containers/community/communityProps.tsx | 34 +++ .../components/Comments/Comments.css | 44 ++-- .../components/Comments/Comments.tsx | 220 ++++++++++++++---- .../community/components/Discuss/Discuss.css | 6 +- .../community/components/Discuss/Discuss.tsx | 71 ++++-- .../components/Involved/Involved.css | 20 +- .../components/Involved/Involved.tsx | 100 +++++--- .../community/components/Message/Message.css | 19 +- .../community/components/Message/Message.tsx | 80 ++++--- .../components/Recommended/Recommended.css | 9 +- .../components/Recommended/Recommended.tsx | 95 ++++++-- src/containers/community/index.tsx | 69 ++++-- src/containers/community/static/avatar.jpg | Bin 0 -> 2794 bytes .../community/static/beishangwa.jpg | Bin 0 -> 40261 bytes src/containers/community/static/ggbong.jpg | Bin 0 -> 241945 bytes src/containers/community/static/meinv.jpg | Bin 0 -> 1098862 bytes src/containers/community/static/paidaxing.jpg | Bin 0 -> 535035 bytes src/containers/community/static/paiyipai.jpg | Bin 0 -> 179973 bytes src/containers/community/static/qishi.jpg | Bin 0 -> 171878 bytes .../community/static/shengyudengji.jpg | Bin 0 -> 176426 bytes src/lib/axios.ts | 112 +++++++-- 22 files changed, 645 insertions(+), 247 deletions(-) create mode 100644 src/containers/community/communityProps.tsx create mode 100644 src/containers/community/static/avatar.jpg create mode 100644 src/containers/community/static/beishangwa.jpg create mode 100644 src/containers/community/static/ggbong.jpg create mode 100644 src/containers/community/static/meinv.jpg create mode 100644 src/containers/community/static/paidaxing.jpg create mode 100644 src/containers/community/static/paiyipai.jpg create mode 100644 src/containers/community/static/qishi.jpg create mode 100644 src/containers/community/static/shengyudengji.jpg diff --git a/src/containers/community/community.css b/src/containers/community/community.css index b653c86..541687e 100644 --- a/src/containers/community/community.css +++ b/src/containers/community/community.css @@ -30,6 +30,7 @@ .c5title > div:nth-child(2) { color: rgba(24, 144, 255, 1); font-size: 14px; + cursor: pointer; } .c5Card { @@ -111,9 +112,10 @@ .c5Additional { width: 63px; height: 149px; - position: absolute; - right: 30px; - bottom: 100px; + position: fixed; + z-index: 100; + right: 100px; + bottom: 150px; display: flex; align-items: center; justify-content: center; @@ -131,6 +133,7 @@ display: flex; align-items: center; justify-content: center; + cursor: pointer; } .c5Additional > div > img { @@ -141,3 +144,7 @@ .c1hand { cursor: pointer; } + +.commentbox { + padding-top: 6px; +} diff --git a/src/containers/community/communityProps.tsx b/src/containers/community/communityProps.tsx new file mode 100644 index 0000000..a14d52b --- /dev/null +++ b/src/containers/community/communityProps.tsx @@ -0,0 +1,34 @@ +/** + * + * 封装约束信息 +*/ +import dayjs from "dayjs"; + +// export interface PararmProps { +// status?: number, // 0 待提醒，1 已提醒 ，2 已处理. 传入0代表是健康提醒的列表 +// page?: number, +// size?: number, +// // type: +// } + +export interface ThemeProps { + fid?: number, + ftitle?: string, + fphoto?: string, + fpants_num?: string, + fpost_num?: string, +} + +// export interface DatasourceProps{ +// content: HealtyPoProps[], +// totalElements: number, +// totalPages: number, +// number: number, +// size: number, +// } + +// export interface HooksProps{ +// datasource: DatasourceProps, +// deleteHealthy?: (id:string)=>void, +// toEdit?: (id:string)=>void +// } diff --git a/src/containers/community/components/Comments/Comments.css b/src/containers/community/components/Comments/Comments.css index 60aa0b0..bc48a3e 100644 --- a/src/containers/community/components/Comments/Comments.css +++ b/src/containers/community/components/Comments/Comments.css @@ -1,22 +1,22 @@ - -.c1Comment > .character { +.c1Comment>.character { display: flex; align-items: center; } -.c1Comment > .character > img { +.c1Comment>.character>img { width: 40px; height: 40px; margin-right: 10px; + border-radius: 50%; } -.c1Comment > .character > .message { +.c1Comment>.character>.message { display: flex; flex-direction: column; justify-content: space-around; } -.c1Comment > .character > .message > span { +.c1Comment>.character>.message>span { /** 文本1 */ font-size: 20px; font-weight: 400; @@ -27,21 +27,21 @@ vertical-align: top; } -.c1Comment > .article { +.c1Comment>.article { margin-top: 15px; margin-bottom: 15px; margin-left: 50px; } -.c1Comment > .article > img { +.c1Comment>.article>img { width: 247px; height: 186px; margin-top: 20px; display: block; } -.c1Comment > .article > span:nth-child(1) { +.c1Comment>.article>span:nth-child(1) { font-size: 20px; font-weight: 400; letter-spacing: 0px; @@ -51,7 +51,7 @@ vertical-align: top; } -.c1Comment > .article > span:nth-child(2) { +.c1Comment>.article>span:nth-child(2) { font-size: 20px; font-weight: 400; letter-spacing: 0px; @@ -61,7 +61,7 @@ vertical-align: top; } -.c1Comment > .Action { +.c1Comment>.Action { margin-bottom: 15px; margin-left: 50px; width: 100px; @@ -69,12 +69,12 @@ justify-content: space-between; } -.c1Comment > .Action > img { +.c1Comment>.Action>img { width: 20px; height: 20px; } -.c1Comment > span { +.c1Comment>span { font-size: 16px; font-weight: 400; letter-spacing: 0px; @@ -104,17 +104,17 @@ margin-top: 10px; } -.c1More > .top { +.c1More>.top { display: flex; } -.c1More > .top > img { +.c1More>.top>img { margin-right: 12px; width: 32px; height: 32px; } -.c1More > .top > .nameTime > .name { +.c1More>.top>.nameTime>.name { /** 文本1 */ font-size: 16px; font-weight: 400; @@ -125,7 +125,7 @@ } -.c1More > .top > .nameTime > .time { +.c1More>.top>.nameTime>.time { font-size: 12px; font-weight: 400; letter-spacing: 0px; @@ -133,7 +133,7 @@ color: rgba(0, 0, 0, 1); } -.c1More > .moreComments { +.c1More>.moreComments { font-size: 14px; font-weight: 400; letter-spacing: 0px; @@ -154,3 +154,13 @@ line-height: 23.17px; color: rgba(42, 130, 228, 1); } + +.replyContent { + max-height: 150px; + overflow-y: scroll; +} + +.userphoto{ + border-radius: 50%; +} + diff --git a/src/containers/community/components/Comments/Comments.tsx b/src/containers/community/components/Comments/Comments.tsx index 5651ba6..6a99548 100644 --- a/src/containers/community/components/Comments/Comments.tsx +++ b/src/containers/community/components/Comments/Comments.tsx @@ -1,5 +1,12 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import { useLocation, useNavigate } from "react-router-dom"; +import { Button, Grid, IconButton, ListItemText, MenuItem, TextareaAutosize, TextField, Typography } from '@mui/material'; +import ThumbUpAltOutlinedIcon from '@mui/icons-material/ThumbUpAltOutlined'; +import ThumbUpAltRoundedIcon from '@mui/icons-material/ThumbUpAltRounded'; import "./Comments.css" +import Discuss from "../Discuss/Discuss" +import Recommended from "../Recommended/Recommended" +import { useClient } from "@lib/hook"; // @ts-ignore import picture from "../../static/picture.png" @@ -7,68 +14,179 @@ import picture from "../../static/picture.png" import nt from "../../static/329ccc2cdedbc10415445cb6f80c93.jpg@2x.png" // @ts-ignore import giveLike from "../../static/giveLike.png" +import Item from 'antd/es/list/Item'; -class Comments extends React.Component { - state = { - showElem: "none", - Spread: "展开更多回复" +interface Props { + RecommendStatus: boolean; + handleReShow: (title: string) => void; + handleReClose: (title: string) => void; +} +const Comments: React.FC = (props) => { + + const { state } = useLocation(); + const client = useClient(); + + //评论弹窗 + const [DiscussStatus, handleDiscuss] = useState(false) + const DiscussShow = (commentId: number) => { + handleCommentId(commentId) + handleDiscuss(true) + } + const DiscussClose = () => { + handleDiscuss(false) } + const [commentId, handleCommentId] = useState(1) - showMore() { - const showElem = this.state.showElem - if (showElem === "none") { - this.setState({ - showElem: "block", - Spread: "更多回复" - }) + const [commentList, setCommentList] = useState(null) + const [replyList, setReplyList] = useState(null) + + const [isReplyShow, handleReplyShow] = useState(false); + + const [allLikeList, setAllLikeList] = useState(null); + const [likeStatus, setLikeStatus] = useState(0) + const handleLike = (is_like: number, comment_id: number) => { + let params = { + user_id: 1, + comment_id: comment_id + } + if (is_like == 1) { + client.cancelLike(params).then(res => { + getData() + }) } else { - this.setState({ - showElem: "none", - Spread: "展开更多回复" + client.Like(params).then(res => { + getData() }) } - }; + } + const [likesList, setLikesList] = useState() - render() { - return
-
- -
- Yihannn - 2023年3月24日   16:33   来自广东 -
-
-
- 推荐的女性友好医院？什么大家有没有推荐的女性友好医院？推荐的女性友好医院？什么大家有没有推荐的女性友好医院？ - #附近女生拍了拍你 - -
-
- -
18
-
评论
-
- {this.state.Spread} (9) - {/* 展开更多回复*/} -
-
- -
-
skuromi
-
2023年3月30日   11:34   来自广东
+ useEffect(() => { + getData() + }, [state]) + + const getData = () => { + let params = { + user_id: 1 + } + let Redata: any; + let Likesdata: any; + let AllLikesList: any; + client.getReplyList(params).then(res => { + Redata = res.data.data; + Redata.map((item: { release_time: string }) => { + //格式化时间 + let dateTime = new Date(item.release_time).toLocaleString(); + item.release_time = dateTime + }) + setReplyList(Redata) + }) + client.LikesList(params).then(res => { + Likesdata = res.data.data + setLikesList(Likesdata) + }) + client.AllLikesList(params).then(res => { + AllLikesList = res.data.data + setAllLikeList(AllLikesList) + }) + client.getCommentList(params).then(res => { + const Codata = res.data.data + Codata.map((item: { release_time: string, reply_num: number, comment_id: number, is_like: number, realLike_num: number }) => { + //格式化时间 + let dateTime = new Date(item.release_time).toLocaleString(); + item.release_time = dateTime + + let replyCount = 0; // 统计回复次数的变量 + let likeNum = 0; //点赞数量 + Redata.forEach((Reitem: { comment_id: number }) => { + if (Reitem.comment_id === item.comment_id) { + replyCount++; // 出现相同 comment_id 时递增回复次数 + } + }); + Likesdata.forEach((Litem: { comment_id: number }) => { + if (Litem.comment_id === item.comment_id) { + item.is_like = 1 + } + }); + AllLikesList.forEach((ALitem: { comment_id: number }) => { + if (ALitem.comment_id === item.comment_id) { + likeNum++; + } + }); + item.reply_num = replyCount; + item.realLike_num = likeNum; + }) + setCommentList(Codata) + }) + } + + if (commentList === null || replyList === null) { + return
Loading...
; + } + + return ( +
+ {commentList.map((item, index) => ( +
+
+ +
+ {item.user_name} + {item.release_time}  来自 {item.come_from} +
-
+
+ {item.content} + props.handleReShow(item.theme_title)}>#{item.theme_title}# + +
+
+ handleLike(item.is_like, item.comment_id)}> + { + //判断 + item.is_like == 1 ? + : + } + +
{item.realLike_num}
+
DiscussShow(item.comment_id)}>评论
+
+ handleReplyShow(true)}> 展开更多回复({item.reply_num}) -
看起来真不错！点赞
-
-
收起 -
+ {/* 展开更多回复 */} + {isReplyShow && ( // 根据状态判断是否展开回复框 +
+
+ {replyList.map((Reitem, Reindex) => ( +
+ {item.comment_id === Reitem.comment_id && ( // 根据条件渲染回复框 +
+
+ +
+
{Reitem.user_name}
+
{Reitem.release_time}  来自 {Reitem.come_from}
+
+
+
{Reitem.reply_content}
+
+ )} +
+ ))} +
+
handleReplyShow(false)}>收起
+
+ )} + DiscussShow} handleClose={DiscussClose} refreshView={getData}> + props.handleReShow} handleClose={() => props.handleReClose}> +
+ ))}
- } + ) } -export default Comments; +export default Comments + diff --git a/src/containers/community/components/Discuss/Discuss.css b/src/containers/community/components/Discuss/Discuss.css index 8055ce9..6212129 100644 --- a/src/containers/community/components/Discuss/Discuss.css +++ b/src/containers/community/components/Discuss/Discuss.css @@ -10,8 +10,6 @@ flex-direction: row-reverse; } -.c2footerBtn > div:nth-child(2) > img { - width: 30px; - height: 30px; - margin-right: 10px; +.c2footerBtn>div:nth-child(2) { + display: flex; } diff --git a/src/containers/community/components/Discuss/Discuss.tsx b/src/containers/community/components/Discuss/Discuss.tsx index a840cef..009b16c 100644 --- a/src/containers/community/components/Discuss/Discuss.tsx +++ b/src/containers/community/components/Discuss/Discuss.tsx @@ -1,5 +1,7 @@ -import {Button, Input, Modal} from 'antd'; -import React, {useState} from 'react'; +import { Button, Input, Modal } from 'antd'; +import React, { useState, useEffect } from 'react'; +import { useClient } from "@lib/hook"; +import { useLocation, useNavigate } from "react-router-dom"; import "./Discuss.css" // @ts-ignore @@ -7,38 +9,57 @@ import smilingFace from "../../static/smilingFace.png" // @ts-ignore import Image from "../../static/Image.png" +interface Props { + Status: boolean; + CommentId: number; + handleShow: () => void; + handleClose: () => void; + refreshView: () => void; +} -const Discuss: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useState(false); - const showModal = () => { - setIsModalOpen(true); - }; - const handleOk = () => { - setIsModalOpen(false); - }; - const handleCancel = () => { - setIsModalOpen(false); - }; +const Discuss: React.FC = (props) => { - const {TextArea} = Input; + const { state } = useLocation(); + const client = useClient(); + + const [textValue, setTextValue] = useState(''); + + const DiscussSubmit = () => { + let params = { + reply_content: textValue, + comment_id: props.CommentId, + come_from: '广东', + user_photo: '/src/containers/community/static/avatar.jpg', + user_name: 'KKK123' + } + client.Discuss(params).then(res => { + props.refreshView() + props.handleClose() + console.log(props.refreshView); + console.log(typeof props.refreshView); + setTextValue('') + }) + } + const handleDisClose = () => { + props.handleClose() + setTextValue('') + } + + const { TextArea } = Input; return (
- -