ddl

open tecent sms and fix bug

.drone.yml

@@ -0,0 +1,57 @@
+kind: pipeline
+name: default
+
+steps:
+  - name: restore
+    image: drillster/drone-volume-cache
+    restore: true
+    mount:
+      - ./node_modules
+    volumes:
+      - name: cache
+        path: /cache
+
+  - name: install
+    image: node:12.11.1
+    commands:
+      - npm install
+
+  - name: rebuild-cache
+    image: drillster/drone-volume-cache
+    rebuild: true
+    mount:
+      - ./node_modules
+    volumes:
+      - name: cache
+        path: /cache
+
+  - name: build
+    image: node:12.11.1
+    commands:
+      - CI=false npm run build
+      - mv build main
+
+  - name: deploy
+    image: appleboy/drone-scp
+    settings:
+      host: zjueva.net
+      username: cibot
+      port: 22
+      key:
+        from_secret: cibot_front_secret
+      target: /srv/main
+      source: main
+      rm: true
+
+trigger:
+  branch:
+    - master
+  event:
+    - push
+    - pull_request
+    - rollback
+
+volumes:
+  - name: cache
+    host:
+      path: /tmp

.gitignore

@@ -4,10 +4,10 @@
 /node_modules
 /.pnp
 .pnp.js
-
+/main
 # testing
 /coverage
-
+/main
 # production
 /build
 
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 cxz66666
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -33,7 +33,7 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 
 If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 

config-overrides.js

@@ -0,0 +1,15 @@
+const { override, fixBabelImports, addLessLoader } = require('customize-cra');
+
+module.exports = override(
+    // 按需加载 antd
+    fixBabelImports('import', {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: true,
+    }),
+    // 添加加载 less 的 javascriptEnabled 和 antd 的主题配置。
+    addLessLoader({
+        javascriptEnabled: true,
+        modifyVars: { '@primary-color': '#1DA57A' },
+    }),
+);

debug.log

@@ -1 +0,0 @@
-[0219/112038.789:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: The operation completed successfully. (0x0)

deploy.js

@@ -0,0 +1,46 @@
+const fs = require('fs')
+const path = require('path')
+const OSS = require('ali-oss')
+const env = require('./.env')
+
+const { region, accessKeyId, accessKeySecret, bucket } = env;
+
+const client = new OSS({
+  region,
+  accessKeyId,
+  accessKeySecret,
+  bucket,
+});
+
+const distPath = path.resolve(__dirname, './build');
+
+async function clean() {
+  console.log('[*] Getting file list');
+  const fileList = await client.list();
+  if (fileList.objects) {
+    console.log('[*] Deleting old files');
+    await client.deleteMulti(fileList.objects.map(x => x.name));
+  }
+}
+
+async function deploy(subpath = '') {
+  const dir = await fs.promises.readdir(`${distPath}${subpath}`);
+  for (i of dir) {
+    const stat = await fs.promises.stat(path.resolve(`${distPath}${subpath}`, i));
+
+    if (stat.isFile()) {
+      const fileStream = fs.createReadStream(path.resolve(`${distPath}${subpath}`, i));
+      console.log(`Uploading: ${subpath}/${i}`);
+      const result = await client.putStream(`${subpath}/${i}`, fileStream);
+    } else if (stat.isDirectory()) {
+      await deploy(`${subpath}/${i}`);
+    }
+  }
+}
+
+async function publish() {
+  await clean();
+  await deploy();
+}
+
+publish();

package.json

@@ -1,28 +1,39 @@
 {
-  "name": "my-app",
+  "name": "todolist",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "antd": "^3.26.11",
+    "@alicloud/pop-core": "^1.7.9",
+    "antd": "^3.26.8",
     "axios": "^0.19.2",
+    "babel-plugin-import": "^1.13.0",
+    "co": "4",
+    "customize-cra": "^0.9.1",
     "enquire-js": "^0.2.1",
+    "http-proxy-middleware": "^0.20.0",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "rc-banner-anim": "^2.4.3",
     "rc-queue-anim": "^1.8.3",
     "rc-scroll-anim": "^2.7.4",
     "rc-texty": "^0.2.0",
+    "rc-tween-one": "^2.6.8",
     "react": "^16.12.0",
+    "react-app-rewired": "^2.1.5",
     "react-confirm-alert": "^2.4.1",
     "react-dom": "^16.12.0",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0"
+    "react-scripts": "3.2.0",
+    "react-sublime-video": "^0.2.5",
+    "webpack": "4.41.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "env GENERATE_SOURCEMAP=false react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject",
+    "deploy": "node deploy.js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -38,5 +49,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "ali-oss": "^6.5.1"
   }
 }

public/index.html

@@ -3,11 +3,11 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="background.jpg" />
+  <link rel="icon" href="background.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
-  <link rel="apple-touch-icon" href="background.jpg" />
+  <link rel="apple-touch-icon" href="background.png" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import { HashRouter, Route, Switch, Link } from "react-router-dom";
-import { enquireScreen } from 'enquire-js';
-import Home from './Home/main';
+import { HashRouter, Route, Switch} from "react-router-dom";
+import { enquireScreen } from "enquire-js";
+import Home from "./Home/main";
 import Page2 from "./Home/history";
-
-
 import Entry from "./Entry";
 import Login from "./components/Login";
+import ChooseTime from "./components/ChooseTime"
+
 let isMobile;
 enquireScreen((b) => {
   isMobile = b;
@@ -26,17 +26,18 @@ class App extends Component {
     });
   }
   render() {
-    return (<div>
+    return (
+      <div>
         <HashRouter>
           <Switch>
-          <Route exact path='/history' component={Page2} />
-          <Route exact path='/ticket' component={Entry} />
-          <Route exact path='/' component={Home} />
-          <Route exact path='/login' component={Login} />
+            <Route exact path="/history" component={Page2} />
+            <Route exact path="/ticket" component={Entry} />
+            <Route exact path="/" component={Home} />
+            <Route exact path="/login" component={Login} />
+            <Route exact path="/time/:guid" component={ChooseTime}/>
           </Switch>
         </HashRouter>
       </div>
-
     );
   }
 }

src/Entry.js

@@ -1,33 +1,53 @@
-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>
+          <h4
+            class="ant-typography"
+            style={{ textAlign: "center", marginBottom: "20px" }}
+          >
+            报名截止日期：9月27日24:00
+          </h4>
+          {/* <center>
             <UploadToOSS stuid={this.state.stuid} />
           </center>
-          <Sheet setID = {this.setID} />
+          <Sheet setID={this.setID} />
           <BackTop visibilityHeight={200} />
-          <p style={{textAlign: 'center'}}>
-            浙江大学学生E志者协会©2020 Created by EVATech
-          </p>
-        </ div>
+          <h2 style={{ margin: "20px 0 20px 0", textAlign: "center" }}>
+            提交报名表后，建议您加入QQ纳新咨询群，群号:1126888868
+          </h2> */}
+          <h1>报名已经截止，感谢您的关注</h1>
+          <p style={{ textAlign: "center" }}>浙江大学学生E志者协会©2020</p>
+          <p style={{ textAlign: "center" }}>Created by EVATech</p>
+        </div>
       </Layout>
     );
   }

src/Home/Content4.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import TweenOne from "rc-tween-one";
+import OverPack from "rc-scroll-anim/lib/ScrollOverPack";
+import VideoPlay from "react-sublime-video";
+import { getChildrenToRender } from "./utils";
+
+function Content4(props) {
+  const { ...tagProps } = props;
+  const { dataSource, isMobile } = tagProps;
+  delete tagProps.dataSource;
+  delete tagProps.isMobile;
+  const animation = {
+    y: "+=30",
+    opacity: 0,
+    type: "from",
+    ease: "easeOutQuad",
+  };
+
+  return (
+    <div {...tagProps} {...dataSource.wrapper}>
+      <div {...dataSource.page}>
+        <div key="title" {...dataSource.titleWrapper}>
+          {dataSource.titleWrapper.children.map(getChildrenToRender)}
+        </div>
+        <OverPack {...dataSource.OverPack}>
+          <TweenOne
+            key="video"
+            animation={{ ...animation, delay: 300 }}
+            {...dataSource.video}
+          >
+            {isMobile ? (
+              <iframe
+                width="100%"
+                src="//player.bilibili.com/player.html?aid=244539528&bvid=BV1rv41117UV&cid=236113571&page=1"
+                scrolling="no"
+                border="0"
+                frameborder="no"
+                framespacing="0"
+                allowfullscreen="true"
+              ></iframe>
+            ) : (
+              <iframe
+                width="100%"
+                height="650px"
+                src="//player.bilibili.com/player.html?aid=244539528&bvid=BV1rv41117UV&cid=236113571&page=1"
+                scrolling="no"
+                border="0"
+                frameborder="no"
+                framespacing="0"
+                allowfullscreen="true"
+              >
+                {" "}
+              </iframe>
+            )}
+          </TweenOne>
+        </OverPack>
+      </div>
+    </div>
+  );
+}
+
+export default Content4;

