feat: 圈子

src/views/chicken-circle/comps/comment-list/index.less

@@ -0,0 +1,60 @@
+.comment-list-box{
+  padding: 20px 0;
+  position: relative;
+  .flex{
+    display: flex;
+    align-items: center;
+  }
+  .align-top{
+    align-items: flex-start;
+  }
+  .avatar{
+    height: 30px;
+    width: 30px;
+    margin-right: 16px;
+  }
+  .top-arrow{
+    position: absolute;
+    top: -6px;
+    right: 25%;
+    width: 10px;
+    height: 10px;
+    background-color: white;
+    border-top: 1px solid rgba(228, 230, 235, 0.5);
+    border-right: 1px solid rgba(228, 230, 235, 0.5);
+    transform: rotate(-45deg);
+  }
+  .comment-number{
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 18px;
+  }
+  .comment-wrapper{
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 20px;
+    .text-area-outer-box{
+      border: 1px solid lightgray;
+      border-radius: 8px;
+      padding: 8px 12px;
+      flex: 1;
+      .comment-bottom{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+  }
+  .comment-list-wrapper{
+    .comment-list-item{
+      margin-top: 30px;
+      .ope-btn-group{
+        gap: 16px;
+        color: gray;
+        .reply-btn{
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}

src/views/chicken-circle/comps/comment-list/index.tsx

@@ -0,0 +1,114 @@
+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 />
+                    &nbsp;评论
+                  </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 />
+                              &nbsp;评论
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  })}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+export default CommentList