forked from Gitlink/forgeplus-react
开源夏令营报名页面
This commit is contained in:
谢思
parent
d91446dc12
commit
5edf45988e
|
|
@ -0,0 +1,117 @@
|
|||
import React , { useCallback, useEffect , useState } from 'react';
|
||||
import { Breadcrumb, Button, Form, Icon, Input, Select, Upload } from 'antd';
|
||||
import {classify} from '../static';
|
||||
import Axios from 'axios';
|
||||
import './index.scss';
|
||||
import TextArea from 'antd/lib/input/TextArea';
|
||||
const Option = Select.Option;
|
||||
function Apply(props) {
|
||||
console.log(props);
|
||||
const {form, qzDetail, enrollStatus, setReload, current_user, history} = props;
|
||||
const {getFieldDecorator, validateFields, setFieldsValue, validateFieldsAndScroll } = form;
|
||||
const [imageUrl, setImageUrl] = useState(undefined);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const helper = useCallback(
|
||||
(label, extra, name, rules, widget) => (
|
||||
<Form.Item label={label} extra={extra}>
|
||||
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
|
||||
</Form.Item>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
// 当用户输入结束时 检验用户输入是否符合规范
|
||||
function verify(dataIndex){
|
||||
validateFields([dataIndex],(error, values)=>{
|
||||
if(error && error[dataIndex]){
|
||||
return;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleSubmit(e){
|
||||
e.preventDefault();
|
||||
validateFieldsAndScroll((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values);
|
||||
}
|
||||
});
|
||||
};
|
||||
return(
|
||||
<div className="glcc_apply">
|
||||
<div className='apply'>
|
||||
<Breadcrumb className='pt20'>
|
||||
<Breadcrumb.Item><a href="/glcc">开源夏令营</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item>项目报名</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<Form className="pt20 glcc_info_form" onSubmit={handleSubmit}>
|
||||
{helper('项目名称',
|
||||
'',
|
||||
'name',
|
||||
[{ required: true, message: "请正确输入项目名称" },
|
||||
{ max: 32, message: '超出限制长度32位字符，请重新编辑' }],
|
||||
<Input placeholder="请输入项目名称" onBlur={()=>{verify("name")}}/>
|
||||
)}
|
||||
{helper('项目分类',
|
||||
'',
|
||||
'classify',
|
||||
[],
|
||||
<Select placeholder="请选择项目分类">
|
||||
{classify.map((item,i)=> {return <Option value={item.value} key={i}>{item.value}</Option>})}
|
||||
</Select>
|
||||
)}
|
||||
{helper('官网地址',
|
||||
'',
|
||||
'area',
|
||||
[],
|
||||
<Input placeholder="请输入官网地址"/>
|
||||
)}
|
||||
{helper('GitLink地址',
|
||||
'',
|
||||
'gitlink',
|
||||
[{ required: true, message: "请正确输入GitLink地址" }],
|
||||
<Input placeholder="请输入GitLink地址" onBlur={()=>{verify("gitlink")}}/>
|
||||
)}
|
||||
<div className='introArea'>{helper('项目简介',
|
||||
'',
|
||||
'intro',
|
||||
[{ required: true, message: "请正确输入项目简介" },
|
||||
{ max: 200, message: '超出限制长度200位字符，请重新编辑' }],
|
||||
<TextArea placeholder="请输入项目简介" onBlur={()=>{verify("intro")}} rows={4}/>
|
||||
)}</div>
|
||||
<div className='introArea'>{helper('项目logo',
|
||||
'logo格式为png、jpg、jpeg，限制上传大小2m，建议上传尺寸为382*228',
|
||||
'logo',
|
||||
[{ required: true, message: "请正确输入项目简介" }],
|
||||
<Upload
|
||||
name="avatar"
|
||||
listType="picture-card"
|
||||
className="avatar-uploader"
|
||||
showUploadList={false}
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
// beforeUpload={beforeUpload}
|
||||
// onChange={this.handleChange}
|
||||
>
|
||||
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : <div>
|
||||
<i className='iconfont icon-tianjiadaohang font-30'></i>
|
||||
<div className="ant-upload-text font-13">请上传logo图片</div>
|
||||
</div>}
|
||||
</Upload>
|
||||
)}</div>
|
||||
<p className='introArea tips'>注: 课题及导师信息请在Gitlink项目中以issue的形式编辑</p>
|
||||
<Form.Item className='subInfo introArea'>
|
||||
<Button type="primary" htmlType="submit" className='sub'>提交</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div className='explain'>
|
||||
<p className='font-15 c000'>申请说明</p>
|
||||
<div>1、项目报名时间为<span className='c000'>4月15日—5月8日</span>，请在报名截止时间（北京时间<span className='c000'>2022年5月8日18点</span>）前提交报名信息。</div>
|
||||
<div>2、本次夏令营使用Gitlink为代码托管平台，学员基于Gitlink上项目数量完成课程任务。如果您的项目还未在Gitlink中，请现将项目迁移到Gitlink，迁移事项请查看迁移说明文档。如在迁移过程中遇到问题，请加qq群：1071514693 联系qq群管理员。</div>
|
||||
<div>3、提交社区和项目信息后，欢迎与组委会联系沟通本次编程夏令营宣传推广和后续合作工作。联系人：_TigerWang（微信号，添加请备注Gitlink编程夏令营）</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Form.create()(Apply);
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
.glcc_apply{
|
||||
background-image: linear-gradient(180deg,#ebf2ff 0%,#ebf2ff 43.09%,#f3f4f8 100%);
|
||||
padding-bottom: 120px;
|
||||
.apply{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.glcc_info_form{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -40px;
|
||||
.ant-row.ant-form-item{
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
width: 50%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.ant-col.ant-form-item-control-wrapper {
|
||||
width: 80%;
|
||||
}
|
||||
.ant-form-item-label{
|
||||
width: 90px;
|
||||
margin-right: 15px;
|
||||
&> label::after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
.ant-upload.ant-upload-select-picture-card{
|
||||
margin-bottom: 0;
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
}
|
||||
.icon-tianjiadaohang:before{color: #b3c3db;}
|
||||
.ant-upload-text{color: #a4aabb;}
|
||||
.ant-input, .ant-select-selection, .ant-upload.ant-upload-select-picture-card{background: none !important;}
|
||||
}
|
||||
.introArea{
|
||||
width: 100%;
|
||||
.ant-row.ant-form-item{width: auto;
|
||||
justify-content: flex-start;}
|
||||
.ant-col.ant-form-item-control-wrapper {
|
||||
width: 90%;
|
||||
}
|
||||
.ant-form-item-label{width: 105px;}
|
||||
&.tips{
|
||||
margin-left: 40px;
|
||||
color:#e90000;
|
||||
}
|
||||
}
|
||||
.glcc_info_form .introArea.subInfo{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 40px 0 70px -60px;
|
||||
.sub{
|
||||
width: 200px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
.explain{
|
||||
background-color:#f6f9fe;
|
||||
border:2px solid;
|
||||
border-color:#ffffff;
|
||||
color:#6c7283;
|
||||
padding: 20px 30px 30px 20px;
|
||||
.c000{color: #000000;}
|
||||
div>.c000{font-weight: bold;}
|
||||
>div{margin: 10px 0;}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,6 +18,11 @@ const Home = Loadable({
|
|||
loader: () => import("./home"),
|
||||
loading: Loading,
|
||||
});
|
||||
{/* 开源夏令营报名页面 */}
|
||||
const Apply = Loadable({
|
||||
loader: () => import("./apply"),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
|
||||
const Glcc = (propsF) => {
|
||||
|
|
@ -25,6 +30,13 @@ const Glcc = (propsF) => {
|
|||
return (
|
||||
<div className="newMain clearfix">
|
||||
<Switch {...propsF}>
|
||||
|
||||
<Route
|
||||
path="/glcc/apply"
|
||||
render={(props) => (
|
||||
<Apply {...propsF} {...props} />
|
||||
)}
|
||||
></Route>
|
||||
{/* 首页 */}
|
||||
<Route
|
||||
path="/glcc"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
export const classify = [
|
||||
{ value: '0', title: "程序开发"},
|
||||
{ value: '1', title: "Web应用开发"},
|
||||
{ value: '2', title: "数据库"},
|
||||
{ value: '3', title: "操作系统"},
|
||||
];
|
||||
Loading…
Reference in New Issue