Initial commit

README.md

-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+#### 说明
 
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-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.
-
-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.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `yarn build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+趣选课合作机构数据平台
+sunqingwen208@pingan.com.cn
+123456

config-overrides.js

+const { override, fixBabelImports } = require('customize-cra');
+
+module.exports = override(
+  fixBabelImports('import', {
+    libraryName: 'antd',
+    libraryDirectory: 'es',
+    style: 'css',
+  }),
+);

package.json

 {
-  "name": "inclass-partners",
+  "name": "antd-demo-ts",
   "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",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-router-dom": "^5.1.4",
+    "@zooey1184/react-scripts": "^1.1.1",
+    "@zooey1184/upload_to_oss": "^1.0.1",
+    "antd": "^4.1.3",
+    "babel-plugin-import": "^1.13.0",
+    "customize-cra": "^0.9.1",
+    "echarts": "^4.7.0",
+    "needle": "^2.4.1",
     "react": "^16.13.1",
+    "react-app-rewired": "^2.1.5",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.1",
+    "typescript": "~3.7.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "up": "node upload.js",
+    "bd": "npm run build & npm run up"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -30,5 +47,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "cross-fetch": "^3.0.4",
+    "lodash": "^4.17.15",
+    "moment": "^2.26.0",
+    "node-sass": "^4.14.1"
   }
 }

src/App.css

-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+@import '~antd/dist/antd.css';
\ No newline at end of file

src/App.js

-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.tsx

+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import BaseRoute from './router/index';
+
+const App: React.FC = () => (
+  <div className="appWrap">
+    <BrowserRouter basename="/inclass">
+      <BaseRoute />
+    </BrowserRouter>
+  </div>
+);
+
+export default App;

src/common/catchError.js

+// class Catch {
+// 	constructor() {
+// 		this.msg = ''
+// 		this.el = null
+// 		this.device = '' // ios android
+// 		this.url = ''
+// 		this.r = Math.random() < 0.3 ? true : false // 抽取概率 如果是普遍问题，采集率30%
+
+// 	}
+
+// 	initQuery() {
+
+// 	}
+
+// 	promiseError() {
+// 		window.addEventListener("unhandledrejection", function(e){
+// 			e.preventDefault()
+// 			console.log('捕获到异常：', e);
+// 			return true;
+// 		});
+// 	}
+
+// 	/**
+// 	* @param {String}  message    错误信息
+// 	* @param {String}  source    出错文件
+// 	* @param {Number}  lineno    行号
+// 	* @param {Number}  colno    列号
+// 	* @param {Object}  error  Error对象（对象）
+// 	*/
+// 	windowError() {
+// 		window.onerror = (message, source, lineno, colno, error)=>{
+// 			console.log('捕获到异常：',{message, source, lineno, colno, error});
+// 			return true // 不会往上面冒
+// 		}
+// 	}
+
+// 	// 当一项资源（如图片或脚本）加载失败
+// 	sourceError() {
+// 		window.addEventListener('error', (error) => {
+// 			console.log('捕获到异常：', error);
+// 		}, true)
+// 	}
+	
+// 	vueError() {
+
+// 	}
+// }
\ No newline at end of file

src/common/date.js

+export default function(t) {
+	let y = t.getFullYear()
+	let mm = t.getMonth()
+	let dd = t.getDate()
+	let m = mm+1 < 10 ? `0${mm+1}` : mm+1
+	let d = dd < 10 ? `0${dd}` : dd
+	return {y, m, d, mm, dd}
+}
\ No newline at end of file

src/common/excel.ts

+const excelFn = (r:Buffer, name:string)=> {
+	var b = new Blob([r], { type: 'application/vnd.ms-excel' });
+	// 根据传入的参数b创建一个指向该参数对象的URL
+	var url = URL.createObjectURL(b);
+	var link = document.createElement('a');
+	// 设置导出的文件名
+	link.download = `${name}.xlsx`
+	link.href = url;
+	link.click()
+}
+
+export default excelFn
\ No newline at end of file

src/common/fetch.ts

+import fetch from 'cross-fetch';
+import { message } from 'antd';
+type CB = (request: any, res: any) => any;
+interface Options {
+  type?: string;
+  header?: any;
+  data?: any;
+  [key: string]: any;
+}
+
+const formate = (type: string, data: any) => {
+  if (type === 'get') {
+    let str = '';
+    for (let i in data) {
+      str += `${i}=${data[i]}&`;
+    }
+    return str.substr(0, str.length - 1);
+  } else {
+    return JSON.stringify(data);
+  }
+};
+export function api(url: string, options: Options) {
+  let host = window.location.host;
+  let type = options.type || 'POST';
+  let u = host.match(/(127.0.0.1|localhost)/)
+    ? `https://uat-nginx.jianbing.com${url}`
+    : url;
+
+  u = type === 'GET' ? `${u}?${formate('get', options.data)}` : u;
+
+  return fetch(u, {
+    method: type,
+    headers: {
+      'Content-Type': 'application/json;charset=utf-8',
+      Authorization: window.sessionStorage.getItem('token'),
+      ...options.header
+    },
+    body: type === 'GET' ? '' : formate('post', options.data)
+  })
+    .then((res: any) => {
+      if (res.status === 200) {
+        if (options.responseType) {
+          return res[options.responseType]();
+        }
+        return res.json();
+      } else if (res.status.toString().match(/40./)) {
+        res.json().then((r: any) => {
+          let msg = r.error || r.msg || 'error';
+          message.error(msg);
+          if (r.error) {
+            if (r.error.match(/token/)) {
+              message.error('登录过期，请重新登录');
+              window.location.href = '/inclass/login';
+            }
+          }
+          if (options.error && typeof options.error === 'function') {
+            options.error(r);
+          }
+        });
+      }
+    })
+    .catch(e => {
+      return new Error(e);
+    });
+}

