feat: 评选高分项目

src/forge/Main/projecthome/Index.jsx

@@ -10,6 +10,8 @@ import more from '../img/index/more.png';
 import axios from 'axios';
 import { getImageUrl } from 'educoder';
 import Nodata from '../../Nodata';
+import TopIcon from '../img/index/hotAuthor.png';
+import TopProjectSelect from './TopProjectSelect'
 
 const { Search } = Input;
 
@@ -28,8 +30,10 @@ function Index() {
   },[])
 
   useEffect(()=>{
-    setIsSpin(true);
+    if(cateID != -1){
-    getProject();
+      setIsSpin(true);
+      getProject();
+    }
   },[cateID, search])
 
   function getCate() {
@@ -58,6 +62,10 @@ function Index() {
     }).catch(error=>{})
   }
 
+  const handleTopProjectData = (data) => {
+    setProjectsList(data);
+  };
+
   function searchFun(value){
     setSearch(value);
   }
@@ -70,6 +78,7 @@ function Index() {
         <div className="left">
           <ul className="leftTypes">
             <a className={cateID ? "" : "active"} onClick={()=>setCateID(undefined)}><img src={Icon} alt="" /><span>最近更新</span></a>
+            <a className={cateID != -1 ? "" : "active"} onClick={() => setCateID(-1)}><img src={TopIcon} alt="" /><span>高分项目</span></a>
             {
               cateList && cateList.length>0?
                 cateList.map((i,k)=>{
@@ -95,6 +104,7 @@ function Index() {
               />
               <Link to={`/explore/all${search ? '?search='+search : ''}`}>更多<i className="iconfont icon-triangle font-12"></i></Link>
             </div>
+            {cateID == -1 && <TopProjectSelect onData={handleTopProjectData} />}
             <Spin spinning={isSpin}>
               <div style={{minHeight:"400px"}}>
                 {

src/forge/Main/projecthome/TopProjectSelect.jsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Radio, Select } from 'antd';
+
+const { Option } = Select
+
+function TopProjectSelect(props) {
+  const [interval, setInterval] = useState(0);
+  const [periodList, setPeriodList] = useState([]);
+  const [selectedPeriod, setSelectedPeriod] = useState("暂无数据");
+  const onChangeInterval = (e) => {
+    setInterval(e.target.value);
+    getTopProjects(0, e.target.value);
+  };
+
+  const onChangePeriod = (value) => {
+    console.log(value);
+    setSelectedPeriod(value);
+    getTopProjects(value, interval);
+  };
+
+  function getTopProjects(period, time_interval) {
+    let url = `/projects/top.json`;
+    axios.get(url, {
+      params: {
+        period: period,
+        time_interval: time_interval
+      }
+    }).then(result => {
+      if (result && result.data) {
+        if (period == 0) {
+          var period_info = result.data.period_info
+          var optionsData = period_info.reverse().map((item) => ({
+            value: item.period,
+            label: `第${item.period}期（${item.updated_at}）`,
+          }));
+          setPeriodList(optionsData)
+          console.log(optionsData)
+          if (optionsData) {
+            setSelectedPeriod(optionsData[0].value)
+            getTopProjects(optionsData[0].value, time_interval)
+          }
+
+        } else {
+          props.onData(result.data.projects);
+        }
+      }
+
+    }).catch(error => { })
+  }
+
+  useEffect(() => {
+    getTopProjects(0, 0)
+  }, [])
+
+  return (
+    <div className="leftTitles">
+      <Radio.Group onChange={onChangeInterval} value={interval}>
+        <span>时间跨度：</span>
+        <Radio value={0}>每周</Radio>
+        <Radio value={1}>每月</Radio>
+        <Radio value={2}>季度</Radio>
+        <Radio value={3}>年度</Radio>
+      </Radio.Group>
+
+      <Select style={{ width: 200 }} defaultValue="暂无数据" value={selectedPeriod} onChange={onChangePeriod}>
+        {periodList && periodList.map((option) => (
+          <Option key={option.value} value={option.value}>
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+    </div>
+  )
+}
+export default TopProjectSelect;