formik

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 WithTab} from './WithTab'
\ No newline at end of file
+export {default as WithFullSize} from './WithFullSize'
\ No newline at end of file

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
-        return (
-            <div className={classnames('input-wrapper', wrapperClass)}>
-                <input
-                    type={type}
-                    className='input'
-                    placeholder={placeholder}
-                    value={this.state.value}
-                    onChange={this.handleChange}
-                />
-                {/*<i className={classnames('iconfont', iconClass)}/>*/}
-                {icon}
-                {children}
-            </div>
-        )
-    }
+function Input({
+                   icon,
+                   wrapperClass,
+                   children,
+                   ...rest
+               }) {
+    return (
+        <div className={classnames('input-wrapper', wrapperClass)}>
+            <input
+                className='input'
+                {...rest}
+            />
+            {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/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: '',
-            counting: false,
-            count: 20
-        }
-        this.timer = null
+    count = 10
+    state = {
+        counting: false,
+        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/index.js

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

src/components/passport/store/reducers/index.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">
-                    <Input
-                        inputType={'number'}
-                        placeholder={'手机号快捷登录(免注册)'}
-                        wrapperClass={'tel-input'}
-                        icon={<i className={'iconfont iconshouji'}
-                                 style={{fontSize: '22px', left: '10px'}}
-                        />}
-                    />
-                    <VeriCodeInput
-                        className={'verification'}
-                        onChange={this.handleChange}
-                        icon={<i className={'iconfont iconduanxin'}
-                                 style={{fontSize: '20px', left: '12px'}}
-                        />}
+                <Form className="login-info">
+                    <FastField
+                        name='tel'
+                        /*render={({field}) => (
+                            <Input
+                                {...field}
+                                type={'tel'}
+                                placeholder={'手机号快捷登录(免注册)'}
+                                wrapperClass={'tel-input'}
+                                icon={<i className={'iconfont iconshouji'}
+                                         style={{fontSize: '22px', left: '10px'}}
+                                />}
+                            />
+                        )}*/
+                    >
+                        {
+                            ({field}) => (
+                                <Input
+                                    {...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'}
+                                icon={<i className={'iconfont iconduanxin'}
+                                         style={{fontSize: '20px', left: '12px'}}
+                                />}
+                                placeholder={'请输入验证码'}
+                            />
+                        )}
                     />
                     <LoginButton/>
-                </div>
+                </Form>
 
                 <LoginWays onClick={this.selectLoginWays} loginWays={loginWays}/>
             </div>
@@ -53,5 +69,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>
 )