修改报名信息

public/css/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2340181 */
-  src: url('iconfont.woff2?t=1651041108151') format('woff2'),
+  src: url('iconfont.woff2?t=1652687271594') format('woff2'),
-       url('iconfont.woff?t=1651041108151') format('woff'),
+       url('iconfont.woff?t=1652687271594') format('woff'),
-       url('iconfont.ttf?t=1651041108151') format('truetype');
+       url('iconfont.ttf?t=1652687271594') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,58 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-ketixiangqingicon:before {
+  content: "\e92b";
+}
+
+.icon-bianjiicon:before {
+  content: "\e92c";
+}
+
+.icon-baomingxiangqingicon:before {
+  content: "\e92d";
+}
+
+.icon-sousuo4:before {
+  content: "\e92e";
+}
+
+.icon-quxiaoshenqingicon:before {
+  content: "\e92f";
+}
+
+.icon-xiala3:before {
+  content: "\e930";
+}
+
+.icon-tianjia_tianchong:before {
+  content: "\e931";
+}
+
+.icon-a-shanchu2:before {
+  content: "\e932";
+}
+
+.icon-shanchuicon3:before {
+  content: "\e933";
+}
+
+.icon-shenqingketiicon:before {
+  content: "\e934";
+}
+
+.icon-weixin:before {
+  content: "\e92a";
+}
+
+.icon-zanwushuju:before {
+  content: "\e928";
+}
+
+.icon-fuwuicon:before {
+  content: "\e929";
+}
+
 .icon-personal-center:before {
   content: "\e927";
 }

public/css/iconfont.json

