Merge branch 'passport' into study

package-lock.json

@@ -4068,6 +4068,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "default-gateway": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-2.7.2.tgz",
@@ -5600,6 +5605,29 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-1.5.4.tgz",
+      "integrity": "sha512-m7Tboq9O6MntCM8+J/b3jGGKXNXRq1dTzLvEdujSySejlewqVeYLy/goulrvr152wPe9ycKV0NlFSQ8Q1EwycQ==",
+      "requires": {
+        "create-react-context": "^0.2.2",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^2.5.5",
+        "lodash": "^4.17.11",
+        "lodash-es": "^4.17.11",
+        "prop-types": "^15.6.1",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -8561,6 +8589,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
     },
+    "lodash-es": {
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.11.tgz",
+      "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q=="
+    },
     "lodash._getnative": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
@@ -11278,6 +11311,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.4.tgz",
       "integrity": "sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg=="
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",

package.json

@@ -26,6 +26,7 @@
     "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-react": "7.12.4",
     "file-loader": "2.0.0",
+    "formik": "^1.5.4",
     "fs-extra": "7.0.1",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",

src/App.js

 import React, { Component } from 'react';
 import { connect } from 'react-redux'
 import { LocaleProvider } from 'antd-mobile'
-import { HashRouter } from 'react-router-dom'
+import { BrowserRouter as Router } from 'react-router-dom'
 import Routes from './router'
 
 class App extends Component {
     render() {
         return (
             <LocaleProvider>
-                <HashRouter>
+                <Router>
                     <Routes></Routes>
-                </HashRouter>
+                </Router>
             </LocaleProvider>
         );
     }

src/HOCs/WithFullSize/index.js

+import React, { Component } from 'react';
+
+export default function (WrappedComponent) {
+    return class extends Component {
+        componentDidMount() {
+            const height = window.innerHeight
+            document.body.style.height = `${height}px`
+            document.getElementById('root').style.height = `${height}px`
+        }
+        componentWillUnmount() {
+            document.body.style.height = `auto`
+            document.getElementById('root').style.height = `auto`
+        }
+
+        render() {
+            return (
+                <WrappedComponent {...this.props}/>
+            );
+        }
+    }
+}
+

src/HOCs/index.js

 export {default as WithTab} from './WithTab'
+export {default as WithFullSize} from './WithFullSize'
\ No newline at end of file

src/components/passport/accountLogin/index.js

 import React, { Component } from "react"
 import './accountLogin.scss'
 import { Link } from "react-router-dom";
+import { withFormik, FastField, Form } from "formik";
 
 
 import Header from "../common/Header";
@@ -17,29 +18,48 @@ class AccountLogin extends Component {
         return (
             <div className={'account-login'}>
                 <Header/>
-                <div className="login-info">
-                    <Input inputType={'number'}
+                <Form className="login-info">
+                    <FastField
+                        name='account'
+                        render={({field}) => (
+                            <Input
+                                {...field}
+                                type={'number'}
                                 placeholder={'手机/邮箱/昵称'}
                                 wrapperClass={'tel-input'}
-                           icon={<i className={'iconfont iconshouji'}
+                                icon={
+                                    <i className={'iconfont iconshouji'}
                                        style={{fontSize: '22px', left: '10px'}}
-                           />}
                                     />
-                    {/*<VeriCodeButton
-                        className={'verification'}
-                    />*/}
-
+                                }
+                            />
+                        )}
+                    />
+                    <FastField
+                        name='password'
+                        render={({field}) => (
                             <PasswordInput
+                                {...field}
                                 placeholder={'密码'}
                             />
-
+                        )}
+                    />
                     <LoginButton/>
                     <Link className={'forgot-password-btn'} to='/passport/forgot-password'>忘记密码</Link>
-                </div>
+                </Form>
                 {/*<LoginWays loginWays={this.props.loginWays}/>*/}
             </div>
         );
     }
 }
 
-export default AccountLogin
+const formikConfig = {
+    mapPropsToValues: () => ({
+        account: '',
+        password: ''
+    }),
+    handleSubmit(values) {
+        console.log(values)
+    }
+}
+export default withFormik(formikConfig)(AccountLogin)

src/components/passport/common/Header/index.js

@@ -3,12 +3,12 @@ import './header.scss'
 import logo from './logo.png'
 
 
-const Header = () => {
+const Header = React.memo(() => {
     return (
         <div className="header">
             <img src={logo} alt=""/>
         </div>
     );
-};
+});
 
 export default Header;
\ No newline at end of file

src/components/passport/common/Input/index.js

-import React, { Component } from 'react';
+import React from 'react';
 import './input.scss'
 import classnames from "classnames";
 
-
-class Index extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            value: ''
-        }
-    }
-
-    handleChange = (e) => {
-        let val = e.target.value
-        let {onChange} = this.props
-        this.setState({value: val})
-        onChange && onChange(val)
-    }
-
-    render() {
-        let {type, icon, placeholder, wrapperClass, children} = this.props
+function Input({
+                   icon,
+                   wrapperClass,
+                   children,
+                   ...rest
+               }) {
     return (
         <div className={classnames('input-wrapper', wrapperClass)}>
             <input
-                    type={type}
                 className='input'
-                    placeholder={placeholder}
-                    value={this.state.value}
-                    onChange={this.handleChange}
+                {...rest}
             />
-                {/*<i className={classnames('iconfont', iconClass)}/>*/}
             {icon}
             {children}
         </div>
     )
-    }
 }
 
