fix some ui

src/Entry.js

@@ -1,33 +1,44 @@
-import React from 'react';
-import Sheet from './components/Sheet';
-import { BackTop,Layout} from 'antd';
-import Background from './background2.jpg';
-import UploadToOSS from './components/UploadToOSS'
+import React from "react";
+import Sheet from "./components/Sheet";
+import { BackTop, Layout } from "antd";
+import Background from "./background2.jpg";
+import UploadToOSS from "./components/UploadToOSS";
 
 class Entry extends React.Component {
   state = {
-    stuid : null,
-  }
-  setID = (value) =>{
-    this.setState({stuid:value})
-  }
+    stuid: null,
+  };
+  setID = (value) => {
+    this.setState({ stuid: value });
+  };
   render() {
     return (
-      <Layout style={{backgroundImage: `url(${Background})`}}>
-        <div style={{background:'#fff',borderRadius:20,
-        paddingTop:48, paddingLeft:24, paddingRight:24, marginTop: 24, marginLeft: 24, marginRight: 24,marginBottom:24,opacity:0.75 }} >
-          <h2 class="ant-typography" style={{ textAlign: 'center' }}>
+      <Layout style={{ backgroundImage: `url(${Background})` }}>
+        <div
+          style={{
+            background: "rgba(255,255,255,0.85)",
+            borderRadius: 20,
+            paddingTop: 48,
+            paddingLeft: 24,
+            paddingRight: 24,
+            marginTop: 24,
+            marginLeft: 24,
+            marginRight: 24,
+            marginBottom: 24,
+          }}
+        >
+          <h2 class="ant-typography" style={{ textAlign: "center" }}>
             浙江大学学生E志者协会2020年纳新报名表
           </h2>
           <center>
             <UploadToOSS stuid={this.state.stuid} />
           </center>
-          <Sheet setID = {this.setID} />
+          <Sheet setID={this.setID} />
           <BackTop visibilityHeight={200} />
-          <p style={{textAlign: 'center'}}>
+          <p style={{ textAlign: "center" }}>
             浙江大学学生E志者协会©2020 Created by EVATech
           </p>
-        </ div>
+        </div>
       </Layout>
     );
   }

src/Home/data.source.js