src/Home/Feature3.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import QueueAnim from "rc-queue-anim";
+import TweenOne from "rc-tween-one";
+import { Row, Col } from "antd";
+import OverPack from "rc-scroll-anim/lib/ScrollOverPack";
+import { getChildrenToRender } from "./utils";
+
+class Content31 extends React.PureComponent {
+  getDelay = (e, b) => (e % b) * 100 + Math.floor(e / b) * 100 + b * 100;
+
+  render() {
+    const { ...props } = this.props;
+    const { dataSource, isMobile } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    let clearFloatNum = 0;
+    const children = dataSource.block.children.map((item, i) => {
+      const childObj = item.children;
+      const delay = isMobile ? i * 50 : this.getDelay(i, 24 / item.md);
+      const liAnim = {
+        opacity: 0,
+        type: "from",
+        ease: "easeOutQuad",
+        delay,
+      };
+      const childrenAnim = { ...liAnim, x: "+=10", delay: delay + 100 };
+      clearFloatNum += item.md;
+      clearFloatNum = clearFloatNum > 24 ? 0 : clearFloatNum;
+      return (
+        <TweenOne
+          component={Col}
+          animation={liAnim}
+          key={item.name}
+          {...item}
+          componentProps={{ md: item.md, xs: item.xs }}
+          className={
+            !clearFloatNum
+              ? `${item.className || ""} clear-both`.trim()
+              : item.className
+          }
+        >
+          <TweenOne
+            animation={{
+              x: "-=10",
+              opacity: 0,
+              type: "from",
+              ease: "easeOutQuad",
+            }}
+            key="img"
+            {...childObj.icon}
+          >
+            <img src={childObj.icon.children} width="100%" alt="img" />
+          </TweenOne>
+          <div {...childObj.textWrapper}>
+            <TweenOne
+              key="h2"
+              animation={childrenAnim}
+              component="h2"
+              {...childObj.title}
+            >
+              {childObj.title.children}
+            </TweenOne>
+            <TweenOne
+              key="p"
+              animation={{ ...childrenAnim, delay: delay + 200 }}
+              component="div"
+              {...childObj.content}
+            >
+              {childObj.content.children}
+            </TweenOne>
+          </div>
+        </TweenOne>
+      );
+    });
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <div {...dataSource.page}>
+          <div {...dataSource.titleWrapper}>
+            {dataSource.titleWrapper.children.map(getChildrenToRender)}
+          </div>
+          <OverPack {...dataSource.OverPack}>
+            <QueueAnim key="u" type="bottom">
+              <Row key="row" {...dataSource.block}>
+                {children}
+              </Row>
+            </QueueAnim>
+          </OverPack>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Content31;

src/Home/Footer0.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import TweenOne from 'rc-tween-one';
-import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
-
-class Footer extends React.PureComponent {
-  render() {
-    const { ...props } = this.props;
-    const { dataSource } = props;
-    delete props.dataSource;
-    delete props.isMobile;
-    return (
-      <div {...props} {...dataSource.wrapper}>
-        <OverPack {...dataSource.OverPack}>
-          <TweenOne
-            animation={{ y: '+=30', opacity: 0, type: 'from' }}
-            key="footer"
-            {...dataSource.copyright}
-          >
-            {dataSource.copyright.children}
-          </TweenOne>
-        </OverPack>
-      </div>
-    );
-  }
-}
-
-export default Footer;

src/Home/Footer1.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import { Row, Col } from 'antd';
+import { getChildrenToRender } from './utils';
+import { isImg } from './utils';
+
+class Footer extends React.Component {
+  static defaultProps = {
+    className: 'footer1',
+  };
+
+  getLiChildren = (data) =>
+    data.map((item, i) => {
+      const { title, childWrapper, ...itemProps } = item;
+      return (
+        <Col key={i.toString()} {...itemProps} title={null} content={null}>
+          <h2 {...title}>
+            {typeof title.children === 'string' &&
+            title.children.match(isImg) ? (
+              <img src={title.children} width="100%" alt="img" />
+            ) : (
+              title.children
+            )}
+          </h2>
+          <div {...childWrapper}>
+            {childWrapper.children.map(getChildrenToRender)}
+          </div>
+        </Col>
+      );
+    });
+
+  render() {
+    const { ...props } = this.props;
+    const { dataSource } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    const childrenToRender = this.getLiChildren(dataSource.block.children);
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <OverPack {...dataSource.OverPack}>
+          <QueueAnim
+            type="bottom"
+            key="ul"
+            leaveReverse
+            component={Row}
+            {...dataSource.block}
+          >
+            {childrenToRender}
+          </QueueAnim>
+          <TweenOne
+            animation={{ y: '+=30', opacity: 0, type: 'from' }}
+            key="copyright"
+            {...dataSource.copyrightWrapper}
+          >
+            <div {...dataSource.copyrightPage}>
+              <div {...dataSource.copyright}>
+                {dataSource.copyright.children}
+              </div>
+            </div>
+          </TweenOne>
+        </OverPack>
+      </div>
+    );
+  }
+}
+
+export default Footer;

src/Home/history.jsx

@@ -1,21 +1,21 @@
 /* eslint no-undef: 0 */
 /* eslint arrow-parens: 0 */
-import React from 'react';
-import { enquireScreen } from 'enquire-js';
+import React from "react";
+import { enquireScreen } from "enquire-js";
 
-import Content11 from './Content11';
-import Feature1 from './Feature1';
-import Nav3 from './Nav3';
+import Content11 from "./Content11";
+import Feature1 from "./Feature1";
+import Nav3 from "./Nav3";
 import {
   Nav30DataSource,
   Content110DataSource,
   Feature13DataSource,
   Feature11DataSource,
   Feature12DataSource,
-    Footer00DataSource,
-} from './data.source';
-import './less/antMotionStyle.less';
-import Footer0 from './Footer0';
+  Footer10DataSource,
+} from "./data.source";
+import "./less/antMotionStyle.less";
+import Footer1 from "./Footer1";
 let isMobile;
 enquireScreen((b) => {
   isMobile = b;
@@ -82,10 +82,10 @@ export default class Page2 extends React.Component {
         dataSource={Feature12DataSource}
         isMobile={this.state.isMobile}
       />,
-            <Footer0
-                id="Footer0_0"
-                key="Footer0_0"
-                dataSource={Footer00DataSource}
+      <Footer1
+        id="Footer1_0"
+        key="Footer1_0"
+        dataSource={Footer10DataSource}
         isMobile={this.state.isMobile}
       />,
     ];

src/Home/less/antMotionStyle.less

@@ -1,17 +1,17 @@
-@import './common.less';
-@import './custom.less';
-@import './point.less';
-@import './content.less';
-@import './nav3.less';
-@import './banner3.less';
-@import './feature2.less';
-@import './feature1.less';
-@import './content3.less';
-@import './feature8.less';
-@import './feature6.less';
-@import './content5.less';
-@import './content9.less';
-@import './footer0.less';
-@import './edit.less';
-@import'./teams1.less';
-@import './content11.less';
+@import "./common.less";
+@import "./custom.less";
+@import "./point.less";
+@import "./content.less";
+@import "./nav3.less";
+@import "./banner3.less";
+@import "./feature2.less";
+@import "./feature1.less";
+@import "./content3.less";
+@import "./feature8.less";
+@import "./feature6.less";
+@import "./content5.less";
+@import "./content9.less";
+@import "./footer1.less";
+@import "./edit.less";
+@import "./teams1.less";
+@import "./content11.less";

src/Home/less/banner3.less

@@ -9,6 +9,7 @@
   background-image: url("https://gw.alipayobjects.com/zos/rmsportal/xTPkCNNLOnTEbGgVZOpE.jpg");
   background-size: cover;
   background-attachment: fixed;
+
   background-position: center;
   & &-text-wrapper {
     display: inline-block;
@@ -25,7 +26,7 @@
     font-size: 20px;
     line-height: 28px;
     font-weight: 400;
-    >.queue-anim-leaving {
+    > .queue-anim-leaving {
       position: relative !important;
     }
   }
@@ -40,23 +41,25 @@
   & &-name-en {
     display: block;
     font-size: 14px;
+    font-family: sans-serif;
     line-height: 32px;
     font-weight: 400;
   }
   & &-name {
     font-size: 24px;
     overflow: hidden;
-    opacity: 0.8;
+    opacity: 0.9;
+    font-family: Helvetica Neue;
   }
   & &-button {
     display: block;
     margin: 72px auto 0;
     background: rgb(3, 67, 101);
-    background: -moz-linear-gradient(left, rgba(3, 67, 101, 1) 0%, rgba(0, 27, 51, 1) 100%);
-    background: linear-gradient(to right, rgba(3, 67, 101, 1) 0%, rgba(0, 27, 51, 1) 100%);
+    background: -moz-linear-gradient(135deg, #6e8efb, #a777e3);
+    background: linear-gradient(135deg, #6e8efb, #a777e3);
     box-shadow: 0 8px 16px #0a52ab;
     border: none;
-    transition: background .45s @ease-out;
+    transition: background 0.45s @ease-out;
     width: 132px;
     line-height: 42px;
     height: 42px;
@@ -64,6 +67,7 @@
   }
   & &-time {
     font-size: 14px;
+    font-family: Helvetica Neue;
     line-height: 24px;
     margin-top: 24px;
   }

src/Home/less/content4.less

@@ -0,0 +1,38 @@
+@content4: content4;
+.@{content4}-wrapper {
+  min-height: 720px;
+  background: #fafafa;
+  .@{content4} {
+    height: 100%;
+    overflow: hidden;
+    &-video {
+      border-radius: 4px;
+      overflow: hidden;
+      max-width: 800px;
+      margin: auto;
+      background: #fff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      video {
+        display: block;
+        margin: auto;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content4}-wrapper {
+    min-height: 350px;
+    .@{content4} {
+      overflow: hidden;
+      width: 90%;
+      margin: auto;
+      &-video {
+        top: 15%;
+        background: url("https://zos.alipayobjects.com/rmsportal/HZgzhugQZkqUwBVeNyfz.jpg")
+          no-repeat center;
+        background-size: cover;
+      }
+    }
+  }
+}

src/Home/less/content5.less

@@ -3,7 +3,7 @@
   background-color: #fafafa;
   min-height: 720px;
   .@{content5} {
-    >p {
+    > p {
       text-align: center;
     }
     &-img-wrapper {
@@ -20,9 +20,16 @@
           text-align: center;
           position: relative;
           overflow: hidden;
+          & img {
+            border: 1px solid gray;
+            -moz-box-shadow: 3px 3px 4px #000;
+            -webkit-box-shadow: 3px 3px 4px #000;
+            box-shadow: 3px 3px 4px gray;
+            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
+          }
           .page-pro();
           border: none;
-          transition: box-shadow .3s @ease-out, transform .3s @ease-out;
+          transition: box-shadow 0.3s @ease-out, transform 0.3s @ease-out;
           & > span {
             width: 100%;
             height: 200px;

src/Home/less/edit.less

@@ -9,7 +9,7 @@
 }
 #Content3_0 .ant-row > .ant-col > .k6bwkyqmmk8-editor_css {
   background-color: rgba(202, 36, 36, 0);
-  background-image: url('https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg');
+  background-image: url("https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg");
   background-attachment: scroll;
   background-blend-mode: normal;
   background-position: 0% 0%;
@@ -24,7 +24,7 @@
   color: rgb(42, 128, 202);
   text-decoration: line-through;
   background-color: rgba(195, 67, 67, 0);
-  background-image: url('https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg');
+  background-image: url("https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg");
   background-attachment: scroll;
   background-blend-mode: normal;
   background-position: 0% 0%;
@@ -34,14 +34,6 @@
   border-top-style: dashed;
 }
 #Banner3_1 .banner3-text-wrapper > .ant-btn {
-  background-color: #cf2892;
-  background-image: linear-gradient(
-    0rad,
-    rgb(255, 0, 0) 10%,
-    rgb(255, 0, 0) 29.71153846153846%,
-    #da2626 45.4223076923077%,
-    white 100%
-  );
   background-attachment: scroll;
   background-blend-mode: normal;
   background-position: 0% 0%;
@@ -49,56 +41,29 @@
   background-size: auto;
   background-clip: padding-box;
 }
-#Banner3_1 .k6bxcwa6wb-editor_css {
-  box-shadow: 5px 5px 5px #108ee9;
-}
+
 #Banner3_1 .banner3-text-wrapper > .k6bx9bxsgw-editor_css {
   background-clip: padding-box;
   text-decoration: underline;
+  font-family: Helvetica Neue;
   text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35);
 }
 #Banner3_1 .banner3-text-wrapper > .k6bx9qqmas-editor_css {
-
-  margin: 30px 50px 150px 100px;
-  padding: 0px 0px 0px 75px;
-  background: linear-gradient(to right, red,#f97400, blue,#990adb);
+  text-align: center;
+  background: #bdb2ff;
   -webkit-background-clip: text;
   color: transparent;
 }
 #Banner3_1 .banner3-text-wrapper > .k6bxcnb8hlg-editor_css {
   font-family: Tahoma;
-  font-size: 23px;
+  font-size: 20px;
   font-weight: bold;
   color: #e9e9e9;
-  background-color: rgb(251, 251, 251);
-  background-image: linear-gradient(
-    225deg,
-    #f04134 12.5%,
-    #00a854 25%,
-    #108ee9 37.5%,
-    #f5317f 50%,
-    #f56a00 62.5%,
-    #7265e6 75%,
-    #ffbf00 87.5%,
-    #00a2ae 99.54%,
-    #00a2ae 100%,
-    rgb(0, 27, 51) 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    #f04134 100%,
-    #108ee9 100%,
-    black 100%
-  );
+
   background-blend-mode: normal;
   background-clip: padding-box;
-  box-shadow: 0px 8px 16px rgb(171, 21, 10);
 }
+
 #Content3_0 .ant-col > .content3-text > .k6bypeippkr-editor_css {
   margin: 0px;
 }
@@ -279,3 +244,49 @@
 #Feature3_0 .ant-col > .content3-text > .k6rohgkzazi-editor_css {
   text-align: center;
 }
+#Footer1_0 .ant-col > .slogan > .kd2miilu93t-editor_css {
+  font-size: 16px;
+  top: 10px;
+}
+#Footer1_0 .ant-col > div > .kd2mqk40hca-editor_css {
+  min-width: 0px;
+  min-height: 1px;
+}
+#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mmt7a7qg-editor_css {
+  font-size: 16px;
+  min-height: 1px;
+  background-image: ;
+  background-attachment: ;
+  background-blend-mode: ;
+  background-position: ;
+  background-repeat: ;
+  background-size: ;
+  background-clip: ;
+}
+#Footer1_0 .ant-col > div > .kd2mmt7a7qg-editor_css {
+  background-clip: padding-box;
+  width: auto;
+  min-width: 160px;
+  height: auto;
+  min-height: 160px;
+  background-color: rgba(165, 62, 62, 0);
+}
+#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mqk40hca-editor_css {
+  font-size: 16px;
+  margin: 0px 0px 12px;
+}
+#Feature3_1 .ant-col > .content3-text > .keedl4m5lk-editor_css {
+  font-size: 17px;
+}
+#Feature3_1 .ant-col > .content3-text > .keedn4gkykf-editor_css {
+  font-size: 16px;
+}
+#Feature3_1 .ant-col > .content3-text > .keedi0sp7vt-editor_css {
+  font-size: 16px;
+}
+#Feature3_1 .ant-col > .content3-text > .keedtwaja47-editor_css {
+  font-size: 16px;
+}
+#Feature3_1 .home-page > .title-wrapper > .keedh95kxlm-editor_css {
+  font-size: 34px;
+}

