From 5edf45988e84d064c7ae7f5a44d6da1fb76b41ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <xiesi@csxjy.com>
Date: Fri, 8 Apr 2022 13:47:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E6=BA=90=E5=A4=8F=E4=BB=A4=E8=90=A5?=
 =?UTF-8?q?=E6=8A=A5=E5=90=8D=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/glcc/apply/index.jsx  | 117 ++++++++++++++++++++++++++++++++++++++
 src/glcc/apply/index.scss |  69 ++++++++++++++++++++++
 src/glcc/index.jsx        |  12 ++++
 src/glcc/static.js        |   6 ++
 4 files changed, 204 insertions(+)
 create mode 100644 src/glcc/apply/index.jsx
 create mode 100644 src/glcc/apply/index.scss
 create mode 100644 src/glcc/static.js

diff --git a/src/glcc/apply/index.jsx b/src/glcc/apply/index.jsx
new file mode 100644
index 00000000..47bfc21c
--- /dev/null
+++ b/src/glcc/apply/index.jsx
@@ -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);
\ No newline at end of file
diff --git a/src/glcc/apply/index.scss b/src/glcc/apply/index.scss
new file mode 100644
index 00000000..55eb117a
--- /dev/null
+++ b/src/glcc/apply/index.scss
@@ -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;}
+    }
+}
\ No newline at end of file
diff --git a/src/glcc/index.jsx b/src/glcc/index.jsx
index fad006c5..76508eb4 100644
--- a/src/glcc/index.jsx
+++ b/src/glcc/index.jsx
@@ -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"
diff --git a/src/glcc/static.js b/src/glcc/static.js
new file mode 100644
index 00000000..777fd526
--- /dev/null
+++ b/src/glcc/static.js
@@ -0,0 +1,6 @@
+export const classify = [
+    { value: '0', title: "程序开发"},
+    { value: '1', title: "Web应用开发"},
+    { value: '2', title: "数据库"},
+    { value: '3', title: "操作系统"},
+  ];
\ No newline at end of file