用户个人中心、兴趣小组
Change-Id: I0e2f3f4ad586f237505613238cbb7bebb6118b63
diff --git a/src/pages/InterestGroup/InterestGroup.jsx b/src/pages/InterestGroup/InterestGroup.jsx
index b89cf57..0b5b002 100644
--- a/src/pages/InterestGroup/InterestGroup.jsx
+++ b/src/pages/InterestGroup/InterestGroup.jsx
@@ -1,23 +1,217 @@
-import React, { useEffect } from 'react';
+// // import React, { useEffect } from 'react';
+// // import Header from '../../components/Header';
+// // import { useGroupStore } from '../../context/useGroupStore';
+// // // import GroupFilters from './GroupFilters';
+// // import GroupList from './GroupList';
+// // import GroupPagination from './GroupPagination';
+// // import './InterestGroup.css';
+// // const InterestGroup = () => {
+// // const { fetchGroupList, setPage, handleSearch } = useGroupStore();
+
+// // // 初始化加载
+// // useEffect(() => {
+// // fetchGroupList();
+// // }, [fetchGroupList]);
+
+// // return (
+// // <div className="interest-group-container">
+// // <Header />
+// // <div className="interest-group-card">
+// // {/* <GroupFilters /> */}
+// // <GroupList />
+// // <GroupPagination />
+// // </div>
+// // </div>
+// // );
+// // };
+
+// // export default InterestGroup;
+
+// import React, { useEffect, useState } from 'react';
+// import Header from '../../components/Header';
+// import { useGroupStore } from '../../context/useGroupStore';
+// import GroupList from './GroupList';
+// import GroupPagination from './GroupPagination';
+// import './InterestGroup.css';
+// import axios from 'axios';
+
+// const InterestGroup = () => {
+// const { fetchGroupList } = useGroupStore();
+
+// const [showModal, setShowModal] = useState(false);
+// const [groupName, setGroupName] = useState('');
+// const [groupDescription, setGroupDescription] = useState('');
+
+// useEffect(() => {
+// fetchGroupList();
+// }, [fetchGroupList]);
+
+// const handleCreateGroup = async () => {
+// try {
+// const res = await axios.post('http://localhost:3011/echo/groups/createGroup', {
+// user_id: 1,
+// group_name: groupName, // ✅ 改为 snake_case
+// description: groupDescription,
+// time: new Date().toISOString(),
+// category: '默认分类',
+// cover_image: 'https://picsum.photos/300/200',
+// });
+
+// if (res.status === 200 && res.data.status === 'success') {
+// alert('小组创建成功');
+// setShowModal(false);
+// setGroupName('');
+// setGroupDescription('');
+// fetchGroupList();
+// } else {
+// alert('创建失败: ' + res.data.message);
+// }
+// } catch (error) {
+// alert('创建失败，请检查网络或输入');
+// console.error(error);
+// }
+// };
+
+
+// // const handleCreateGroup = async () => {
+// // try {
+// // const res = await axios.post('/createGroup', {
+// // groupName,
+// // description: groupDescription,
+// // });
+// // if (res.status === 200) {
+// // alert('小组创建成功');
+// // setShowModal(false);
+// // setGroupName('');
+// // setGroupDescription('');
+// // fetchGroupList(); // 刷新列表
+// // }
+// // } catch (error) {
+// // alert('创建失败，请重试');
+// // }
+// // };
+
+// return (
+// <div className="interest-group-container">
+// <Header />
+// <div className="interest-group-card">
+// <button className="create-group-btn" onClick={() => setShowModal(true)}>
+// 创建小组
+// </button>
+
+// {showModal && (
+// <div className="modal-overlay">
+// <div className="modal-content">
+// <h2>创建新小组</h2>
+// <input
+// type="text"
+// placeholder="小组名称"
+// value={groupName}
+// onChange={(e) => setGroupName(e.target.value)}
+// />
+// <textarea
+// placeholder="小组简介"
+// value={groupDescription}
+// onChange={(e) => setGroupDescription(e.target.value)}
+// />
+// <div className="modal-buttons">
+// <button onClick={handleCreateGroup}>确定</button>
+// <button onClick={() => setShowModal(false)}>取消</button>
+// </div>
+// </div>
+// </div>
+// )}
+
+// <GroupList />
+// <GroupPagination />
+// </div>
+// </div>
+// );
+// };
+
+// export default InterestGroup;
+
+
+import React, { useEffect, useState } from 'react';
import Header from '../../components/Header';
import { useGroupStore } from '../../context/useGroupStore';
-import GroupFilters from './GroupFilters';
import GroupList from './GroupList';
import GroupPagination from './GroupPagination';
import './InterestGroup.css';
-const InterestGroup = () => {
- const { fetchGroupList, setPage, handleSearch } = useGroupStore();
+import axios from 'axios';
- // 初始化加载
+const InterestGroup = () => {
+ const { fetchGroupList } = useGroupStore();
+
+ const [showModal, setShowModal] = useState(false);
+ const [groupName, setGroupName] = useState('');
+ const [groupDescription, setGroupDescription] = useState('');
+
useEffect(() => {
fetchGroupList();
}, [fetchGroupList]);
+ const handleCreateGroup = async () => {
+ try {
+ // ✅ 修改请求体字段名，使用驼峰命名法
+ const res = await axios.post('http://localhost:3011/echo/groups/createGroup', {
+ userId: 1, // 改为驼峰命名 userId
+ groupName: groupName, // 改为驼峰命名 groupName
+ description: groupDescription,
+ // 移除time字段，使用后端生成的时间
+ memberCount: 1, // 添加初始成员数
+ category: '默认分类',
+ coverImage: 'https://picsum.photos/300/200', // 改为驼峰命名 coverImage
+ });
+
+ if (res.status === 200 && res.data.status === 'success') {
+ alert('小组创建成功');
+ setShowModal(false);
+ setGroupName('');
+ setGroupDescription('');
+ fetchGroupList(); // 刷新列表
+ } else {
+ // 显示后端返回的详细错误信息
+ alert('创建失败: ' + res.data.message);
+ }
+ } catch (error) {
+ // 处理网络错误或其他异常
+ alert('创建失败，请检查网络连接或输入内容');
+ console.error('创建小组错误:', error);
+ }
+ };
+
return (
<div className="interest-group-container">
<Header />
<div className="interest-group-card">
- <GroupFilters />
+ <button className="create-group-btn" onClick={() => setShowModal(true)}>
+ 创建小组
+ </button>
+
+ {showModal && (
+ <div className="modal-overlay">
+ <div className="modal-content">
+ <h2>创建新小组</h2>
+ <input
+ type="text"
+ placeholder="小组名称"
+ value={groupName}
+ onChange={(e) => setGroupName(e.target.value)}
+ />
+ <textarea
+ placeholder="小组简介"
+ value={groupDescription}
+ onChange={(e) => setGroupDescription(e.target.value)}
+ />
+ <div className="modal-buttons">
+ <button onClick={handleCreateGroup}>确定</button>
+ <button onClick={() => setShowModal(false)}>取消</button>
+ </div>
+ </div>
+ </div>
+ )}
+
<GroupList />
<GroupPagination />
</div>