种子列表优化、添加用户充值
Change-Id: I602e9eef78efe3527c320352d4522244d41ae807
diff --git a/src/pages/NewUserGuide/NewUserGuide.jsx b/src/pages/NewUserGuide/NewUserGuide.jsx
index 4c4d634..7a3dad1 100644
--- a/src/pages/NewUserGuide/NewUserGuide.jsx
+++ b/src/pages/NewUserGuide/NewUserGuide.jsx
@@ -1,6 +1,7 @@
-import Header from '../../components/Header';
import React, { useState } from 'react';
+import Header from '../../components/Header';
import './NewUserGuide.css';
+import NewbieTasks from './NewbieTasks.jsx';
const NewUserGuide = () => {
const [activeTab, setActiveTab] = useState('terms');
@@ -11,13 +12,15 @@
return (
<div className="guide-content">
<h2>名词解释</h2>
- <p>在本平台中，我们使用以下术语：</p>
+ <p>在echo Torrent中，我们使用以下术语：</p>
<ul>
- <li><strong>种子：</strong> 表示可下载的资源文件索引信息。</li>
+ <li><strong>Tracker：</strong> 监测用户流量的服务器。</li>
+ <li><strong>种子：</strong> 扩展名为.torrent的文件，主要包含文件信息、Tracker信息等。在本站发布的种子。每个用户下载都会下载包含特定信息的种子以便Tracker记录不同用户的流量情况。</li>
+ <li><strong>流量：</strong> 分为上传量（通过本站Tracker向其他用户上传的数据总量）和下载量（通过本站Tracker从其他用户下载的数据总量）。</li>
<li><strong>做种：</strong> 指上传资源供他人下载。</li>
- <li><strong>分享率：</strong> 上传流量与下载流量的比值。</li>
- <li><strong>魔力值：</strong> 用于奖励活跃用户的虚拟积分。</li>
- {/* 可继续添加名词 */}
+ <li><strong>分享率：</strong> 分享率＝上传量/下载量</li>
+ <li><strong>经验值：</strong> 用于奖励活跃用户的虚拟积分。</li>
+ <li><strong>金币：</strong> 用于兑换虚拟物品的虚拟货币，可在个人中心充值。</li>
</ul>
</div>
);
@@ -30,21 +33,14 @@
<li>浏览并下载感兴趣的种子资源</li>
<li>做种、评论、评分获得积分</li>
<li>发布你的第一个种子</li>
- {/* 可继续扩展详细步骤 */}
</ol>
</div>
);
case 'tasks':
return (
<div className="guide-content">
- <h2>成长任务</h2>
- <p>完成以下任务可快速熟悉平台并获得奖励：</p>
- <ul>
- <li>🎯 浏览任意种子页面</li>
- <li>🗣️ 在论坛发一条评论</li>
- <li>📤 上传你的第一个资源</li>
- <li>🌟 连续登录 3 天</li>
- </ul>
+ <NewbieTasks />
+ {/* ✅ 使用真实组件替换静态任务列表 */}
</div>
);
default:
@@ -76,7 +72,9 @@
成长任务
</button>
</div>
- <div className="guide-main">{renderContent()}</div>
+ <div className="guide-main">
+ {renderContent()}
+ </div>
</div>
</div>
);
diff --git a/src/pages/NewUserGuide/NewbieTasks.css b/src/pages/NewUserGuide/NewbieTasks.css
new file mode 100644
index 0000000..4d64389
--- /dev/null
+++ b/src/pages/NewUserGuide/NewbieTasks.css
@@ -0,0 +1,64 @@
+.newbie-tasks {
+ font-size: 16px;
+ line-height: 1.6;
+}
+
+.task-list ul {
+ list-style: none;
+ padding: 0;
+}
+
+.task-card {
+ background-color: #f9f9f9;
+ border-radius: 12px;
+ padding: 15px;
+ margin-bottom: 15px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+}
+
+.task-btn-group {
+ display: flex;
+ gap: 10px;
+ margin-top: 10px;
+}
+
+.task-btn-group button {
+ padding: 6px 12px;
+ border: none;
+ border-radius: 6px;
+ background-color: #0057ff;
+ color: white;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.task-btn-group button:hover {
+ background-color: #003fcc;
+}
+
+.status-completed {
+ color: green;
+}
+.status-pending {
+ color: orange;
+}
+.status-failed {
+ color: red;
+}
+.newbie-tasks {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ background-color: #fff;
+ border-radius: 12px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+}
+
+.task-card {
+ background-color: #f9f9f9;
+ border-radius: 12px;
+ padding: 15px;
+ margin-bottom: 20px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+ border: 1px solid #eee;
+}
diff --git a/src/pages/NewUserGuide/NewbieTasks.jsx b/src/pages/NewUserGuide/NewbieTasks.jsx
new file mode 100644
index 0000000..5ff6a9c
--- /dev/null
+++ b/src/pages/NewUserGuide/NewbieTasks.jsx
@@ -0,0 +1,154 @@
+// export default NewbieTasks;
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const NewbieTasks = () => {
+ const [tasks, setTasks] = useState([]);
+ const [experience, setExperience] = useState({});
+ const [currentStep, setCurrentStep] = useState({});
+ const [loading, setLoading] = useState(true);
+
+ const baseURL = '/echo/task/tutorial';
+ const userId = 1;
+
+ const fetchTasks = async () => {
+ try {
+ const response = await axios.get(`${baseURL}/getAllTasks`, {
+ params: { user_id: userId },
+ });
+ setTasks(response.data.tasks || []);
+ } catch (error) {
+ console.error('获取任务失败:', error);
+ }
+ };
+
+ const fetchExperience = async () => {
+ try {
+ const response = await axios.get(`${baseURL}/getAllTasks`, {
+ params: { user_id: userId },
+ });
+ setExperience(response.data || {});
+ } catch (error) {
+ console.error('获取经验失败:', error);
+ }
+ };
+
+ const fetchCurrentStep = async () => {
+ try {
+ const response = await axios.get(`${baseURL}/getNewStep`, {
+ params: { user_id: userId },
+ });
+ setCurrentStep(response.data || {});
+ } catch (error) {
+ console.error('获取引导步骤失败:', error);
+ }
+ };
+
+ const updateStatus = async (taskId) => {
+ try {
+ await axios.post(`${baseURL}/updateStatus`, {
+ user_id: userId,
+ task_id: taskId,
+ });
+ await fetchTasks();
+ await fetchExperience();
+ } catch (error) {
+ console.error('更新状态失败:', error);
+ }
+ };
+
+ const updateProgress = async (taskId, progress) => {
+ try {
+ await axios.post(`${baseURL}/updateProgress`, {
+ user_id: userId,
+ task_id: taskId,
+ progress,
+ });
+ await fetchTasks();
+ } catch (error) {
+ console.error('更新进度失败:', error);
+ }
+ };
+
+ const claimReward = async (taskId) => {
+ try {
+ await axios.post(`${baseURL}/rewardClaim`, {
+ user_id: userId,
+ task_id: taskId,
+ });
+ await fetchTasks();
+ await fetchExperience();
+ } catch (error) {
+ console.error('领取奖励失败:', error);
+ }
+ };
+
+ const checkRewardStatus = async (taskId) => {
+ try {
+ const response = await axios.post(`${baseURL}/rewardReview`, {
+ user_id: userId,
+ task_id: taskId,
+ });
+ alert(response.data.message || '已完成');
+ } catch (error) {
+ console.error('查看失败:', error);
+ }
+ };
+
+ useEffect(() => {
+ const init = async () => {
+ await fetchTasks();
+ await fetchExperience();
+ await fetchCurrentStep();
+ setLoading(false);
+ };
+ init();
+ }, []);
+
+ if (loading) return <p className="loading">加载中...</p>;
+
+ return (
+ <div className="common-card right-content">
+ <div className="profile-header">
+ <h1>🎯 成长任务</h1>
+ </div>
+
+ <div className="profile-details">
+ <p><strong>当前经验：</strong>{experience.current_experience}</p>
+ <p><strong>等级：</strong>{experience.level}</p>
+ <p><strong>奖励经验：</strong>{experience.reward?.experience || 0}</p>
+ <p><strong>奖励积分：</strong>{experience.reward?.points || 0}</p>
+ </div>
+
+ <div className="profile-details">
+ <p><strong>🧭 当前引导步骤：</strong>{currentStep.current_step}</p>
+ <p>{currentStep.step_description}</p>
+ </div>
+
+ <div className="profile-details">
+ <h2>任务列表</h2>
+ <ul>
+ {tasks.map(task => (
+ <li key={task.task_id} style={{ marginBottom: '20px', borderBottom: '1px solid #eee', paddingBottom: '10px' }}>
+ <p><strong>任务：</strong>{task.title}</p>
+ <p><strong>描述：</strong>{task.description}</p>
+ <p><strong>进度：</strong>{task.progress}%</p>
+ <p><strong>状态：</strong>{task.status}</p>
+ <p><strong>奖励：</strong>经验 {task.reward.experience}，积分 {task.reward.points}</p>
+
+ <div className="task-btn-group">
+ <button className="task-btn" onClick={() => updateStatus(task.task_id)}>更新状态</button>
+ <button className="task-btn" onClick={() => updateProgress(task.task_id, 100)}>提交进度</button>
+ <button className="task-btn" onClick={() => claimReward(task.task_id)}>领取奖励</button>
+ <button className="task-btn" onClick={() => checkRewardStatus(task.task_id)}>查看奖励状态</button>
+ </div>
+ </li>
+ ))}
+ </ul>
+ </div>
+ </div>
+ );
+};
+
+export default NewbieTasks;
+