优化种子评分、热门资源推荐
Change-Id: I9007f3d1d77df8a1d3eeb33c35897ea04c8e3c16
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
index dd38184..8270145 100644
--- a/src/pages/SeedList/Recommend/Recommend.jsx
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -1,50 +1,48 @@
-// export default Recommend;
import React, { useEffect, useState } from 'react';
+import axios from 'axios';
import './Recommend.css';
+import { useUser } from '../../../context/UserContext';
const Recommend = () => {
- const [paidLists, setPaidLists] = useState([]);
- const [loading, setLoading] = useState(true);
+ const { user } = useUser();
+ const [popularSeeds, setPopularSeeds] = useState([]);
+ const [recommendedSeeds, setRecommendedSeeds] = useState([]);
useEffect(() => {
- const fetchPaidLists = async () => {
- try {
-
- const response = await fetch(`/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();
+ // 获取热门资源
+ axios
+ .get('/echo/recommendation/popular', { params: { limit: 16 } })
+ .then((res) => setPopularSeeds(res.data))
+ .catch((err) => console.error('获取热门资源失败', err));
}, []);
+ useEffect(() => {
+ // 获取个性化推荐
+ if (user && user.userId) {
+ axios
+ .get(`/echo/recommendation/seeds/${user.userId}`)
+ .then((res) => setRecommendedSeeds(res.data))
+ .catch((err) => console.error('获取个性化推荐失败', err));
+ }
+ }, [user]);
+
+ const renderSeedCard = (seed) => (
+ <div className="seed-card" key={seed.id}>
+ <img src={seed.coverUrl || '/default-cover.jpg'} alt={seed.title} />
+ <div className="title">{seed.title}</div>
+ </div>
+ );
+
return (
- <div className="recommend-wrapper">
- <h2 className="recommend-section-title">付费片单</h2>
- {loading ? (
- <p>加载中...</p>
+ <div className="recommendation-page">
+ <h2>🎬 正在热映</h2>
+ <div className="seed-list">{popularSeeds.map(renderSeedCard)}</div>
+
+ <h2>🎯 个性化推荐</h2>
+ {user ? (
+ <div className="seed-list">{recommendedSeeds.map(renderSeedCard)}</div>
) : (
- <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 className="login-reminder">请登录以获取个性化推荐</div>
)}
</div>
);