forked from Gitlink/forgeplus-react
修改报名信息
This commit is contained in:
何童崇
commit
299fb1358d
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2340181 */
|
||||
src: url('iconfont.woff2?t=1651041108151') format('woff2'),
|
||||
url('iconfont.woff?t=1651041108151') format('woff'),
|
||||
url('iconfont.ttf?t=1651041108151') format('truetype');
|
||||
src: url('iconfont.woff2?t=1652687271594') format('woff2'),
|
||||
url('iconfont.woff?t=1652687271594') format('woff'),
|
||||
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";
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ 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) => {
|
||||
|
|
@ -31,15 +34,39 @@ export default (props) => {
|
|||
<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日")}}> */}
|
||||
<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>
|
||||
</div>
|
||||
{/* </Link> */}
|
||||
{/* </div> */}
|
||||
<div className="introduce glcc-content">
|
||||
<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 />
|
||||
|
|
|
|||
|
|
@ -17,23 +17,69 @@
|
|||
.ant-btn-primary{
|
||||
background-color: #466aff;
|
||||
border-color: #466aff;
|
||||
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
.applyBox {
|
||||
position: absolute;
|
||||
top: 15vw;
|
||||
left: 18.8vw;
|
||||
width: 152px;
|
||||
height: 40px;
|
||||
background-color: #2e5bfe;
|
||||
border: 1px solid #466aff;
|
||||
color: #fff;
|
||||
top: 21vw;
|
||||
left: 17.5vw;
|
||||
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;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
background-image: linear-gradient(
|
||||
163.51deg,
|
||||
#e5ecff 0%,
|
||||
#e0e9ff 32.91%,
|
||||
#fbfcff 100%
|
||||
);
|
||||
background: url("../img/introduce-bg.png");
|
||||
box-shadow: 0 0 12px rgba(161, 186, 255, 0.6);
|
||||
background-size: 100% 100%;
|
||||
padding: 48px;
|
||||
// z-index: 1;
|
||||
// position: relative;
|
||||
// top: -45px;
|
||||
// background-image: linear-gradient(
|
||||
// 163.51deg,
|
||||
// #e5ecff 0%,
|
||||
// #e0e9ff 32.91%,
|
||||
// #fbfcff 100%
|
||||
// );
|
||||
// background: url("../img/introduce-bg.png");
|
||||
// box-shadow: 0 0 12px rgba(161, 186, 255, 0.6);
|
||||
// background-size: 100% 100%;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 479 KiB After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 384 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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'>导师姓名: {item.tutorName}</div>
|
||||
<div className='mb20 email'>邮箱地址: <span>{item.tutorMail}</span></div>
|
||||
</div>
|
||||
<div className="center">
|
||||
<div className="taskDesc">{item.taskDesc}</div>
|
||||
<div className="taskUrl">课题链接: <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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 { getUploadActionUrl, appendFileSizeToUploadFileAll } from 'educoder';
|
||||
import { Breadcrumb, Button, Form, Input, Select, Upload, Cascader, Spin } from 'antd';
|
||||
import { getUploadActionUrl, getUrl, appendFileSizeToUploadFileAll } from 'educoder';
|
||||
import { locData } from '../../forge/Utils/locData';
|
||||
import { getStudentApplyInfo, applyGlcc } from '../api';
|
||||
import axios from 'axios';
|
||||
import { getStudentApplyInfo, taskList, studentApply, studentApplyEdit } from '../api';
|
||||
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,7 +74,7 @@ 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,
|
||||
|
|
@ -69,23 +83,56 @@ function Apply(props) {
|
|||
userId: current_user.user_id,
|
||||
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;
|
||||
|
||||
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({
|
||||
// title: "报名",
|
||||
// content: "确定提交报名信息，提交后您仍可修改",
|
||||
// onOk: () => {
|
||||
setLoading(true);
|
||||
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 (response && response.message === "success") {
|
||||
// showNotification("报名成功");
|
||||
// setReload(Math.random());
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
|
||||
console.log(params);
|
||||
|
||||
if (userApplyInfo) {
|
||||
params.id=userApplyInfo.id;
|
||||
studentApplyEdit(params).then(response => {
|
||||
if (response && response.message === "success") {
|
||||
showNotification("修改信息成功");
|
||||
setReload(Math.random());
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
} 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,12 +222,20 @@ 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);
|
||||
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,34 +244,68 @@ 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() {
|
||||
let taskListNew = [...taskList];
|
||||
function addTask(List) {
|
||||
let taskListNew = List ? [...List] : [...myTaskList];
|
||||
if (taskId != taskListNew[0].taskId) {
|
||||
taskListNew.push(initTask);
|
||||
setTaskList(taskListNew);
|
||||
// 先增加数据再给选择框赋默认值，否则不生效
|
||||
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>
|
||||
<Spin spinning={loading}>
|
||||
<div className='apply'>
|
||||
<Breadcrumb className='glcc_breadcrumb font-16'>
|
||||
<Breadcrumb.Item><a href="/glcc">开源夏令营</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item><a href="/glcc">查看项目</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item><Link to="/glcc">开源夏令营</Link></Breadcrumb.Item>
|
||||
<Breadcrumb.Item><Link to="/glcc/student/2">查看项目</Link></Breadcrumb.Item>
|
||||
<Breadcrumb.Item>学生报名</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
|
||||
|
|
@ -286,7 +375,7 @@ function Apply(props) {
|
|||
'请以图片的形式上传学生证明，格式为png、jpg、jpeg',
|
||||
'proveAttachmentId',
|
||||
[{ 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
|
||||
listType="picture-card"
|
||||
className="avatar-uploader"
|
||||
|
|
@ -304,15 +393,25 @@ function Apply(props) {
|
|||
)}</div>
|
||||
|
||||
{
|
||||
taskList.map((item, i) => {
|
||||
myTaskList.map((item, i) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<h4 className="item-tit">课题信息（{i + 1}/2) {taskList.length > 1 && <i className="iconfont icon-shanchu" onClick={() => { deleteTask(i) }}></i>}</h4>
|
||||
<Fragment key={item.taskId + '' + i}>
|
||||
<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('课题名称',
|
||||
'',
|
||||
'taskName' + i,
|
||||
[{ required: true, message: "请正确输入课题名称" }],
|
||||
<Input placeholder="请输入课题名称" onBlur={(e) => { verify("taskName" + i); changeTaskItem("taskName", e.currentTarget.value, i) }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} />
|
||||
'taskId' + i,
|
||||
[{ required: true, message: "请选择课题名称" }],
|
||||
<Select
|
||||
placeholder="请选择课题名称"
|
||||
showSearch
|
||||
disabled={editable ? false : true}
|
||||
className={editable ? "" : "disabledInput"}
|
||||
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) > -1}
|
||||
onBlur={() => { verify("taskId" + i) }}
|
||||
onChange={(val) => { changeTaskItem("taskId", val, i) }}
|
||||
>
|
||||
{allTaskList.map(item => { return <Option value={item.id} key={item.id + ''}>{item.taskName}</Option> })}
|
||||
</Select>
|
||||
)}
|
||||
<div className='introArea'>{helper('自荐书',
|
||||
'',
|
||||
|
|
@ -329,8 +428,8 @@ function Apply(props) {
|
|||
<Upload
|
||||
accept=".zip,.rar"
|
||||
action={getUploadActionUrl()}
|
||||
fileList={files}
|
||||
onChange={bookChange}
|
||||
fileList={i ? files1 : files}
|
||||
onChange={(info) => { bookChange(info, i) }}
|
||||
onDownload={download}
|
||||
showUploadList={{
|
||||
showDownloadIcon: true,
|
||||
|
|
@ -347,15 +446,16 @@ function Apply(props) {
|
|||
}
|
||||
|
||||
{
|
||||
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'>
|
||||
<Button type="primary" htmlType="submit" className='sub' >提交</Button>
|
||||
</Form.Item>}
|
||||
<Form.Item className='subInfo introArea'>
|
||||
<Button type="primary" htmlType="submit" className='sub' disabled={!editable}>提交</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
Loading…
Reference in New Issue