blob: dd381849de264843c0c35c03c29a692dfaece0a6 [file] [log] [blame]
22301009afbcf4b2025-04-10 16:08:39 +08001// export default Recommend;
2import React, { useEffect, useState } from 'react';
22301009ecc1c1c2025-04-09 21:56:23 +08003import './Recommend.css';
4
22301009ecc1c1c2025-04-09 21:56:23 +08005const Recommend = () => {
22301009afbcf4b2025-04-10 16:08:39 +08006 const [paidLists, setPaidLists] = useState([]);
7 const [loading, setLoading] = useState(true);
8
9 useEffect(() => {
10 const fetchPaidLists = async () => {
11 try {
Krishya2283d882025-05-27 22:25:19 +080012
13 const response = await fetch(`/echo/recommendations/paid?user_id=1`);
22301009afbcf4b2025-04-10 16:08:39 +080014 console.log('请求地址:', `${process.env.REACT_APP_API_BASE}/echo/recommendations/paid?user_id=1`);
15
16
17 // const response = await fetch('/echo/recommendations/paid?user_id=1');
18 const data = await response.json();
19 if (data.status === 'success') {
20 setPaidLists(data.paid_recommendations);
21 } else {
22 console.warn('获取付费片单失败');
23 }
24 } catch (error) {
25 console.error('请求出错:', error);
26 } finally {
27 setLoading(false);
28 }
29 };
30
31 fetchPaidLists();
32 }, []);
33
22301009ecc1c1c2025-04-09 21:56:23 +080034 return (
22301009afbcf4b2025-04-10 16:08:39 +080035 <div className="recommend-wrapper">
36 <h2 className="recommend-section-title">付费片单</h2>
37 {loading ? (
38 <p>加载中...</p>
39 ) : (
40 <div className="recommend-paid-row">
41 {paidLists.map((item) => (
42 <div className="paid-card" key={item.group_id}>
43 <img src={item.image_url} alt={item.group_name} className="paid-cover" />
44 <div className="paid-title">{item.group_name}</div>
22301009ecc1c1c2025-04-09 21:56:23 +080045 </div>
46 ))}
47 </div>
22301009afbcf4b2025-04-10 16:08:39 +080048 )}
22301009ecc1c1c2025-04-09 21:56:23 +080049 </div>
50 );
51};
52
53export default Recommend;