修改好友动态、发布动态、促销模块、创建帖子,Resolve review.
Change-Id: I84a2460dd1208bc703b0527d98225204d03e5efc
diff --git a/src/pages/Forum/posts-main/components/CreatePostButton.jsx b/src/pages/Forum/posts-main/components/CreatePostButton.jsx
index 0632173..0390ee7 100644
--- a/src/pages/Forum/posts-main/components/CreatePostButton.jsx
+++ b/src/pages/Forum/posts-main/components/CreatePostButton.jsx
@@ -1,21 +1,131 @@
-import React from 'react';
-import { useLocation } from 'wouter';
+import React, { useState } from 'react';
+import axios from 'axios';
import { Edit } from '@icon-park/react';
import './CreatePostButton.css';
-const CreatePostButton = () => {
- const [, navigate] = useLocation();
+const API_BASE = process.env.REACT_APP_API_BASE;
+const USER_ID = 456;
- const goToCreatePost = () => {
- navigate('/forum/create-post');
+const CreatePostButton = () => {
+ const [showModal, setShowModal] = useState(false);
+
+ // 表单字段
+ const [title, setTitle] = useState('');
+ const [content, setContent] = useState('');
+ const [previewUrls, setPreviewUrls] = useState([]);
+ const [imageUrls, setImageUrls] = useState([]);
+
+ // 处理文件选中:预览 & 上传
+ const handleImageChange = async (e) => {
+ const files = Array.from(e.target.files);
+ if (!files.length) return;
+ // 本地预览
+ setPreviewUrls(files.map(f => URL.createObjectURL(f)));
+
+ // 并发上传,假设 /upload 接口返回 { url: '...' }
+ try {
+ const uploaded = await Promise.all(
+ files.map(file => {
+ const fd = new FormData();
+ fd.append('file', file);
+ return axios.post(`${API_BASE}/upload`, fd, {
+ headers: { 'Content-Type': 'multipart/form-data' }
+ }).then(res => res.data.url);
+ })
+ );
+ setImageUrls(uploaded);
+ } catch (err) {
+ console.error('图片上传失败:', err);
+ alert('封面图上传失败,请重试');
+ }
+ };
+
+ // 提交发帖
+ const handleSubmit = async () => {
+ if (!title.trim() || !content.trim()) {
+ alert('标题和内容均为必填项');
+ return;
+ }
+
+ try {
+ await axios.post(
+ `${API_BASE}/echo/forum/posts/${USER_ID}/createPost`,
+ {
+ title: title.trim(),
+ post_content: content.trim(),
+ image_url: imageUrls
+ }
+ );
+ // 重置状态并关闭
+ setTitle('');
+ setContent('');
+ setPreviewUrls([]);
+ setImageUrls([]);
+ setShowModal(false);
+ alert('发帖成功');
+ // 如需刷新帖子列表,可在这里触发外部回调
+ } catch (err) {
+ console.error('发帖失败:', err.response?.data || err);
+ alert(err.response?.data?.error || '发帖失败,请稍后重试');
+ }
};
return (
- <div className="create-post">
- <button onClick={goToCreatePost} className="create-btn">
- <Edit theme="outline" size="18" /> 发帖
- </button>
- </div>
+ <>
+ <div className="create-post">
+ <button onClick={() => setShowModal(true)} className="create-btn">
+ <Edit theme="outline" size="18" style={{ marginRight: 6 }} />
+ 发帖
+ </button>
+ </div>
+
+ {showModal && (
+ <div className="cp-modal-overlay" onClick={() => setShowModal(false)}>
+ <div className="cp-modal-dialog" onClick={e => e.stopPropagation()}>
+ <h3>创建新帖子</h3>
+
+ <input
+ type="text"
+ placeholder="帖子标题"
+ value={title}
+ onChange={e => setTitle(e.target.value)}
+ />
+
+ <textarea
+ placeholder="正文内容"
+ value={content}
+ onChange={e => setContent(e.target.value)}
+ />
+
+ <label className="file-label">
+ 选择图片
+ <input
+ type="file"
+ accept="image/*"
+ multiple
+ onChange={handleImageChange}
+ style={{ display: 'none' }}
+ />
+ </label>
+
+ <div className="cp-preview">
+ {previewUrls.map((url, i) => (
+ <img key={i} src={url} alt={`封面预览 ${i}`} />
+ ))}
+ </div>
+
+ <div className="cp-actions">
+ <button className="btn cancel" onClick={() => setShowModal(false)}>
+ 取消
+ </button>
+ <button className="btn submit" onClick={handleSubmit}>
+ 发布
+ </button>
+ </div>
+ </div>
+ </div>
+ )}
+ </>
);
};