修改帖子
Change-Id: I467b35242bce8b27d612eb96f2710b27aa03d1d2
diff --git a/src/pages/FriendMoments/FriendMoments.jsx b/src/pages/FriendMoments/FriendMoments.jsx
index 6d9def6..fd017b2 100644
--- a/src/pages/FriendMoments/FriendMoments.jsx
+++ b/src/pages/FriendMoments/FriendMoments.jsx
@@ -4,69 +4,66 @@
import Header from '../../components/Header';
import { Edit } from '@icon-park/react';
-
-const USER_ID = 456;
-
const FriendMoments = () => {
const [feeds, setFeeds] = useState([]);
const [filteredFeeds, setFilteredFeeds] = useState([]);
const [query, setQuery] = useState('');
+ const [userId, setUserId] = useState(456); // 从状态管理或登录信息获取
// Modal state & form fields
const [showModal, setShowModal] = useState(false);
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
- const [previewUrls, setPreviewUrls] = useState([]);
- const [images, setImages] = useState([]);
+ const [selectedImages, setSelectedImages] = useState([]);
+ const [previewUrls, setPreviewUrls] = useState([]); // 新增：图片预览URLs
// 拉取好友动态列表
const fetchFeeds = async () => {
try {
- const res = await axios.get(`/echo/users/${USER_ID}/feeds`);
- setFeeds(res.data.feeds);
- setFilteredFeeds(res.data.feeds);
+ // 修改为新的API路径
+ const res = await axios.get(`/echo/dynamic/${userId}/getAllDynamics`);
+ setFeeds(res.data.posts || []);
+ setFilteredFeeds(res.data.posts || []);
} catch (err) {
console.error('获取动态列表失败：', err);
+ alert('获取动态列表失败，请稍后重试');
}
};
useEffect(() => {
fetchFeeds();
- }, []);
+ }, [userId]);
// 搜索处理
const handleSearch = () => {
const q = query.trim().toLowerCase();
- if (!q) return;
+ if (!q) {
+ setFilteredFeeds(feeds);
+ return;
+ }
setFilteredFeeds(
- feeds.filter(f => (f.title || '').toLowerCase().includes(q))
+ feeds.filter(f =>
+ (f.title || '').toLowerCase().includes(q) ||
+ (f.postContent || '').toLowerCase().includes(q)
+ )
);
};
+
const handleReset = () => {
setQuery('');
setFilteredFeeds(feeds);
};
- // 对话框内：本地预览 & 上传
- const handleImageChange = async (e) => {
+ // 对话框内：处理图片选择
+ const handleImageChange = (e) => {
const files = Array.from(e.target.files);
if (!files.length) return;
- setPreviewUrls(files.map(f => URL.createObjectURL(f)));
- try {
- const uploaded = await Promise.all(files.map(f => uploadImageToServer(f)));
- setImages(uploaded);
- } catch (err) {
- console.error('图片上传失败', err);
- alert('图片上传失败，请重试');
- }
- };
- const uploadImageToServer = async (file) => {
- const fd = new FormData();
- fd.append('file', file);
- const res = await axios.post(`/upload`, fd, {
- headers: {'Content-Type':'multipart/form-data'}
- });
- return res.data.url;
+
+ // 生成预览URLs
+ const previewUrls = files.map(file => URL.createObjectURL(file));
+
+ setSelectedImages(files);
+ setPreviewUrls(previewUrls); // 更新预览URLs
};
// 对话框内：提交新动态
@@ -75,18 +72,33 @@
alert('内容不能为空');
return;
}
+
try {
- await axios.post(
- `/echo/users/${USER_ID}/createFeed`,
- { title: title.trim() || undefined, friend_content: content.trim(), images }
- );
+ const formData = new FormData();
+ formData.append('user_id', userId);
+ formData.append('title', title.trim() || '');
+ formData.append('content', content.trim());
+
+ // 添加图片文件
+ selectedImages.forEach((file, index) => {
+ formData.append('image_url', file);
+ });
+
+ // 修改为新的API路径
+ await axios.post(`/echo/dynamic/${userId}/createDynamic`, formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data'
+ }
+ });
+
// 重置表单
setTitle('');
setContent('');
- setImages([]);
- setPreviewUrls([]);
+ setSelectedImages([]);
+ setPreviewUrls([]); // 重置预览URLs
setShowModal(false);
fetchFeeds();
+ alert('发布成功');
} catch (err) {
console.error('发布失败', err);
alert('发布失败，请稍后重试');
@@ -94,14 +106,75 @@
};
// 删除动态
- const handleDelete = async (feedId) => {
+ const handleDelete = async (dynamicId) => {
if (!window.confirm('确定要删除这条动态吗？')) return;
try {
- await axios.delete(`/echo/users/me/feed/${feedId}`);
+ // 修改为新的API路径
+ await axios.delete(`/echo/dynamic/me/deleteDynamic/${dynamicId}`);
fetchFeeds();
+ alert('删除成功');
} catch (err) {
console.error('删除失败', err);
- alert('删除失败');
+ alert('删除失败，请稍后重试');
+ }
+ };
+
+ // 点赞动态
+ const handleLike = async (dynamicId) => {
+ try {
+ // 调用新的点赞API
+ const res = await axios.post(`/echo/dynamic/like`, {
+ userId,
+ dynamicId
+ });
+
+ if (res.status === 200) {
+ // 更新本地状态
+ setFeeds(feeds.map(feed => {
+ if (feed.postNo === dynamicId) {
+ return {
+ ...feed,
+ postLikeNum: (feed.postLikeNum || 0) + 1,
+ liked: true
+ };
+ }
+ return feed;
+ }));
+ } else {
+ alert(res.data.message || '点赞失败');
+ }
+ } catch (err) {
+ console.error('点赞失败', err);
+ alert('点赞失败，请稍后重试');
+ }
+ };
+
+ // 取消点赞
+ const handleUnlike = async (dynamicId) => {
+ try {
+ // 调用新的取消点赞API
+ const res = await axios.delete(`/echo/dynamic/unlike`, {
+ data: { userId, dynamicId }
+ });
+
+ if (res.status === 200) {
+ // 更新本地状态
+ setFeeds(feeds.map(feed => {
+ if (feed.postNo === dynamicId) {
+ return {
+ ...feed,
+ postLikeNum: Math.max(0, (feed.postLikeNum || 0) - 1),
+ liked: false
+ };
+ }
+ return feed;
+ }));
+ } else {
+ alert(res.data.message || '取消点赞失败');
+ }
+ } catch (err) {
+ console.error('取消点赞失败', err);
+ alert('取消点赞失败，请稍后重试');
}
};
@@ -128,13 +201,13 @@
<div className="feed-list">
{filteredFeeds.map(feed => (
- <div className="feed-item" key={feed.feed_id}>
+ <div className="feed-item" key={feed.postNo}>
{feed.title && <h4>{feed.title}</h4>}
- <p>{feed.friend_content}</p>
+ <p>{feed.postContent}</p>
- {feed.images?.length > 0 && (
+ {feed.imageUrl && feed.imageUrl.split(',').length > 0 && (
<div className="feed-images">
- {feed.images.map((url, i) => (
+ {feed.imageUrl.split(',').map((url, i) => (
<img key={i} src={url} alt={`动态图${i}`} />
))}
</div>
@@ -142,10 +215,21 @@
<div className="feed-footer">
<span className="feed-date">
- {new Date(feed.created_at).toLocaleString()}
+ {new Date(feed.postTime).toLocaleString()}
</span>
- {feed.is_mine && (
- <button className="delete-btn" onClick={() => handleDelete(feed.feed_id)}>
+ <div className="like-container">
+ {feed.liked ? (
+ <button className="unlike-btn" onClick={() => handleUnlike(feed.postNo)}>
+ 已点赞 ({feed.postLikeNum || 0})
+ </button>
+ ) : (
+ <button className="like-btn" onClick={() => handleLike(feed.postNo)}>
+ 点赞 ({feed.postLikeNum || 0})
+ </button>
+ )}
+ </div>
+ {feed.user_id === userId && (
+ <button className="delete-btn" onClick={() => handleDelete(feed.postNo)}>
删除
</button>
)}
@@ -170,12 +254,6 @@
value={content}
onChange={e => setContent(e.target.value)}
/>
- {/* <input
- type="file"
- accept="image/*"
- multiple
- onChange={handleImageChange}
- /> */}
<label className="file-label">
选择图片
<input
@@ -187,7 +265,7 @@
/>
</label>
<div className="cf-preview">
- {previewUrls.map((url, i) => (
+ {previewUrls.map((url, i) => ( // 使用定义的previewUrls
<img key={i} src={url} alt={`预览${i}`} />
))}
</div>
@@ -206,5 +284,4 @@
);
};
-export default FriendMoments;
-
+export default FriendMoments;
\ No newline at end of file