src/Home/less/feature31.less

@@ -0,0 +1,52 @@
+@content3: content3;
+.@{content3}-wrapper {
+  min-height: 764px;
+  .@{content3} {
+    height: 100%;
+    overflow: hidden;
+    & .title-content {
+      text-align: center;
+    }
+    &-block-wrapper {
+      position: relative;
+      .@{content3}-block {
+        display: inline-block;
+        padding: 48px 24px;
+        vertical-align: top;
+        .@{content3}-icon {
+          display: inline-block;
+          width: 15%;
+          vertical-align: top;
+        }
+        .@{content3}-text {
+          width: 85%;
+          display: inline-block;
+          padding-left: 8%;
+        }
+        &.clear-both {
+          clear: both;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content3}-wrapper {
+    min-height: 1080px;
+    .@{content3} {
+      &-block-wrapper {
+        margin: 20px auto;
+        height: auto;
+        .@{content3}-block {
+          .@{content3}-title {
+            font-size: 20px;
+          }
+          &.queue-anim-leaving {
+            position: relative !important;
+          }
+        }
+      }
+    }
+  }
+}

src/Home/less/footer0.less

@@ -1,28 +0,0 @@
-.footer0-wrapper {
-  background-color: @template-bg-color;
-  height: 80px;
-  overflow: hidden;
-  .footer0 {
-    height: 100%;
-    padding: 0 24px;
-    line-height: 80px;
-    text-align: center;
-    color: @template-footer-text-color;
-    position: relative;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .footer0-wrapper {
-    .footer0 {
-      font-size: 12px;
-      &.home-page {
-        padding: 0;
-      }
-      >div {
-        width: 90%;
-        margin: auto;
-      }
-    }
-  }
-}

src/Home/less/footer1.less

@@ -0,0 +1,101 @@
+.footer1-wrapper {
+  background: @template-bg-color;
+  overflow: hidden;
+  position: relative;
+  min-height: 360px;
+  color: @template-footer-text-color;
+  .footer1 {
+    .home-page {
+      padding: 64px 24px 80px;
+    }
+  }
+  .block {
+    padding: 0 32px;
+    .logo {
+      max-width: 180px;
+    }
+    .slogan {
+      font-size: 12px;
+      margin-top: -20px;
+    }
+    > h2 {
+      margin-bottom: 24px;
+      color: @template-text-color;
+    }
+    a {
+      color: @template-footer-text-color;
+      margin-bottom: 12px;
+      float: left;
+      clear: both;
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+  .copyright-wrapper {
+    width: 100%;
+    border-top: 1px solid fade(@line-color, 10);
+    .home-page {
+      padding: 0 24px;
+      overflow: hidden;
+    }
+    .copyright {
+      height: 80px;
+      text-align: center;
+      line-height: 28px;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .footer1 {
+    min-height: 550px;
+    &-wrapper {
+      .footer1 {
+        .home-page {
+          padding: 64px 24px 32px;
+        }
+      }
+    }
+    .logo {
+      margin: 0 auto 24px;
+    }
+    .block {
+      text-align: center;
+      margin-bottom: 32px;
+      padding: 0;
+    }
+    > ul {
+      width: 90%;
+      margin: 20px auto 0;
+      padding: 10px 0;
+      > li {
+        width: 100%;
+        h2 {
+          margin-bottom: 10px;
+        }
+        li {
+          display: inline-block;
+          margin-right: 10px;
+        }
+      }
+    }
+    .copyright {
+      &-wrapper {
+        .home-page {
+          padding: 0;
+          .copyright {
+            font-size: 9px;
+            .first {
+              font-size: 13px;
+            }
+          }
+        }
+      }
+
+      span {
+        width: 90%;
+      }
+    }
+  }
+}

src/Home/less/nav3.less

@@ -1,9 +1,10 @@
 @header3: header3;
 
 .@{header3} {
-  background: #fff;
+  background: rgba(2, 2, 2, 0);
   width: 100%;
   z-index: 1;
+  background-image: url("https://oss.zjueva.net/testheader.jpg");
   box-shadow: 0 4px 6px fade(#000, 5);
   position: relative;
   top: 0;
@@ -49,7 +50,7 @@
     &-block {
       padding: 0 8px;
 
-      >* {
+      > * {
         display: inline-block;
       }
     }
@@ -58,7 +59,6 @@
   &-item,
   &-item-child,
   &-menu {
-
     .ant-menu-sub .ant-menu-item,
     .ant-menu-inline .ant-menu-item {
       height: auto;
@@ -111,7 +111,7 @@
       left: -24px;
       width: ~"calc(100% + 48px)";
       opacity: 0;
-      transition: opacity .3s @ease-in-out;
+      transition: opacity 0.3s @ease-in-out;
       background: #fff;
 
       & li {
@@ -133,7 +133,7 @@
       height: 14px;
       cursor: pointer;
       position: absolute;
-      top: 24px;
+      top: 18px;
       right: 24px;
       z-index: 100;
 
@@ -143,7 +143,7 @@
         height: 2px;
         background: @template-nav-bg-color;
         margin-top: 4px;
-        transition: transform .3s @ease-in-out, opacity .3s @ease-in-out;
+        transition: transform 0.3s @ease-in-out, opacity 0.3s @ease-in-out;
       }
 
       :first-child {
@@ -179,7 +179,7 @@
         }
       }
 
-      >.@{header3}-menu {
+      > .@{header3}-menu {
         opacity: 1;
         pointer-events: auto;
       }

src/Home/main.jsx

@@ -1,35 +1,36 @@
 /* eslint no-undef: 0 */
 /* eslint arrow-parens: 0 */
-import React from 'react';
-import { enquireScreen } from 'enquire-js';
-
-import Nav3 from './Nav3';
-import Banner3 from './Banner3';
-import Feature2 from './Feature2';
-import Feature1 from './Feature1';
-import Content3 from './Content3';
-import Feature8 from './Feature8';
-import Feature6 from './Feature6';
-import Content5 from './Content5';
-import Content9 from './Content9';
-import Footer0 from './Footer0';
-import Point from './Point';
+import React from "react";
+import { enquireScreen } from "enquire-js";
 
+import Nav3 from "./Nav3";
+import Banner3 from "./Banner3";
+import Feature2 from "./Feature2";
+import Feature1 from "./Feature1";
+import Content3 from "./Content3";
+import Feature8 from "./Feature8";
+import Feature3 from "./Feature3";
+import Feature6 from "./Feature6";
+import Content5 from "./Content5";
+import Content9 from "./Content9";
+import Footer1 from "./Footer1";
+import Point from "./Point";
+import Content4 from "./Content4";
 import {
   Nav30DataSource,
   Banner31DataSource,
   Feature20DataSource,
   Feature10DataSource,
   Feature30DataSource,
+  Feature31DataSource,
   Feature80DataSource,
   Feature60DataSource,
+  Content40DataSource,
   Content50DataSource,
   Content90DataSource,
-  Footer00DataSource,
-
-
-} from './data.source';
-import './less/antMotionStyle.less';
+  Footer10DataSource,
+} from "./data.source";
+import "./less/antMotionStyle.less";
 
 let isMobile;
 enquireScreen((b) => {
@@ -91,6 +92,12 @@ export default class Home extends React.Component {
         dataSource={Feature10DataSource}
         isMobile={this.state.isMobile}
       />,
+      <Content4
+        id="Content4_0"
+        key="Content4_0"
+        dataSource={Content40DataSource}
+        isMobile={this.state.isMobile}
+      />,
       <Content3
         id="Feature3_0"
         key="Feature3_0"
@@ -115,33 +122,32 @@ export default class Home extends React.Component {
         dataSource={Content50DataSource}
         isMobile={this.state.isMobile}
       />,
-      <Content9
-        id="Content9_0"
-        key="Content9_0"
-        dataSource={Content90DataSource}
+      <Feature3
+        id="Feature3_1"
+        key="Feature3_1"
+        dataSource={Feature31DataSource}
         isMobile={this.state.isMobile}
       />,
 
-      <Footer0
-        id="Footer0_0"
-        key="Footer0_0"
-        dataSource={Footer00DataSource}
+      <Footer1
+        id="Footer1_0"
+        key="Footer1_0"
+        dataSource={Footer10DataSource}
         isMobile={this.state.isMobile}
-      />, // 导航和页尾不进入锚点区，如果需要，自行添加;
+      />,
       <Point
         key="list"
         data={[
-          'Nav3_0',
-          'Banner3_1',
-          'Feature2_0',
-          'Feature1_0',
-          'Content3_0',
-          'Feature8_0',
-          'Feature6_0',
-          'Content5_0',
-          'Content9_0',
-
-          'Footer0_0',
+          "Nav3_0",
+          "Banner3_1",
+          "Feature2_0",
+          "Feature1_0",
+          "Content3_0",
+          "Feature8_0",
+          "Feature6_0",
+          "Content5_0",
+          "Content9_0",
+          "Footer0_0",
         ]}
       />,
     ];

src/components/ChooseTime.js

@@ -0,0 +1,441 @@
+import React from "react";
+import axios from "axios";
+import {
+  Button,
+  Form,
+  Spin,
+  message,
+  Checkbox,
+  Alert,
+  BackTop,
+  Layout,
+  Card,
+  List,
+} 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";
+
+const Wishes = ["电脑部", "电器部", "文宣部", "人资部", "财外部"];
+class TimePicker extends React.Component {
+  constructor() {
+    super();
+    this.state = { confirmed: false };
+  }
+
+  componentDidMount() {
+    this.queryInfo();
+    this.queryTime();
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
+    confirmAlert({
+      title: "提交面试时间",
+      message: "请核实无误后谨慎提交。",
+      buttons: [
+        {
+          label: "Yes",
+          onClick: () => {
+            validateFieldsAndScroll((err, values) => {
+              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]);
+                }
+                let addForm = async () => {
+                  let result = await axios("api/posttime", {
+                    headers: {
+                      "Content-Type": "application/x-www-form-urlencoded",
+                    },
+                    method: "POST",
+                    data: qs.stringify({
+                      dto: JSON.stringify({ Times: Times }),
+                      guid: this.props.match.params.guid,
+                    }),
+                  });
+
+                  if (result.data.status === "success") {
+                    message.success("提交成功！期待你的精彩面试表现！");
+                  } else if (result.data.errorMsg === "TIME_ALREAY_CONFIRM") {
+                    message.error("我们已经为您分配了场次，请留意短信通知");
+                  } else {
+                    message.error("提交失败！可能是网络问题。");
+                  }
+                };
+                if (Times.length !== 0) {
+                  addForm();
+                } else {
+                  message.error("请至少选择一个场次！");
+                }
+              }
+            });
+          },
+        },
+        {
+          label: "No",
+          onClick: () => {},
+        },
+      ],
+    });
+  };
+  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;
+              }
+            }
+            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] }],
+          });
+        }
+      }
+      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 (result.data.status === "success") {
+      result.data.data.firstWish = Wishes[result.data.data.firstWish - 1];
+      result.data.data.secondWish = Wishes[result.data.data.secondWish - 1];
+      result.data.data.thirdWish = Wishes[result.data.data.thirdWish - 1];
+      this.setState({
+        info: result.data.data,
+      });
+      if (this.state.info.times.length !== 0) {
+        message.warning(
+          "你已选择过面试时间！重复提交面试时间可能导致场次排错，请谨慎重复提交！",
+          0
+        );
+      }
+    } else {
+      message.error("获取个人信息失败，请稍后重试");
+      this.props.history.push("/");
+    }
+  };
+  render() {
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 12 },
+      },
+    };
+
+    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" }}>
+            请尽量多选
+          </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 > 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 > 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 > 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>
+          <br></br>
+          <Button
+            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 if (this.state.info) {
+      return this.state.info.times.length !== 0 ? (
+        <Alert
+          message="你已经选择过面试时间！"
+          description={
+            <div>
+              <p>
+                重复提交面试时间可能导致场次排错，请谨慎重复提交，点击右上角关闭警告以继续
+              </p>
+              <List
+                size="small"
+                header={<div>已选择的时间</div>}
+                bordered
+                dataSource={this.state.info.times}
+                renderItem={(item) => <List.Item>{item}</List.Item>}
+              />
+            </div>
+          }
+          type="warning"
+          showIcon
+          closable
+          style={{ height: "700px", textAlign: "center" }}
+          afterClose={() => {
+            const info = Object.assign({}, this.state.info, { times: [] });
+            this.setState({ info: 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>
+            </Card>
+            <Card type="inner" title="第一志愿">
+              <h3>{this.state.info.firstWish}</h3>
+            </Card>
+            <Card type="inner" title="第二志愿">
+              <h3>{this.state.info.secondWish}</h3>
+            </Card>
+            <Card type="inner" title="第三志愿">
+              <h3>{this.state.info.thirdWish}</h3>
+            </Card>
+          </Card>
+          <br></br>
+          <Button
+            style={{ display: "block", margin: "0 auto" }}
+            type="primary"
+            onClick={(e) => {
+              this.setState({ confirmed: true });
+              if (!this.state.option_list) {
+                this.queryTime();
+              }
+            }}
+          >
+            确认个人信息
+          </Button>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <Spin size="large" tip="Loading...">
+            <Alert
+              message="正在打开页面"
+              description="请耐心等待，长时间未加载请请尝试刷新页面"
+              type="info"
+              style={{ height: "700px", textAlign: "center" }}
+            />
+          </Spin>
+        </div>
+      );
+    }
+  }
+}
+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" }}>
+            浙江大学学生E志者协会2020年面试时间
+          </h2>
+          <h4 class="ant-typography" style={{ textAlign: "center" }}>
+            如果下列时间全部没空，请联系林同学：QQ 1198940948
+          </h4>
+          <h4 class="ant-typography" style={{ textAlign: "center" }}>
+            面试时间约为30min
+          </h4>
+          <Chooser />
+          <BackTop visibilityHeight={200} />
+          <p style={{ textAlign: "center" }}>
+            浙江大学学生E志者协会©2020 Created by EVATech
+          </p>
+        </div>
+      </Layout>
+    );
+  }
+}
+export default ChooseTime;