src/index.js → src/index.tsx

@@ -5,9 +5,7 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <App />,
   document.getElementById('root')
 );
 

src/layout/accountName.tsx

+// navbar 上面的用户名 下拉选项功能
+import React, { useState, useEffect } from 'react';
+import { Menu, Dropdown, Modal, Input, message, Button } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import { api } from '../common/fetch';
+
+const AccountName: React.FC = props => {
+  const [pwdModal, set_pwdModal] = useState(false);
+  const [logout, set_logout] = useState(false);
+  const [confirm_password, set_confirm_password] = useState('');
+  const [password, set_password] = useState('');
+  const [o_pwd, set_o_pwd] = useState('');
+  const [user, set_user] = useState('');
+
+  useEffect(() => {
+    set_user(window.sessionStorage.getItem('user') as string);
+  }, []);
+
+  const { Item } = Menu;
+  const menu = (
+    <Menu>
+      <Item onClick={() => set_logout(true)}>修改密码</Item>
+      <Item onClick={() => set_pwdModal(true)}>退出登录</Item>
+    </Menu>
+  );
+
+  const handleOk = () => {
+    window.sessionStorage.removeItem('user');
+    window.sessionStorage.removeItem('token');
+    set_pwdModal(false);
+    window.location.href = '/inclass/login';
+  };
+
+  const logoutOk = () => {
+    if (o_pwd && password && confirm_password) {
+      if (confirm_password === password) {
+        changePwd();
+      } else {
+        message.error('密码不一致');
+      }
+    } else {
+      message.info('输入框不能为空');
+    }
+  };
+
+  const changePwd = () => {
+    api('/yizhi_server/api/user/password', {
+      type: 'PUT',
+      data: {
+        password: password,
+        confirm_password: confirm_password
+      }
+    }).then(r => {
+      if (r.msg) {
+        if (r.msg.match(/成功/)) {
+          message.info(`${r.msg}，请重新登录`);
+          set_pwdModal(false);
+          setTimeout(() => {
+            handleOk();
+          }, 1000);
+        } else {
+          message.info(r.msg);
+        }
+      }
+    });
+  };
+
+  const onChange = (e: any, type: string) => {
+    const v = e.target.value;
+    let obj: any = {
+      o_pwd: () => set_o_pwd(v),
+      password: () => set_password(v),
+      confirm_password: () => set_confirm_password(v)
+    };
+    obj[type]();
+  };
+  return (
+    <>
+      <Dropdown overlay={menu}>
+        <Button type="link">
+          {user} <DownOutlined />
+        </Button>
+      </Dropdown>
+      <Modal
+        title=""
+        width="300px"
+        visible={pwdModal}
+        onOk={handleOk}
+        onCancel={() => set_pwdModal(false)}
+      >
+        <p style={{ fontSize: '18px' }}>是否退出登录？</p>
+      </Modal>
+
+      <Modal
+        title="修改密码"
+        width="400px"
+        visible={logout}
+        onOk={logoutOk}
+        onCancel={() => set_logout(false)}
+      >
+        <div>
+          <Input
+            size="large"
+            placeholder="请输入你的原密码"
+            addonBefore="原密码"
+            defaultValue=""
+            autoComplete="off"
+            onChange={(e: any) => onChange(e, 'o_pwd')}
+          />
+          <div style={{ height: '20px' }} />
+          <Input.Password
+            size="large"
+            placeholder="请输入你的新密码"
+            addonBefore="新密码"
+            defaultValue=""
+            autoComplete="new-password"
+            onChange={(e: any) => onChange(e, 'password')}
+          />
+          <div style={{ height: '20px' }} />
+          <Input.Password
+            size="large"
+            defaultValue=""
+            autoComplete="new-password"
+            placeholder="请再次输入你的新密码"
+            addonBefore="确认新密码"
+            onChange={(e: any) => onChange(e, 'confirm_password')}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default AccountName;

src/layout/basicPage.tsx

+import React, { useEffect, useState } from 'react';
+import { Layout } from 'antd';
+import AccountName from './accountName';
+import SiderMenu from './siderMenu';
+import './index.scss';
+
+import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
+
+const { Header, Footer, Content } = Layout;
+
+// 如果没有相应的登录校验跳转login页面
+const Login: React.FC = () => {
+  useEffect(() => {
+    window.location.href = '/inclass/login';
+  }, []);
+  return null;
+};
+
+interface BasicPageI {
+  children: any;
+  config?: any;
+}
+
+// 基本的 layout 布局
+const BasicPage: React.FC<BasicPageI> = props => {
+  const [collapsed, set_collapse] = useState(false);
+  const [menuWidth, set_menuWidth] = useState(200);
+  const token = sessionStorage.getItem('token') || 888;
+  const toggle = () => {
+    set_menuWidth(collapsed ? 200 : 80);
+    set_collapse(!collapsed);
+  };
+  if (token) {
+    return (
+      <Layout style={{ minHeight: '100vh' }}>
+        <SiderMenu
+          collapsed={collapsed}
+          style={{
+            overflow: 'auto',
+            height: '100vh',
+            position: 'fixed',
+            left: 0,
+            width: menuWidth
+          }}
+        />
+        <Layout
+          className="site-layout"
+          style={{
+            paddingLeft: menuWidth
+          }}
+        >
+          <Header className="site-layout-background">
+            {React.createElement(
+              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
+              {
+                className: 'trigger',
+                onClick: toggle
+              }
+            )}
+            <AccountName />
+          </Header>
+          <Content
+            style={{ padding: '50px 20px', marginTop: 20, background: '#fff' }}
+          >
+            {props.children}
+          </Content>
+          <Footer>
+            <div style={{ textAlign: 'center' }}>
+              <p>©2020 - 趣选课</p>
+              <p>如有问题，请联系技术</p>
+            </div>
+          </Footer>
+        </Layout>
+      </Layout>
+    );
+  } else {
+    return <Login />;
+  }
+};
+export default BasicPage;

src/layout/index.scss

+.sider-menu {
+  .menu-header {
+    color: #fff;
+    height: 64px;
+    position: relative;
+    line-height: 64px;
+    transition: all 0.3s;
+    background: #002140;
+    // overflow: hidden;
+    .home {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .logo {
+      height: 32px;
+      width: 32px;
+      display: inline-block;
+      margin-right: 10px;
+    }
+    .title {
+      color: #fff;
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+}
+
+.site-layout-background {
+  padding: 0;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .trigger {
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color 0.3s;
+    &:hover {
+      color: #1890ff;
+    }
+  }
+}

src/layout/siderMenu.tsx

+import React, { useState } from 'react';
+import { Layout, Menu } from 'antd';
+import { Link } from 'react-router-dom';
+
+import { PieChartOutlined, UserOutlined } from '@ant-design/icons';
+
+const { Sider } = Layout;
+const { SubMenu } = Menu;
+
+interface ConfigI {
+  collapsed: boolean;
+  style?: any;
+}
+
+const MenuBar: React.FC<ConfigI> = props => {
+  const [defKey, set_defKey] = useState('1');
+
+  const routerConf = [
+    {
+      path: '/orderList',
+      title: '订单列表',
+      key: '1',
+      icon: <PieChartOutlined />
+    },
+    {
+      title: '兑换码',
+      path: '',
+      key: 'sub1',
+      icon: <UserOutlined />,
+      subs: [
+        {
+          key: '2',
+          path: '/exchangeCode',
+          title: '兑换码列表',
+          icon: ''
+        },
+        {
+          key: '3',
+          path: '/generateCode',
+          title: '兑换码生成',
+          icon: ''
+        }
+      ]
+    }
+  ];
+
+  const CreateItem = (item: any) => {
+    return (
+      <Menu.Item key={item.key} icon={item.icon}>
+        <Link to={item.path}>{item.title}</Link>
+      </Menu.Item>
+    );
+  };
+
+  const GererateRouter = () => {
+    return routerConf.map(item => {
+      if (item.subs && item.subs.length > 0) {
+        return (
+          <SubMenu key={item.key} icon={item.icon} title={item.title}>
+            {item.subs.map(idx => CreateItem(idx))}
+          </SubMenu>
+        );
+      } else {
+        return CreateItem(item);
+      }
+    });
+  };
+
+  const handleClick = (data: any) => {
+    set_defKey(data.key);
+  };
+
+  return (
+    <>
+      <Sider
+        trigger={null}
+        collapsible
+        collapsed={props.collapsed}
+        className="sider-menu"
+        style={props.style}
+      >
+        {props.collapsed ? null : (
+          <div className="menu-header">
+            <Link to="/orderList" className="home">
+              <img
+                className="logo"
+                src="//r.51gjj.com/webpublic/images/2020523/oyed3Mkrvrpdg.png"
+                alt=""
+              />
+              <div className="title">趣选课合作后台</div>
+            </Link>
+          </div>
+        )}
+        <Menu
+          theme="dark"
+          defaultSelectedKeys={['1']}
+          selectedKeys={[defKey]}
+          mode="inline"
+          onClick={handleClick}
+        >
+          {GererateRouter()}
+        </Menu>
+      </Sider>
+    </>
+  );
+};
+export default MenuBar;

src/pages/exchangeCode/index.tsx

+import React, { useState } from 'react';
+import moment from 'moment';
+import { Input, Button, Form, Row, Col } from 'antd';
+import { Link } from 'react-router-dom';
+import 'moment/locale/zh-cn';
+import BasicPage from '../../layout/basicPage';
+import List from './list';
+
+// import { api } from '../../common/fetch';
+// style
+import './index.scss';
+
+const FormItem = Form.Item;
+moment.locale('zh-cn');
+
+const Order: React.FC = () => {
+  const [courseName, set_courseName] = useState('');
+
+  const [form] = Form.useForm();
+
+  console.log(courseName);
+  // useEffect(() => {}, []);
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 10 },
+      md: { span: 10 }
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 16 },
+      md: { span: 16 }
+    }
+  };
+
+  const download = () => {
+    console.log('xiazai');
+  };
+
+  const onFinish = (values: any) => {
+    for (let i in values) {
+      if (!values[i]) delete values[i];
+    }
+    console.log('Success:', values);
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  const resetData = () => {
+    form.resetFields();
+    set_courseName('');
+  };
+
+  const handleTableChange = (args: any) => {
+    console.log(args);
+  };
+
+  let dataSource = [];
+  for (let i = 0; i < 25; i++) {
+    dataSource.push({
+      id: i,
+      courseName: '我都唔',
+      code: 'woeopwr',
+      status: 1,
+      date: '2020-05-20'
+    });
+  }
+
+  return (
+    <BasicPage>
+      <div className="analy-content">
+        <Form
+          {...formItemLayout}
+          form={form}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+        >
+          <Row {...{ gutter: { xs: 8, sm: 16, md: 24 } }}>
+            <Col>
+              <FormItem label="已购课程名称：" name="courseName">
+                <Input
+                  placeholder="请输入"
+                  onChange={e => {
+                    set_courseName(e.target.value);
+                  }}
+                />
+              </FormItem>
+            </Col>
+            <Col md={12} sm={24}>
+              <Form.Item>
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  style={{ marginRight: '12px' }}
+                >
+                  查询
+                </Button>
+                <Button htmlType="button" onClick={resetData}>
+                  重置
+                </Button>
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row
+            style={{ padding: '12px 0' }}
+            {...{ gutter: { xs: 8, sm: 16, md: 24 } }}
+          >
+            <Col md={12} sm={24}>
+              <Button type="primary" style={{ marginRight: '12px' }}>
+                <Link to="/generateCode">兑换码生成器</Link>
+              </Button>
+              <Button
+                type="primary"
+                style={{ marginRight: '12px' }}
+                onClick={download}
+              >
+                导出兑换码数据表
+              </Button>
+            </Col>
+          </Row>
+        </Form>
+      </div>
+      <List dataSource={dataSource} handleTableChange={handleTableChange} />
+    </BasicPage>
+  );
+};
+
+export default Order;

src/pages/exchangeCode/list.tsx

+import React from 'react';
+import { Table } from 'antd';
+const { Column } = Table;
+
+interface DeatilI {
+  id: string | number;
+  courseName: string | number;
+  code: string | number;
+  status: string | number;
+  date: string;
+}
+
+interface ColsI {
+  title: string;
+  dataIndex: string;
+  key: string | number;
+}
+
+interface DataSourceI {
+  dataSource: DeatilI[];
+  handleTableChange: any;
+}
+
+const columns = [
+  {
+    title: '课程ID',
+    dataIndex: 'id',
+    key: 'id'
+  },
+  {
+    title: '课程名称',
+    dataIndex: 'courseName',
+    key: 'courseName'
+  },
+  {
+    title: '兑换码',
+    dataIndex: 'code',
+    key: 'code'
+  },
+  {
+    title: '兑换情况',
+    dataIndex: 'status',
+    key: 'status'
+  },
+  {
+    title: '兑换时间',
+    dataIndex: 'date',
+    key: 'date'
+  }
+];
+
+const Cols = (list: ColsI[]) => {
+  return list.map((item: any) => {
+    return <Column {...item} key={item.key} />;
+  });
+};
+
+const List: React.FC<DataSourceI> = props => {
+  return (
+    <div style={{ padding: '30px' }}>
+      <Table
+        dataSource={props.dataSource}
+        rowKey={record => record.id || 'key'}
+        onChange={props.handleTableChange}
+        pagination={{
+          pageSize: 1,
+          showSizeChanger: true,
+          showTotal: (total, range) =>
+            `${range[1] - range[0] + 1} of ${total} items`
+        }}
+      >
+        {Cols(columns)}
+      </Table>
+    </div>
+  );
+};
+
+export default List;

src/pages/generateCode/index.tsx

+import React from 'react';
+import { Form, Input, Button, Select } from 'antd';
+import BasicPage from '../../layout/basicPage';
+
+const { Option } = Select;
+
+const layout = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 6 }
+};
+const tailLayout = {
+  wrapperCol: { offset: 4, span: 6 }
+};
+
+const GenerateCode: React.FC = () => {
+  const [form] = Form.useForm();
+
+  const onFinish = (values: any) => {
+    console.log(values);
+  };
+
+  const onReset = () => {
+    form.resetFields();
+  };
+
+  const It = [
+    {
+      name: '趣选课',
+      id: 1
+    },
+    {
+      name: '我连网',
+      id: 2
+    }
+  ];
+
+  return (
+    <BasicPage>
+      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
+        <Form.Item
+          name="institution"
+          label="机构名称："
+          rules={[{ required: true, message: '请选择机构' }]}
+        >
+          <Select placeholder="请选择机构" allowClear>
+            {It.map(item => {
+              return (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              );
+            })}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="courseName"
+          label="课程名称："
+          rules={[{ required: true, message: '请选择课程' }]}
+        >
+          <Select placeholder="请选择课程名称" allowClear>
+            {It.map(item => {
+              return (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              );
+            })}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="channel"
+          label="渠道名称："
+          rules={[
+            { required: true, message: '请输入渠道' },
+            {
+              whitespace: true,
+              message: '不能为空格字符'
+            }
+          ]}
+        >
+          <Input placeholder="请输入" />
+        </Form.Item>
+        <Form.Item
+          name="amount"
+          label="兑换码数量："
+          rules={[
+            { required: true, message: '请输入兑换码数量' },
+            {
+              whitespace: true,
+              message: '不能为空格字符'
+            },
+            {
+              pattern: /^[0-9]+$/,
+              message: '仅支持输入数字'
+            }
+          ]}
+        >
+          <Input placeholder="请输入" />
+        </Form.Item>
+        <Form.Item {...tailLayout}>
+          <Button type="primary" htmlType="submit">
+            生成兑换码
+          </Button>
+          <Button
+            htmlType="button"
+            onClick={onReset}
+            style={{ marginLeft: '20px' }}
+          >
+            重置
+          </Button>
+        </Form.Item>
+      </Form>
+    </BasicPage>
+  );
+};
+
+export default GenerateCode;

