connect-recommend-api
Change-Id: I301d348cd901445d0f618f50f5fc4d787a2044be
diff --git a/src/pages/SeedList/Recommend/Recommend.css b/src/pages/SeedList/Recommend/Recommend.css
index 3cc0e90..1eb3541 100644
--- a/src/pages/SeedList/Recommend/Recommend.css
+++ b/src/pages/SeedList/Recommend/Recommend.css
@@ -1,42 +1,38 @@
-.recommend-page {
+.recommend-wrapper {
padding: 20px;
- background-color: #f0f0f0;
-}
-
-.recommend-section {
- margin-bottom: 30px;
-}
-
-.recommend-section h2 {
- font-size: 24px;
- margin-bottom: 10px;
- color: #333;
-}
-
-.recommend-row {
- display: flex;
- overflow-x: scroll;
- gap: 20px;
-}
-
-.recommend-card {
- width: 150px;
- text-align: center;
background-color: #fff;
- border-radius: 10px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- padding: 10px;
}
-.recommend-image {
+.recommend-section-title {
+ font-size: 20px;
+ font-weight: bold;
+ margin-bottom: 15px;
+}
+
+.recommend-paid-row {
+ display: flex;
+ gap: 20px;
+ flex-wrap: nowrap;
+ overflow-x: auto;
+}
+
+.paid-card {
+ width: 200px;
+ flex-shrink: 0;
+ border: 1px solid #eee;
+ border-radius: 8px;
+ overflow: hidden;
+ background-color: #f9f9f9;
+ text-align: center;
+}
+
+.paid-cover {
width: 100%;
- height: 150px;
+ height: 120px;
object-fit: cover;
- border-radius: 5px;
}
-.recommend-title {
- margin-top: 10px;
+.paid-title {
font-size: 16px;
- color: #333;
+ padding: 10px;
}
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
index c33d153..97e702b 100644
--- a/src/pages/SeedList/Recommend/Recommend.jsx
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -1,87 +1,51 @@
-import React from 'react';
+// export default Recommend;
+import React, { useEffect, useState } from 'react';
import './Recommend.css';
-// 假数据
-const recommendData = {
- paidList: [
- { title: '片单 1', image: 'https://via.placeholder.com/150' },
- { title: '片单 2', image: 'https://via.placeholder.com/150' },
- { title: '片单 3', image: 'https://via.placeholder.com/150' },
- ],
- nowPlaying: [
- { title: '电影 1', image: 'https://via.placeholder.com/150' },
- { title: '电影 2', image: 'https://via.placeholder.com/150' },
- { title: '电影 3', image: 'https://via.placeholder.com/150' },
- { title: '电影 4', image: 'https://via.placeholder.com/150' },
- { title: '电影 5', image: 'https://via.placeholder.com/150' },
- { title: '电影 6', image: 'https://via.placeholder.com/150' },
- { title: '电影 7', image: 'https://via.placeholder.com/150' },
- { title: '电影 8', image: 'https://via.placeholder.com/150' },
- ],
- movieRecommendations: [
- { title: '电影 1', image: 'https://via.placeholder.com/150' },
- { title: '电影 2', image: 'https://via.placeholder.com/150' },
- { title: '电影 3', image: 'https://via.placeholder.com/150' },
- { title: '电影 4', image: 'https://via.placeholder.com/150' },
- ],
- tvRecommendations: [
- { title: '电视剧 1', image: 'https://via.placeholder.com/150' },
- { title: '电视剧 2', image: 'https://via.placeholder.com/150' },
- { title: '电视剧 3', image: 'https://via.placeholder.com/150' },
- { title: '电视剧 4', image: 'https://via.placeholder.com/150' },
- ]
-};
-
const Recommend = () => {
+ const [paidLists, setPaidLists] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const fetchPaidLists = async () => {
+ try {
+ const API_BASE = process.env.REACT_APP_API_BASE;
+ const response = await fetch(`${API_BASE}/echo/recommendations/paid?user_id=1`);
+ console.log('请求地址:', `${process.env.REACT_APP_API_BASE}/echo/recommendations/paid?user_id=1`);
+
+
+ // const response = await fetch('/echo/recommendations/paid?user_id=1');
+ const data = await response.json();
+ if (data.status === 'success') {
+ setPaidLists(data.paid_recommendations);
+ } else {
+ console.warn('获取付费片单失败');
+ }
+ } catch (error) {
+ console.error('请求出错:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchPaidLists();
+ }, []);
+
return (
- <div className="recommend-page">
- <div className="recommend-section">
- <h2>付费片单</h2>
- <div className="recommend-row">
- {recommendData.paidList.map((item, index) => (
- <div key={index} className="recommend-card">
- <img src={item.image} alt={item.title} className="recommend-image" />
- <span className="recommend-title">{item.title}</span>
+ <div className="recommend-wrapper">
+ <h2 className="recommend-section-title">付费片单</h2>
+ {loading ? (
+ <p>加载中...</p>
+ ) : (
+ <div className="recommend-paid-row">
+ {paidLists.map((item) => (
+ <div className="paid-card" key={item.group_id}>
+ <img src={item.image_url} alt={item.group_name} className="paid-cover" />
+ <div className="paid-title">{item.group_name}</div>
</div>
))}
</div>
- </div>
-
- <div className="recommend-section">
- <h2>正在热映</h2>
- <div className="recommend-row">
- {recommendData.nowPlaying.map((item, index) => (
- <div key={index} className="recommend-card">
- <img src={item.image} alt={item.title} className="recommend-image" />
- <span className="recommend-title">{item.title}</span>
- </div>
- ))}
- </div>
- </div>
-
- <div className="recommend-section">
- <h2>电影推荐</h2>
- <div className="recommend-row">
- {recommendData.movieRecommendations.map((item, index) => (
- <div key={index} className="recommend-card">
- <img src={item.image} alt={item.title} className="recommend-image" />
- <span className="recommend-title">{item.title}</span>
- </div>
- ))}
- </div>
- </div>
-
- <div className="recommend-section">
- <h2>电视剧推荐</h2>
- <div className="recommend-row">
- {recommendData.tvRecommendations.map((item, index) => (
- <div key={index} className="recommend-card">
- <img src={item.image} alt={item.title} className="recommend-image" />
- <span className="recommend-title">{item.title}</span>
- </div>
- ))}
- </div>
- </div>
+ )}
</div>
);
};