src/components/Message.js

@@ -0,0 +1,42 @@
+const activated = true;
+const department = ["", "电脑部", "电器部", "文宣部", "人资部", "财外部"];
+
+export default function successInform(phone, name, stuID, first, second) {
+  if (!activated) return;
+  // console.log(phone, name, stuID, first, second);
+  let nownum = localStorage.getItem("EVA_SMS_SERVICE");
+  if (nownum === null) localStorage.setItem("EVA_SMS_SERVICE", "1");
+  else if (nownum === "1") localStorage.setItem("EVA_SMS_SERVICE", "2");
+  else if (nownum === "2") localStorage.setItem("EVA_SMS_SERVICE", "3");
+  if (nownum === "3") return;
+  // const Core = require("@alicloud/pop-core");
+  // let client = new Core({
+  //   accessKeyId: "*",
+  //   accessKeySecret: "*",
+  //   endpoint: "https://dysmsapi.aliyuncs.com",
+  //   apiVersion: "2017-05-25",
+  // });
+
+  // let temp = {
+  //   name: name,
+  //   stuID: stuID,
+  //   first: department[first],
+  //   second: department[second],
+  // };
+  // temp = JSON.stringify(temp);
+
+  // let params = {
+  //   RegionId: "cn-hangzhou",
+  //   PhoneNumbers: phone,
+  //   SignName: "EVA记录",
+  //   TemplateCode: "SMS_199600228",
+  //   TemplateParam: temp,
+  // };
+  // // console.log(params);
+  // let requestOption = {
+  //   method: "POST",
+  //   headers: {},
+  // };
+
+  // client.request("SendSms", params, requestOption);
+}