@@ -5,6 +5,97 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "29701613",
+      "name": "课题详情icon",
+      "font_class": "ketixiangqingicon",
+      "unicode": "e92b",
+      "unicode_decimal": 59691
+    },
+    {
+      "icon_id": "29701614",
+      "name": "编辑icon",
+      "font_class": "bianjiicon",
+      "unicode": "e92c",
+      "unicode_decimal": 59692
+    },
+    {
+      "icon_id": "29701615",
+      "name": "报名详情icon",
+      "font_class": "baomingxiangqingicon",
+      "unicode": "e92d",
+      "unicode_decimal": 59693
+    },
+    {
+      "icon_id": "29701616",
+      "name": "搜索",
+      "font_class": "sousuo4",
+      "unicode": "e92e",
+      "unicode_decimal": 59694
+    },
+    {
+      "icon_id": "29701617",
+      "name": "取消申请icon",
+      "font_class": "quxiaoshenqingicon",
+      "unicode": "e92f",
+      "unicode_decimal": 59695
+    },
+    {
+      "icon_id": "29701618",
+      "name": "下拉",
+      "font_class": "xiala3",
+      "unicode": "e930",
+      "unicode_decimal": 59696
+    },
+    {
+      "icon_id": "29701619",
+      "name": "添加_填充",
+      "font_class": "tianjia_tianchong",
+      "unicode": "e931",
+      "unicode_decimal": 59697
+    },
+    {
+      "icon_id": "29701620",
+      "name": "删除 (2)",
+      "font_class": "a-shanchu2",
+      "unicode": "e932",
+      "unicode_decimal": 59698
+    },
+    {
+      "icon_id": "29701621",
+      "name": "删除icon",
+      "font_class": "shanchuicon3",
+      "unicode": "e933",
+      "unicode_decimal": 59699
+    },
+    {
+      "icon_id": "29701622",
+      "name": "申请课题icon",
+      "font_class": "shenqingketiicon",
+      "unicode": "e934",
+      "unicode_decimal": 59700
+    },
+    {
+      "icon_id": "29665762",
+      "name": "微信",
+      "font_class": "weixin",
+      "unicode": "e92a",
+      "unicode_decimal": 59690
+    },
+    {
+      "icon_id": "29467269",
+      "name": "暂无数据",
+      "font_class": "zanwushuju",
+      "unicode": "e928",
+      "unicode_decimal": 59688
+    },
+    {
+      "icon_id": "29467272",
+      "name": "服务icon",
+      "font_class": "fuwuicon",
+      "unicode": "e929",
+      "unicode_decimal": 59689
+    },
     {
       "icon_id": "29206429",
       "name": "personal-center",

src/glcc/api.js

@@ -1,6 +1,6 @@
 import fetch from './fetch';
 
-// 获取当前用户报名信息
+// 获取当前用户项目报名信息
 export function getUserApplyInfo(params) {
   return fetch({
     url: `/api/applyInformation/getUserApplyInfo`,
@@ -18,7 +18,52 @@ export function applyGlcc(data) {
   });
 }
 
+//提交报名信息（学生）
+export function studentApply(data) {
+  return fetch({
+    url: '/api/studentApply/create',
+    method: 'post',
+    data: data
+  });
+}
+
+//修改报名信息（学生）
+export function studentApplyEdit(data) {
+  return fetch({
+    url: '/api/studentApply/update',
+    method: 'post',
+    data: data
+  });
+}
+
 // 获取当前学生用户报名信息
+// 课题列表
+export function projectList(params) {
+  return fetch({
+    url: `/api/applyInformation/list`,
+    method: 'get',
+    params
+  });
+}
+
+// 课题列表
+export function taskList(params) {
+  return fetch({
+    url: `/api/applyInformation/taskList`,
+    method: 'get',
+    params
+  });
+}
+
+// 项目id查询项目详情
+export function getProjectById(id) {
+  return fetch({
+    url: `/api/applyInformation/${id}`,
+    method: 'get'
+  });
+}
+
+// 获取用户(学生)课题报名信息
 export function getStudentApplyInfo(params) {
   return fetch({
     url: `/api/studentApply/getUserApplyInfo`,
@@ -26,3 +71,12 @@ export function getStudentApplyInfo(params) {
     params
   });
 }
+
+// 用户取消课题报名
+export function cancelTaskApply(data) {
+  return fetch({
+    url: '/api/studentApply/delete',
+    method: 'post',
+    data: data
+  });
+}

src/glcc/home/index.jsx

@@ -8,20 +8,23 @@ import News from './news';
 import Partner from "./partner";
 import Contact from "./contact";
 import banner from "../img/banner.png";
+import introduce from "../img/introduce.png";
+import apply1 from "../img/apply1.png";
+import apply2 from "../img/apply2.png";
 import './index.scss';
 
 export default (props) => {
-  const {current_user, isGlccApplyDate, showNotification} = props;
+  const { current_user, isGlccApplyDate, showNotification } = props;
-  function goToApply(){
+  function goToApply() {
-    if(isGlccApplyDate){
+    if (isGlccApplyDate) {
-      if(current_user && current_user.login){
+      if (current_user && current_user.login) {
-        window.location.href="https://wj.qq.com/s2/10175205/e8df/";
+        window.location.href = "https://wj.qq.com/s2/10175205/e8df/";
-      }else{
+      } else {
-        window.location.href="/login?go_page=https://wj.qq.com/s2/10175205/e8df/";
+        window.location.href = "/login?go_page=https://wj.qq.com/s2/10175205/e8df/";
       }
-    }else{
+    } else {
       showNotification("不在报名时间，报名时间为4月15日~5月20日");
-      window.location.href="/glcc";
+      window.location.href = "/glcc";
     }
   }
 
@@ -30,18 +33,42 @@ export default (props) => {
       {/* <Banner /> */}
       <img className="glcc-banner" src={banner} alt=""></img>
       {/* <div > */}
-        {/* <Link className="apply-btn" to={isGlccApplyDate ? current_user && current_user.login ? 'https://wj.qq.com/s2/10175205/e8df/' : '/login?go_page=/glcc/apply' : '/glcc'} onClick={()=>{!isGlccApplyDate && showNotification("不在报名时间，报名时间为4月15日~5月20日")}}> */}
+      {/* <Link className="apply-btn" to={isGlccApplyDate ? current_user && current_user.login ? 'https://wj.qq.com/s2/10175205/e8df/' : '/login?go_page=/glcc/apply' : '/glcc'} onClick={()=>{!isGlccApplyDate && showNotification("不在报名时间，报名时间为4月15日~5月20日")}}> */}
-        <div className="apply-btn" onClick={goToApply}>
+      {/* <div className="apply-btn" onClick={goToApply}>
           <div className="apply-text">立即报名</div>
           <div className="apply-icon"><i className="font-14 iconfont icon-xiangyoujiantou "></i></div>
+        </div> */}
+      {/* 报名入口 */}
+      <div className="applyBox">
+        {/* 项目报名 */}
+        <div className="apply project">
+          <div>
+            <img src={apply1} alt="" className="applyIcon"/>
+            <span className="hover-none"><span className="til">项目报名</span> ></span>
+            <span className="hover-show">项目报名已截止</span>
+          </div>
+          <div className="pt6">项目报名开启，导师席位虚位以待</div>
+        </div>
+        {/* 学生报名 */}
+        <div className="apply" onClick={()=>{window.location.href="/glcc/student/2"}}>
+          <div>
+            <img src={apply2} alt="" className="applyIcon"/>
+            <span className="til">学生报名</span> >
+          </div>
+          <div className="pt6">选择感兴趣的课题，开启您的开源之旅</div>
         </div>
-        {/* </Link> */}
-      {/* </div> */}
-      <div className="introduce glcc-content">
-        <div className="glcc-tit">活动简介</div>
-        <div className="introduce-content">GitLink编程夏令营（GLCC），是在CCF中国计算机学会指导下，由CCF开源发展委员会（CCF ODC）举办的面向全国高校学生的暑期编程活动。活动将覆盖近千所高校，并联合各大开源基金会、开源企业、开源社区、开源专家，旨在鼓励青年学生通过参加真实的开源软件开发，提升自身技术能力，为开源社区输送优秀人才。为青年学生提供开放友好的交流平台，希望进一步推动国内开源社区的繁荣发展。</div>
       </div>
-      <Lightspot isGlccApplyDate={isGlccApplyDate} current_user={current_user} showNotification={showNotification}/>
+      {/* </div> */}
+      <div className="introduce">
+        <div className="glcc-content">
+          <div className="glcc-tit">活动简介</div>
+          <div className="introduceBox">
+            <div className="introduce-content">GitLink编程夏令营（GLCC），是在CCF中国计算机学会指导下，由CCF开源发展委员会（CCF ODC）举办的面向全国高校学生的暑期编程活动。活动将覆盖近千所高校，并联合各大开源基金会、开源企业、开源社区、开源专家，旨在鼓励青年学生通过参加真实的开源软件开发，提升自身技术能力，为开源社区输送优秀人才。为青年学生提供开放友好的交流平台，希望进一步推动国内开源社区的繁荣发展。</div>
+            <img src={introduce} alt="" className="introduceImg" />
+          </div>
+        </div>
+      </div>
+      <Lightspot isGlccApplyDate={isGlccApplyDate} current_user={current_user} showNotification={showNotification} />
       <TimerShaft />
       <Award />
       <News />

src/glcc/home/index.scss

@@ -17,23 +17,69 @@
   .ant-btn-primary{
     background-color: #466aff;
     border-color: #466aff;
-    
     &:hover{
       opacity: .8;
     }
   }
 
-  .apply-btn {
+  .applyBox {
     position: absolute;
-    top: 15vw;
+    top: 21vw;
-    left: 18.8vw;
+    left: 17.5vw;
-    width: 152px;
-    height: 40px;
-    background-color: #2e5bfe;
-    border: 1px solid #466aff;
-    color: #fff;
     padding-left: 18px;
     cursor: pointer;
+    display: flex;
+    .apply{
+      color:#666666;
+      font-size:15px;
+      padding: 20px 0 20px 30px;
+      background-image:linear-gradient(45deg,#C6D3F0 0%,#C9D8FF 50.63%,#E7ECFE 100%);
+      border:1px solid #ffffff;
+      border-radius:4px;
+      box-shadow:0px 0px 6px rgba(255, 255, 255, 0.73);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 355px;
+      .til{
+        margin-left: 10px;
+        font-family:PingFang SC;
+        font-weight:700;
+        color:#333333;
+        font-size:18px;
+        margin-bottom: 10px;
+      }
+      &:hover, &:hover .til{
+        color:#466aff;
+      }
+      .hover-show{
+        display: none;
+      }
+      &:hover .hover-none, &:hover .pt6{
+        display: none;
+      }
+      &:hover.project{
+        background-image:linear-gradient(45deg,#EBEFFF 0%, #E0E4F9 50.63%,#F1F1F1 100%);
+        box-shadow:0px 0px 6px #466aff;
+        cursor: default;
+        .hover-show{
+          display: inline-block;
+          margin-left: 10px;
+          font-weight:700;
+          color: #999999;
+          font-size:18px;
+        }
+      }
+    }
+    .apply:last-child{
+      margin-left: 35px;
+    }
+    .applyIcon{
+      width: 30px;
+    }
+    .pt6{
+      padding-top: 10px;
+    }
   }
   .apply-text {
     font-family: Alibaba PuHuiTi;
@@ -109,25 +155,34 @@
 }
 
 .introduce {
-  z-index: 1;
+  // z-index: 1;
-  position: relative;
+  // position: relative;
-  top: -45px;
+  // top: -45px;
-  background-image: linear-gradient(
+  // background-image: linear-gradient(
-    163.51deg,
+  //   163.51deg,
-    #e5ecff 0%,
+  //   #e5ecff 0%,
-    #e0e9ff 32.91%,
+  //   #e0e9ff 32.91%,
-    #fbfcff 100%
+  //   #fbfcff 100%
-  );
+  // );
-  background: url("../img/introduce-bg.png");
+  // background: url("../img/introduce-bg.png");
-  box-shadow: 0 0 12px rgba(161, 186, 255, 0.6);
+  // box-shadow: 0 0 12px rgba(161, 186, 255, 0.6);
-  background-size: 100% 100%;
+  // background-size: 100% 100%;
-  padding: 48px;
+  // padding: 48px;
+  min-height: 500px;
+  background-image:linear-gradient(132.67deg,#e5ecff 0%,#e0e9ff 53.13%,#fbfcff 100%);
   .glcc-tit {
-    margin-bottom: 30px !important;
+    margin-bottom: 60px !important;
   }
   .introduce-content {
     color: #202d40;
     font-size: 15px;
     line-height: 30px;
   }
+  .introduceBox{
+    display: flex;
+    .introduceImg{
+      width: 32vw;
+      margin-left: 3vw;
+    }
+  }
 }

src/glcc/home/lightspot/index.jsx

@@ -37,9 +37,15 @@ function Lightspot(props) {
               <h3 className="teacher-invite">有兴趣成为GLCC的导师吗？</h3>
               <div className="teacher-content">想要扩大项目知名度和影响力，为开源项目吸引新鲜血液，培养长期开发者。通过GitLink平台，与高校建立连接，指导开源新人传授他们的开源文化，享受开源的乐趣</div>
               {/* <Link className='applyBut' to={isGlccApplyDate ? current_user && current_user.login ? 'https://wj.qq.com/s2/10175205/e8df/' : '/login?go_page=/glcc/apply' : '/glcc'} onClick={()=>{!isGlccApplyDate && showNotification("不在报名时间，报名时间为4月15日~5月20日")}}>立即报名</Link> */}
-              <div className='applyBut' onClick={goToApply}>立即报名</div>
+              <div className='applyBut project' onClick={goToApply}><span className='hover-none'>项目报名</span><span className='hover-show'>项目报名已截止</span></div>
             </div>
-            <img className="teacher-img" src={teacherImg} alt=''></img>
+            <div className="teacher-text">
+              <h3 className="teacher-invite">你是开源新手，有兴趣参加GLCC吗？</h3>
+              <div className="teacher-content">想要参与一线开源项目开发，熟悉开源社区运作流程，接受资深开源软件专家指导，获得丰厚奖金和实习机会。参加GLCC，开启全新的开源之旅。</div>
+              {/* <Link className='applyBut' to={isGlccApplyDate ? current_user && current_user.login ? 'https://wj.qq.com/s2/10175205/e8df/' : '/login?go_page=/glcc/apply' : '/glcc'} onClick={()=>{!isGlccApplyDate && showNotification("不在报名时间，报名时间为4月15日~5月20日")}}>立即报名</Link> */}
+              <div className='applyBut' onClick={goToApply}>学生报名</div>
+            </div>
+            {/* <img className="teacher-img" src={teacherImg} alt=''></img> */}
           </div>
 
           <div className="info-student">
@@ -50,19 +56,19 @@ function Lightspot(props) {
             </div>
 
             <div className="info-item">
-              <img className="info-item-img" src={lightspot2}></img>
+              <img className="info-item-img" src={lightspot2} alt=''></img>
               <h3 className="info-item-tit">覆盖全国千所高校、万名会员</h3>
               <div className="info-item-content">活动邀请10+全球顶尖开源基金会，100+顶级开源项目社区，致力营造专业、开放的开源社区</div>
             </div>
 
             <div className="info-item">
-              <img className="info-item-img" src={lightspot3}></img>
+              <img className="info-item-img" src={lightspot3} alt=''></img>
               <h3 className="info-item-tit">结识开源伙伴和技术大咖</h3>
               <div className="info-item-content">每个项目配备一名导师，参与开源项目开发可接受一线资深开源项目专家专业指导，结识志同道合的开发伙伴</div>
             </div>
 
             <div className="info-item">
-              <img className="info-item-img" src={lightspot4}></img>
+              <img className="info-item-img" src={lightspot4} alt=''></img>
               <h3 className="info-item-tit">丰厚奖励&实习绿色通道</h3>
               <div className="info-item-content">入选同学可获得丰厚奖金，并有机会进入优秀开源项目企业实习或工作，受邀参与开源大会等机会</div>
             </div>

src/glcc/home/lightspot/index.scss

@@ -10,6 +10,7 @@
   .info-teacher {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 50px;
   }
   .teacher-text {
     margin-right: 2.84%;
@@ -26,6 +27,19 @@
         opacity: .8;
         color: white !important;
         cursor: pointer;
+        .hover-show{
+          display: inline-block;
+        }
+        .hover-none{
+          display: none;
+        }
+      }
+      &:hover.project{
+        background-color:#abafbe;
+        cursor: default;
+      }
+      .hover-show{
+        display: none;
       }
     }
   }

src/glcc/index.jsx

@@ -23,7 +23,7 @@ const Apply = Loadable({
   loader: () => import("./apply"),
   loading: Loading,
 });
-// 开源夏令营报名页面
+// 开源夏令营帮助中心页面
 const Help = Loadable({
   loader: () => import("./help"),
   loading: Loading,
@@ -34,6 +34,11 @@ const Student = Loadable({
   loading: Loading,
 });
 
+// 开源夏令营项目、课题列表页面
+const Project = Loadable({
+  loader: () => import("./project"),
+  loading: Loading,
+});
 
 const Glcc = (propsF) => {
   // 判断时间是否在开源夏令营报名时间内（4月15日~5月20日）
@@ -63,6 +68,13 @@ const Glcc = (propsF) => {
             <Help {...propsF} {...props} />
           )}
         ></Route>
+        {/* 项目/课题列表 */}
+        <Route
+          path="/glcc/student"
+          render={(props) => (
+            <Project {...propsF} {...props} />
+          )}
+        ></Route>
         {/* 首页 */}
         <Route
           path="/glcc"

src/glcc/project/component/projectDetail.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import Nodata from '../../../forge/Nodata';
+import { useEffect } from 'react';
+import { getProjectById } from '../../api';
+
+export default ({ detail, projectId, applyTaskId }) => {
+  const [info, setInfo] = useState(detail);
+
+  useEffect(()=>{
+    if(!detail && projectId){
+      // 通过项目Id查询项目详情
+      getProjectById(projectId).then(response=>{
+        if(response && response.message === 'success'){
+          setInfo(response.data)
+        }
+      })
+    }
+  },[detail])
+
+  // detail && (detail.registrationTaskList = [{
+  //   taskName: 'aaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊',
+  //   tutorName: 'daoshi',
+  //   tutorMail: 'email',
+  //   taskDesc: 'sfdjhdf,hsldf',
+  //   taskUrl: 'url',
+  //   taskReward: '9000'
+  // },{
+  //   taskName: 'aaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊',
+  //   tutorName: 'daoshi',
+  //   tutorMail: 'email',
+  //   taskDesc: 'sfdjhdf,hsldfaaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊aaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊aaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊aaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊',
+  //   taskUrl: 'url',
+  //   taskReward: '9000'
+  // }])
+  return (
+    info ? <div className={`projectDetailBox ${detail ? '':'byTask'}`}>
+      <div className="projectDetailHead">
+        <span className='name'>{info.projectName}</span>
+        <span className='type'>{info.projectType}</span>
+        <p>{info.gitlinkUrl}</p>
+        <div>{info.officialWebsiteUrl}</div>
+      </div>
+      {info.registrationTaskList && info.registrationTaskList.length > 0 ? info.registrationTaskList.map(item=>{
+        return <div className='taskItem mt20'>
+          <div className="left">
+            <div className="taskTitle">{item.taskName}</div>
+            <div className='mt20'>导师姓名: &nbsp;&nbsp;{item.tutorName}</div>
+            <div className='mb20 email'>邮箱地址: &nbsp;&nbsp;<span>{item.tutorMail}</span></div>
+          </div>
+          <div className="center">
+            <div className="taskDesc">{item.taskDesc}</div>
+            <div className="taskUrl">课题链接: &nbsp;&nbsp;<span>{item.taskUrl}</span></div>
+            <div>{applyTaskId && applyTaskId.includes(item.id) ? <Button onClick={()=>{window.location.href="/glcc/student/apply"}}>报名详情</Button> : <Button type='primary' className='applyBut' onClick={()=>{window.location.href=`/glcc/student/apply/${item.id}`}}>申请课题</Button>}</div>
+          </div>
+          <div className="right">￥ {item.taskReward}</div>
+        </div>
+      }) : <Nodata _html="课题暂无数据" small={true}/>}
+    </div>: <div className="projectDetailBox nodata"><Nodata _html="暂无数据" small={true}/></div>
+  )
+}

src/glcc/project/index.jsx

@@ -0,0 +1,71 @@
+import React , { useEffect , useState } from 'react';
+import { Spin } from 'antd';
+import { Route, Switch } from "react-router-dom";
+import banner from "../img/banner.png";
+import './index.scss';
+import Loadable from "react-loadable";
+import Loading from "../../Loading";
+import { Link } from 'react-router-dom';
+import { getStudentApplyInfo } from '../api';
+
+// 项目列表页面
+const ProjectList = Loadable({
+  loader: () => import("./projectList"),
+  loading: Loading,
+});
+// 课题列表页面
+const TaskList = Loadable({
+  loader: () => import("./taskList"),
+  loading: Loading,
+});
+
+function Project(propsF) {
+  const {location, current_user} = propsF;
+  const {pathname} = location;
+
+  // 用户已报名课题id数组
+  const [applyTaskId, setApplyTaskId] = useState([]);
+  // 刷新用户课题报名信息
+  const [studentInfoReset, setStudentInfoReset] = useState(undefined);
+
+  useEffect(()=>{
+    // 获取用户课题报名信息current_user user_id
+    getStudentApplyInfo({userId: current_user && current_user.user_id}).then(response=>{
+      if(response && response.message === "success"){
+        // setData(response.data.rows);
+        const data = new Set();
+        response.data && response.data.registrationStudentTaskList.map(item=>{
+          data.add(item.taskId);
+        })
+        setApplyTaskId(Array.from(data));
+      }
+    })
+  },[studentInfoReset])
+
+  return(
+    <div className="glcc_project">
+      <img className="glcc-banner" src={banner} alt=''></img>
+      <div className='head'>
+        <Link to="/glcc/student/2" className={pathname.lastIndexOf('/2') !== -1 ? 'active' : ''}>课题列表</Link>
+        <Link to="/glcc/student/1" className={pathname.lastIndexOf('/1') !== -1 ? 'active' : ''}>项目列表</Link>
+      </div>
+      <Spin spinning={false}>
+        <Switch {...propsF}>
+          <Route
+            path="/glcc/student/1"
+            render={(props) => (
+              <ProjectList applyTaskId={applyTaskId}/>
+            )}
+          ></Route>
+          <Route
+            path="/glcc/student/2"
+            render={(props) => (
+              <TaskList applyTaskId={applyTaskId} setStudentInfoReset={setStudentInfoReset}/>
+            )}
+          ></Route>
+        </Switch>
+      </Spin>
+    </div>
+  )
+}
+export default Project;

src/glcc/project/index.scss

@@ -0,0 +1,142 @@
+.glcc_project{
+  .head{
+    background-color:rgba(188, 208, 255, 0.27);
+    border:1px solid #ffffff;
+    text-align: center;
+    a{
+      padding: 18px 20px 20px;
+      display: inline-block;
+      color: #273778;
+      font-size: 18px;
+      font-weight:700;
+      line-height: 30px;
+      &.active{
+        border-bottom: 1px solid #5474df;;
+      }
+      &:last-child{
+        margin-left: 40px;
+      }
+    }
+  }
+  .listBox{
+    background-image:linear-gradient(180deg,#ebf2ff 0%,#ebf2ff 43.09%,#f3f4f8 100%);
+    .list{
+      width: 1200px;
+      margin: 0 auto;
+      .search{
+        width: 40%;
+        margin: 0 auto;
+        padding: 40px 0;
+      }
+      .search .ant-btn, .search .ant-input{
+        height: 48px;
+      }
+      .search .ant-btn{font-size: 30px;}
+      .search .ant-input{font-size: 16px;}
+    }
+    .search{
+      .ant-btn-primary{
+        background-color:#466aff;
+        border-color: #466aff;
+      }
+      .ant-input:hover{
+        border-color: #466aff;
+      }
+    }
+  }
+}
+.glcc-banner {
+  width: 100%;
+}
+// 项目详情框
+.projectDetailBox{
+  &.byTask{
+    background-image:linear-gradient(180deg,#f1f5ff 0%,#ffffff 100%);
+    border:1px solid #ffffff;
+    border-radius:4px;
+    box-shadow:0px 0px 10px rgba(100, 141, 255, 0.2);
+    padding: 30px 30px 50px;
+    .taskItem{
+      .center{
+        width: 60%;
+      }
+      .right{padding-right: 0px;}
+    }
+  }
+  &.nodata{width: 200px;}
+  font-size:15px;
+  line-height:30px;
+  .projectDetailHead{
+    color:#465474;
+    padding-bottom: 12px;
+    border-bottom: 1px dashed #bec5d5;
+    .name{
+      font-weight:700;
+      color:#3753c5;
+      font-size:20px;
+    }
+    .type{
+      display: inline-block;
+      border:1px solid #6680bb;
+      border-radius:4px;
+      margin-left: 12px;
+      padding: 4px 6px;
+    }
+  }
+  .taskItem {
+    display: flex;
+    justify-content: space-between;
+    background-color: #ffffff;
+    box-shadow: 0px 0px 12px rgba(71, 105, 198, 0.4);
+    .left{
+      width: 250px;
+      background-image: url('../img/projectDetailTaskBg.png');
+      background-size: 100% 100%;
+      padding: 22px 20px;
+      color:#25304a;
+      .taskTitle{
+        color:#1834a7;
+        font-size:18px;
+      }
+      .email span{color:#466aff;}
+    }
+    .center{
+      width: 66%;
+      text-align: left;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .taskDesc{
+        color:#6b6b6b;
+      }
+      .taskUrl{
+        color:#465474;
+        font-size:16px;
+        span{color:#466aff;}
+      }
+      .applyBut{
+        background-color:#466aff;
+        border-color: #466aff;
+        &:hover{background-color:#5d7cff;}
+        &:focus{background-color:#1140ff;}
+      }
+    }
+    .right{
+      font-weight:700;
+      color:#ff8800;
+      font-size:24px;
+      padding: 30px 30px 0 0;
+    }
+  }
+}
+.projectItemPopover{width: 1200px;}
+.projectItemPopover .ant-popover-inner{
+  background-image:linear-gradient(180deg,#f1f5ff 0%,#ffffff 100%);
+  border:1px solid #ffffff;
+  border-radius:4px;
+  box-shadow:0px 0px 10px rgba(100, 141, 255, 0.2);
+  .ant-popover-inner-content{
+    padding: 30px 30px 50px;
+  }
+}

src/glcc/project/projectList/index.jsx

@@ -0,0 +1,48 @@
+import React , { useEffect , useState } from 'react';
+import { Input, Popover, Table, Tooltip } from 'antd';
+import { main_site_url } from '../../fetch';
+import './index.scss';
+import { projectList } from '../../api';
+import ProjectDetail from '../component/projectDetail';
+const {Search} = Input;
+
+// 项目列表
+function ProjectList({applyTaskId}) {
+  // 输入搜索框
+  const [keyword, setKeyword] = useState(undefined);
+  const [data, setData] = useState([]);
+
+  useEffect(()=>{
+    const params = {
+      curPage: 1,
+      keyword,
+      pageSize: 20
+    }
+    projectList(params).then(response=>{
+      if(response && response.message === "success"){
+        setData(response.data.rows);
+      }
+    })
+  },[keyword])
+
+  return(
+    <div className="taskList listBox">
+      <div className="list">
+        <div className='search'><Search placeholder='请输入项目名称进行搜索' allowClear enterButton onSearch={(value)=>{setKeyword(value)}}/></div>
+        <div className='projectListBox'>
+          {data && data.map((item, index)=>{
+            return <Popover placement= {(index+1)%3 === 0 ? 'bottomRight' : (index+1)%3%2 === 0 ? 'bottom' : 'bottomLeft'} content={<ProjectDetail detail={item} applyTaskId={applyTaskId}/>} trigger='click' overlayClassName='projectItemPopover'>
+              <div className='projectItem'>
+                <div className="border"></div>
+                <div className="projectLogo"><img src={`${main_site_url}/api/attachments/${item.projectLogoId}`} alt=''/></div>
+                <div className="title">{item.projectName}</div>
+                <div className="intro">{item.projectIntro}</div>
+              </div>
+            </Popover>
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+export default ProjectList;

src/glcc/project/projectList/index.scss

@@ -0,0 +1,76 @@
+.actionBox{
+  display: flex;
+  align-items: center;
+  color: #466aff;
+  cursor: pointer;
+  .iconfont{
+    margin: 0 10px 0 14px;
+  }
+  .applyTask{
+    color:#eb9350;
+  }
+}
+.projectListBox{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .projectItem{
+    width: 30%;
+    background-image: linear-gradient(180deg,rgba(232, 237, 255, 0.85) 0%,rgba(255, 255, 255, 0.85) 100%);
+    border: 1px solid;
+    border-color: #ffffff;
+    border-radius: 4px;
+    box-shadow:0px 0px 8px rgba(93, 131, 255, 0.26);
+    text-align: center;
+    margin-bottom: 50px;
+    background-image: url('../../img/projectBg.png');
+    background-size: 100% 100%;
+    &:hover{
+      cursor: pointer;
+      background-image: none;
+      // #E8EDFF—#FFFFFF（85%）
+      background-image: linear-gradient(180deg,rgba(232, 237, 255, 0.85) 0%,rgba(255, 255, 255, 0.85) 100%);
+    }
+    .border{
+      height: 5px;
+      background-color:#657edf;
+      border-radius:2px 2px 0px 0px;
+    }
+    .projectLogo{
+      width: 100px;
+      height: 100px;
+      border: 1px solid #fff;
+      border-radius: 50%;
+      text-align: center;
+      overflow: hidden;
+      margin: 25px auto 10px;
+      img{
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+    .title{
+      color:#2a51bf;
+      font-size:17px;
+      line-height:30px;
+      margin-bottom: 15px;
+      padding: 0 50px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .intro{
+      color:#4f5d84;
+      font-size:15px;
+      margin-bottom: 15px;
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+      text-align: left;
+      padding: 0 14px;
+    }
+  }
+}

src/glcc/project/taskList/index.jsx

@@ -0,0 +1,128 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import { Input, message, Modal, Table, Tooltip } from 'antd';
+import './index.scss';
+import { cancelTaskApply, taskList } from '../../api';
+import ProjectDetail from '../component/projectDetail';
+const { Search } = Input;
+
+// 课题列表
+function TaskList({applyTaskId, setStudentInfoReset}) {
+  const [visible, setVisible] = useState(false);
+  const [deleteTaskId, setDeleteTaskId] = useState(undefined);
+  // 输入搜索框
+  const [keyword, setKeyword] = useState(undefined);
+  const [data, setData] = useState([]);
+
+  const columns = [
+    { title: '序号', dataIndex: 'index', align: 'center', render: (text, item, index) => index + 1 },
+    { title: '课题名称', dataIndex: 'taskName', width: '28%', render: (text) => <Tooltip title={text}>{text}</Tooltip> },
+    { title: '项目名称', dataIndex: 'tutorName', width: '28%', render: (text) => <Tooltip title={text}>{text}</Tooltip> },
+    { title: '课题奖金', dataIndex: 'taskReward', render: (text) => <span>￥ {text}</span> },
+    {
+      title: '操作', dataIndex: 'action', align: 'center', className:"actionColumns", render: ((text, item, index) => {
+        return (
+          <div className='actionBox'>
+            {applyTaskId && applyTaskId.includes(item.id) ? <Fragment>
+              <span onClick={()=>{window.location.href=`/glcc/student/apply`}}><i className='iconfont icon-baomingxiangqingicon mr10'></i>报名详情</span>
+              <Tooltip title={"取消申请"}><i className='iconfont icon-shanchuicon3 ml10 cancelApply' onClick={()=>{setDeleteTaskId(item.id);setVisible(true)}}></i></Tooltip>
+            </Fragment>:<Fragment>
+              <span onClick={()=>{window.location.href=`/glcc/student/apply/${item.id}`}}><i className='iconfont icon-shenqingketiicon applyTask'></i><span className='applyTask' onClick={()=>{applyTask(item.id)}}>申请课题</span></span></Fragment>}
+          </div>
+        )
+      })
+    },
+  ]
+
+  const customExpandIcon = (props) => {
+    if (props.expanded) {
+      return <a className='actionBox' style={{marginRight: 8 }} onClick={e => {
+        props.onExpand(props.record, e);
+      }}><i className='iconfont icon-ketixiangqingicon mr5'></i>课题详情<i className="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu- font-12 ml5"></i></a>
+    } else {
+      return <a className='actionBox' style={{marginRight: 8 }} onClick={e => {
+        props.onExpand(props.record, e);
+      }}><i className='iconfont icon-ketixiangqingicon mr5'></i>课题详情<i className="iconfont icon-jiantou9 font-12 ml5"></i></a>
+    }
+    // if(props.record.members && props.record.members.length > 0){
+    //     if (props.expanded) {
+    //         return <a style={{ color: 'black',marginRight:8 }} onClick={e => {
+    //             props.onExpand(props.record, e);
+    //         }}>查看成员<i className="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu- font-12 ml5"></i></a>
+    //     } else {
+    //         return <a style={{ color: 'black' ,marginRight:8 }} onClick={e => {
+    //             props.onExpand(props.record, e);
+    //         }}>查看成员<i className="iconfont icon-jiantou9 font-12 ml5"></i></a>
+    //     }
+    // }else{
+    //     return <span style={{color:'gray' }}>查看成员</span>
+    // }
+  }
+
+  const expandRow = (record) => {
+    return <ProjectDetail detail={null} projectId={record.regId}/>
+  }
+
+  // 申请课题按钮点击函数
+  function applyTask(id){
+    // 判断用户是否已经报名两个课题
+    if(applyTaskId.length >= 2){
+      message.error('最多只能同时报名两个课题');
+    }else{
+      // 跳转到学生报名页
+      window.location.href=`/glcc/student/apply/${id}`;
+    }
+  }
+
+  // 取消课题按钮点击函数
+  function cancelApply(){
+    cancelTaskApply({ids: Array.from(deleteTaskId.toString())}).then(response=>{
+      if(response && response.message === "success"){
+        setVisible(false);
+        setStudentInfoReset(Math.random());
+        message.success('取消成功');
+      }
+    })
+  }
+
+  useEffect(() => {
+    const params = {
+      curPage: 1,
+      keyword,
+      pageSize: 20
+    }
+    taskList(params).then(response => {
+      if (response && response.message === "success") {
+        setData(response.data.rows);
+      }
+    })
+  }, [keyword])
+
+  return (
+    <div className="taskList listBox">
+      <div className="list">
+        <div className='search'><Search placeholder='请输入课题名称进行搜索' allowClear enterButton onSearch={(value) => { setKeyword(value) }} /></div>
+        <Table
+          columns={columns}
+          dataSource={data}
+          expandedRowRender={expandRow}
+          expandIconColumnIndex={4}
+          expandIconAsCell={false}
+          expandIcon={customExpandIcon}
+        />
+      </div>
+      <Modal
+        okText="确认删除"
+        okType='default'
+        title="删除"
+        visible={visible}
+        onCancel={()=>{setVisible(false)}}
+        onOk={cancelApply}
+        wrapClassName='cancelApplyTask'
+      >
+        <div className='tilTask mt20'><span className='carefulIcon'>!</span>取消申请即删除本次报名记录，确定取消？</div>
+        <p className='tipTask'>此操作将永久删除该报名记录，请进行确认以防数据的丢失</p>
+      </Modal>
+    </div>
+  )
+}
+export default TaskList;

src/glcc/project/taskList/index.scss

@@ -0,0 +1,63 @@
+.actionBox{
+  display: flex;
+  align-items: center;
+  color: #466aff;
+  cursor: pointer;
+  .iconfont{margin: 0 10px 0 14px;}
+  .applyTask{color:#eb9350;}
+  .cancelApply{visibility: hidden;}
+}
+tr:hover .actionBox .cancelApply{
+  visibility: visible;
+  color: #E31E1E;
+}
+.ant-table-tbody .actionColumns{
+  display: flex;
+}
+.cancelApplyTask{
+  .ant-modal-close{top: 0px !important;}
+  .ant-modal-header{
+    padding: 8px 20px;
+    background-color: #e9edff;
+    .ant-modal-title{text-align: left;}
+  }
+  .carefulIcon{
+    width: 36px;
+    height: 36px;
+    background: #ca0002;
+    display: inline-block;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 36px;
+    font-size: 18px;
+    color: white;
+    margin-right: 15px;
+  }
+  .tilTask{
+    color:#333333;
+    font-size:16px;
+    margin-left: 35px;
+  }
+  .tipTask{
+    color:#666666;
+    font-size:14px;
+    margin: 30px 0 30px 86px !important;
+  }
+  .ant-modal-footer{
+    border-top: none;
+    text-align: center;
+    padding-bottom: 50px;
+    .ant-btn{
+      &.ant-btn-default{
+        color: #df0002;
+      }
+      &:hover{
+        border-color: #466aff;
+        color: #466aff;
+        &.ant-btn-default{
+          border-color: #df0002;
+          color: #df0002;}
+      }
+    }
+  }
+}

src/glcc/student/index.jsx

@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useState, Fragment } from 'react';
-import { Breadcrumb, Button, Form, Input, Select, Upload, Modal, Cascader, Tooltip } from 'antd';
+import { Breadcrumb, Button, Form, Input, Select, Upload, Cascader, Spin } from 'antd';
-import { getUploadActionUrl, appendFileSizeToUploadFileAll } from 'educoder';
+import { getUploadActionUrl, getUrl, appendFileSizeToUploadFileAll } from 'educoder';
 import { locData } from '../../forge/Utils/locData';
-import { getStudentApplyInfo, applyGlcc } from '../api';
+import { getStudentApplyInfo, taskList, studentApply, studentApplyEdit } from '../api';
-import axios from 'axios';
 import TextArea from 'antd/lib/input/TextArea';
-import { main_site_url } from '../fetch';
 import banner from "../img/banner.png";
 import studentSvg from "../img/student.png";
 import './index.scss';
+import { Link } from 'react-router-dom';
 
 const Option = Select.Option;
 const gradeList = [
@@ -22,23 +21,25 @@ const gradeList = [
   { id: '研三', name: '研三' }];
 function Apply(props) {
   const { form, current_user, showNotification, isGlccApplyDate, match } = props;
-  const { taskId } = match.params;
+  const taskId = Number(match.params.taskId);
   // 可用于开发时不同账号报名
   // current_user && (current_user.user_id = 6)
   // current_user && (current_user.userName = "创新使者")
   const { getFieldDecorator, validateFields, setFieldsValue, validateFieldsAndScroll } = form;
   const [imageUrl, setImageUrl] = useState(undefined);
   const [loading, setLoading] = useState(false);
+  const [reload, setReload] = useState();
   const [userApplyInfo, setUserApplyInfo] = useState(undefined);
   const [editable, setEditable] = useState(true);
   const [files, setFiles] = useState([]);
+  const [files1, setFiles1] = useState([]);
   const initTask = {
-    memo: '',
     taskId,
-    taskName: '',
+    memo: '',
+    memoAttachmentId: ''
   };
-  const [taskList, setTaskList] = useState([]);
+  const [myTaskList, setMyTaskList] = useState([]);
-
+  const [allTaskList, setAllTaskList] = useState([]);
 
   useEffect(() => {
     // 进入此页面置顶
@@ -53,6 +54,19 @@ function Apply(props) {
     }
   }, [])
 
+  useEffect(() => {
+    const params = {
+      curPage: 1,
+      pageSize: 10000
+    }
+    taskList(params).then(response => {
+      if (response && response.message === "success") {
+        setAllTaskList(response.data.rows);
+      }
+    })
+  }, [])
+
+
   useEffect(() => {
     // 获取当前用户报名信息
     current_user && getStudentApplyInfo({ userId: current_user.user_id }).then(response => {
@@ -60,32 +74,65 @@ function Apply(props) {
         let data = response.data;
         let applyInfo = {
           grade: data.grade,
-          location: data.location && data.location.split(),
+          location: data.location && data.location.split(','),
           mail: data.mail,
           phone: data.phone,
           proveAttachmentId: data.proveAttachmentId,
           school: data.school,
           studentName: data.studentName,
           userId: current_user.user_id,
-          profession:data.profession,
+          profession: data.profession,
         };
+        console.log(applyInfo);
         if (Array.isArray(data.registrationStudentTaskList) && data.registrationStudentTaskList.length) {
-          setTaskList(data.registrationStudentTaskList);
+          let initTaskList = [];
           for (const [i, item] of data.registrationStudentTaskList.entries()) {
             applyInfo['memo' + i] = item.memo;
             applyInfo['taskId' + i] = item.taskId;
-            applyInfo['taskName' + i] = item.taskName;
+            applyInfo['memoAttachmentId' + i] = item.memoAttachmentId;
-            applyInfo['memoAttachmentId'+i] =item.memoAttachmentId;
+
+            if (i == 0) {
+              setFiles([{
+                name: item.memoAttachment || '已上传文件',
+                id: item.memoAttachmentId,
+                uid: item.memoAttachmentId
+              }]);
+            } else {
+              setFiles1([{
+                name: item.memoAttachment || '已上传文件',
+                id: item.memoAttachmentId,
+                uid: item.memoAttachmentId,
+              }]);
+            }
+
+            initTaskList.push({
+              id: item.id,
+              memo: item.memo,
+              memoAttachmentId: item.memoAttachmentId,
+              taskId: item.taskId,
+            });
+          }
+          setMyTaskList(initTaskList);
+
+          // 如果只有一条报名数据，且课题id与当前id不一致，那么新增一条默认数据
+          if (data.registrationStudentTaskList.length === 1 && data.registrationStudentTaskList[0].taskId != taskId) {
+            addTask(data.registrationStudentTaskList);
           }
         }
 
         setFieldsValue(applyInfo);
         setUserApplyInfo(response.data);
       } else {
-        setTaskList([initTask]);
+        // 先增加数据再给选择框赋默认值，否则不生效
+        new Promise((resove) => {
+          setMyTaskList(() => {
+            resove();
+            return [initTask]
+          });
+        }).then(res => setFieldsValue({ 'taskId0': taskId }))
       }
     })
-  }, [current_user])
+  }, [current_user, reload])
 
   // 当用户输入结束时 检验用户输入是否符合规范
   function verify(dataIndex) {
@@ -101,10 +148,7 @@ function Apply(props) {
     e.preventDefault();
     validateFieldsAndScroll((err, values) => {
       if (!err) {
-        // Modal.confirm({
+        setLoading(true);
-        //   title: "报名",
-        //   content: "确定提交报名信息，提交后您仍可修改",
-        //   onOk: () => {
         const params = {
           grade: values.grade,
           location: values.location.join(),
@@ -112,23 +156,30 @@ function Apply(props) {
           phone: values.phone,
           proveAttachmentId: values.proveAttachmentId.file ? values.proveAttachmentId.file.response.id : userApplyInfo.proveAttachmentId,
           school: values.school,
-          profession:data.profession,
+          profession: values.profession,
           studentName: values.studentName,
           userId: current_user.user_id,
-          registrationStudentTaskList: taskList
+          registrationStudentTaskList: myTaskList
         }
 
-        // applyGlcc(params).then(response => {
+        if (userApplyInfo) {
-        //   if (response && response.message === "success") {
+          params.id=userApplyInfo.id;
-        //     showNotification("报名成功");
+          studentApplyEdit(params).then(response => {
-        //     setReload(Math.random());
+            if (response && response.message === "success") {
-        //   }
+              showNotification("修改信息成功");
-        // })
+              setReload(Math.random());
-        //   }
+              setLoading(false);
-        // })
+            }
-
+          });
-        console.log(params);
+        } else {
-
+          studentApply(params).then(response => {
+            if (response && response.message === "success") {
+              showNotification("报名成功");
+              setReload(Math.random());
+              setLoading(false);
+            }
+          });
+        }
       }
     });
   };
@@ -145,10 +196,6 @@ function Apply(props) {
 
   // 检查文件上传是否符合规定
   function beforeUpload(file) {
-    // const isSmall = file.size / 1024 / 1024 < 2;
-    // if (!isSmall) {
-    //   showNotification(`文件大小必须小于${2}MB!`);
-    // }
     const isType = file.type === "image/png" || file.type === "image/jpg" || file.type === "image/jpeg";
     if (!isType) {
       showNotification("只能上传png、jpg、jpeg格式文件");
@@ -165,7 +212,7 @@ function Apply(props) {
     }
   }
 
-  // 上传完成后
+  // 图片上传完成后
   function handleChange(info) {
     if (info && info.file && info.file.status === "done") {
       getBase64(info.file.originFileObj, imageUrl =>
@@ -175,11 +222,19 @@ function Apply(props) {
   }
 
   // 自荐书上传
-  function bookChange(info) {
+  function bookChange(info, i) {
     if (info.file.status === 'uploading' || info.file.status === "done" || info.file.status === 'removed') {
       setLoading(true);
+      if (info.file.status === "done") {
+        changeTaskItem('memoAttachmentId', info.fileList[0].response.id, i)
+        // changeTaskItem('memoAttachment', info.fileList[0].name, i)
+      }
       console.log(info.fileList);
-      setFiles(appendFileSizeToUploadFileAll(info.fileList).slice(-1));
+      if (i) {
+        setFiles1(appendFileSizeToUploadFileAll(info.fileList).slice(-1));
+      } else {
+        setFiles(appendFileSizeToUploadFileAll(info.fileList).slice(-1));
+      }
     }
     if (info.file.status === "done" || info.file.status === 'removed') {
       setLoading(false);
@@ -189,173 +244,218 @@ function Apply(props) {
   // 支持文件下载
   function download(file) {
     const fileId = file.id || file.response.id;
-    window.open(`${current_main_site_url}/api/attachments/${fileId}`);
+    window.open(`${getUrl()}/api/attachments/${fileId}`);
   }
 
-  function addTask() {
+  function addTask(List) {
-    let taskListNew = [...taskList];
+    let taskListNew = List ? [...List] : [...myTaskList];
-    taskListNew.push(initTask);
+    if (taskId != taskListNew[0].taskId) {
-    setTaskList(taskListNew);
+      taskListNew.push(initTask);
+      // 先增加数据再给选择框赋默认值，否则不生效
+      new Promise((resove) => {
+        setMyTaskList(() => {
+          resove();
+          return taskListNew
+        });
+      }).then(res => setFieldsValue({ 'taskId0': taskId }))
+    } else {
+      taskListNew.push({ ...initTask, taskId: '' });
+      setMyTaskList(taskListNew);
+    }
   }
 
   function deleteTask(i) {
-    let taskListNew = [...taskList];
+    let taskListNew = myTaskList.slice();
+    let reWriteInfo;
+    if (i) {
+      reWriteInfo = {
+        taskId1: '',
+        memo1: '',
+        memoAttachmentId1: ''
+      }
+      setFiles1([]);
+    } else {
+      reWriteInfo = {
+        taskId0: taskListNew[1].taskId,
+        memo0: taskListNew[1].memo,
+        memoAttachmentId0: taskListNew[1].memoAttachmentId,
+        taskId1: '',
+        memo1: '',
+        memoAttachmentId1: ''
+      }
+      setFiles(files1);
+      setFiles1([]);
+    }
+
     taskListNew.splice(i, 1);
-    setTaskList(taskListNew);
+    setMyTaskList(taskListNew);
+    setFieldsValue(reWriteInfo);
   }
 
   function changeTaskItem(field, val, i) {
-    let taskListNew = [...taskList];
+    let taskListNew = [...myTaskList];
     taskListNew[i][field] = val;
-    setTaskList(taskListNew);
+    setMyTaskList(taskListNew);
   }
 
   return (
     <div className="glcc_student_apply">
       <img className="glcc-banner" src={banner} alt=''></img>
-      <div className='apply'>
+      <Spin spinning={loading}>
-        <Breadcrumb className='glcc_breadcrumb font-16'>
+        <div className='apply'>
-          <Breadcrumb.Item><a href="/glcc">开源夏令营</a></Breadcrumb.Item>
+          <Breadcrumb className='glcc_breadcrumb font-16'>
-          <Breadcrumb.Item><a href="/glcc">查看项目</a></Breadcrumb.Item>
+            <Breadcrumb.Item><Link to="/glcc">开源夏令营</Link></Breadcrumb.Item>
-          <Breadcrumb.Item>学生报名</Breadcrumb.Item>
+            <Breadcrumb.Item><Link to="/glcc/student/2">查看项目</Link></Breadcrumb.Item>
-        </Breadcrumb>
+            <Breadcrumb.Item>学生报名</Breadcrumb.Item>
+          </Breadcrumb>
 
-        <div className="head_introduce">
+          <div className="head_introduce">
-          <h4 className="head_tit">申请说明：</h4>
+            <h4 className="head_tit">申请说明：</h4>
-          <div className="head_content">1、学生报名时间为<span className="head_bold">2022年5月21日-6月19日</span>，请在报名截止时间（北京时间<span className="head_bold">2022年6月19日18点</span>）前提交报名信息。</div>
+            <div className="head_content">1、学生报名时间为<span className="head_bold">2022年5月21日-6月19日</span>，请在报名截止时间（北京时间<span className="head_bold">2022年6月19日18点</span>）前提交报名信息。</div>
-          <div className="head_content">2、本次GLCC夏令营基于GitLink代码托管平台完成编程任务，若您没有平台账户，请先注册后完成课题申请</div>
+            <div className="head_content">2、本次GLCC夏令营基于GitLink代码托管平台完成编程任务，若您没有平台账户，请先注册后完成课题申请</div>
-          <div className="head_content">3、每位学员最多可申请2个课题，至多有且仅有1个课题可以入选</div>
+            <div className="head_content">3、每位学员最多可申请2个课题，至多有且仅有1个课题可以入选</div>
-          <div className="head_content">4、建议在提交课题申请，与课题导师邮件沟通，详细了解课题描述、编码任务、技能要求&编程语言、预期产出结果等信息，以便您能够选择最适合的课题</div>
+            <div className="head_content">4、建议在提交课题申请，与课题导师邮件沟通，详细了解课题描述、编码任务、技能要求&编程语言、预期产出结果等信息，以便您能够选择最适合的课题</div>
-          <div className="head_content">5、提交申请后，请耐心等待，我们会在2022年7月1日公布入围结果。如有任何问题，请添加开源夏令营微信群进行咨询</div>
+            <div className="head_content">5、提交申请后，请耐心等待，我们会在2022年7月1日公布入围结果。如有任何问题，请添加开源夏令营微信群进行咨询</div>
-        </div>
+          </div>
-        <div className="main-tit">
+          <div className="main-tit">
-          <img src={studentSvg} /><span className="tit-text">学生报名</span>
+            <img src={studentSvg} /><span className="tit-text">学生报名</span>
-        </div>
+          </div>
-        <div className="form-tit">申请课题</div>
+          <div className="form-tit">申请课题</div>
-        <Form className="glcc_info_form" onSubmit={handleSubmit}>
+          <Form className="glcc_info_form" onSubmit={handleSubmit}>
-          <h4 className="item-tit">基本信息</h4>
+            <h4 className="item-tit">基本信息</h4>
-          {helper('学生姓名',
+            {helper('学生姓名',
-            '',
+              '',
-            'studentName',
+              'studentName',
-            [{ required: true, message: "请正确输入学生姓名" },
+              [{ required: true, message: "请正确输入学生姓名" },
-            { max: 32, message: '超出限制长度32位字符，请重新编辑' }],
+              { max: 32, message: '超出限制长度32位字符，请重新编辑' }],
-            <Input placeholder="请输入学生姓名" onBlur={() => { verify("studentName") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
+              <Input placeholder="请输入学生姓名" onBlur={() => { verify("studentName") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
-          )}
+            )}
-          {helper('所在高校',
+            {helper('所在高校',
-            '',
+              '',
-            'school',
+              'school',
-            [{ required: true, message: "请正确输入所在高校" },
+              [{ required: true, message: "请正确输入所在高校" },
-            { max: 32, message: '超出限制长度32位字符，请重新编辑' }],
+              { max: 32, message: '超出限制长度32位字符，请重新编辑' }],
-            <Input placeholder="请输入所在高校" onBlur={() => { verify("school") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
+              <Input placeholder="请输入所在高校" onBlur={() => { verify("school") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
-          )}
+            )}
-          {helper('所学专业',
+            {helper('所学专业',
-            '',
+              '',
-            'profession',
+              'profession',
-            [{ max: 32, message: '超出限制长度32位字符，请重新编辑' }],
+              [{ max: 32, message: '超出限制长度32位字符，请重新编辑' }],
-            <Input placeholder="请输入所学专业" onBlur={() => { verify("profession") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
+              <Input placeholder="请输入所学专业" onBlur={() => { verify("profession") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
-          )}
+            )}
-          <Form.Item label="地区">
+            <Form.Item label="地区">
-            {getFieldDecorator("location", {
+              {getFieldDecorator("location", {
-              rules: []
+                rules: []
-            })(
+              })(
-              <Cascader placeholder="请选择省份城市" options={locData} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
+                <Cascader placeholder="请选择省份城市" options={locData} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
+              )}
+            </Form.Item>
+            {helper('所在年级',
+              '',
+              'grade',
+              [],
+              <Select placeholder="请选择所在年级" disabled={editable ? false : true} className={editable ? "" : "disabledInput"}>
+                {gradeList.map(item => { return <Option value={item.name} key={item.id}>{item.name}</Option> })}
+              </Select>
+            )}
+            {helper('联系电话',
+              '',
+              'phone',
+              [{ required: true, message: "请正确输入联系电话" }],
+              <Input placeholder="请输入联系电话" onBlur={() => { verify("phone") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
+            )}
+            {helper('邮箱地址',
+              '',
+              'mail',
+              [{ required: true, message: "请正确输入邮箱地址" }],
+              <Input placeholder="请输入邮箱地址" onBlur={() => { verify("mail") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
             )}
-          </Form.Item>
-          {helper('所在年级',
-            '',
-            'grade',
-            [],
-            <Select placeholder="请选择所在年级" disabled={editable ? false : true} className={editable ? "" : "disabledInput"}>
-              {gradeList.map(item => { return <Option value={item.name} key={item.id}>{item.name}</Option> })}
-            </Select>
-          )}
-          {helper('联系电话',
-            '',
-            'phone',
-            [{ required: true, message: "请正确输入联系电话" }],
-            <Input placeholder="请输入联系电话" onBlur={() => { verify("phone") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
-          )}
-          {helper('邮箱地址',
-            '',
-            'mail',
-            [{ required: true, message: "请正确输入邮箱地址" }],
-            <Input placeholder="请输入邮箱地址" onBlur={() => { verify("mail") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
-          )}
 
-          <div className='introArea update_item'>{helper('学生证明',
+            <div className='introArea update_item'>{helper('学生证明',
-            '请以图片的形式上传学生证明，格式为png、jpg、jpeg',
+              '请以图片的形式上传学生证明，格式为png、jpg、jpeg',
-            'proveAttachmentId',
+              'proveAttachmentId',
-            [{ required: true, message: "请正确上传学生证明" }],
+              [{ required: true, message: "请正确上传学生证明" }],
-            userApplyInfo && userApplyInfo.proveAttachmentId ? <div className='projectLogo'><img src={`${main_site_url}/api/attachments/${userApplyInfo.proveAttachmentId}`} alt='' /></div>
+              userApplyInfo && userApplyInfo.proveAttachmentId ? <div className='projectLogo'><img src={`${getUrl()}/api/attachments/${userApplyInfo.proveAttachmentId}`} alt='' /></div>
-              : <Upload
+                : <Upload
-                listType="picture-card"
+                  listType="picture-card"
-                className="avatar-uploader"
+                  className="avatar-uploader"
-                showUploadList={false}
+                  showUploadList={false}
-                action={getUploadActionUrl()}
+                  action={getUploadActionUrl()}
-                accept=".png,.jpg,.jpeg"
+                  accept=".png,.jpg,.jpeg"
-                beforeUpload={beforeUpload}
+                  beforeUpload={beforeUpload}
-                onChange={handleChange}
+                  onChange={handleChange}
-              >
+                >
-                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ maxWidth: '100px', maxHeight: '100px' }} /> : <div>
+                  {imageUrl ? <img src={imageUrl} alt="avatar" style={{ maxWidth: '100px', maxHeight: '100px' }} /> : <div>
-                  <i className='iconfont icon-tianjiadaohang font-30'></i>
+                    <i className='iconfont icon-tianjiadaohang font-30'></i>
-                  <div className="ant-upload-text font-13">请上传学生证明</div>
+                    <div className="ant-upload-text font-13">请上传学生证明</div>
-                </div>}
+                  </div>}
-              </Upload>
+                </Upload>
-          )}</div>
+            )}</div>
 
-          {
+            {
-            taskList.map((item, i) => {
+              myTaskList.map((item, i) => {
-              return (
+                return (
-                <Fragment>
+                  <Fragment key={item.taskId + '' + i}>
-                  <h4 className="item-tit">课题信息（{i + 1}/2) {taskList.length > 1 && <i className="iconfont icon-shanchu" onClick={() => { deleteTask(i) }}></i>}</h4>
+                    <h4 className="item-tit">课题信息（<span className="item-tit-num">{i + 1}</span>/2) {myTaskList.length > 1 && <i className="iconfont icon-shanchu" onClick={() => { deleteTask(i) }}></i>}</h4>
-                  {helper('课题名称',
+                    {helper('课题名称',
-                    '',
+                      '',
-                    'taskName' + i,
+                      'taskId' + i,
-                    [{ required: true, message: "请正确输入课题名称" }],
+                      [{ required: true, message: "请选择课题名称" }],
-                    <Input placeholder="请输入课题名称" onBlur={(e) => { verify("taskName" + i); changeTaskItem("taskName", e.currentTarget.value, i) }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
+                      <Select
-                  )}
+                        placeholder="请选择课题名称"
-                  <div className='introArea'>{helper('自荐书',
+                        showSearch
-                    '',
+                        disabled={editable ? false : true}
-                    'memo' + i,
+                        className={editable ? "" : "disabledInput"}
-                    [{ required: true, message: "请正确输入自荐书" },
+                        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) > -1}
-                    { max: 500, message: '超出限制长度500位字符，请重新编辑' }],
+                        onBlur={() => { verify("taskId" + i) }}
-                    <TextArea placeholder="请填写你的优势和能力，不超过500字" onBlur={(e) => { verify("memo" + i); changeTaskItem("memo", e.currentTarget.value, i) }} rows={4} className={editable ? "" : "disabledInput"} />
+                        onChange={(val) => { changeTaskItem("taskId", val, i) }}
-                  )}</div>
+                      >
+                        {allTaskList.map(item => { return <Option value={item.id} key={item.id + ''}>{item.taskName}</Option> })}
+                      </Select>
+                    )}
+                    <div className='introArea'>{helper('自荐书',
+                      '',
+                      'memo' + i,
+                      [{ required: true, message: "请正确输入自荐书" },
+                      { max: 500, message: '超出限制长度500位字符，请重新编辑' }],
+                      <TextArea placeholder="请填写你的优势和能力，不超过500字" onBlur={(e) => { verify("memo" + i); changeTaskItem("memo", e.currentTarget.value, i) }} rows={4} className={editable ? "" : "disabledInput"} />
+                    )}</div>
 
-                  <div className='introArea'>{helper('附件',
+                    <div className='introArea'>{helper('附件',
-                    '',
+                      '',
-                    'memoAttachmentId' + i,
+                      'memoAttachmentId' + i,
-                    [],
+                      [],
-                    <Upload
+                      <Upload
-                      accept=".zip,.rar"
+                        accept=".zip,.rar"
-                      action={getUploadActionUrl()}
+                        action={getUploadActionUrl()}
-                      fileList={files}
+                        fileList={i ? files1 : files}
-                      onChange={bookChange}
+                        onChange={(info) => { bookChange(info, i) }}
-                      onDownload={download}
+                        onDownload={download}
-                      showUploadList={{
+                        showUploadList={{
-                        showDownloadIcon: true,
+                          showDownloadIcon: true,
-                        downloadIcon: <i className="iconfont icon-xiazai-icon"></i>,
+                          downloadIcon: <i className="iconfont icon-xiazai-icon"></i>,
-                        showRemoveIcon: true
+                          showRemoveIcon: true
-                      }}
+                        }}
-                    >
+                      >
-                      <div className="glcc_btn">上传自荐书</div>
+                        <div className="glcc_btn">上传自荐书</div>
-                    </Upload>
+                      </Upload>
-                  )}</div>
+                    )}</div>
-                </Fragment>
+                  </Fragment>
-              )
+                )
-            })
+              })
-          }
+            }
 
-          {
+            {
-            taskList.length < 2 && <Button className="add_task" type="primary" onClick={addTask}>添加课题</Button>
+              myTaskList.length < 2 && <Button className="add_task" type="primary" onClick={addTask}>添加课题</Button>
-          }
+            }
 
-          {!userApplyInfo && <Form.Item className='subInfo introArea'>
+            <Form.Item className='subInfo introArea'>
-            <Button type="primary" htmlType="submit" className='sub' >提交</Button>
+              <Button type="primary" htmlType="submit" className='sub' disabled={!editable}>提交</Button>
-          </Form.Item>}
+            </Form.Item>
-        </Form>
+          </Form>
 
-      </div>
+        </div>
+      </Spin>
     </div>
   )
 }

src/glcc/student/index.scss

@@ -89,6 +89,10 @@
       margin-right: 10px;
       background-color: #466aff;
     }
+
+    .item-tit-num{
+      color:#466aff;
+    }
   }
   .glcc_info_form {
     padding: 0 15px;
@@ -260,7 +264,7 @@
   }
 
   .add_task{
-    margin-left:75px;
+    margin-left:90px;
   }
 
   .icon-shanchu{