修改密码、管理员删帖、促销、退出登录
Change-Id: I2cc0e211ac5a04f9e89d0736fadd25541a5fccb9
diff --git a/src/pages/InterestGroup/GroupItem.jsx b/src/pages/InterestGroup/GroupItem.jsx
index 8fdc640..736f88d 100644
--- a/src/pages/InterestGroup/GroupItem.jsx
+++ b/src/pages/InterestGroup/GroupItem.jsx
@@ -1,20 +1,182 @@
-import React, { useState } from 'react';
+// import React, { useState, useEffect } from 'react';
+// import { useGroupStore } from '../../context/useGroupStore';
+// import { useUser } from '../../context/UserContext';
+// import CreatePostForm from './CreatePostForm';
+// import axios from 'axios'; // 新增
+
+// const GroupItem = ({ group }) => {
+// const { handleJoinGroup, joinStatus, setJoinStatus } = useGroupStore(); // 假设你有 setJoinStatus 方法
+// const { user } = useUser();
+
+// const userId = user?.userId;
+// const groupId = group.groupId;
+
+// const [isMember, setIsMember] = useState(false);
+
+// useEffect(() => {
+// setIsMember(joinStatus[groupId] === '加入成功');
+// }, [joinStatus, groupId]);
+
+// const [showCreatePost, setShowCreatePost] = useState(false);
+
+// // 退出小组函数（新增）
+// const handleLeaveGroup = async () => {
+// try {
+// const res = await axios.post(`/echo/groups/${groupId}/leave`, {
+// user_id: userId,
+// });
+// if (res.data.status === 'success') {
+// setJoinStatus(groupId, '未加入'); // 更新全局状态（需确保 useGroupStore 中有此方法）
+// setIsMember(false); // 本地状态也更新
+// } else {
+// alert(res.data.message || '退出失败');
+// }
+// } catch (error) {
+// console.error('退出小组失败:', error);
+// alert('退出小组失败');
+// }
+// };
+
+// return (
+// <div className="group-item">
+// <div className="group-content">
+// <img
+// style={{ width: '40%', height: '40%' }}
+// src={group.coverImage || 'https://picsum.photos/200/200'}
+// alt={group.groupName}
+// className="group-cover"
+// />
+// <div className="group-info-right">
+// <h3>{group.groupName}</h3>
+// <p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
+
+// {/* 加入/退出按钮逻辑 */}
+// {userId && (
+// <button
+// onClick={() => {
+// if (isMember) {
+// handleLeaveGroup(); // 已加入 -> 退出
+// } else {
+// handleJoinGroup(groupId, userId); // 未加入 -> 加入
+// }
+// }}
+// >
+// {isMember ? '退出小组' : '+加入小组'}
+// </button>
+// )}
+// {!userId && <button disabled>请登录</button>}
+
+// {/* 发布帖子按钮 */}
+// {userId && isMember && (
+// <button onClick={() => setShowCreatePost(!showCreatePost)}>
+// +发布帖子
+// </button>
+// )}
+// </div>
+// </div>
+
+// <div className="group-description">
+// <p>{group.description}</p>
+// </div>
+// <p>分类：{group.category}</p>
+
+// {showCreatePost && (
+// <CreatePostForm
+// groupId={groupId}
+// onClose={() => setShowCreatePost(false)}
+// />
+// )}
+// </div>
+// );
+// };
+
+// export default GroupItem;
+
+import React, { useState, useEffect } from 'react';
import { useGroupStore } from '../../context/useGroupStore';
import { useUser } from '../../context/UserContext';
import CreatePostForm from './CreatePostForm';
+import axios from 'axios';
const GroupItem = ({ group }) => {
-
- console.log('group:', group);
- const { handleJoinGroup, joinStatus } = useGroupStore();
+ const { handleJoinGroup, joinStatus, setJoinStatus } = useGroupStore();
const { user } = useUser();
-
+
const userId = user?.userId;
- const groupId = group.groupId; // ✅ 使用正确字段
-console.log('加入小组请求 - groupId:', group.group_id, 'userId:', userId);
+ const groupId = group.groupId;
+
+ const [isMember, setIsMember] = useState(false);
+ const [loading, setLoading] = useState(false); // 新增：加载状态
+ const [error, setError] = useState(''); // 新增：错误信息
+
+ useEffect(() => {
+ console.log('joinStatus updated:', joinStatus);
+ setIsMember(joinStatus[groupId] === '加入成功');
+ }, [joinStatus, groupId]);
+
+ // 初始挂载时检查成员状态（新增）
+ useEffect(() => {
+ if (userId && groupId) {
+ checkMembershipStatus();
+ }
+ }, [userId, groupId]);
+
+ // 检查成员状态（新增）
+ const checkMembershipStatus = async () => {
+ try {
+ const res = await axios.get(`/echo/groups/${groupId}/members`);
+ const isMember = res.data.members.some(member => member.user_id === userId);
+ setJoinStatus(groupId, isMember ? '加入成功' : '未加入');
+ } catch (error) {
+ console.error('检查成员状态失败:', error);
+ }
+ };
const [showCreatePost, setShowCreatePost] = useState(false);
+ const handleLeaveGroup = async () => {
+ setLoading(true);
+ try {
+ const res = await axios.post(`/echo/groups/${groupId}/leave`, {
+ user_id: userId,
+ });
+ if (res.data.status === 'success') {
+ setJoinStatus(groupId, '未加入');
+ setIsMember(false);
+ // 可选：刷新小组成员计数
+ group.memberCount = (group.memberCount || 0) - 1;
+ } else {
+ setError(res.data.message || '退出失败');
+ }
+ } catch (error) {
+ console.error('退出小组失败:', error);
+ setError('退出小组失败');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // 修改加入小组逻辑（新增）
+ const handleJoin = async () => {
+ setLoading(true);
+ try {
+ const res = await handleJoinGroup(groupId, userId);
+ if (res && res.status === 'success') {
+ setJoinStatus(groupId, '加入成功');
+ setIsMember(true);
+ // 可选：刷新小组成员计数
+ group.memberCount = (group.memberCount || 0) + 1;
+ } else {
+ setError(res?.message || '加入失败');
+ }
+ } catch (error) {
+ console.error('加入小组失败:', error);
+ setError('加入小组失败');
+ } finally {
+ setLoading(false);
+ }
+ };
+
return (
<div className="group-item">
<div className="group-content">
@@ -25,18 +187,31 @@
className="group-cover"
/>
<div className="group-info-right">
- <h3>{group.groupName}</h3> {/* ✅ 使用 groupName */}
+ <h3>{group.groupName}</h3>
<p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
- <button
- onClick={() => handleJoinGroup(groupId, userId)}
- disabled={joinStatus[groupId] === '加入成功' || !userId}
- >
-
- {joinStatus[groupId] === '加入成功' ? '已加入' : userId ? '+加入小组' : '请登录'}
- </button>
+ {/* 加入/退出按钮逻辑 */}
+ {userId && (
+ <button
+ onClick={() => {
+ if (isMember) {
+ handleLeaveGroup();
+ } else {
+ handleJoin();
+ }
+ }}
+ disabled={loading}
+ >
+ {loading ? '处理中...' : isMember ? '退出小组' : '+加入小组'}
+ </button>
+ )}
+ {!userId && <button disabled>请登录</button>}
- {userId && joinStatus[groupId] === '加入成功' && (
+ {/* 显示错误信息（新增） */}
+ {error && <p style={{ color: 'red' }}>{error}</p>}
+
+ {/* 发布帖子按钮 */}
+ {userId && isMember && (
<button onClick={() => setShowCreatePost(!showCreatePost)}>
+发布帖子
</button>
@@ -59,4 +234,4 @@
);
};
-export default GroupItem;
\ No newline at end of file
+export default GroupItem;