Skip to content

M
mr-julyedu
Commit 4372d7c2 by zhanghaozhe
Options

Merge branch 'passport' into study

parents e3f562e0 3f27e3b1
Showing with 226 additions and 115 deletions
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 0 → 100644
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
\ No newline at end of file
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 0 → 100644
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 0 → 100644
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
\ No newline at end of file
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>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment