blob: 49863e32387979178054ea297e4e8a04b48541d2 [file] [log] [blame]
Krishya8f2fec82025-06-04 21:54:46 +08001// import React, { useEffect, useState, useRef } from 'react';
2// import './Promotion.css';
3
4// const Promotion = () => {
5// const [promotions, setPromotions] = useState([]);
6// const [coldResources, setColdResources] = useState([]);
7// const [loading, setLoading] = useState(true);
8
9// const [promoIndex, setPromoIndex] = useState(0);
10// const [coldIndex, setColdIndex] = useState(0);
11
12// const promoTimerRef = useRef(null);
13// const coldTimerRef = useRef(null);
14
15// useEffect(() => {
16// fetchData();
17// }, []);
18
19// useEffect(() => {
20// if (promotions.length === 0) return;
21// clearInterval(promoTimerRef.current);
22// promoTimerRef.current = setInterval(() => {
23// setPromoIndex(prev => (prev + 1) % promotions.length);
24// }, 5000);
25// return () => clearInterval(promoTimerRef.current);
26// }, [promotions]);
27
28// useEffect(() => {
29// if (coldResources.length === 0) return;
30// clearInterval(coldTimerRef.current);
31// coldTimerRef.current = setInterval(() => {
32// setColdIndex(prev => (prev + 1) % coldResources.length);
33// }, 5000);
34// return () => clearInterval(coldTimerRef.current);
35// }, [coldResources]);
36
37// const fetchData = async () => {
38// try {
39// // ✅ 获取促销活动列表(新接口)
40// const promoResponse = await fetch(`seeds/promotions`);
41// const promoJson = await promoResponse.json();
42// const promoData = Array.isArray(promoJson?.result) ? promoJson.result : [];
43// setPromotions(promoData);
44
45// // 冷门资源(接口保持不变,若已更换请提供文档)
46// const coldResponse = await fetch(`/echo/resources/cold`);
47// const coldData = await coldResponse.json();
48// setColdResources(coldData);
49// } catch (error) {
50// console.error('获取数据失败:', error);
51// } finally {
52// setLoading(false);
53// }
54// };
55
56// if (loading) {
57// return <div className="promotion-container">加载中...</div>;
58// }
59
60// const prevPromo = () => setPromoIndex((promoIndex - 1 + promotions.length) % promotions.length);
61// const nextPromo = () => setPromoIndex((promoIndex + 1) % promotions.length);
62// const prevCold = () => setColdIndex((coldIndex - 1 + coldResources.length) % coldResources.length);
63// const nextCold = () => setColdIndex((coldIndex + 1) % coldResources.length);
64
65// const currentPromo = promotions[promoIndex];
66// const currentCold = coldResources[coldIndex];
67
68// return (
69// <div className="promotion-container carousel-container">
70// {/* 促销活动轮播 */}
71// <section className="carousel-section">
72// <h2>当前促销活动</h2>
73// {promotions.length === 0 || !currentPromo ? (
74// <div className="empty-state">暂无促销活动</div>
75// ) : (
76// <div
77// className="carousel"
78// onMouseEnter={() => clearInterval(promoTimerRef.current)}
79// onMouseLeave={() => {
80// promoTimerRef.current = setInterval(() => {
81// setPromoIndex(prev => (prev + 1) % promotions.length);
82// }, 3000);
83// }}
84// >
85// <button className="arrow left" onClick={prevPromo}>&lt;</button>
86// <div className="slide">
87// <div><strong>促销名称:</strong>{currentPromo?.name ?? '未知'}</div>
88// <div><strong>促销时间:</strong>
89// {currentPromo?.pStartTime && currentPromo?.pEndTime
90// ? `${new Date(currentPromo.pStartTime).toLocaleString()} ~ ${new Date(currentPromo.pEndTime).toLocaleString()}`
91// : '未知'}
92// </div>
93// <div><strong>上传奖励系数:</strong>{currentPromo?.uploadCoeff ?? '无'}</div>
94// <div><strong>下载折扣系数:</strong>{currentPromo?.downloadCoeff ?? '无'}</div>
95// {currentPromo?.description && (
96// <div><strong>描述:</strong>{currentPromo.description}</div>
97// )}
98// </div>
99// <button className="arrow right" onClick={nextPromo}>&gt;</button>
100// </div>
101// )}
102// </section>
103
104// {/* 冷门资源轮播 */}
105// <section className="carousel-section">
106// <h2>冷门资源推荐</h2>
107// {coldResources.length === 0 || !currentCold ? (
108// <div className="empty-state">暂无冷门资源推荐</div>
109// ) : (
110// <div
111// className="carousel"
112// onMouseEnter={() => clearInterval(coldTimerRef.current)}
113// onMouseLeave={() => {
114// coldTimerRef.current = setInterval(() => {
115// setColdIndex(prev => (prev + 1) % coldResources.length);
116// }, 3000);
117// }}
118// >
119// <button className="arrow left" onClick={prevCold}>&lt;</button>
120// <div className="slide cold-slide">
121// <img src={currentCold.poster} alt={currentCold.title} className="resource-poster" />
122// <div className="resource-info">
123// <div><strong>标题:</strong>{currentCold.title}</div>
124// <div><strong>下载量:</strong>{currentCold.download_count ?? 0} | <strong>种子数:</strong>{currentCold.seed_count ?? 0}</div>
125// <div><strong>激励:</strong>
126// {currentCold.incentives?.download_exempt && <span className="incentive-badge">免下载量</span>}
127// {currentCold.incentives?.extra_seed_bonus && <span className="incentive-badge">做种加成</span>}
128// {!currentCold.incentives?.download_exempt && !currentCold.incentives?.extra_seed_bonus && '无'}
129// </div>
130// </div>
131// </div>
132// <button className="arrow right" onClick={nextCold}>&gt;</button>
133// </div>
134// )}
135// </section>
136// </div>
137// );
138// };
139
140// export default Promotion;
141
Krishyaf1d0ea82025-05-03 17:01:58 +0800142import React, { useEffect, useState, useRef } from 'react';
143import './Promotion.css';
144
Krishyaf1d0ea82025-05-03 17:01:58 +0800145const Promotion = () => {
146 const [promotions, setPromotions] = useState([]);
Krishyaf1d0ea82025-05-03 17:01:58 +0800147 const [loading, setLoading] = useState(true);
148
Krishyaf1d0ea82025-05-03 17:01:58 +0800149 const [promoIndex, setPromoIndex] = useState(0);
Krishyaf1d0ea82025-05-03 17:01:58 +0800150 const promoTimerRef = useRef(null);
Krishyaf1d0ea82025-05-03 17:01:58 +0800151
152 useEffect(() => {
153 fetchData();
154 }, []);
155
Krishyaf1d0ea82025-05-03 17:01:58 +0800156 useEffect(() => {
157 if (promotions.length === 0) return;
Krishyaf1d0ea82025-05-03 17:01:58 +0800158 clearInterval(promoTimerRef.current);
159 promoTimerRef.current = setInterval(() => {
160 setPromoIndex(prev => (prev + 1) % promotions.length);
161 }, 5000);
162 return () => clearInterval(promoTimerRef.current);
163 }, [promotions]);
164
Krishyaf1d0ea82025-05-03 17:01:58 +0800165 const fetchData = async () => {
166 try {
Krishya2e0f49a2025-05-29 10:59:01 +0800167 // ✅ 获取促销活动列表(新接口)
Krishya8f2fec82025-06-04 21:54:46 +0800168 const promoResponse = await fetch(`/seeds/promotions`);
Krishya2e0f49a2025-05-29 10:59:01 +0800169 const promoJson = await promoResponse.json();
Krishya8f2fec82025-06-04 21:54:46 +0800170 console.log('接口返回数据:', promoJson);
Krishya2e0f49a2025-05-29 10:59:01 +0800171 const promoData = Array.isArray(promoJson?.result) ? promoJson.result : [];
Krishyaf1d0ea82025-05-03 17:01:58 +0800172 setPromotions(promoData);
Krishyaf1d0ea82025-05-03 17:01:58 +0800173 } catch (error) {
Krishya8f2fec82025-06-04 21:54:46 +0800174 console.error('获取促销活动失败:', error);
Krishyaf1d0ea82025-05-03 17:01:58 +0800175 } finally {
176 setLoading(false);
177 }
178 };
179
180 if (loading) {
181 return <div className="promotion-container">加载中...</div>;
182 }
183
Krishyaf1d0ea82025-05-03 17:01:58 +0800184 const prevPromo = () => setPromoIndex((promoIndex - 1 + promotions.length) % promotions.length);
185 const nextPromo = () => setPromoIndex((promoIndex + 1) % promotions.length);
Krishyaf1d0ea82025-05-03 17:01:58 +0800186 const currentPromo = promotions[promoIndex];
Krishyaf1d0ea82025-05-03 17:01:58 +0800187
188 return (
189 <div className="promotion-container carousel-container">
190 {/* 促销活动轮播 */}
191 <section className="carousel-section">
192 <h2>当前促销活动</h2>
Krishya2283d882025-05-27 22:25:19 +0800193 {promotions.length === 0 || !currentPromo ? (
Krishyaf1d0ea82025-05-03 17:01:58 +0800194 <div className="empty-state">暂无促销活动</div>
195 ) : (
196 <div
197 className="carousel"
198 onMouseEnter={() => clearInterval(promoTimerRef.current)}
199 onMouseLeave={() => {
200 promoTimerRef.current = setInterval(() => {
201 setPromoIndex(prev => (prev + 1) % promotions.length);
202 }, 3000);
203 }}
204 >
205 <button className="arrow left" onClick={prevPromo}>&lt;</button>
206 <div className="slide">
Krishya2e0f49a2025-05-29 10:59:01 +0800207 <div><strong>促销名称:</strong>{currentPromo?.name ?? '未知'}</div>
Krishyaf1d0ea82025-05-03 17:01:58 +0800208 <div><strong>促销时间:</strong>
Krishya2e0f49a2025-05-29 10:59:01 +0800209 {currentPromo?.pStartTime && currentPromo?.pEndTime
210 ? `${new Date(currentPromo.pStartTime).toLocaleString()} ~ ${new Date(currentPromo.pEndTime).toLocaleString()}`
Krishya2283d882025-05-27 22:25:19 +0800211 : '未知'}
Krishyaf1d0ea82025-05-03 17:01:58 +0800212 </div>
Krishya2e0f49a2025-05-29 10:59:01 +0800213 <div><strong>上传奖励系数:</strong>{currentPromo?.uploadCoeff ?? '无'}</div>
214 <div><strong>下载折扣系数:</strong>{currentPromo?.downloadCoeff ?? '无'}</div>
Krishya2283d882025-05-27 22:25:19 +0800215 {currentPromo?.description && (
Krishya2e0f49a2025-05-29 10:59:01 +0800216 <div><strong>描述:</strong>{currentPromo.description}</div>
Krishyaf1d0ea82025-05-03 17:01:58 +0800217 )}
218 </div>
219 <button className="arrow right" onClick={nextPromo}>&gt;</button>
220 </div>
221 )}
222 </section>
Krishyaf1d0ea82025-05-03 17:01:58 +0800223 </div>
224 );
225};
226
227export default Promotion;
Krishya2283d882025-05-27 22:25:19 +0800228