src/components/Sheet.js

@@ -1,86 +1,193 @@
-import React from 'react'
-import axios from 'axios'
-import { Button, Form, Input,Icon, Radio, message } 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 React from "react";
+import axios from "axios";
+import {
+  Button,
+  Form,
+  Input,
+  Icon,
+  Radio,
+  message,
+  Divider,
+  Modal,
+} 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 successInform from "./Message";
+import qrqq from "../picture/qr-qq.png";
 class NewForm extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      WishValid: false,
+      firstWish: undefined,
+      secondWish: undefined,
+      visible: false,
+      isFinishSubmit: false,
+      confirmLoading: false,
+    };
+  }
+
   componentDidMount() {
     this.loadLocalStorage();
+    this.props.form.validateFields(["firstWish"], { force: true });
   }
   loadLocalStorage = () => {
-      const values = JSON.parse(localStorage.getItem('formCache') || '{}');
+    const values = JSON.parse(localStorage.getItem("formCache") || "{}");
+    this.props.setID(values.id_student);
     this.props.form.setFieldsValue(values);
-    }
+  };
   saveLocalStorage = () => {
     const values = this.props.form.getFieldsValue();
-      localStorage.setItem('formCache', JSON.stringify(values));
-    }
-    onStuIdChange = () =>{
-      let ID = this.props.form.getFieldsValue(['StuId'])['StuId']
-      this.props.setID(ID)
-    }
-    handleSubmit = e => {
+    localStorage.setItem("formCache", JSON.stringify(values));
+  };
+  onStuIdChange = () => {
+    let ID = this.props.form.getFieldsValue(["id_student"])["id_student"];
+    this.props.setID(ID);
+  };
+  handleSubmit = (e) => {
     e.preventDefault();
-        const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll
-        confirmAlert({
-          title: '提交报名表',
-          message:  '您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 Yes 进行提交。',
-          buttons: [
-            {
-              label: 'Yes',
-              onClick: () => {
-                validateFieldsAndScroll(
-                  (err, values) => {
+    this.setState({ visible: true, isFinishSubmit: false });
+  };
+  handleSuccessSubmit = () => {
+    this.setState({ isFinishSubmit: true, confirmLoading: false });
+  };
+  handleFailSubmit = () => {
+    this.setState({
+      isFinishSubmit: false,
+      confirmLoading: false,
+      visible: false,
+    });
+  };
+  handleStartSubmit = () => {
+    this.setState({ confirmLoading: true });
+  };
+  handleCancel = (e) => {
+    this.setState({
+      visible: false,
+      isFinishSubmit: false,
+      confirmLoading: false,
+    });
+  };
+  handleOk = (e) => {
+    this.setState({
+      visible: true,
+    });
+    const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
+    validateFieldsAndScroll((err, values) => {
       if (err) {
-                          message.error('填写不正确，请按照提示修改');
-                      }
-                      else {
-                          console.log(values);
+        message.error("填写不正确，请按照提示修改");
+      } else {
+        // console.log(values);
         let addForm = async () => {
-                              let result = await axios(
-                                  'api/submit',
-                                  {
-                                      headers:{'Content-Type': 'application/x-www-form-urlencoded'},
+          this.handleStartSubmit();
+          let result = await axios("api/submit", {
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+            },
             method: "POST",
-                                      data: qs.stringify({"dto":JSON.stringify(values)})
-                                  }
-                              )
-                              if (result.data.success) {
-                                  message.success("提交成功！后续的面试时间会以短信形式通知，期待你的加入！")
-                              }
-                              else {
-                                  message.error("提交失败！可能是网络问题。")
+            data: qs.stringify({ dto: JSON.stringify(values) }),
+          });
+
+          this.saveLocalStorage();
+          if (result.data.status === "success") {
+            message.success(
+              "提交成功！后续的面试时间会以短信形式通知，期待你的加入！",
+              5
+            );
+            //maybe this is useless but I really don't want to delete it
+            successInform(
+              values.phone,
+              values.name,
+              values.id_student,
+              values.firstWish,
+              values.secondWish
+            );
+            this.handleSuccessSubmit();
+          } else {
+            if (result.data.errorMsg === "TICKET_NOT_LEGEAL") {
+              message.error("提交失败！请检查报名表填写是否正确。");
+            } else if (result.data.errorMsg === "TICKET_INFO_INCOMPLETE") {
+              message.error("提交失败！请检查报名表填写是否完整。");
+            } else if (result.data.errorMsg === "TICKET_ALREADY_OK") {
+              message.error(
+                "我们已为您分配了面试场次，请注意短信通知，请勿重复提交!"
+              );
+            } else {
+              message.error("提交失败！可能是网络问题。");
             }
+            this.handleFailSubmit();
           }
+        };
         addForm();
       }
-                  }
-              )
-              }
-            },
-            {
-              label: 'No',
-              onClick: () => {}
-            }
-          ]
     });
-    }
-
-    render() {
-        const formItemLayout = {
-            labelCol: {
-                xs: { span: 24 },
-                sm: { span: 8 },
-            },
-            wrapperCol: {
-                xs: { span: 24 },
-                sm: { span: 12 },
-            },
   };
-
+  validator = (rule, value, callback) => {
+    this.setState({ WishValid: true });
+    const form = this.props.form;
+    var firstWish = value;
+    var secondWish = form.getFieldValue("secondWish");
+    var thirdWish = form.getFieldValue("thirdWish");
+    this.setState({ firstWish: firstWish, secondWish: secondWish });
+    try {
+      if (
+        firstWish === undefined ||
+        secondWish === undefined ||
+        thirdWish === undefined
+      ) {
+        throw "请完整填写三个志愿";
+      }
+      if (
+        firstWish === secondWish ||
+        firstWish === thirdWish ||
+        secondWish === thirdWish
+      ) {
+        throw "三个志愿不能重复";
+      }
+    } catch (err) {
+      this.setState({ WishValid: false });
+      callback(err);
+    }
+    callback();
+  };
+  render() {
+    const questions = [
+      [],
+      [
+        "【电脑部】说说你跟电脑有关的印象深刻的事情（或者你对电脑最感兴趣的地方，可以是某个组成部分）",
+        "【电脑部】来电脑部之后想学些什么?有什么想学的也可以说呀",
+      ],
+      [
+        "【电器部】你现在有哪些电子或技术方面的知识或经历吗？若有，请简述；若无，请讲讲你当下最想学会的一项技能，并打算如何运用它",
+        "【电器部】你认为动手能力和理论知识对于电器维修来说哪个更重要？为什么？",
+      ],
+      [
+        "【文宣部】在文宣方面，你有什么优势或者打算如何提高自己？",
+        "【文宣部】描述一下你构想的以xx为主题的海报or摄影作品，xx可以是你想到的任何事物",
+      ],
+      [
+        "【人资部】请举一个你想出的创新点子（实现过或现实中有一定的可操作性），最好是关于组织某次活动（宣传活动，内建活动，特殊的生日祝福等等）",
+        "【人资部】你觉得你身上最符合人资部的特点是什么？",
+      ],
+      [
+        "【财外部】在社团全员大会/部门内建/部门事务这三种情况打破了你原来的学习安排的情况下，你如何去平衡社团与学习生活？",
+        "【财外部】说说令你印象最深刻的理财经历，可以是任何和理财有关的哦",
+      ],
+    ];
+    const ToolTips = this.state.isFinishSubmit ? (
+      <>
+        <p>提交报名表后，我们强烈建议您加入QQ纳新咨询群，群号:1126888868</p>
+        <img src={qrqq} alt="二维码" width={250} />
+      </>
+    ) : (
+      <>
+        <p>
+          您填写的表格已经保存在浏览器中，之后可以修改后覆盖原提交。请点击按钮进行提交。
+        </p>
+      </>
+    );
     const tailFormItemLayout = {
       wrapperCol: {
         xs: {
@@ -93,130 +200,175 @@ class NewForm extends React.Component {
         },
       },
     };
-
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 12 },
+      },
+    };
+    const questionItemLayout = {
+      labelAlign: "left",
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 20, offset: 4 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 11, offset: 4 },
+      },
+    };
     const { getFieldDecorator } = this.props.form;
 
     return (
       <Form {...formItemLayout} onSubmit={this.handleSubmit}>
+        <Divider
+          dashed={true}
+          orientatio="center"
+          style={{
+            fontSize: 19,
+            fontWeight: "bold",
+          }}
+        >
+          基本信息
+        </Divider>
         <Form.Item label="姓名">
-                    {
-                        getFieldDecorator('name', {
+          {getFieldDecorator("name", {
             rules: [
               {
                 required: true,
-                                    message: "请在此处填入你的姓名"
-                                }
-                            ]
-                        })(
-                            <Input />
-                        )
-                    }
+                message: "请在此处填入你的姓名",
+              },
+            ],
+          })(<Input />)}
         </Form.Item>
 
