完成上传下载连接,公告管理与详情页面,求种区页面,轮播图折扣显示,修改部分bug
Change-Id: I86fc294e32911cb3426a8b16f90aca371f975c11
diff --git a/src/components/Administer.jsx b/src/components/Administer.jsx
index 35ae428..0f915e3 100644
--- a/src/components/Administer.jsx
+++ b/src/components/Administer.jsx
@@ -10,6 +10,7 @@
addDiscount,
deleteDiscount
} from '../api/administer';
+import {postAnnouncement, getAnnouncements} from '../api/announcement';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
@@ -22,13 +23,18 @@
const [searchKey, setSearchKey] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
+ const [announcements, setAnnouncements] = useState([]); // 存储公告列表
+ const [newAnnouncement, setNewAnnouncement] = useState({
+ title: '',
+ content: ''
+ });
const [newDiscount, setNewDiscount] = useState({
name: '',
discountType: 'FREE'
});
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
- const [activeTab, setActiveTab] = useState('users'); // 'users' 或 'discounts'
+ const [activeTab, setActiveTab] = useState('users'); // 'users' 或 'discounts','announcements'
const fetchAllUsers = async () => {
setLoading(true);
@@ -208,15 +214,7 @@
}
};
- // 初始化加载数据
- useEffect(() => {
- if (activeTab === 'users') {
- fetchAllUsers();
- } else {
- fetchAllDiscounts();
- fetchCurrentDiscount();
- }
- }, [activeTab]);
+
// 格式化分享率为百分比
const formatShareRate = (rate) => {
@@ -244,6 +242,54 @@
}
};
+ // 获取所有公告
+ const fetchAllAnnouncements = async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ const announcements = await getAnnouncements();
+ // 确保总是设置为数组
+ setAnnouncements(Array.isArray(announcements) ? announcements : []);
+ } catch (err) {
+ setError('获取公告列表失败: ' + err.message);
+ console.error(err);
+ } finally {
+ setLoading(false);
+ }
+};
+
+ // 发布新公告
+ const handlePostAnnouncement = async () => {
+ if (!newAnnouncement.title || !newAnnouncement.content) {
+ setError('请填写公告标题和内容');
+ return;
+ }
+
+ try {
+ await postAnnouncement(newAnnouncement);
+ setNewAnnouncement({ title: '', content: '' });
+ fetchAllAnnouncements();
+ setError(null);
+ } catch (err) {
+ setError('发布公告失败: ' + err.message);
+ console.error(err);
+ }
+ };
+
+ // 初始化加载数据
+ useEffect(() => {
+ if (activeTab === 'users') {
+ fetchAllUsers();
+ } else if (activeTab === 'discounts') {
+ fetchAllDiscounts();
+ fetchCurrentDiscount();
+ } else if (activeTab === 'announcements') {
+ fetchAllAnnouncements();
+ }
+ }, [activeTab]);
+
+
+
return (
<div className="administer-container">
@@ -263,6 +309,12 @@
>
折扣管理
</button>
+ <button
+ className={`tab-button ${activeTab === 'announcements' ? 'active' : ''}`}
+ onClick={() => setActiveTab('announcements')}
+ >
+ 公告管理
+ </button>
</div>
{activeTab === 'users' ? (
@@ -335,116 +387,174 @@
</table>
</div>
</>
- ) : (
- /* 新增的折扣管理部分 */
- <>
- {/* 当前活动折扣 */}
- <div className="current-discount-section">
- <h3>当前活动折扣</h3>
- {currentDiscount ? (
- <div className="current-discount-card">
- <p><strong>名称:</strong> {currentDiscount.name}</p>
- <p><strong>类型:</strong> {translateDiscountType(currentDiscount.discountType)}</p>
- <p><strong>时间:</strong> {formatDateTime(currentDiscount.startTime)} 至 {formatDateTime(currentDiscount.endTime)}</p>
- <p><strong>状态:</strong> {currentDiscount.status}</p>
- </div>
- ) : (
- <p>当前没有进行中的折扣</p>
- )}
- </div>
+ ) : activeTab === 'discounts' ? (
+ /* 新增的折扣管理部分 */
+ <>
+ {/* 当前活动折扣 */}
+ <div className="current-discount-section">
+ <h3>当前活动折扣</h3>
+ {currentDiscount ? (
+ <div className="current-discount-card">
+ <p><strong>名称:</strong> {currentDiscount.name}</p>
+ <p><strong>类型:</strong> {translateDiscountType(currentDiscount.discountType)}</p>
+ <p><strong>时间:</strong> {formatDateTime(currentDiscount.startTime)} 至 {formatDateTime(currentDiscount.endTime)}</p>
+ <p><strong>状态:</strong> {currentDiscount.status}</p>
+ </div>
+ ) : (
+ <p>当前没有进行中的折扣</p>
+ )}
+ </div>
- {/* 添加新折扣表单 */}
- <div className="add-discount-form">
- <h3>添加新折扣</h3>
- <div className="form-group">
- <label>折扣名称:</label>
- <input
- type="text"
- value={newDiscount.name}
- onChange={(e) => setNewDiscount({...newDiscount, name: e.target.value})}
- />
- </div>
- <div className="form-group">
- <label>开始时间:</label>
- <DatePicker
- selected={startDate}
- onChange={(date) => setStartDate(date)}
- showTimeSelect
- timeFormat="HH:mm"
- timeIntervals={1} // 1分钟间隔
- dateFormat="yyyy-MM-dd HH:mm"
- minDate={new Date()}
- placeholderText="选择开始日期和时间"
+ {/* 添加新折扣表单 */}
+ <div className="add-discount-form">
+ <h3>添加新折扣</h3>
+ <div className="form-group">
+ <label>折扣名称:</label>
+ <input
+ type="text"
+ value={newDiscount.name}
+ onChange={(e) => setNewDiscount({...newDiscount, name: e.target.value})}
/>
- </div>
- <div className="form-group">
- <label>结束时间:</label>
+ </div>
+ <div className="form-group">
+ <label>开始时间:</label>
<DatePicker
- selected={endDate}
- onChange={(date) => setEndDate(date)}
+ selected={startDate}
+ onChange={(date) => setStartDate(date)}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={1} // 1分钟间隔
dateFormat="yyyy-MM-dd HH:mm"
- minDate={startDate}
- placeholderText="选择结束日期和时间"
+ minDate={new Date()}
+ placeholderText="选择开始日期和时间"
/>
+ </div>
+ <div className="form-group">
+ <label>结束时间:</label>
+ <DatePicker
+ selected={endDate}
+ onChange={(date) => setEndDate(date)}
+ showTimeSelect
+ timeFormat="HH:mm"
+ timeIntervals={1} // 1分钟间隔
+ dateFormat="yyyy-MM-dd HH:mm"
+ minDate={startDate}
+ placeholderText="选择结束日期和时间"
+ />
+ </div>
+ <div className="form-group">
+ <label>折扣类型:</label>
+ <select
+ value={newDiscount.discountType}
+ onChange={(e) => setNewDiscount({...newDiscount, discountType: e.target.value})}
+ >
+ <option value="FREE">全部免费</option>
+ <option value="HALF">半价下载</option>
+ <option value="DOUBLE">双倍上传</option>
+ </select>
+ </div>
+ <button
+ onClick={(e) => {
+ e.preventDefault(); // 确保没有阻止默认行为
+ handleAddDiscount();
+ }}
+ >
+ 添加折扣
+ </button>
+ </div>
+
+ {/* 所有折扣列表 */}
+ <div className="discount-list-container">
+ <h3>所有折扣计划</h3>
+ <table className="discount-table">
+ <thead>
+ <tr>
+ <th>ID</th>
+ <th>名称</th>
+ <th>开始时间</th>
+ <th>结束时间</th>
+ <th>类型</th>
+ <th>创建时间</th>
+ <th>状态</th>
+ <th>操作</th>
+ </tr>
+ </thead>
+ <tbody>
+ {discounts.map(discount => (
+ <tr key={discount.id}>
+ <td>{discount.id}</td>
+ <td>{discount.name}</td>
+ <td>{formatDateTime(discount.startTime)}</td>
+ <td>{formatDateTime(discount.endTime)}</td>
+ <td>{translateDiscountType(discount.discountType)}</td>
+ <td>{formatDateTime(discount.createTime)}</td>
+ <td>{discount.status || '未知'}</td>
+ <td>
+ <button
+ onClick={() => handleDeleteDiscount(discount.id)}
+ className="delete-button"
+ >
+ 删除
+ </button>
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ </>
+ ) : (
+ /* 新增的公告管理部分 */
+ <>
+ {/* 发布新公告表单 */}
+ <div className="announcement-form">
+ <h3>发布新公告</h3>
+ <div className="form-group">
+ <label>公告标题:</label>
+ <input
+ type="text"
+ value={newAnnouncement.title}
+ onChange={(e) => setNewAnnouncement({
+ ...newAnnouncement,
+ title: e.target.value
+ })}
+ placeholder="输入公告标题"
+ />
</div>
<div className="form-group">
- <label>折扣类型:</label>
- <select
- value={newDiscount.discountType}
- onChange={(e) => setNewDiscount({...newDiscount, discountType: e.target.value})}
- >
- <option value="FREE">全部免费</option>
- <option value="HALF">半价下载</option>
- <option value="DOUBLE">双倍上传</option>
- </select>
+ <label>公告内容:</label>
+ <textarea
+ value={newAnnouncement.content}
+ onChange={(e) => setNewAnnouncement({
+ ...newAnnouncement,
+ content: e.target.value
+ })}
+ rows="5"
+ placeholder="输入公告内容"
+ />
</div>
- <button
- onClick={(e) => {
- e.preventDefault(); // 确保没有阻止默认行为
- handleAddDiscount();
- }}
- >
- 添加折扣
+ <button onClick={handlePostAnnouncement}>
+ 发布公告
</button>
</div>
- {/* 所有折扣列表 */}
- <div className="discount-list-container">
- <h3>所有折扣计划</h3>
- <table className="discount-table">
+ {/* 所有公告列表 */}
+ <div className="announcement-list-container">
+ <h3>所有公告</h3>
+ <table className="announcement-table">
<thead>
<tr>
- <th>ID</th>
- <th>名称</th>
- <th>开始时间</th>
- <th>结束时间</th>
- <th>类型</th>
- <th>创建时间</th>
- <th>状态</th>
- <th>操作</th>
+ <th>标题</th>
+ <th>内容</th>
+ <th>发布时间</th>
</tr>
</thead>
<tbody>
- {discounts.map(discount => (
- <tr key={discount.id}>
- <td>{discount.id}</td>
- <td>{discount.name}</td>
- <td>{formatDateTime(discount.startTime)}</td>
- <td>{formatDateTime(discount.endTime)}</td>
- <td>{translateDiscountType(discount.discountType)}</td>
- <td>{formatDateTime(discount.createTime)}</td>
- <td>{discount.status || '未知'}</td>
- <td>
- <button
- onClick={() => handleDeleteDiscount(discount.id)}
- className="delete-button"
- >
- 删除
- </button>
- </td>
+ {announcements.map(announcement => (
+ <tr key={announcement.id}>
+ <td>{announcement.title}</td>
+ <td>{announcement.content}</td>
+ <td>{formatDateTime(announcement.createTime)}</td>
</tr>
))}
</tbody>