src/pages/generateCode/list.tsx

+import React from 'react';
+import { Table } from 'antd';
+const { Column } = Table;
+
+interface DeatilI {
+  id: string | number;
+  courseName: string | number;
+  code: string | number;
+  status: string | number;
+  date: string;
+}
+
+interface ColsI {
+  title: string;
+  dataIndex: string;
+  key: string | number;
+}
+
+interface DataSourceI {
+  dataSource: DeatilI[];
+  handleTableChange: any;
+}
+
+const columns = [
+  {
+    title: '课程ID',
+    dataIndex: 'id',
+    key: 'id'
+  },
+  {
+    title: '课程名称',
+    dataIndex: 'courseName',
+    key: 'courseName'
+  },
+  {
+    title: '兑换码',
+    dataIndex: 'code',
+    key: 'code'
+  },
+  {
+    title: '兑换情况',
+    dataIndex: 'status',
+    key: 'status'
+  },
+  {
+    title: '兑换时间',
+    dataIndex: 'date',
+    key: 'date'
+  }
+];
+
+const Cols = (list: ColsI[]) => {
+  return list.map((item: any) => {
+    return <Column {...item} key={item.key} />;
+  });
+};
+
+const List: React.FC<DataSourceI> = props => {
+  return (
+    <div style={{ padding: '30px' }}>
+      <Table
+        dataSource={props.dataSource}
+        onChange={props.handleTableChange}
+        pagination={{
+          pageSize: 1,
+          showSizeChanger: true,
+          showTotal: (total, range) =>
+            `${range[1] - range[0] + 1} of ${total} items`
+        }}
+      >
+        {Cols(columns)}
+      </Table>
+    </div>
+  );
+};
+
+export default List;

