修复查看帖子、评论、回复评论、点赞、收藏,添加用户等级
Change-Id: Ida9590d7ccee08dcd787a36c7e5cb39a3e26cd0d
diff --git a/src/pages/Forum/promotion-part/Promotion.jsx b/src/pages/Forum/promotion-part/Promotion.jsx
index 9af56bc..fd79cec 100644
--- a/src/pages/Forum/promotion-part/Promotion.jsx
+++ b/src/pages/Forum/promotion-part/Promotion.jsx
@@ -1,18 +1,159 @@
+// import React, { useEffect, useState, useRef } from 'react';
+// import './Promotion.css';
+
+
+
+// const Promotion = () => {
+// const [promotions, setPromotions] = useState([]);
+// const [coldResources, setColdResources] = useState([]);
+// const [loading, setLoading] = useState(true);
+
+// // 轮播索引
+// const [promoIndex, setPromoIndex] = useState(0);
+// const [coldIndex, setColdIndex] = useState(0);
+
+// // 计时器引用,用于清理
+// const promoTimerRef = useRef(null);
+// const coldTimerRef = useRef(null);
+
+// useEffect(() => {
+// fetchData();
+// }, []);
+
+// // 自动轮播:促销活动
+// useEffect(() => {
+// if (promotions.length === 0) return;
+// // 清理旧的计时器
+// clearInterval(promoTimerRef.current);
+// promoTimerRef.current = setInterval(() => {
+// setPromoIndex(prev => (prev + 1) % promotions.length);
+// }, 5000);
+// return () => clearInterval(promoTimerRef.current);
+// }, [promotions]);
+
+// // 自动轮播:冷门资源
+// useEffect(() => {
+// if (coldResources.length === 0) return;
+// clearInterval(coldTimerRef.current);
+// coldTimerRef.current = setInterval(() => {
+// setColdIndex(prev => (prev + 1) % coldResources.length);
+// }, 5000);
+// return () => clearInterval(coldTimerRef.current);
+// }, [coldResources]);
+
+// const fetchData = async () => {
+// try {
+// const promoResponse = await fetch(`/echo/promotions/active`);
+// const promoData = await promoResponse.json();
+// setPromotions(promoData);
+
+// const coldResponse = await fetch(`/echo/resources/cold`);
+// const coldData = await coldResponse.json();
+// setColdResources(coldData);
+// } catch (error) {
+// console.error('获取数据失败:', error);
+// } finally {
+// setLoading(false);
+// }
+// };
+
+// if (loading) {
+// return <div className="promotion-container">加载中...</div>;
+// }
+
+// // 手动切换
+// const prevPromo = () => setPromoIndex((promoIndex - 1 + promotions.length) % promotions.length);
+// const nextPromo = () => setPromoIndex((promoIndex + 1) % promotions.length);
+// const prevCold = () => setColdIndex((coldIndex - 1 + coldResources.length) % coldResources.length);
+// const nextCold = () => setColdIndex((coldIndex + 1) % coldResources.length);
+
+// const currentPromo = promotions[promoIndex];
+// const currentCold = coldResources[coldIndex];
+
+// return (
+// <div className="promotion-container carousel-container">
+// {/* 促销活动轮播 */}
+// <section className="carousel-section">
+// <h2>当前促销活动</h2>
+// {promotions.length === 0 ? (
+// <div className="empty-state">暂无促销活动</div>
+// ) : (
+// <div
+// className="carousel"
+// onMouseEnter={() => clearInterval(promoTimerRef.current)}
+// onMouseLeave={() => {
+// promoTimerRef.current = setInterval(() => {
+// setPromoIndex(prev => (prev + 1) % promotions.length);
+// }, 3000);
+// }}
+// >
+// <button className="arrow left" onClick={prevPromo}><</button>
+// <div className="slide">
+// <div><strong>种子类型:</strong>{currentPromo.category}</div>
+// <div><strong>促销时间:</strong>
+// {new Date(currentPromo.promotion_start_time).toLocaleString()} ~{' '}
+// {new Date(currentPromo.promotion_end_time).toLocaleString()}
+// </div>
+// <div><strong>下载折扣:</strong>{currentPromo.download_discount ?? '无'}</div>
+// <div><strong>上传奖励:</strong>{currentPromo.upload_reward ?? '无'}</div>
+// {currentPromo.description && (
+// <div><strong>详细描述:</strong>{currentPromo.description}</div>
+// )}
+// </div>
+// <button className="arrow right" onClick={nextPromo}>></button>
+// </div>
+// )}
+// </section>
+
+// {/* 冷门资源轮播 */}
+// <section className="carousel-section">
+// <h2>冷门资源推荐</h2>
+// {coldResources.length === 0 ? (
+// <div className="empty-state">暂无冷门资源推荐</div>
+// ) : (
+// <div
+// className="carousel"
+// onMouseEnter={() => clearInterval(coldTimerRef.current)}
+// onMouseLeave={() => {
+// coldTimerRef.current = setInterval(() => {
+// setColdIndex(prev => (prev + 1) % coldResources.length);
+// }, 3000);
+// }}
+// >
+// <button className="arrow left" onClick={prevCold}><</button>
+// <div className="slide cold-slide">
+// <img src={currentCold.poster} alt={currentCold.title} className="resource-poster" />
+// <div className="resource-info">
+// <div><strong>标题:</strong>{currentCold.title}</div>
+// <div><strong>下载量:</strong>{currentCold.download_count} | <strong>种子数:</strong>{currentCold.seed_count}</div>
+// <div><strong>激励:</strong>
+// {currentCold.incentives?.download_exempt && <span className="incentive-badge">免下载量</span>}
+// {currentCold.incentives?.extra_seed_bonus && <span className="incentive-badge">做种加成</span>}
+// {!(currentCold.incentives?.download_exempt || currentCold.incentives?.extra_seed_bonus) && '无'}
+// </div>
+// </div>
+// </div>
+// <button className="arrow right" onClick={nextCold}>></button>
+// </div>
+// )}
+// </section>
+// </div>
+// );
+// };
+
+// export default Promotion;
+
import React, { useEffect, useState, useRef } from 'react';
import './Promotion.css';
-const API_BASE = process.env.REACT_APP_API_BASE;
-
const Promotion = () => {
const [promotions, setPromotions] = useState([]);
const [coldResources, setColdResources] = useState([]);
const [loading, setLoading] = useState(true);
- // 轮播索引
const [promoIndex, setPromoIndex] = useState(0);
const [coldIndex, setColdIndex] = useState(0);
- // 计时器引用,用于清理
const promoTimerRef = useRef(null);
const coldTimerRef = useRef(null);
@@ -20,10 +161,8 @@
fetchData();
}, []);
- // 自动轮播:促销活动
useEffect(() => {
if (promotions.length === 0) return;
- // 清理旧的计时器
clearInterval(promoTimerRef.current);
promoTimerRef.current = setInterval(() => {
setPromoIndex(prev => (prev + 1) % promotions.length);
@@ -31,7 +170,6 @@
return () => clearInterval(promoTimerRef.current);
}, [promotions]);
- // 自动轮播:冷门资源
useEffect(() => {
if (coldResources.length === 0) return;
clearInterval(coldTimerRef.current);
@@ -43,11 +181,11 @@
const fetchData = async () => {
try {
- const promoResponse = await fetch(`${API_BASE}/echo/promotions/active`);
+ const promoResponse = await fetch(`/echo/promotions/active`);
const promoData = await promoResponse.json();
setPromotions(promoData);
- const coldResponse = await fetch(`${API_BASE}/echo/resources/cold`);
+ const coldResponse = await fetch(`/echo/resources/cold`);
const coldData = await coldResponse.json();
setColdResources(coldData);
} catch (error) {
@@ -61,7 +199,6 @@
return <div className="promotion-container">加载中...</div>;
}
- // 手动切换
const prevPromo = () => setPromoIndex((promoIndex - 1 + promotions.length) % promotions.length);
const nextPromo = () => setPromoIndex((promoIndex + 1) % promotions.length);
const prevCold = () => setColdIndex((coldIndex - 1 + coldResources.length) % coldResources.length);
@@ -75,7 +212,7 @@
{/* 促销活动轮播 */}
<section className="carousel-section">
<h2>当前促销活动</h2>
- {promotions.length === 0 ? (
+ {promotions.length === 0 || !currentPromo ? (
<div className="empty-state">暂无促销活动</div>
) : (
<div
@@ -89,14 +226,15 @@
>
<button className="arrow left" onClick={prevPromo}><</button>
<div className="slide">
- <div><strong>种子类型:</strong>{currentPromo.category}</div>
+ <div><strong>种子类型:</strong>{currentPromo?.category ?? '未知'}</div>
<div><strong>促销时间:</strong>
- {new Date(currentPromo.promotion_start_time).toLocaleString()} ~{' '}
- {new Date(currentPromo.promotion_end_time).toLocaleString()}
+ {currentPromo?.promotion_start_time && currentPromo?.promotion_end_time
+ ? `${new Date(currentPromo.promotion_start_time).toLocaleString()} ~ ${new Date(currentPromo.promotion_end_time).toLocaleString()}`
+ : '未知'}
</div>
- <div><strong>下载折扣:</strong>{currentPromo.download_discount ?? '无'}</div>
- <div><strong>上传奖励:</strong>{currentPromo.upload_reward ?? '无'}</div>
- {currentPromo.description && (
+ <div><strong>下载折扣:</strong>{currentPromo?.download_discount ?? '无'}</div>
+ <div><strong>上传奖励:</strong>{currentPromo?.upload_reward ?? '无'}</div>
+ {currentPromo?.description && (
<div><strong>详细描述:</strong>{currentPromo.description}</div>
)}
</div>
@@ -108,7 +246,7 @@
{/* 冷门资源轮播 */}
<section className="carousel-section">
<h2>冷门资源推荐</h2>
- {coldResources.length === 0 ? (
+ {coldResources.length === 0 || !currentCold ? (
<div className="empty-state">暂无冷门资源推荐</div>
) : (
<div
@@ -125,11 +263,11 @@
<img src={currentCold.poster} alt={currentCold.title} className="resource-poster" />
<div className="resource-info">
<div><strong>标题:</strong>{currentCold.title}</div>
- <div><strong>下载量:</strong>{currentCold.download_count} | <strong>种子数:</strong>{currentCold.seed_count}</div>
+ <div><strong>下载量:</strong>{currentCold.download_count ?? 0} | <strong>种子数:</strong>{currentCold.seed_count ?? 0}</div>
<div><strong>激励:</strong>
{currentCold.incentives?.download_exempt && <span className="incentive-badge">免下载量</span>}
{currentCold.incentives?.extra_seed_bonus && <span className="incentive-badge">做种加成</span>}
- {!(currentCold.incentives?.download_exempt || currentCold.incentives?.extra_seed_bonus) && '无'}
+ {!currentCold.incentives?.download_exempt && !currentCold.incentives?.extra_seed_bonus && '无'}
</div>
</div>
</div>
@@ -142,3 +280,4 @@
};
export default Promotion;
+