-export default Index;
+
\ No newline at end of file
+export default Input;
\ No newline at end of file

src/components/passport/common/LoginButton/index.js

@@ -2,12 +2,12 @@ import React from 'react'
 import './loginButton.scss'
 
 
-const LoginButton = ({onClick}) => {
+const LoginButton = React.memo(({onClick}) => {
     return (
-        <button onClick={onClick} className={'login-button'}>
+        <button type={'submit'} onClick={onClick} className={'login-button'}>
             登录
         </button>
     );
-};
+});
 
 export default LoginButton;
\ No newline at end of file

src/components/passport/common/LoginWays/index.js

-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import './loginWays.scss'
 
 
-class LoginWays extends Component {
+class LoginWays extends PureComponent {
+
     handleClick = (index) => {
         this.props.onClick(index)
     }

src/components/passport/common/passwordInput/index.js

-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import './password-input.scss'
 import classnames from 'classnames'
 
 import Input from '../Input'
 
-class PasswordInput extends Component {
+class PasswordInput extends PureComponent {
     constructor(props) {
         super(props);
         this.state = {
@@ -17,18 +17,16 @@ class PasswordInput extends Component {
     }
 
     render() {
-        let {placeholder, onChange} = this.props
+        let {placeholder, ...rest} = this.props
         return (
             <Input
                 type={this.state.showPassword ? 'text' : 'password'}
                 wrapperClass={'password-input'}
                 placeholder={placeholder}
-                onChange={onChange}
+                {...rest}
             >
-                <i className={classnames('iconfont', {
-                    'iconpwd-hidden': this.state.showPassword,
-                    'iconyanjing': !this.state.showPassword
-                })} onClick={this.togglePasswordVisibility}/>
+                <i className={classnames('iconfont', [this.state.showPassword ? 'iconpwd-hidden' : 'iconyanjing'])}
+                   onClick={this.togglePasswordVisibility}/>
             </Input>
         );
     }

src/components/passport/common/veriCodeInput/index.js

@@ -6,25 +6,21 @@ import classnames from 'classnames'
 import Input from '../Input'
 
 class VeriCodeInput extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            veriCode: '',
+    count = 10
+    state = {
         counting: false,
-            count: 20
-        }
-        this.timer = null
+        count: this.count
     }
+    timer = null
 
     countDown = () => {
         let {count} = this.state
         if (!this.state.counting) {
             this.sendCode()
-            this.setState({count: count--})
-            this.setState({counting: true})
+            this.setState({count: count--, counting: true})
             this.timer = setInterval(() => {
                 if (count <= 0) {
-                    this.setState({counting: false})
+                    this.setState({counting: false, count: this.count})
                     clearInterval(this.timer)
                     return
                 }
@@ -37,23 +33,16 @@ class VeriCodeInput extends Component {
 
     }
 
-    handleChange = (val) => {
-        let {onChange} = this.props
-        this.setState({veriCode: val})
-        onChange && onChange(val)
-    }
-
     render() {
-        let {onChange, type = 'number', placeholder = '', className, ...rest} = this.props
+        let {type = 'number', className, ...rest} = this.props
         return (
             <Input
                 type={type}
-                placeholder={placeholder}
-                onChange={this.handleChange}
                 wrapperClass={className}
                 {...rest}
             >
-                <button className={classnames('verify', {active: !this.state.counting})} onClick={this.countDown}>
+                <button type='button' className={classnames('verify', {active: !this.state.counting})}
+                        onClick={this.countDown}>
                     {
                         this.state.counting ?
                             (`重新发送${this.state.count}s`)

src/components/passport/index.js

-import React, {Component} from 'react'
-import {Route, Switch} from 'react-router-dom'
+import React, { Component } from 'react'
+import { Route, Switch } from 'react-router-dom'
 
 import './passport.scss'
-
+import {WithFullSize} from '@/HOCs'
 import WechatLogin from './wechatLogin'
 import AccountLogin from './accountLogin'
 import ForgotPassword from './forgotPassword'
@@ -16,6 +16,7 @@ import wechat from './wechat.png'
 
 
 class Passport extends Component {
+
     constructor(props) {
         super(props);
         this.state = {
@@ -40,10 +41,6 @@ class Passport extends Component {
         }
     }
 
-    componentDidMount() {
-        document.getElementsByClassName('tabbar')[0].style.display = 'none'
-    }
-
     render() {
         let {match} = this.props
         return (
@@ -62,4 +59,4 @@ class Passport extends Component {
 }
 
 
-export default Passport
+export default WithFullSize(Passport)
\ No newline at end of file

src/components/passport/passport.scss

 .passport {
     height: 100%;
+    display: flex;
 }
\ No newline at end of file

src/components/passport/store/actions.js

+export const login = (userInfo) => ({
+    type: 'LOGIN',
+    userInfo
+})
+
+export const logout = () => ({
+    type: 'LOGOUT'
+})
+
+export const requestLogin = payload => dispatch => {
+    
+}
\ No newline at end of file

src/components/passport/store/reducers.js

+const initialState = {
+    userName: '',
+    avatar: '',
+    uid: '',
+    isVIP: false
+}
+
+const userInfo = (state = initialState, action) => {
+    switch (action.type) {
+        case 'LOGIN':
+            return {
+                ...state,
+                ...action.userInfo
+            }
+        default:
+            return state
+    }
+}
+
+export default userInfo
\ No newline at end of file

src/components/passport/wechatLogin/index.js

-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import './wechatLogin.scss'
-import Input from "../common/Input";
-import LoginButton from '../common/LoginButton';
+import Input from "../common/Input"
+import LoginButton from '../common/LoginButton'
 import LoginWays from '../common/LoginWays'
 import Header from '../common/Header'
 import VeriCodeInput from '../common/veriCodeInput'
+import { Form, FastField, withFormik } from "formik"
 
-class WechatLogin extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            veriCode: ''
-        }
-    }
 
-    selectLoginWays = (i) => {
-        console.log(i)
-    }
-
-    handleChange = (val) => {
-        this.setState({veriCode: val})
-    }
+class WechatLogin extends PureComponent {
 
     render() {
-        const {loginWays} = this.props
+        const {
+            loginWays,
+        } = this.props
         return (
             <div className='login'>
                 <Header/>
-
-                <div className="login-info">
+                <Form className="login-info">
+                    <FastField
+                        name='tel'
+                        render={({field}) => (
                             <Input
-                        inputType={'number'}
+                                {...field}
+                                type={'tel'}
                                 placeholder={'手机号快捷登录(免注册)'}
                                 wrapperClass={'tel-input'}
                                 icon={<i className={'iconfont iconshouji'}
                                          style={{fontSize: '22px', left: '10px'}}
                                 />}
                             />
+                        )}
+                    >
+                    </FastField>
+                    <FastField
+                        type='number'
+                        name='veriCode'
+                        render={({field}) => (
                             <VeriCodeInput
+                                {...field}
                                 className={'verification'}
-                        onChange={this.handleChange}
                                 icon={<i className={'iconfont iconduanxin'}
                                          style={{fontSize: '20px', left: '12px'}}
                                 />}
+                                placeholder={'请输入验证码'}
+                            />
+                        )}
                     />
                     <LoginButton/>
-                </div>
+                </Form>
 
                 <LoginWays onClick={this.selectLoginWays} loginWays={loginWays}/>
             </div>
@@ -53,5 +56,22 @@ class WechatLogin extends Component {
     }
 }
 
+const FormikConfig = {
+    mapPropsToValues: () => ({
+        tel: '',
+        veriCode: ''
+    }),
+    handleSubmit(values, {setError}) {
+        console.log(values)
+    },
+    validateOnChange: false,
+    /*validate: (values) => {
+        let errors = {}
+        if (!/^1[3-9](\d{9})$/.test(values.tel)) {
+            errors.tel = '手机号不正确'
+        }
+        return errors
+    }*/
+}
 
-export default WechatLogin
+export default withFormik(FormikConfig)(WechatLogin)
\ No newline at end of file

src/components/passport/wechatLogin/wechatLogin.scss

@@ -2,6 +2,7 @@
     height: 100%;
     display: flex;
     flex-flow: column;
+    flex: 1 1 auto;
 
     .login-info {
         padding: 0 38px;

src/router.js

 import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
-import Menu from './menu';
 import Index from './components/Index';
 import Classify from './components/classify';
 import Study from './components/study';
@@ -14,12 +13,13 @@ import Detail from './components/detail/index'
 import Examination from './components/examination'
 import ExchangeCoupons from './components/coupons/exchange-coupons'
 import UseCoupon from './components/coupons/use-coupons'
-import OrderInfo from './components/order/orderinfo';
+// import OrderInfo from './components/order/orderinfo';
 import ShopCard from './components/shopCard/index';
 import BargainMiddlePage from './components/bargainMiddlePage';
+import Passport from './components/passport'
 
 
-const router = (props) => (
+const router = () => (
     <Router>
         <Switch>
             <Route exact path="/" component={Index}></Route>
@@ -35,11 +35,11 @@ const router = (props) => (
             <Route path='/examination' component={Examination}></Route>
             <Route path='/exchange-coupons' component={ExchangeCoupons}></Route>
             <Route path='/use-coupon' component={UseCoupon}></Route>
-            <Route path='/orderinfo' component={OrderInfo}></Route>
+            {/*<Route path='/orderinfo' component={OrderInfo}></Route>*/}
             <Route path='/shopcard' component={ShopCard}></Route>
             <Route path='/bargain-middle-page' component={BargainMiddlePage}></Route>
+            <Route path='/passport' component={Passport}></Route>
         </Switch>
-        {/*<Menu/>*/}
     </Router>
 )