src/pages/login/index.css

+.loginPane {
+	position: relative;
+	width: 70vw;
+	min-width: 960px;
+	display: block;
+	margin: 0 auto;
+	padding-top: 20vh;
+}
+.login-inline {
+	display: inline-block;
+	vertical-align: middle;
+}
+.loginItem {
+	margin: 15px 0;
+}
+.btn {
+	width: 100%;
+	border-radius: 5px;
+	outline: none;
+	border: none;
+	height: 40px;
+	font-size: 16px;
+}
+.btn_act {
+	background-color: darkcyan;
+	color: #fff;
+}
\ No newline at end of file

src/pages/login/index.tsx

+import React, { useState, useMemo } from 'react';
+import { Input, message, Button, Modal } from 'antd';
+import { UserOutlined, UnlockOutlined } from '@ant-design/icons';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { api } from '../../common/fetch';
+// style
+import './index.css';
+
+interface Btn {
+  title: string;
+}
+
+// login main
+const Login: React.FC<RouteComponentProps> = () => {
+  const [passport, set_passport] = useState('');
+  const [password, set_password] = useState('');
+  const [isEnable, set_Enable] = useState(false);
+  const [showModal, set_showModal] = useState(false);
+  const onChangeInp = (e: any, name: string) => {
+    let obj: any = {
+      passport: (e: string) => {
+        set_passport(e);
+      },
+      password: (e: string) => {
+        set_password(e);
+      }
+    };
+    obj[name](e.target.value);
+  };
+  // 按钮可用
+  useMemo(() => {
+    if (password && passport) {
+      set_Enable(true);
+    } else {
+      set_Enable(false);
+    }
+  }, [passport, password]);
+
+  // message 设置
+  message.config({
+    duration: 2,
+    maxCount: 3
+  });
+  const info = (msg: string) => {
+    message.info(msg);
+  };
+
+  // 登录按钮
+  const LoginBtn: React.FC<Btn & RouteComponentProps> = props => {
+    const submit = () => {
+      if (isEnable) {
+        const { history } = props;
+        api('/yizhi_server/api/user/login', {
+          data: {
+            passport: passport,
+            password: password
+          },
+          error: () => {
+            set_password('');
+          }
+        })
+          .then(res => {
+            if (res) {
+              window.sessionStorage.setItem('token', res.token);
+              window.sessionStorage.setItem('user', passport);
+              history.push('/home');
+            }
+          })
+          .catch(e => {
+            console.log(e);
+          });
+      } else {
+        info('用户名或密码不正确');
+      }
+    };
+    const styleBtn = isEnable
+      ? ['btn', 'loginItem', 'btn_act']
+      : ['btn', 'loginItem'];
+    return (
+      <button className={styleBtn.join(' ')} onClick={submit}>
+        {props.title}
+      </button>
+    );
+  };
+  const Btn = withRouter(LoginBtn);
+
+  return (
+    <div>
+      <div className="loginPane">
+        <div className="login-inline">
+          <img
+            style={{ width: '80%' }}
+            src="https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*-wAhRYnWQscAAAAAAAAAAABkARQnAQ"
+            alt=""
+          />
+        </div>
+
+        <div className="login-inline">
+          <div>
+            <h3
+              style={{
+                textAlign: 'center',
+                fontSize: '24px',
+                fontWeight: 'bold'
+              }}
+            >
+              趣选课合作机构平台
+            </h3>
+          </div>
+          <div className="loginItem">
+            <Input
+              size="large"
+              placeholder="请输入你的账号"
+              value={passport}
+              onChange={(e: any) => onChangeInp(e, 'passport')}
+              prefix={<UserOutlined className="site-form-item-icon" />}
+            />
+          </div>
+          <div className="loginItem">
+            <Input.Password
+              size="large"
+              placeholder="请输入你的密码"
+              value={password}
+              autoComplete="new-password"
+              onChange={(e: any) => onChangeInp(e, 'password')}
+              prefix={<UnlockOutlined />}
+            />
+          </div>
+          <Btn title="登录" />
+          <Button type="link" onClick={() => set_showModal(true)}>
+            忘记密码
+          </Button>
+          <Modal
+            title="忘记密码"
+            width="300px"
+            visible={showModal}
+            footer={
+              <Button
+                type="primary"
+                size="large"
+                block
+                onClick={() => set_showModal(false)}
+              >
+                登录
+              </Button>
+            }
+            onCancel={() => set_showModal(false)}
+          >
+            <p style={{ fontSize: '16px' }}>请联系51公积金同事进行密码重置</p>
+          </Modal>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Login;

src/pages/orderList/index.tsx

+import React, { useState } from 'react';
+import BasicPage from '../../layout/basicPage';
+import locale from 'antd/es/date-picker/locale/zh_CN';
+import moment from 'moment';
+import List from './list';
+// import excelFn from '../../common/excel';
+import { Input, Button, Form, DatePicker, Row, Col } from 'antd';
+import 'moment/locale/zh-cn';
+
+// import { api } from '../../common/fetch';
+// style
+import './index.scss';
+
+const FormItem = Form.Item;
+const { RangePicker } = DatePicker;
+moment.locale('zh-cn');
+
+const Order: React.FC = () => {
+  const [courseName, set_courseName] = useState('');
+  const [userName, set_userName] = useState('');
+  const [dates, setDates] = useState([] as any);
+
+  console.log(courseName, userName, dates);
+  const [form] = Form.useForm();
+
+  // useEffect(() => {}, []);
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 10 },
+      md: { span: 10 }
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 16 },
+      md: { span: 16 }
+    }
+  };
+
+  const download = () => {
+    console.log('xiazai');
+    // excelFn()
+  };
+
+  const onFinish = (values: any) => {
+    for (let i in values) {
+      if (!values[i]) delete values[i];
+      if (values[i] && Array.isArray(values[i]) && values[i].length === 2) {
+        let date = values[i];
+        values.start_time = moment(date[0]).format('YYYY-MM-DD');
+        values.end_time = moment(date[1]).format('YYYY-MM-DD');
+        delete values[i];
+      }
+    }
+    console.log('Success:', values);
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  const resetData = () => {
+    form.resetFields();
+    set_courseName('');
+    set_userName('');
+    setDates([]);
+  };
+
+  const handleTableChange = (args: any) => {
+    console.log(args);
+  };
+
+  let dataSource = [];
+  for (let i = 0; i < 25; i++) {
+    dataSource.push({
+      id: i,
+      orderNumber: 7878,
+      courseName: '我都唔',
+      userName: 'woeopwr',
+      address: '前五位哦',
+      phone: 15180356828,
+      money: 85,
+      date: '2020-05-20'
+    });
+  }
+
+  return (
+    <BasicPage>
+      <div className="analy-content">
+        <Form
+          {...formItemLayout}
+          form={form}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+        >
+          <Row {...{ gutter: { xs: 8, sm: 16, md: 24 } }}>
+            <Col>
+              <FormItem label="已购课程名称：" name="courseName">
+                <Input
+                  placeholder="请输入"
+                  onChange={e => {
+                    set_courseName(e.target.value);
+                  }}
+                />
+              </FormItem>
+            </Col>
+            <Col>
+              <FormItem label="用户姓名：" name="userName">
+                <Input
+                  placeholder="请输入"
+                  onChange={e => {
+                    set_userName(e.target.value);
+                  }}
+                />
+              </FormItem>
+            </Col>
+            <Col>
+              <FormItem label="下单时间：" name="dates">
+                <RangePicker
+                  locale={locale}
+                  onCalendarChange={value => {
+                    setDates(value);
+                  }}
+                />
+              </FormItem>
+            </Col>
+          </Row>
+          <Row
+            style={{ padding: '12px 0' }}
+            {...{ gutter: { xs: 8, sm: 16, md: 24 } }}
+          >
+            <Col md={12} sm={24}>
+              <Button
+                type="primary"
+                style={{ marginRight: '12px' }}
+                onClick={download}
+              >
+                导出订单信息表
+              </Button>
+            </Col>
+            <Col md={12} sm={24} style={{ textAlign: 'right' }}>
+              <Form.Item>
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  style={{ marginRight: '12px' }}
+                >
+                  查询
+                </Button>
+                <Button htmlType="button" onClick={resetData}>
+                  重置
+                </Button>
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </div>
+      <List dataSource={dataSource} handleTableChange={handleTableChange} />
+    </BasicPage>
+  );
+};
+
+export default Order;