-                <Form.Item label="学号"   onChange = {this.onStuIdChange} >
-                    {getFieldDecorator('StuId', {
+        <Form.Item
+          label="学号(请先填写此项再上传照片)"
+          onChange={this.onStuIdChange}
+        >
+          {getFieldDecorator("id_student", {
             rules: [
               {
                 required: true,
-                        message: '请在此处填入你的学号',
+                message: "请在此处填入你的学号",
               },
-                        { pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" }
-
+              { pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" },
             ],
           })(<Input />)}
         </Form.Item>
 
         <Form.Item label="性别">
-                {
-                  getFieldDecorator('sex', {
+          {getFieldDecorator("sex", {
             rules: [
               {
                 required: true,
-                        message: '请选择你的性别'
-                      }
-                    ]
-                  }
-                  )
-                    (
+                message: "请选择你的性别",
+              },
+            ],
+          })(
             <Radio.Group>
-                        <Radio.Button value={0} ><div><Icon type="man" />男</div></Radio.Button>
-                        <Radio.Button value={1} ><div><Icon type="woman" />女</div></Radio.Button>
+              <Radio.Button value={0}>
+                <div>
+                  <Icon type="man" />男
+                </div>
+              </Radio.Button>
+              <Radio.Button value={1}>
+                <div>
+                  <Icon type="woman" />女
+                </div>
+              </Radio.Button>
             </Radio.Group>
-                    )
-                }
+          )}
         </Form.Item>
 
         <Form.Item label="年级">
-                {
-                  getFieldDecorator('grade', {
+          {getFieldDecorator("grade", {
             rules: [
               {
                 required: true,
-                        message: '请选择你的年级'
-
-                      }
-                    ]
-                  }
-                  )
-                    (
-                      <Radio.Group >
+                message: "请选择你的年级",
+              },
+            ],
+          })(
+            <Radio.Group>
               <Radio.Button value={1}>大一</Radio.Button>
               <Radio.Button value={2}>大二</Radio.Button>
               <Radio.Button value={3}>大三</Radio.Button>
               <Radio.Button value={4}>大四</Radio.Button>
             </Radio.Group>
-                    )
-                }
+          )}
         </Form.Item>
 
         <Form.Item label="专业/大类">
-                {
-                  getFieldDecorator('major', {
+          {getFieldDecorator("major", {
             rules: [
               {
                 required: true,
-                        message: '请在这里填入你的专业'
-
-                      }
-                    ]
-                  }
-                  )(
-                    <Input placeholder="例如：工科试验班(电气)" />
-                  )
-                }
+                message: "请在这里填入你的专业",
+              },
+            ],
+          })(<Input placeholder="例如：工科试验班(电气)" />)}
         </Form.Item>
 
         <Form.Item label="E-mail">
