diff --git a/package.json b/package.json index 6c05ac3..caeff22 100644 --- a/package.json +++ b/package.json @@ -63,4 +63,4 @@ "typescript": "^4.6.3", "vite": "^4.5.0" } -} \ No newline at end of file +} diff --git a/src/store/features/userInfoSlice.ts b/src/store/features/userInfoSlice.ts index 183c023..8b437c6 100644 --- a/src/store/features/userInfoSlice.ts +++ b/src/store/features/userInfoSlice.ts @@ -31,7 +31,7 @@ export const userInfoSlice = createSlice({ } } }) -// 导出加减的方法 +// 导出方法 export const { saveUserInfo } = userInfoSlice.actions // 默认导出 diff --git a/src/utils/request.ts b/src/utils/request.ts index d8a7e4c..9a0b972 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -1,7 +1,7 @@ import { message } from 'antd' import axios from 'axios' -export default function request(config, url) { +export default function request(config, url = '') { // const navigate = useNavigate() const userInfoStorage = localStorage.getItem('userInfo') const userInfo = userInfoStorage ? JSON.parse(userInfoStorage) : {} diff --git a/src/views/chicken-circle/comps/base-item/index.less b/src/views/chicken-circle/comps/base-item/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/views/chicken-circle/comps/base-item/index.tsx b/src/views/chicken-circle/comps/base-item/index.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/views/chicken-circle/comps/comment-list/index.less b/src/views/chicken-circle/comps/comment-list/index.less new file mode 100644 index 0000000..23f1a3b --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/src/views/chicken-circle/comps/comment-list/index.tsx b/src/views/chicken-circle/comps/comment-list/index.tsx new file mode 100644 index 0000000..d49d394 --- /dev/null +++ b/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 = 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 ( +
+
+
评论 {replyList.length}
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
1/1000
+ +
+
+
+
+
+ {replyList.map((item: Record) => { + return ( +
+ +
+
{item.userName}
+
{item.content}
+
+
12小时前
+
+ +  评论 +
+
+ {item.children?.length && + item.children.map(child => { + return ( +
+ +
+
{child.userName}
+
{child.content}
+
+
12小时前
+
+ +  评论 +
+
+
+
+ ) + })} +
+
+ ) + })} +
+
+ ) +} +export default CommentList diff --git a/src/views/chicken-circle/index.less b/src/views/chicken-circle/index.less index 1c7f18d..76bf80d 100644 --- a/src/views/chicken-circle/index.less +++ b/src/views/chicken-circle/index.less @@ -51,6 +51,30 @@ } } } + .img-list{ + margin-left: 48px; + margin-top: 20px; + width: 390px; + display: flex; + flex-wrap: wrap; + gap: 10px; + img{ + cursor: pointer; + } + } + .card-footer{ + width: 100%; + display: flex; + justify-content: space-around; + border-top: 1px solid rgba(228,230,235,0.5); + border-bottom: 1px solid rgba(228,230,235,0.5); + margin-top: 20px; + .footer-item{ + flex: 1; + padding: 10px 0; + text-align: center; + } + } } .pop-content { diff --git a/src/views/chicken-circle/index.tsx b/src/views/chicken-circle/index.tsx index 2d0de99..3febe88 100644 --- a/src/views/chicken-circle/index.tsx +++ b/src/views/chicken-circle/index.tsx @@ -1,22 +1,36 @@ -import headImg from '@/imgs/head.jpg' -import javaImg from '@/imgs/java.jpeg' -import jobImg from '@/imgs/job.jpg' import { FileImageOutlined, MessageOutlined, + PlusOutlined, ShareAltOutlined, - SmileOutlined + SmileOutlined, + MessageTwoTone } from '@ant-design/icons' -import { Avatar, Button, Card, Input, Popover, Tabs } from 'antd' -import { useState } from 'react' +import { Avatar, Button, Card, Input, Popover, Tabs, message, Upload, Image } from 'antd' +import { useEffect, useState } from 'react' +import { fetchCircleList, saveMoment, getMoments } from './service' +import CommentList from './comps/comment-list' import './index.less' const { Meta } = Card const { TextArea } = Input const Circle = () => { + const userInfoStorage = localStorage.getItem('userInfo') + const { tokenValue = '' } = userInfoStorage ? JSON.parse(userInfoStorage) : {} + const [hasFocus, setHasFocus] = useState(false) const [comment, setComment] = useState('') + const [circleList, setCircleList] = useState([]) + const [currentSelectCircle, setCurrentSelectCircle] = useState(null) + const [openFlag, setOpenFlag] = useState(false) + const [imgList, setImgList] = useState([]) + const [momentList, setMomentList] = useState([]) + const [currentReplyCommentId, setCurrentReplyCommentId] = useState(undefined) + const [previewList, setPreviewList] = useState({ + list: [], + index: 0 + }) const toggleFocus = (flag: boolean) => { setHasFocus(!flag) @@ -26,31 +40,99 @@ const Circle = () => { setComment(e.target.value) } + const getCircleList = async () => { + const res = await fetchCircleList() + if (res.success && res.data?.length > 0) { + setCircleList(res.data) + } + } + + useEffect(() => { + getCircleList() + getMomentList() + }, []) + + const changeCircle = selectItem => { + setCurrentSelectCircle(selectItem) + setOpenFlag(false) + } + + const renderTab = () => { + return circleList.map(item => { + return { + label: item.circleName, + key: item.id, + children: ( +
+ {item.children.map(child => { + return ( +
changeCircle(child)} + > + + {child.circleName} +
+ ) + })} +
+ ) + } + }) + } + const renderPopContent = () => { - return ( - -
- - JAVA圈子 -
-
- - 求职圈子 -
- - ) - } - ]} - /> - ) + return + } + + const getMomentList = async () => { + const res = await getMoments({ + pageInfo: { + pageNo: 1, + pageSize: 10 + } + }) + setMomentList(res.data.result) + } + + const publishMoment = async () => { + const params: any = { + circleId: currentSelectCircle?.id, + content: comment + } + if (imgList.length) { + params.picUrlList = imgList.map(item => item.response.data) + } + const res = await saveMoment(params) + if (res.success) { + getMomentList() + return message.success('发布成功') + } + return message.error('有点繁忙呢，要不再试试~~~') + } + const uploadButton = ( + + ) + const handleChange = ({ fileList }) => { + setImgList(fileList) + } + + const showReply = (item: any) => { + if (item.id !== currentReplyCommentId) { + setCurrentReplyCommentId(item.id) + } else { + setCurrentReplyCommentId(undefined) + } + } + + const handlePreview = (picList, index) => { + setPreviewList({ + list: picList, + index + }) } return ( @@ -73,8 +155,33 @@ const Circle = () => { onFocus={() => toggleFocus(false)} onBlur={() => toggleFocus(true)} /> - -
选择圈子 {'>'}
+ + {imgList.length >= 8 || imgList.length === 0 ? null : uploadButton} + + setOpenFlag(open)} + content={renderPopContent} + > +
+ {currentSelectCircle?.circleName || '选择圈子'} {'>'} +
@@ -83,37 +190,73 @@ const Circle = () => { 表情
-
- - 图片 -
+ +
+ + 图片 +
+
-
- - - 分享 - , -
- - 2 -
- ]} - > - } - title='鸡翅小弟' - description='每天练习，两年半定有所成。' - /> - + {momentList.map((item: any) => { + return ( + + } + title={item.userName} + description={item.content} + /> + {item.picUrlList?.length && ( + +
+ {item.picUrlList.map((t: string) => ( + + ))} +
+ + )} + + {currentReplyCommentId === item.id && } + + ) + })} ) } diff --git a/src/views/chicken-circle/service.ts b/src/views/chicken-circle/service.ts new file mode 100644 index 0000000..0419ae3 --- /dev/null +++ b/src/views/chicken-circle/service.ts @@ -0,0 +1,60 @@ +import req from '@utils/request' + +export const RequestUrl = { + CircleList: '/circle/share/circle/list', + MomentSave: '/circle/share/moment/save', + GetMoments: '/circle/share/moment/getMoments', + CommentSave: '/circle/share/comment/save', + CommentList: '/circle/share/comment/list' +} + +const baseService = ({ method = 'get', url = '', params = {} }) => { + const reqParam = { + method, + url + } + if (method === 'get') { + reqParam.params = params + } + if (method === 'post') { + reqParam.data = params + } + return req(reqParam, '/circle') +} + +export const fetchCircleList = () => { + return baseService({ + url: RequestUrl.CircleList + }) +} + +export const saveMoment = params => { + return baseService({ + method: 'post', + url: RequestUrl.MomentSave, + params + }) +} + +export const commentSave = params => { + return baseService({ + method: 'post', + url: RequestUrl.CommentSave, + params + }) +} + +export const getCommentList = params => { + return baseService({ + method: 'post', + url: RequestUrl.CommentList, + params + }) +} +export const getMoments = params => { + return baseService({ + method: 'post', + url: RequestUrl.GetMoments, + params + }) +} diff --git a/src/views/user-info/index.tsx b/src/views/user-info/index.tsx index 24aa29a..10c96f7 100644 --- a/src/views/user-info/index.tsx +++ b/src/views/user-info/index.tsx @@ -18,18 +18,6 @@ const layout = { wrapperCol: { span: 10, offset: 1 } } -const beforeUpload = (file: RcFile) => { - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' - if (!isJpgOrPng) { - message.error('You can only upload JPG/PNG file!') - } - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isLt2M) { - message.error('Image must smaller than 2MB!') - } - return isJpgOrPng && isLt2M -} - interface UserInfo { nickName?: string phone?: string diff --git a/vite.config.ts b/vite.config.ts index 9727af6..12d7823 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -48,6 +48,10 @@ export default ({ mode }) => { '/practice': { target: env.VITE_API_HOST, changeOrigin: true + }, + '/circle': { + target: env.VITE_API_HOST, + changeOrigin: true } } }