src/pages/orderList/list.tsx

+import React from 'react';
+import { Table } from 'antd';
+const { Column } = Table;
+
+interface DeatilI {
+  id: string | number;
+  orderNumber: string | number;
+  courseName: string | number;
+  userName: string | number;
+  address: string;
+  phone: string | number;
+  money: string | number;
+  date: string;
+}
+
+interface ColsI {
+  title: string;
+  dataIndex: string;
+  key: string | number;
+}
+
+interface DataSourceI {
+  dataSource: DeatilI[];
+  handleTableChange: any;
+}
+
+const columns = [
+  {
+    title: '订单号',
+    dataIndex: 'orderNumber',
+    key: 'orderNumber'
+  }
+  // {
+  //   title: '已购课程名称',
+  //   dataIndex: 'courseName',
+  //   key: 'courseName'
+  // },
+  // {
+  //   title: '用户姓名',
+  //   dataIndex: 'userName',
+  //   key: 'userName'
+  // },
+  // {
+  //   title: '收货地址',
+  //   dataIndex: 'address',
+  //   key: 'address'
+  // },
+  // {
+  //   title: '联系电话',
+  //   dataIndex: 'phone',
+  //   key: 'phone'
+  // },
+  // {
+  //   title: '付款金额（元）',
+  //   dataIndex: 'money',
+  //   key: 'money'
+  // },
+  // {
+  //   title: '下单时间',
+  //   dataIndex: 'date',
+  //   key: 'date'
+  // }
+];
+
+const Cols = (list: ColsI[]) => {
+  return list.map((item: any) => {
+    return <Column {...item} key={item.key} />;
+  });
+};
+
+const List: React.FC<DataSourceI> = props => {
+  return (
+    <div style={{ padding: '30px' }}>
+      <Table
+        rowKey={record => record.id || 'key'}
+        dataSource={props.dataSource}
+        onChange={props.handleTableChange}
+        pagination={{
+          pageSize: 1,
+          showSizeChanger: true,
+          showTotal: (total, range) =>
+            `${range[1] - range[0] + 1} of ${total} items`
+        }}
+      >
+        {Cols(columns)}
+      </Table>
+    </div>
+  );
+};
+
+export default List;