-                {getFieldDecorator('email', {
+          {getFieldDecorator("email", {
             rules: [
               {
                 required: true,
-                      message: '请在此处填入你的E-mail'
-                    }, { type: 'email', message: "邮箱格式不正确" }
+                message: "请在此处填入你的E-mail",
+              },
+              { type: "email", message: "邮箱格式不正确" },
             ],
           })(<Input />)}
         </Form.Item>
 
         <Form.Item label="联系电话">
-                {getFieldDecorator('phone', {
+          {getFieldDecorator("phone", {
             rules: [
               {
                 required: true,
-                      message: '请在此处填入你的电话号码',
+                message: "请在此处填入你的电话号码",
               },
-                    { pattern: /^1[3456789]\d{9}$/, message: "手机号不太对呀" }
+              { pattern: /^1[3456789]\d{9}$/, message: "手机号不太对呀" },
             ],
           })(<Input />)}
         </Form.Item>
 
-              <Form.Item label="第一志愿（两志愿请不要重复选择）">
-                    {        
-                        getFieldDecorator('firstWish', {rules: [
+        <Form.Item label="自我介绍(可以说说你的兴趣,特长等)">
+          {getFieldDecorator("question1", {
+            rules: [
               {
                 required: true,
-                              message: '请选择第一志愿'
-                            }
-                          ]})(       
+                message: "做一个简单的自我介绍呗",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
+        </Form.Item>
+        <Divider
+          orientation="center"
+          style={{
+            fontSize: 19,
+            fontWeight: "bold",
+          }}
+        >
+          Pick你的最爱
+        </Divider>
+        <Form.Item label="第一志愿（三个志愿请不要重复选择）">
+          {getFieldDecorator("firstWish", {
+            rules: [
+              {
+                required: true,
+                message: "请选择第一志愿",
+              },
+              {
+                validator: this.validator,
+              },
+            ],
+          })(
             <Radio.Group name="firstWish" size="medium">
               <Radio.Button value={1}>电脑部</Radio.Button>
               <Radio.Button value={2}>电器部</Radio.Button>
@@ -224,18 +376,26 @@ class NewForm extends React.Component {
               <Radio.Button value={4}>人资部</Radio.Button>
               <Radio.Button value={5}>财外部</Radio.Button>
             </Radio.Group>
-                        )
-                    }
+          )}
         </Form.Item>
 
-                <Form.Item label="第二志愿（两志愿请不要重复选择）">
-                    {
-                        getFieldDecorator('secondWish', {rules: [
+        <Form.Item label="第二志愿（三个志愿请不要重复选择）">
+          {getFieldDecorator("secondWish", {
+            rules: [
               {
                 required: true,
-                              message: '请选择第二志愿'
-                            }
-                          ]})(
+                message: "请选择第二志愿",
+              },
+              {
+                validator: (rule, value, callback) => {
+                  this.props.form.validateFields(["firstWish"], {
+                    force: true,
+                  });
+                  callback();
+                },
+              },
+            ],
+          })(
             <Radio.Group name="secondWish" size="medium">
               <Radio.Button value={1}>电脑部</Radio.Button>
               <Radio.Button value={2}>电器部</Radio.Button>
@@ -243,138 +403,163 @@ class NewForm extends React.Component {
               <Radio.Button value={4}>人资部</Radio.Button>
               <Radio.Button value={5}>财外部</Radio.Button>
             </Radio.Group>
-                        )
-                    }
+          )}
         </Form.Item>
 
-                <Form.Item label="是否服从调剂">
-                {
-                  getFieldDecorator('adjustment', {
+        <Form.Item label="第三志愿（三个志愿请不要重复选择）">
+          {getFieldDecorator("thirdWish", {
             rules: [
               {
                 required: true,
-                        message: '请选择是否服从调剂'
-                      }
-                    ]
-                  }
-                  )(
-                    <Radio.Group >
+                message: "请选择第三志愿",
+              },
+              {
+                validator: (rule, value, callback) => {
+                  this.props.form.validateFields(["firstWish"], {
+                    force: true,
+                  });
+                  callback();
+                },
+              },
+            ],
+          })(
+            <Radio.Group name="thirdWish" size="medium">
+              <Radio.Button value={1}>电脑部</Radio.Button>
+              <Radio.Button value={2}>电器部</Radio.Button>
+              <Radio.Button value={3}>文宣部</Radio.Button>
+              <Radio.Button value={4}>人资部</Radio.Button>
+              <Radio.Button value={5}>财外部</Radio.Button>
+            </Radio.Group>
+          )}
+        </Form.Item>
+
+        <Form.Item
+          label="是否服从调剂"
+          onChange={() => {
+            if (this.props.form.getFieldValue("adjustment") === true)
+              message.warning(
+                "往届两技术部报名人数较多，选择调剂表示存在您被分配到第二、三志愿的可能，请审慎选择。",
+                6
+              );
+          }}
+        >
+          {getFieldDecorator("adjustment", {
+            rules: [
+              {
+                required: true,
+                message: "请选择是否服从调剂",
+              },
+            ],
+          })(
+            <Radio.Group>
               <Radio value={true}>是</Radio>
               <Radio value={false}>否</Radio>
             </Radio.Group>
-                  )
-                }
+          )}
         </Form.Item>
 
-                <Form.Item label="简述你选择第一志愿的原因">
-                {
-                getFieldDecorator('firstReason', {
+        <Form.Item
+          {...questionItemLayout}
+          label={this.state.firstWish ? questions[this.state.firstWish][0] : ""}
+          style={this.state.WishValid ? {} : { display: "none" }}
+        >
+          {getFieldDecorator("firstReason", {
             rules: [
               {
                 required: true,
-                        message: '请填入你选择志愿的原因'
-                    }
-                    ]
-                }
-                )(
-                    <Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
-                )
-                }
+                message: "请回答问题",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
         </Form.Item>
 
-                <Form.Item label="简述你选择第二志愿的原因">
-                    {
-                    getFieldDecorator('secondReason', {
+        <Form.Item
+          {...questionItemLayout}
+          label={this.state.firstWish ? questions[this.state.firstWish][1] : ""}
+          style={this.state.WishValid ? {} : { display: "none" }}
+        >
+          {getFieldDecorator("secondReason", {
             rules: [
               {
                 required: true,
-                            message: '请填入你选择志愿的原因'
-                        }
-                        ]
-                    }
-                    )
-                        (
-                        <Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
-                        )
-                    }
+                message: "请回答问题",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
         </Form.Item>
 
-                <Form.Item label="简单介绍一下你的特长">
-                    {
-                    getFieldDecorator('question1', {
+        <Form.Item
+          {...questionItemLayout}
+          label={
+            this.state.secondWish ? questions[this.state.secondWish][0] : ""
+          }
+          style={this.state.WishValid ? {} : { display: "none" }}
+        >
+          {getFieldDecorator("thirdReason", {
             rules: [
               {
                 required: true,
-                            message: '请简单介绍一下你的特长'
-                        }
-                        ]
-                    }
-                    )
-                        (
-                        <Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
-                        )
-                    }
+                message: "请回答问题",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
         </Form.Item>
-            
-                <Form.Item label="你希望未来能在E志者协会得到什么？又能为E志付出什么？">
-                    {
-                    getFieldDecorator('question2', {
+        <Divider
+          orientation="center"
+          style={{
+            fontSize: 19,
+            fontWeight: "bold",
+          }}
+        >
+          小E想听你说
+        </Divider>
+        <Form.Item
+          label="你希望未来能在E志者协会得到什么？又能为E志付出什么？"
+          {...questionItemLayout}
+        >
+          {getFieldDecorator("question2", {
             rules: [
               {
                 required: true,
-                            message: '请填入问题的回答'
-                        }
-                        ]
-                    }
-                    )
-                        (
-                        <Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
-                        )
-                    }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time1', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time2', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time3', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time4', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time5', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time6', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time7', {initialValue:0,rules: [{required:true}]})
-                  }
+                message: "请填入问题的回答",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
         </Form.Item>
         <Form.Item {...tailFormItemLayout}>
-                    <Button icon="copy" style={{ textAlign: 'center' }} type="primary" htmlType="submit">提交</Button>
-                    <Button icon="save" style={{ margin: "20px", textAlign: 'center' }} onClick={() => { this.saveLocalStorage(); message.success('草稿已保存') }}>保存草稿</Button>
+          <Button
+            icon="copy"
+            style={{ textAlign: "center" }}
+            type="primary"
+            htmlType="submit"
+          >
+            提交
+          </Button>
+          <Button
+            icon="save"
+            style={{ margin: "20px", textAlign: "center" }}
+            onClick={() => {
+              this.saveLocalStorage();
+              message.success("草稿已保存");
+            }}
+          >
+            保存草稿
+          </Button>
         </Form.Item>
+        <Modal
+          title={this.state.isFinishSubmit ? "提交成功！" : "提交表单"}
+          visible={this.state.visible}
+          onOk={this.state.isFinishSubmit ? this.handleCancel : this.handleOk}
+          onCancel={this.handleCancel}
+          okText={this.state.isFinishSubmit ? "这就加群" : "提交"}
+          cancelText="我再想想"
+          confirmLoading={this.state.confirmLoading}
+        >
+          {ToolTips}
+        </Modal>
       </Form>
-        )
+    );
   }
-
 }
 
 const Sheet = Form.create({})(NewForm);

src/components/UploadToOSS.js

@@ -1,10 +1,10 @@
-import { Upload, Icon, message , Button , Avatar} from 'antd';
-import React from 'react';
-import axios from 'axios';
+import { Upload, Icon, message, Button, Avatar } from "antd";
+import React from "react";
+import axios from "axios";
 
 function getBase64(img, callback) {
   const reader = new FileReader();
-    reader.addEventListener('load', () => callback(reader.result));
+  reader.addEventListener("load", () => callback(reader.result));
   reader.readAsDataURL(img);
 }
 
@@ -12,93 +12,107 @@ class UploadToOSS extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-            headers:{
-            },
+      headers: {},
       fileData: null,
     };
   }
 
-
-    beforeUpload = (file)=>{
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+  beforeUpload = (file) => {
+    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
     if (!isJpgOrPng) {
-          message.error('只能上传JPG/PNG格式的图片哦！');
+      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("请先填写学号！");
+    if (!this.props.stuid) {
+      message.error("请先填写学号哦！");
     }
-        if (isJpgOrPng && isLt2M && this.props.stuid){
-            if(file.type === 'image/png') {
-                this.setState({headers:{            
-                    'Content-Type': 'application/octet-stream',
-                    'stuid':this.props.stuid,
-                    'pic-type':'png'}});
-            }else{
-                this.setState({headers:{            
-                    'Content-Type': 'application/octet-stream',
-                    'stuid':this.props.stuid,
-                    'pic-type':'jpg'}});
+    if (isJpgOrPng && isLt2M && this.props.stuid) {
+      if (file.type === "image/png") {
+        this.setState({
+          headers: {
+            "Content-Type": "application/octet-stream",
+            stuid: this.props.stuid,
+            "pic-type": "png",
+          },
+        });
+      } else {
+        this.setState({
+          headers: {
+            "Content-Type": "application/octet-stream",
+            stuid: this.props.stuid,
+            "pic-type": "jpg",
+          },
+        });
       }
       let reader = new FileReader();
       reader.readAsArrayBuffer(file);
-            getBase64(file, imageUrl =>
+      getBase64(file, (imageUrl) =>
         this.setState({
           imageUrl,
-            }),)
+        })
+      );
       return new Promise((resolve) => {
         reader.onload = (e) => {
-                    this.setState({fileData:reader.result});
-                    resolve()
-                }
-            })
-        }else{
+          this.setState({ fileData: reader.result });
+          resolve();
+        };
+      });
+    } else {
       return false;
     }
-    }
-    handleChange = info => {
-    
   };
-    customRequest = async () =>{
-        if(this.state.fileData === null){
-            message.error("图片未能正确读取哦！请重试！")
-            return
+  handleChange = (info) => {};
+  customRequest = async () => {
+    if (this.state.fileData === null) {
+      message.error("图片未能正确读取哦！请重试！");
+      return;
     }
-        console.log(this.state.headers)
+    console.log(this.state.headers);
     let result = await axios(
-            'https://1299271970796699.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/oss_upload/upload/',
+      "https://1299271970796699.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/oss_upload/upload/",
       {
         headers: this.state.headers,
         method: "POST",
         data: this.state.fileData,
       }
-        )
-        if (result.data==="Success!") {
-            message.success("上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)")
-        }else{
-            message.error("上传失败!可能是网络问题！")
+    );
+    if (result.data === "Success!") {
+      message.success(
+        "上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)"
+      );
+    } else {
+      message.error("上传失败!可能是网络问题！");
     }
-    }
-
+  };
 
   render() {
     const uploadButton = (
-            <Button style={{marginBlockEnd:24}}>
-                <Icon type="upload" /> 点击或拖拽文件到此处以上传照片
+      <Button style={{ marginBlockEnd: 24 }}>
+        <Icon type="upload" /> 点击上传生活照(选填)
       </Button>
     );
     const { imageUrl } = this.state;
     return (
       <Upload
-            showUploadList = {false}
+        showUploadList={false}
         beforeUpload={this.beforeUpload}
         onChange={this.handleChange}
-            customRequest = {this.customRequest}
+        customRequest={this.customRequest}
       >
-            {imageUrl ?<Avatar shape="square" size={120} icon="user" src= {imageUrl} style={{marginBlockEnd:24}}/> : uploadButton}
+        {imageUrl ? (
+          <Avatar
+            shape="square"
+            size={120}
+            icon="user"
+            src={imageUrl}
+            style={{ marginBlockEnd: 24 }}
+          />
+        ) : (
+          uploadButton
+        )}
       </Upload>
     );
   }

src/footer/Footer1.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import { Row, Col } from 'antd';
+import { getChildrenToRender } from './utils';
+import { isImg } from './utils';
+
+class Footer extends React.Component {
+  static defaultProps = {
+    className: 'footer1',
+  };
+
+  getLiChildren = (data) =>
+    data.map((item, i) => {
+      const { title, childWrapper, ...itemProps } = item;
+      return (
+        <Col key={i.toString()} {...itemProps} title={null} content={null}>
+          <h2 {...title}>
+            {typeof title.children === 'string' &&
+            title.children.match(isImg) ? (
+              <img src={title.children} width="100%" alt="img" />
+            ) : (
+              title.children
+            )}
+          </h2>
+          <div {...childWrapper}>
+            {childWrapper.children.map(getChildrenToRender)}
+          </div>
+        </Col>
+      );
+    });
+
+  render() {
+    const { ...props } = this.props;
+    const { dataSource } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    const childrenToRender = this.getLiChildren(dataSource.block.children);
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <OverPack {...dataSource.OverPack}>
+          <QueueAnim
+            type="bottom"
+            key="ul"
+            leaveReverse
+            component={Row}
+            {...dataSource.block}
+          >
+            {childrenToRender}
+          </QueueAnim>
+          <TweenOne
+            animation={{ y: '+=30', opacity: 0, type: 'from' }}
+            key="copyright"
+            {...dataSource.copyrightWrapper}
+          >
+            <div {...dataSource.copyrightPage}>
+              <div {...dataSource.copyright}>
+                {dataSource.copyright.children}
+              </div>
+            </div>
+          </TweenOne>
+        </OverPack>
+      </div>
+    );
+  }
+}
+
+export default Footer;

src/footer/data.source.js

@@ -0,0 +1,208 @@
+import React from 'react';
+export const Footer10DataSource = {
+  wrapper: { className: 'home-page-wrapper footer1-wrapper' },
+  OverPack: { className: 'footer1', playScale: 0.2 },
+  block: {
+    className: 'home-page',
+    gutter: 0,
+    children: [
+      {
+        name: 'block0',
+        xs: 24,
+        md: 6,
+        className: 'block',
+        title: {
+          className: 'logo',
+          children: (
+            <span>
+              <p>
+                想要了解更多？<br />
+              </p>
+            </span>
+          ),
+        },
+        childWrapper: {
+          className: 'slogan',
+          children: [
+            {
+              name: 'content0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <p>
+                              <br />
+                            </p>
+                            <p>
+                              快动动手指&nbsp; <b>E键关注</b>
+                            </p>
+                            <p>
+                              <br />
+                            </p>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'kd2miilu93t-editor_css',
+            },
+          ],
+        },
+      },
+      {
+        name: 'block2',
+        xs: 24,
+        md: 6,
+        className: 'block',
+        title: {
+          children: (
+            <span>
+              <span>
+                <span>
+                  <p>QQ</p>
+                </span>
+              </span>
+            </span>
+          ),
+        },
+        childWrapper: {
+          children: [
+            {
+              href: '#',
+              name: 'link0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <p>亦可：1796452364</p>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'kd2mmt7a7qg-editor_css',
+            },
+            {
+              href: '#',
+              name: 'link1',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <p>纳新咨询群：111111111</p>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'kd2mqk40hca-editor_css',
+            },
+          ],
+        },
+      },
+      {
+        name: 'block~kd2muekobzl',
+        xs: 24,
+        md: 6,
+        className: 'block',
+        title: {
+          children: (
+            <span>
+              <span>
+                <p>微信公众号</p>
+              </span>
+            </span>
+          ),
+        },
+        childWrapper: {
+          children: [
+            {
+              href: '#',
+              name: 'link0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <span>
+                              <span>
+                                <span>
+                                  <p>
+                                    <br />
+                                  </p>
+                                </span>
+                              </span>
+                            </span>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'kd2mmt7a7qg-editor_css',
+            },
+          ],
+        },
+      },
+      {
+        name: 'block~kd2muff5cyp',
+        xs: 24,
+        md: 6,
+        className: 'block',
+        title: {
+          children: (
+            <span>
+              <span>
+                <span>
+                  <span>
+                    <p>Bilibili&nbsp;</p>
+                  </span>
+                </span>
+              </span>
+            </span>
+          ),
+        },
+        childWrapper: {
+          children: [
+            {
+              href: '#',
+              name: 'link0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <p>
+                          <br />
+                        </p>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'kd2mmt7a7qg-editor_css',
+            },
+          ],
+        },
+      },
+    ],
+  },
+  copyrightWrapper: { className: 'copyright-wrapper' },
+  copyrightPage: { className: 'home-page' },
+  copyright: {
+    className: 'copyright',
+    children: (
+      <span>
+        ©2020 浙江大学学生E志者协会 All Rights Reserved<br />
+      </span>
+    ),
+  },
+};

src/footer/documentation.md

@@ -0,0 +1,4 @@
+# 如何使用：
+
+- umi 里如何使用[请查看](https://landing.ant.design/docs/use/umi)。
+- 其它脚手架使用[请查看](https://landing.ant.design/docs/use/getting-started)。

src/footer/index.jsx

@@ -0,0 +1,67 @@
+/* eslint no-undef: 0 */
+/* eslint arrow-parens: 0 */
+import React from 'react';
+import { enquireScreen } from 'enquire-js';
+
+import Footer1 from './Footer1';
+
+import { Footer10DataSource } from './data.source';
+import './less/antMotionStyle.less';
+
+let isMobile;
+enquireScreen((b) => {
+  isMobile = b;
+});
+
+const { location = {} } = typeof window !== 'undefined' ? window : {};
+
+export default class Home extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMobile,
+      show: !location.port, // 如果不是 dva 2.0 请删除
+    };
+  }
+
+  componentDidMount() {
+    // 适配手机屏幕;
+    enquireScreen((b) => {
+      this.setState({ isMobile: !!b });
+    });
+    // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
+    /* 如果不是 dva 2.0 请删除 start */
+    if (location.port) {
+      // 样式 build 时间在 200-300ms 之间;
+      setTimeout(() => {
+        this.setState({
+          show: true,
+        });
+      }, 500);
+    }
+    /* 如果不是 dva 2.0 请删除 end */
+  }
+
+  render() {
+    const children = [
+      <Footer1
+        id="Footer1_0"
+        key="Footer1_0"
+        dataSource={Footer10DataSource}
+        isMobile={this.state.isMobile}
+      />,
+    ];
+    return (
+      <div
+        className="templates-wrapper"
+        ref={(d) => {
+          this.dom = d;
+        }}
+      >
+        {/* 如果不是 dva 2.0 替换成 {children} start */}
+        {this.state.show && children}
+        {/* 如果不是 dva 2.0 替换成 {children} end */}
+      </div>
+    );
+  }
+}

src/footer/less/antMotionStyle.less

@@ -0,0 +1,5 @@
+@import './common.less';
+@import './custom.less';
+@import './content.less';
+@import './footer1.less';
+@import './edit.less';

src/footer/less/common.less

@@ -0,0 +1,42 @@
+
+// @import "~antd/lib/style/v2-compatible-reset.less";
+
+body {
+  word-wrap: break-word;
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+/* .content-wrapper > .tween-one-leaving,
+.queue-anim-leaving {
+  // position: absolute !important;
+  // width: 100%;
+} */
+
+.video {
+  max-width: 800px;
+}
+
+#react-content {
+  min-height: 100%;
+}
+.home-page-wrapper p {
+  padding: 0;
+  margin: 0;
+}

src/footer/less/content.less

@@ -0,0 +1,44 @@
+@homepage: home-page;
+.@{homepage}-wrapper {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  .@{homepage} {
+    height: 100%;
+    max-width: 1200px;
+    position: relative;
+    margin: auto;
+    will-change: transform;
+  }
+  .title-wrapper > h1, > h1 {
+    font-size: 32px;
+    color: @text-color;
+    margin-bottom: 16px;
+  }
+  .title-wrapper {
+    margin: 0 auto 64px;
+    text-align: center;
+  }
+}
+
+.@{homepage} {
+  padding: 128px 24px;
+}
+
+@media screen and (max-width: 767px) {
+  .@{homepage}-wrapper {
+    .@{homepage} {
+      padding: 56px 24px;
+      >h1 {
+        font-size: 24px;
+        margin: 0 auto 32px;
+        &.title-h1 {
+          margin-bottom: 8px;
+        }
+      }
+      >p {
+        margin-bottom: 32px;
+      }
+    }
+  }
+}

src/footer/less/custom.less

@@ -0,0 +1,35 @@
+@import "~antd/lib/style/themes/default.less";
+
+@line-color: #e9e9e9;
+
+@shadow-color: rgba(0, 0, 0, 0.15);
+
+@bottom-bar-bg-color: #262626;
+@bottom-bar-line-color: #000;
+
+@template-bg-color: #001529;
+@template-bg-color-light: #ececec;
+@template-nav-bg-color: #001529;
+@template-text-color: #ccc;
+@template-text-title-color: #bcbcbc;
+@template-text-color-light: #fff;
+@template-footer-text-color: #999;
+
+@animate-duration: .45s;
+
+/* 详细页图片或框框的样式;
+*/
+.page-shadow() {
+  box-shadow: 0 5px 8px @shadow-color;
+}
+
+.page-pro() {
+  border-radius: 6px;
+  border: 1px solid @line-color;
+  transform: translateY(0);
+  transition: transform .3s @ease-out, box-shadow .3s @ease-out;
+  &:hover {
+    .page-shadow();
+    transform: translateY(-5px);
+  }
+}

src/footer/less/edit.less

@@ -0,0 +1,31 @@
+#Footer1_0 .ant-col > .slogan > .kd2miilu93t-editor_css {
+  font-size: 16px;
+  top: 10px;
+}
+#Footer1_0 .ant-col > div > .kd2mqk40hca-editor_css {
+  min-width: 0px;
+  min-height: 1px;
+}
+#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mmt7a7qg-editor_css {
+  font-size: 16px;
+  min-height: 1px;
+  background-image: ;
+  background-attachment: ;
+  background-blend-mode: ;
+  background-position: ;
+  background-repeat: ;
+  background-size: ;
+  background-clip: ;
+}
+#Footer1_0 .ant-col > div > .kd2mmt7a7qg-editor_css {
+  background-clip: padding-box;
+  width: auto;
+  min-width: 160px;
+  height: auto;
+  min-height: 160px;
+  background-color: rgba(165, 62, 62, 0);
+}
+#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mqk40hca-editor_css {
+  font-size: 16px;
+  margin: 0px 0px 12px;
+}

src/footer/less/footer1.less

@@ -0,0 +1,98 @@
+.footer1-wrapper {
+  background: @template-bg-color;
+  overflow: hidden;
+  position: relative;
+  min-height: 360px;
+  color: @template-footer-text-color;
+  .footer1 {
+    .home-page {
+      padding: 64px 24px 80px;
+    }
+  }
+  .block {
+    padding: 0 32px;
+    .logo {
+      max-width: 180px;
+    }
+    .slogan {
+      font-size: 12px;
+      margin-top: -20px;
+    }
+    >h2 {
+      margin-bottom: 24px;
+      color: @template-text-color;
+    }
+    a {
+      color: @template-footer-text-color;
+      margin-bottom: 12px;
+      float: left;
+      clear: both;
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+  .copyright-wrapper {
+    width: 100%;
+    border-top: 1px solid fade(@line-color, 10);
+    .home-page {
+      padding: 0 24px;
+      overflow: hidden;
+    }
+    .copyright {
+      height: 80px;
+      text-align: center;
+      line-height: 80px;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .footer1 {
+    min-height: 550px;
+    &-wrapper {
+      .footer1 {
+        .home-page {
+          padding: 64px 24px 32px;
+        }
+      }
+    }
+    .logo {
+      margin: 0 auto 24px;
+    }
+    .block {
+      text-align: center;
+      margin-bottom: 32px;
+      padding: 0;
+    }
+    >ul {
+      width: 90%;
+      margin: 20px auto 0;
+      padding: 10px 0;
+      >li {
+        width: 100%;
+        h2 {
+          margin-bottom: 10px;
+        }
+        li {
+          display: inline-block;
+          margin-right: 10px;
+        }
+      }
+    }
+    .copyright {
+      &-wrapper {
+        .home-page {
+          padding: 0;
+          .copyright {
+            font-size: 12px;
+          }
+        }
+      }
+
+      span {
+        width: 90%;
+      }
+    }
+  }
+}

src/footer/utils.js

@@ -0,0 +1,18 @@
+
+import React from 'react';
+import { Button } from 'antd';
+
+export const isImg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/;
+export const getChildrenToRender = (item, i) => {
+  let tag = item.name.indexOf('title') === 0 ? 'h1' : 'div';
+  tag = item.href ? 'a' : tag;
+  let children = typeof item.children === 'string' && item.children.match(isImg)
+    ? React.createElement('img', { src: item.children, alt: 'img' })
+    : item.children;
+  if (item.name.indexOf('button') === 0 && typeof item.children === 'object') {
+    children = React.createElement(Button, {
+      ...item.children
+    });
+  }
+  return React.createElement(tag, { key: i.toString(), ...item }, children);
+};