From 820394fded002210af2045b608492bbb1c712188 Mon Sep 17 00:00:00 2001 From: fanxb Date: Sat, 6 Jul 2019 11:07:53 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20UI:=20[=E5=89=8D=E7=AB=AF]:?= =?UTF-8?q?=E7=99=BB=E9=99=86=E6=B3=A8=E5=86=8C=E9=A1=B5=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/App.jsx | 6 +- front/src/components/IconFont.jsx | 3 +- front/src/layout/LoginLayout/index.jsx | 2 +- front/src/pages/public/Login/index.jsx | 31 ++++++---- .../src/pages/public/Login/index.module.less | 17 +++-- .../pages/public/RegisterOrReset/index.jsx | 62 +++++++++++++++++++ .../public/RegisterOrReset/index.module.less | 22 +++++++ front/src/redux/reducer/index.js | 3 +- front/src/redux/reducer/loginInfo.js | 2 +- 9 files changed, 121 insertions(+), 27 deletions(-) create mode 100644 front/src/pages/public/RegisterOrReset/index.jsx create mode 100644 front/src/pages/public/RegisterOrReset/index.module.less diff --git a/front/src/App.jsx b/front/src/App.jsx index b4f3bbd..7dd9304 100644 --- a/front/src/App.jsx +++ b/front/src/App.jsx @@ -3,10 +3,12 @@ import { Route, Switch, Redirect } from "react-router-dom"; import { withRouter } from "react-router-dom"; import { Provider } from "react-redux"; import store from "./redux"; -import Login from "./pages/public/Login"; import Main from "./pages/index"; import NotFound from "./pages/public/notFound/NotFound"; +import Login from "./pages/public/Login"; +import RegisterOrReset from "./pages/public/RegisterOrReset"; + class App extends Component { constructor(props) { super(props); @@ -23,6 +25,8 @@ class App extends Component { + + {/* 当前面的路由都匹配不到时就会重定向到/404 */} diff --git a/front/src/components/IconFont.jsx b/front/src/components/IconFont.jsx index 2527ecd..c3c44af 100644 --- a/front/src/components/IconFont.jsx +++ b/front/src/components/IconFont.jsx @@ -1,7 +1,8 @@ import { Icon } from "antd"; const IconFont = Icon.createFromIconfontCN({ - scriptUrl: "//at.alicdn.com/t/font_1261825_8aroyishrdq.js" + scriptUrl: "//at.alicdn.com/t/font_1261825_09wguqxg78th.js" + }); export default IconFont; diff --git a/front/src/layout/LoginLayout/index.jsx b/front/src/layout/LoginLayout/index.jsx index 0156862..eac9810 100644 --- a/front/src/layout/LoginLayout/index.jsx +++ b/front/src/layout/LoginLayout/index.jsx @@ -31,7 +31,7 @@ export function LoginLayout({ type, children }) {
CR
- {type === RESET_PASSWORD_TYPE ?
重置密码
: } + {type === RESET_PASSWORD_TYPE ?
重置密码
: } {children} {type === RESET_PASSWORD_TYPE ? 返回登录注册 : null}
diff --git a/front/src/pages/public/Login/index.jsx b/front/src/pages/public/Login/index.jsx index edbf7fc..e4c304e 100644 --- a/front/src/pages/public/Login/index.jsx +++ b/front/src/pages/public/Login/index.jsx @@ -1,10 +1,11 @@ import React, { Component } from "react"; +import { Link } from "react-router-dom"; import queryString from "query-string"; -import { Button, Input, message } from "antd"; +import { Button, Input, message, Checkbox } from "antd"; import IconFont from "../../../components/IconFont"; import styles from "./index.module.less"; import { connect } from "react-redux"; -import { changeLoginInfo, DATA_NAME } from "../../../redux/action/loginInfoAction"; +import { changeLoginInfo, DATA_NAME } from "../../../redux/action/LoginInfoAction.js"; import axios from "../../../util/httpUtil"; import { LoginLayout, LOGIN_TYPE } from "../../../layout/LoginLayout"; @@ -22,17 +23,15 @@ class Login extends Component { constructor(props) { super(props); this.state = { - username: "", - password: "" + email: "", + password: "", + rememberMe: false }; this.query = queryString.parse(window.location.search); } - usernameInput = e => { - this.setState({ username: e.target.value }); - }; - passwordInput = e => { - this.setState({ password: e.target.value }); + valueChange = e => { + this.setState({ [e.target.name]: e.target.value }); }; submit = () => { @@ -52,11 +51,21 @@ class Login extends Component { }; render() { + const { email, password, rememberMe } = this.state; return (
- - 获取验证码} /> + } placeholder="邮箱" /> + } placeholder="密码" /> +
+ + 记住我 + + 忘记密码 +
+
); diff --git a/front/src/pages/public/Login/index.module.less b/front/src/pages/public/Login/index.module.less index 98e34a8..1872c03 100644 --- a/front/src/pages/public/Login/index.module.less +++ b/front/src/pages/public/Login/index.module.less @@ -1,21 +1,18 @@ .main { text-align: center; - padding: 2em; - width: 30em; + padding: 0.2rem; + width: 4rem; border-radius: 5px; - .getCode { - cursor: pointer; + .action { + padding: 0.1rem 0; + display: flex; + justify-content: space-between; } :global { .ant-input { - border-top: 0; - border-left: 0; - border-right: 0; - border-bottom: 1px solid black !important; - border-radius: 0; - margin-bottom: 1em; + background: #f7f7f7; } } } diff --git a/front/src/pages/public/RegisterOrReset/index.jsx b/front/src/pages/public/RegisterOrReset/index.jsx new file mode 100644 index 0000000..4cd6ac5 --- /dev/null +++ b/front/src/pages/public/RegisterOrReset/index.jsx @@ -0,0 +1,62 @@ +import React from "react"; +import IconFont from "../../../components/IconFont"; +import { Button, Input, Checkbox } from "antd"; +import { LoginLayout, REGISTER_TYPE, RESET_PASSWORD_TYPE } from "../../../layout/LoginLayout"; +import styles from "./index.module.less"; +import { Link } from "react-router-dom"; +import axios from "../../../util/httpUtil"; + +export default class Register extends React.Component { + constructor(props) { + super(props); + let type = props.location.pathname.split("/").reverse()[0]; + this.state = { + current: type === "register" ? REGISTER_TYPE : RESET_PASSWORD_TYPE, + email: "", + password: "", + repassword: "", + code: "" + }; + } + + /** + * 获取验证码 + */ + getCode = () => {}; + + changeData = e => { + this.setState({ [e.target.name]: e.target.value }); + }; + + submit = () => {}; + + render() { + const { current, email, password, repassword, code } = this.state; + return ( + +
+ } placeholder="邮箱" /> + } placeholder="密码" /> + } placeholder="重复密码" /> + } + addonAfter={ + + 获取验证码 + + } + placeholder="验证码" + /> + +
+ + ); + } +} diff --git a/front/src/pages/public/RegisterOrReset/index.module.less b/front/src/pages/public/RegisterOrReset/index.module.less new file mode 100644 index 0000000..339572e --- /dev/null +++ b/front/src/pages/public/RegisterOrReset/index.module.less @@ -0,0 +1,22 @@ +.main { + text-align: center; + padding: 0.2rem; + width: 4rem; + border-radius: 5px; + + .action { + padding: 0.1rem 0; + display: flex; + justify-content: space-between; + } + + .submit { + margin-top: 0.1rem; + } + + :global { + .ant-input { + background: #f7f7f7; + } + } +} diff --git a/front/src/redux/reducer/index.js b/front/src/redux/reducer/index.js index cd94578..d627c79 100644 --- a/front/src/redux/reducer/index.js +++ b/front/src/redux/reducer/index.js @@ -1,11 +1,10 @@ import { combineReducers } from "redux"; -import { DATA_NAME } from "../action/loginInfoAction"; +import { DATA_NAME } from "../action/LoginInfoAction.js"; import loginInfo from "./loginInfo"; const data = {}; data[DATA_NAME] = loginInfo; - const reducer = combineReducers(data); export default reducer; diff --git a/front/src/redux/reducer/loginInfo.js b/front/src/redux/reducer/loginInfo.js index f54eec1..4b01062 100644 --- a/front/src/redux/reducer/loginInfo.js +++ b/front/src/redux/reducer/loginInfo.js @@ -1,4 +1,4 @@ -import * as loginAction from "../action/loginInfoAction"; +import * as loginAction from "../action/LoginInfoAction.js"; function getInitData() { let token, userInfo;