src/react-app-env.d.ts

+/// <reference types="react-scripts" />

src/router/index.tsx

+import React from 'react';
+import { Route, withRouter, Switch } from 'react-router-dom';
+import OrderList from '../pages/orderList/index';
+import ExchangeCode from '../pages/exchangeCode/index';
+import GenerateCode from '../pages/generateCode/index';
+import Login from '../pages/login/index';
+
+const RouterChild = withRouter(() => {
+  return (
+    <Switch>
+      <Route path="/login" exact component={Login} />
+      <Route path="/orderList" exact component={OrderList} />
+      <Route path="/exchangeCode" exact component={ExchangeCode} />
+      <Route path="/generateCode" exact component={GenerateCode} />
+      <Route path="/" component={OrderList} />
+    </Switch>
+  );
+});
+
+const BaseRoute: React.FC = () => {
+  return <RouterChild />;
+};
+
+export default BaseRoute;

src/serviceWorker.js → src/serviceWorker.ts

@@ -20,10 +20,18 @@ const isLocalhost = Boolean(
     )
 );
 
-export function register(config) {
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    const publicUrl = new URL(
+      process.env.PUBLIC_URL,
+      window.location.href
+    );
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
@@ -54,7 +62,7 @@ export function register(config) {
   }
 }
 
-function registerValidSW(swUrl, config) {
+function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
@@ -98,10 +106,10 @@ function registerValidSW(swUrl, config) {
     });
 }
 
-function checkValidServiceWorker(swUrl, config) {
+function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
+    headers: { 'Service-Worker': 'script' }
   })
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src"]
+}