blob: 36d6319f868b62e710d334648fd6b790e9c503c2 [file] [log] [blame]
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(`seeds/promotions`);
const promoJson = await promoResponse.json();
const promoData = Array.isArray(promoJson?.result) ? promoJson.result : [];
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 || !currentPromo ? (
<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}>&lt;</button>
<div className="slide">
<div><strong>促销名称:</strong>{currentPromo?.name ?? '未知'}</div>
<div><strong>促销时间:</strong>
{currentPromo?.pStartTime && currentPromo?.pEndTime
? `${new Date(currentPromo.pStartTime).toLocaleString()} ~ ${new Date(currentPromo.pEndTime).toLocaleString()}`
: '未知'}
</div>
<div><strong>上传奖励系数:</strong>{currentPromo?.uploadCoeff ?? '无'}</div>
<div><strong>下载折扣系数:</strong>{currentPromo?.downloadCoeff ?? '无'}</div>
{currentPromo?.description && (
<div><strong>描述:</strong>{currentPromo.description}</div>
)}
</div>
<button className="arrow right" onClick={nextPromo}>&gt;</button>
</div>
)}
</section>
{/* 冷门资源轮播 */}
<section className="carousel-section">
<h2>冷门资源推荐</h2>
{coldResources.length === 0 || !currentCold ? (
<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}>&lt;</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 ?? 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 && '无'}
</div>
</div>
</div>
<button className="arrow right" onClick={nextCold}>&gt;</button>
</div>
)}
</section>
</div>
);
};
export default Promotion;