@@ -934,7 +934,7 @@ export const Feature80DataSource = {
                     children: (
                       <a href="https://mp.weixin.qq.com/s/xGDr9QoajBd83RHuZPIZKg">
                         <p>
-                          &nbsp; &nbsp; 积极追求参与竞赛等创新实践活动
+                          积极追求参与竞赛等创新实践活动
                           <br />
                         </p>
                       </a>

src/components/ChooseTime.js

@@ -1,24 +1,33 @@
 import React from "react";
 import axios from "axios";
-import { Button, Form, Spin, message,Checkbox,Alert,BackTop,Layout,Card } from "antd";
+import {
+  Button,
+  Form,
+  Spin,
+  message,
+  Checkbox,
+  Alert,
+  BackTop,
+  Layout,
+  Card,
+} from "antd";
 import "antd/dist/antd.css";
 import { confirmAlert } from "react-confirm-alert";
 import "react-confirm-alert/src/react-confirm-alert.css";
 import qs from "qs";
-import Background from '../background2.jpg';
-import { withRouter } from 'react-router-dom'
+import Background from "../background2.jpg";
+import { withRouter } from "react-router-dom";
 
-
-const Wishes = ["电脑部","电器部","文宣部","人资部","财外部"]
+const Wishes = ["电脑部", "电器部", "文宣部", "人资部", "财外部"];
 class TimePicker extends React.Component {
-  constructor(){
-    super()
-    this.state = {confirmed:false} 
+  constructor() {
+    super();
+    this.state = { confirmed: false };
   }
 
-  componentDidMount(){
-  this.queryInfo()
-  this.queryTime()
+  componentDidMount() {
+    this.queryInfo();
+    this.queryTime();
   }
 
   handleSubmit = (e) => {
@@ -26,8 +35,7 @@ class TimePicker extends React.Component {
     const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
     confirmAlert({
       title: "提交面试时间",
-      message:
-        "点击 Yes 进行提交。",
+      message: "点击 Yes 进行提交。",
       buttons: [
         {
           label: "Yes",
@@ -36,10 +44,10 @@ class TimePicker extends React.Component {
               if (err) {
                 message.error("填写不正确，请按照提示修改");
               } else {
-                var Times = []
-                for(var i in values){
-                  for(var j = 0;j < values[i].length;j++)
-                  Times = Times.concat(values[i][j])
+                var Times = [];
+                for (var i in values) {
+                  for (var j = 0; j < values[i].length; j++)
+                    Times = Times.concat(values[i][j]);
                 }
                 let addForm = async () => {
                   let result = await axios("api/posttime", {
@@ -47,20 +55,25 @@ class TimePicker extends React.Component {
                       "Content-Type": "application/x-www-form-urlencoded",
                     },
                     method: "POST",
-                    data: qs.stringify({ dto:JSON.stringify({Times:Times}),guid:this.props.match.params.guid}),
+                    data: qs.stringify({
+                      dto: JSON.stringify({ Times: Times }),
+                      guid: this.props.match.params.guid,
+                    }),
                   });
 
                   if (result.data.status === "success") {
-                    message.success(
-                      "提交成功！期待你的精彩面试表现！"
-                    );
+                    message.success("提交成功！期待你的精彩面试表现！");
+                  } else if (
+                    result.data.data.errorMsg === "TIME_ALREAY_CONFIRM"
+                  ) {
+                    message.error("我们已经为您分配了场次，请留意短信通知");
                   } else {
                     message.error("提交失败！可能是网络问题。");
                   }
                 };
-                if(Times.length !== 0){
-                  addForm()
-                }else{
+                if (Times.length !== 0) {
+                  addForm();
+                } else {
                   message.error("请至少选择一个场次！");
                 }
               }
@@ -75,66 +88,62 @@ class TimePicker extends React.Component {
     });
   };
   queryTime = async () => {
-    let result = await axios(
-          'api/gettime',
-          {
-              method: 'GET',
-          }
-      )
-      if(result.data.status === "success") {
-        var timetable = []
-        for(var time of result.data.data){
-          for(var index = 0;index < timetable.length;index++){
-            if(timetable[index].day === time.day){
-              for(var i = 0 ; i < timetable[index].time.length;i++){
-                if(time.beginTime === timetable[index].time[i].label){
-                  timetable[index].time[i].value.push(time.id)
-                  break
-                }
+    let result = await axios("api/gettime", {
+      method: "GET",
+    });
+    if (result.data.status === "success") {
+      var timetable = [];
+      for (var time of result.data.data) {
+        for (var index = 0; index < timetable.length; index++) {
+          if (timetable[index].day === time.day) {
+            for (var i = 0; i < timetable[index].time.length; i++) {
+              if (time.beginTime === timetable[index].time[i].label) {
+                timetable[index].time[i].value.push(time.id);
+                break;
               }
-              if(i === timetable[index].time.length){
-                timetable[index].time.push({label:time.beginTime,value:[time.id]})
-              }
-              break
             }
-          }
-          if(index === timetable.length){
-            timetable.push({ day:time.day,time:[{label:time.beginTime,value:[time.id]}]})
+            if (i === timetable[index].time.length) {
+              timetable[index].time.push({
+                label: time.beginTime,
+                value: [time.id],
+              });
+            }
+            break;
           }
         }
-        this.setState(
-          {
-            option_list: timetable,
-            option_number: timetable.length
-          }
-        )
-      }else{
-        message.error("获取面试场次失败，请稍后重试")
-        this.props.history.push('/')
-      }
-  }
-  queryInfo = async () => {
-    let result = await axios(
-        'api/getinfo/'+this.props.match.params.guid,
-        {
-            method: 'GET',
+        if (index === timetable.length) {
+          timetable.push({
+            day: time.day,
+            time: [{ label: time.beginTime, value: [time.id] }],
+          });
         }
-    )
-
-    if(result.data.status === "success") {
-      result.data.data.firstWish = Wishes[result.data.data.firstWish-1]
-      result.data.data.secondWish = Wishes[result.data.data.secondWish-1]
-      this.setState(
-      {
-        info: result.data.data,
       }
-      )
-    }else{
-      message.error("获取个人信息失败，请稍后重试")
-      this.props.history.push('/')
+      this.setState({
+        option_list: timetable,
+        option_number: timetable.length,
+      });
+    } else {
+      message.error("获取面试场次失败，请稍后重试");
+      this.props.history.push("/");
     }
-  }
-  render(){
+  };
+  queryInfo = async () => {
+    let result = await axios("api/getinfo/" + this.props.match.params.guid, {
+      method: "GET",
+    });
+
+    if (result.data.status === "success") {
+      result.data.data.firstWish = Wishes[result.data.data.firstWish - 1];
+      result.data.data.secondWish = Wishes[result.data.data.secondWish - 1];
+      this.setState({
+        info: result.data.data,
+      });
+    } else {
+      message.error("获取个人信息失败，请稍后重试");
+      this.props.history.push("/");
+    }
+  };
+  render() {
     const formItemLayout = {
       labelCol: {
         xs: { span: 24 },
@@ -160,121 +169,209 @@ class TimePicker extends React.Component {
     };
 
     const { getFieldDecorator } = this.props.form;
-    if(this.state.confirmed){
-    return(
-      this.state.option_list ?
-      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
-          <h4 class="ant-typography" style={{ textAlign: 'center' }}>
-          请尽量多选          
+    if (this.state.confirmed) {
+      return this.state.option_list ? (
+        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
+          <h4 class="ant-typography" style={{ textAlign: "center" }}>
+            请尽量多选
           </h4>
-          <Form.Item label= {this.state.option_number > 0 ? this.state.option_list[0].day:0}>
-          {getFieldDecorator("time1", {
-            initialValue: [],
-            rules: [{ required: false }],
-          })( <Checkbox.Group options={this.state.option_number > 0 ? this.state.option_list[0].time:0} />)}
-        </Form.Item>
+          <Form.Item
+            label={
+              this.state.option_number > 0 ? this.state.option_list[0].day : 0
+            }
+          >
+            {getFieldDecorator("time1", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 0
+                    ? this.state.option_list[0].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
 
-        <Form.Item label={this.state.option_number > 1 ? this.state.option_list[1].day:0}>
-          {getFieldDecorator("time2", {
-            initialValue: [],
-            rules: [{ required: false }],
-          })( <Checkbox.Group options={this.state.option_number > 1 ? this.state.option_list[1].time:0} />)}
-        </Form.Item>
+          <Form.Item
+            label={
+              this.state.option_number > 1 ? this.state.option_list[1].day : 0
+            }
+          >
+            {getFieldDecorator("time2", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 1
+                    ? this.state.option_list[1].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
 
-        <Form.Item label={this.state.option_number > 2 ? this.state.option_list[2].day:0}>
-          {getFieldDecorator("time3", {
-            initialValue: [],
-            rules: [{ required: false }],
-          })( <Checkbox.Group options={this.state.option_number > 2 ? this.state.option_list[2].time:0} />)}
-        </Form.Item>
+          <Form.Item
+            label={
+              this.state.option_number > 2 ? this.state.option_list[2].day : 0
+            }
+          >
+            {getFieldDecorator("time3", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 2
+                    ? this.state.option_list[2].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
 
-        <Form.Item label={this.state.option_number > 3 ? this.state.option_list[3].day:0}>
-          {getFieldDecorator("time4", {
-            initialValue: [],
-            rules: [{ required: false }],
-          })( <Checkbox.Group options={this.state.option_number > 3 ? this.state.option_list[3].time:0} />)}
-        </Form.Item>
+          <Form.Item
+            label={
+              this.state.option_number > 3 ? this.state.option_list[3].day : 0
+            }
+          >
+            {getFieldDecorator("time4", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 3
+                    ? this.state.option_list[3].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
 
-        <Form.Item label={this.state.option_number > 4 ? this.state.option_list[4].day:0}>
-          {getFieldDecorator("time5", {
-            initialValue: [],
-            rules: [{ required: false }],
-          })( <Checkbox.Group options={this.state.option_number > 4 ?this.state.option_list[4].time:0} />)}
-        </Form.Item>
+          <Form.Item
+            label={
+              this.state.option_number > 4 ? this.state.option_list[4].day : 0
+            }
+          >
+            {getFieldDecorator("time5", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 4
+                    ? this.state.option_list[4].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
 
-        <Form.Item label={this.state.option_number > 5 ?this.state.option_list[5].day:0}>
-          {getFieldDecorator("time6", {
-            initialValue: [],
-            rules: [{ required: false }],
-          })( <Checkbox.Group options={this.state.option_number > 5 ?this.state.option_list[5].time:0} />)}
-        </Form.Item>
+          <Form.Item
+            label={
+              this.state.option_number > 5 ? this.state.option_list[5].day : 0
+            }
+          >
+            {getFieldDecorator("time6", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 5
+                    ? this.state.option_list[5].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
 
-        <Form.Item label={this.state.option_number > 6 ? this.state.option_list[6].day:0}>
-          {getFieldDecorator("time7", {
-            initialValue: [],
-            rules: [{ required: false }],
-          })( <Checkbox.Group options={this.state.option_number > 6 ? this.state.option_list[6].time:0} />)}
-        </Form.Item>
+          <Form.Item
+            label={
+              this.state.option_number > 6 ? this.state.option_list[6].day : 0
+            }
+          >
+            {getFieldDecorator("time7", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 6
+                    ? this.state.option_list[6].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
 
           <Button
-              icon="copy"
-              style={{display:"block",margin:"0 auto" }}
-              type="primary"
-              htmlType="submit"
+            icon="copy"
+            style={{ display: "block", margin: "0 auto" }}
+            type="primary"
+            htmlType="submit"
           >
-              提交
+            提交
           </Button>
-      </Form>:
-      <div>
-      <Spin size="large" tip="Loading...">
-        <Alert
-        message="正在打开页面"
-        description="请耐心等待，长时间未加载请请尝试刷新页面"
-        style={{height:"700px",textAlign:"center"}}
-        type="info"
-        /> 
-      </Spin>
-      </div>
-    )}else{
-      return(this.state.info?
-          <div>
-          <Card title="个人信息" >
-            <Card type="inner" title="姓名" >
+        </Form>
+      ) : (
+        <div>
+          <Spin size="large" tip="Loading...">
+            <Alert
+              message="正在打开页面"
+              description="请耐心等待，长时间未加载请请尝试刷新页面"
+              style={{ height: "700px", textAlign: "center" }}
+              type="info"
+            />
+          </Spin>
+        </div>
+      );
+    } else {
+      return this.state.info ? (
+        <div>
+          <Card title="个人信息">
+            <Card type="inner" title="姓名">
               <h3>{this.state.info.name}</h3>
             </Card>
             <Card type="inner" title="学号">
-             <h3>{this.state.info.id_student}</h3>
+              <h3>{this.state.info.id_student}</h3>
             </Card>
-            <Card type="inner" title="第一志愿" >
+            <Card type="inner" title="第一志愿">
               <h3>{this.state.info.firstWish}</h3>
             </Card>
-            <Card type="inner" title="第二志愿" >
+            <Card type="inner" title="第二志愿">
               <h3>{this.state.info.secondWish}</h3>
             </Card>
           </Card>
           <p></p>
           <Button
-          style={{display:"block",margin:"0 auto" }}
-          type="primary"
-          onClick= {(e) => {this.setState({confirmed:true})
-          if(!this.state.option_list){this.queryTime()}
-          }}
+            style={{ display: "block", margin: "0 auto" }}
+            type="primary"
+            onClick={(e) => {
+              this.setState({ confirmed: true });
+              if (!this.state.option_list) {
+                this.queryTime();
+              }
+            }}
           >
             确认个人信息
           </Button>
-          </div>
-        : 
-        <div>
-        <Spin size="large" tip="Loading...">
-          <Alert
-          message="正在打开页面"
-          description="请耐心等待，长时间未加载请请尝试刷新页面"
-          type="info"
-          style={{height:"700px",textAlign:"center"}}
-          /> 
-        </Spin>
         </div>
-      )
+      ) : (
+        <div>
+          <Spin size="large" tip="Loading...">
+            <Alert
+              message="正在打开页面"
+              description="请耐心等待，长时间未加载请请尝试刷新页面"
+              type="info"
+              style={{ height: "700px", textAlign: "center" }}
+            />
+          </Spin>
+        </div>
+      );
     }
   }
 }
@@ -283,20 +380,32 @@ const Chooser = withRouter(Form.create({})(TimePicker));
 class ChooseTime extends React.Component {
   render() {
     return (
-      <Layout style={{backgroundImage: `url(${Background})`}}>
-        <div style={{background:'#fff',borderRadius:20,
-        paddingTop:48, paddingLeft:24, paddingRight:24, marginTop: 24, marginLeft: 24, marginRight: 24,marginBottom:24,opacity:0.92 }} >
-          <h2 class="ant-typography" style={{ textAlign: 'center' }}>
+      <Layout style={{ backgroundImage: `url(${Background})` }}>
+        <div
+          style={{
+            background: "#fff",
+            borderRadius: 20,
+            paddingTop: 48,
+            paddingLeft: 24,
+            paddingRight: 24,
+            marginTop: 24,
+            marginLeft: 24,
+            marginRight: 24,
+            marginBottom: 24,
+            opacity: 0.92,
+          }}
+        >
+          <h2 class="ant-typography" style={{ textAlign: "center" }}>
             浙江大学学生E志者协会2020年面试时间
           </h2>
-          <Chooser/>
+          <Chooser />
           <BackTop visibilityHeight={200} />
-          <p style={{textAlign: 'center'}}>
+          <p style={{ textAlign: "center" }}>
             浙江大学学生E志者协会©2020 Created by EVATech
           </p>
-        </ div>
+        </div>
       </Layout>
     );
   }
 }
-export default ChooseTime
+export default ChooseTime;

src/components/Sheet.js

@@ -51,18 +51,26 @@ class NewForm extends React.Component {
                     message.success(
                       "提交成功！后续的面试时间会以短信形式通知，期待你的加入！"
                     );
-                    successInform(values.phone, values.name, values.id_student, values.firstWish, values.secondWish);
-                  }else {
-                    if(result.data.errorMsg === "TICKET_NOT_LEGEAL"){
+                    successInform(
+                      values.phone,
+                      values.name,
+                      values.id_student,
+                      values.firstWish,
+                      values.secondWish
+                    );
+                  } else {
+                    if (result.data.errorMsg === "TICKET_NOT_LEGEAL") {
                       message.error("提交失败！请检查报名表填写是否正确。");
-                    }else if(result.data.errorMsg === "TICKET_INFO_INCOMPLETE"){
+                    } else if (
+                      result.data.errorMsg === "TICKET_INFO_INCOMPLETE"
+                    ) {
                       message.error("提交失败！请检查报名表填写是否完整。");
-                    }else{
-                    message.error("提交失败！可能是网络问题。");
+                    } else {
+                      message.error("提交失败！可能是网络问题。");
                     }
                   }
-                }
-                addForm()
+                };
+                addForm();
               }
             });
           },

src/components/UploadToOSS.js

@@ -22,12 +22,12 @@ class UploadToOSS extends React.Component {
     if (!isJpgOrPng) {
       message.error("只能上传JPG/PNG格式的图片哦！");
     }
-    const isLt2M = file.size / 1024 / 1024 < 2;
+    const isLt2M = file.size / 1024 / 1024 < 5;
     if (!isLt2M) {
-      message.error("图像文件要小于2MB哦！");
+      message.error("图像文件要小于5MB哦！");
     }
     if (!this.props.stuid) {
-      message.error("请先填写学号！");
+      message.error("请先填写学号哦！");
     }
     if (isJpgOrPng && isLt2M && this.props.stuid) {
       if (file.type === "image/png") {
@@ -97,6 +97,7 @@ class UploadToOSS extends React.Component {
     const { imageUrl } = this.state;
     return (
       <Upload
+        accept=".jpg,.png"
         showUploadList={false}
         beforeUpload={this.beforeUpload}
         onChange={this.handleChange}