115 lines
3.7 KiB
TypeScript
115 lines
3.7 KiB
TypeScript
import { Button, Input } from 'antd'
|
|
import { useState, useEffect, FC } from 'react'
|
|
import { useSelector } from 'react-redux'
|
|
import { commentSave, getCommentList } from '../../service'
|
|
import './index.less'
|
|
import { CommentOutlined, FileImageOutlined, SmileOutlined } from '@ant-design/icons'
|
|
|
|
const CommentList: FC<any> = props => {
|
|
const { userInfo } = useSelector(store => store.userInfo)
|
|
const { momentId } = props
|
|
const [replyList, setReplyList] = useState([])
|
|
const [comment, setComment] = useState('')
|
|
const getList = async () => {
|
|
const res = await getCommentList({ id: momentId })
|
|
if (res.success && res.data) {
|
|
setReplyList(res.data)
|
|
} else {
|
|
setReplyList([])
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
getList()
|
|
}, [])
|
|
|
|
const changeComment = e => {
|
|
setComment(e.target.value)
|
|
}
|
|
|
|
const saveComment = () => {
|
|
const params = {
|
|
momentId,
|
|
replyType: 2,
|
|
content: comment,
|
|
targetId: 12
|
|
}
|
|
commentSave(params).then(() => {
|
|
getList()
|
|
})
|
|
}
|
|
return (
|
|
<div className='comment-list-box'>
|
|
<div className='top-arrow'></div>
|
|
<div className='comment-number'>评论 {replyList.length}</div>
|
|
<div className='comment-wrapper'>
|
|
<img src={userInfo?.avatar} className='avatar' />
|
|
<div className='text-area-outer-box'>
|
|
<div className='text-area-box'>
|
|
<Input.TextArea
|
|
onChange={changeComment}
|
|
placeholder='和平发言'
|
|
style={{ border: 'none', paddingLeft: 0 }}
|
|
/>
|
|
</div>
|
|
<div className='comment-bottom'>
|
|
<div className='icon-box flex'>
|
|
<div style={{ marginRight: 20 }}>
|
|
<SmileOutlined />
|
|
</div>
|
|
<div>
|
|
<FileImageOutlined />
|
|
</div>
|
|
</div>
|
|
<div className='submit-btn-box flex'>
|
|
<div className='text-num-box'>1/1000</div>
|
|
<Button onClick={saveComment} type='primary'>
|
|
发送
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='comment-list-wrapper'>
|
|
{replyList.map((item: Record<string, any>) => {
|
|
return (
|
|
<div key={item.id} className='comment-list-item flex align-top'>
|
|
<img src={item.avatar} className='avatar' />
|
|
<div>
|
|
<div>{item.userName}</div>
|
|
<div style={{ margin: '10px 0' }}>{item.content}</div>
|
|
<div className='ope-btn-group flex'>
|
|
<div>12小时前</div>
|
|
<div className='reply-btn'>
|
|
<CommentOutlined />
|
|
评论
|
|
</div>
|
|
</div>
|
|
{item.children?.length &&
|
|
item.children.map(child => {
|
|
return (
|
|
<div key={child.id} className='comment-list-item flex align-top'>
|
|
<img src={child.avatar} className='avatar' />
|
|
<div>
|
|
<div>{child.userName}</div>
|
|
<div style={{ margin: '10px 0' }}>{child.content}</div>
|
|
<div className='ope-btn-group flex'>
|
|
<div>12小时前</div>
|
|
<div className='reply-btn'>
|
|
<CommentOutlined />
|
|
评论
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default CommentList
|