Skip to content

M
mr-julyedu
Commit 4d4316e7 by zhanghaozhe
Options

update formik

parent 192a6a2b
Showing with 268 additions and 276 deletions
package.json
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
"react-mobile-swiper": "^1.1.4", "react-mobile-swiper": "^1.1.4",
"react-redux": "^7.2.1", "react-redux": "^7.2.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-spinners": "^0.5.12", "react-spinners": "^0.9.0",
"react-sticky": "^6.0.3", "react-sticky": "^6.0.3",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-immutable": "^4.0.0", "redux-immutable": "^4.0.0",
......
src/App.js
...@@ -50,7 +50,8 @@ class App extends Component { ...@@ -50,7 +50,8 @@ class App extends Component {
firstLoad = true firstLoad = true
componentWillMount() { componentDidMount() {
let url = window.location.href let url = window.location.href
if (url.indexOf('ccode') > -1) { if (url.indexOf('ccode') > -1) {
if (!getParam('ccode').includes('%')) { if (!getParam('ccode').includes('%')) {
...@@ -61,9 +62,8 @@ class App extends Component { ...@@ -61,9 +62,8 @@ class App extends Component {
}) })
} }
} }
}
componentDidMount() {
//是否显示宝箱全局入口 //是否显示宝箱全局入口
this.isShowGlobalEntryInTime() this.isShowGlobalEntryInTime()
......
src/common/addressPopup/index.js
...@@ -23,7 +23,7 @@ class AddressPopup extends Component { ...@@ -23,7 +23,7 @@ class AddressPopup extends Component {
// 获取收货信息 // 获取收货信息
fetchUserAddress = () => { fetchUserAddress = () => {
const { addressInfo } = this.state; const {addressInfo} = this.state;
http.get(`${API.home}/sys/user_address_info`).then(res => { http.get(`${API.home}/sys/user_address_info`).then(res => {
const {code, data, msg} = res.data; const {code, data, msg} = res.data;
if (code === 200) { if (code === 200) {
...@@ -40,10 +40,10 @@ class AddressPopup extends Component { ...@@ -40,10 +40,10 @@ class AddressPopup extends Component {
} }
handleToSubmit = (params = {}) => { handleToSubmit = (params = {}) => {
const { successBindAddress } = this.props; const {successBindAddress} = this.props;
http.post(`${API.home}/sys/update_address`, { http.post(`${API.home}/sys/update_address`, {
act_type: 'treasure', act_type: 'treasure',
...params ...params,
}).then(res => { }).then(res => {
const {code, msg} = res.data; const {code, msg} = res.data;
if (code === 200) { if (code === 200) {
...@@ -55,15 +55,15 @@ class AddressPopup extends Component { ...@@ -55,15 +55,15 @@ class AddressPopup extends Component {
} }
render() { render() {
const { isLoading, addressInfo } = this.state; const {isLoading, addressInfo} = this.state;
const {tip, prize, skip = 'default'} = this.props; const {tip, prize, skip = 'default'} = this.props;
return ( return (
<> <>
{ {
isLoading && isLoading &&
<Formik <Formik
initialValues={{ initialValues={{
...addressInfo ...addressInfo,
}} }}
validate={({name, phone, address}) => { validate={({name, phone, address}) => {
const errors = {}; const errors = {};
...@@ -71,7 +71,7 @@ class AddressPopup extends Component { ...@@ -71,7 +71,7 @@ class AddressPopup extends Component {
if (!name) { if (!name) {
errors.name = '请输入收件人'; errors.name = '请输入收件人';
} }
if(!/^1[3-9]\d{9}$/.test(phone)) { if (!/^1[3-9]\d{9}$/.test(phone)) {
errors.phone = '请填写正确格式的手机号'; errors.phone = '请填写正确格式的手机号';
} }
if (!address) { if (!address) {
...@@ -85,79 +85,84 @@ class AddressPopup extends Component { ...@@ -85,79 +85,84 @@ class AddressPopup extends Component {
onSubmit={(values) => { onSubmit={(values) => {
this.handleToSubmit(values); this.handleToSubmit(values);
}} }}
render={({errors}) => ( >
<Form className="address-form" data-skip={skip}> {
<h2 className="address-form__title">收货信息</h2> ({errors}) => (
{ <Form className="address-form" data-skip={skip}>
prize ? ( <h2 className="address-form__title">收货信息</h2>
<p className='address__prize'> {
您抽中了 prize ? (
<span style={{'color': '#FF4000'}}>{prize}</span> <p className='address__prize'>
</p> 您抽中了
) : (null) <span style={{'color': '#FF4000'}}>{prize}</span>
} </p>
{ ) : (null)
tip ? (<div className="address-form__subtitle">{tip}</div>) : (<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>) }
} {
<Field tip ? (<div className="address-form__subtitle">{tip}</div>) : (
name="name" <p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>)
render={({ field }) => ( }
<div className="address-form__item"> <Field
<input name="name"
{...field} render={({field}) => (
className="address-form__ipt" <div className="address-form__item">
type="text" <input
placeholder="收件人" {...field}
/> className="address-form__ipt"
{ type="text"
errors.name && placeholder="收件人"
<p className="address-form__tip">{errors.name}</p> />
} {
</div> errors.name &&
)} <p className="address-form__tip">{errors.name}</p>
/> }
<Field </div>
name="phone" )}
render={({ field }) => ( />
<div className="address-form__item"> <Field
<input name="phone"
{...field} render={({field}) => (
className="address-form__ipt" <div className="address-form__item">
type="text" <input
placeholder="联系方式" {...field}
/> className="address-form__ipt"
{ type="text"
errors.phone && placeholder="联系方式"
<p className="address-form__tip">{errors.phone}</p> />
} {
</div> errors.phone &&
)} <p className="address-form__tip">{errors.phone}</p>
/> }
<Field </div>
name="address" )}
render={({ field }) => ( />
<div className="address-form__item"> <Field
<input name="address"
{...field} render={({field}) => (
className="address-form__ipt" <div className="address-form__item">
type="text" <input
placeholder="收货地址" {...field}
/> className="address-form__ipt"
{ type="text"
errors.address && placeholder="收货地址"
<p className="address-form__tip">{errors.address}</p> />
} {
</div> errors.address &&
)} <p className="address-form__tip">{errors.address}</p>
/> }
<button </div>
className="address-form__submit" )}
data-status="do" />
type="submit" <button
>提交</button> className="address-form__submit"
</Form> data-status="do"
)} type="submit"
/> >提交
</button>
</Form>
)
}
</Formik>
} }
</> </>
); );
......
src/common/bindPhone/index.js
...@@ -177,69 +177,72 @@ class BindPhone extends Component { ...@@ -177,69 +177,72 @@ class BindPhone extends Component {
}); });
this.toBindPhone(); this.toBindPhone();
}} }}
render={({values: {tel, code}, errors}) => ( >
<Form className="popup-form" data-skip={skip}> {
<h2 className="popup-form__title">绑定手机号</h2> ({values: {tel, code}, errors}) => (
{ <Form className="popup-form" data-skip={skip}>
desc && <h2 className="popup-form__title">绑定手机号</h2>
<div className="poup-form__desc">{desc}</div> {
} desc &&
<div className="popup-form__item"> <div className="poup-form__desc">{desc}</div>
<a className="popup-form__button--num" onClick={this.toFetchCountryNum}> }
+{country.num} <div className="popup-form__item">
<i className="iconfont iconiconfront-69"/> <a className="popup-form__button--num" onClick={this.toFetchCountryNum}>
</a> +{country.num}
<Field <i className="iconfont iconiconfront-69"/>
name="tel" </a>
render={({field}) => { <Field
return ( name="tel"
<input render={({field}) => {
{...field} return (
className="popup-form__ipt" <input
data-type="tel" {...field}
type="text" className="popup-form__ipt"
placeholder="请填写手机号" data-type="tel"
/> type="text"
); placeholder="请填写手机号"
}} />
/> );
</div> }}
<CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify} mb={15}/> />
<div className="popup-form__item"> </div>
<Field <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify} mb={15}/>
name="code" <div className="popup-form__item">
render={({field}) => { <Field
return ( name="code"
<input render={({field}) => {
{...field} return (
className="popup-form__ipt popup-form__ipt--left" <input
type="text" {...field}
placeholder="输入验证码" className="popup-form__ipt popup-form__ipt--left"
/> type="text"
); placeholder="输入验证码"
}} />
/> );
}}
/>
<button
className="popup-form__button--code"
data-status={(validate && !isTimer) ? 'do' : ''}
type="button"
onClick={() => this.handleToSend({tel, code})}
>
{
isTimer ? `重新发送${seconds}s` : '发送验证码'
}
</button>
</div>
<button <button
className="popup-form__button--code" className="popup-form__button--bundle"
data-status={(validate && !isTimer) ? 'do' : ''} data-status={(tel && code && isEmpty(errors)) ? 'do' : 'done'}
type="button" type="submit"
onClick={() => this.handleToSend({tel, code})}
> >
{ 完成绑定
isTimer ? `重新发送${seconds}s` : '发送验证码'
}
</button> </button>
</div> </Form>
<button )
className="popup-form__button--bundle" }
data-status={(tel && code && isEmpty(errors)) ? 'do' : 'done'} </Formik>
type="submit"
>
完成绑定
</button>
</Form>
)}
/>
) )
} }
} }
......
src/components/blessingPreheat/addressPopup/index.js
...@@ -24,7 +24,7 @@ class AddressPopup extends Component { ...@@ -24,7 +24,7 @@ class AddressPopup extends Component {
// 获取收货信息 // 获取收货信息
fetchUserAddress = () => { fetchUserAddress = () => {
const { addressInfo } = this.state; const {addressInfo} = this.state;
http.get(`${API.home}/sys/user_address_info`).then(res => { http.get(`${API.home}/sys/user_address_info`).then(res => {
const {code, data, msg} = res.data; const {code, data, msg} = res.data;
if (code === 200) { if (code === 200) {
...@@ -41,7 +41,7 @@ class AddressPopup extends Component { ...@@ -41,7 +41,7 @@ class AddressPopup extends Component {
} }
handleToSubmit = (params = {}) => { handleToSubmit = (params = {}) => {
const { handleToHide } = this.props; const {handleToHide} = this.props;
http.post(`${API.home}/sys/collect_info`, params).then(res => { http.post(`${API.home}/sys/collect_info`, params).then(res => {
const {code, msg} = res.data; const {code, msg} = res.data;
if (code === 200) { if (code === 200) {
...@@ -53,15 +53,15 @@ class AddressPopup extends Component { ...@@ -53,15 +53,15 @@ class AddressPopup extends Component {
} }
render() { render() {
const { isLoading, addressInfo } = this.state; const {isLoading, addressInfo} = this.state;
const {tip, prize} = this.props; const {tip, prize} = this.props;
return ( return (
<> <>
{ {
isLoading && isLoading &&
<Formik <Formik
initialValues={{ initialValues={{
...addressInfo ...addressInfo,
}} }}
validate={({name, phone, address}) => { validate={({name, phone, address}) => {
const errors = {}; const errors = {};
...@@ -69,7 +69,7 @@ class AddressPopup extends Component { ...@@ -69,7 +69,7 @@ class AddressPopup extends Component {
if (!name) { if (!name) {
errors.name = '请输入收件人'; errors.name = '请输入收件人';
} }
if(!/^1[3-9]\d{9}$/.test(phone)) { if (!/^1[3-9]\d{9}$/.test(phone)) {
errors.phone = '请填写正确格式的手机号'; errors.phone = '请填写正确格式的手机号';
} }
if (!address) { if (!address) {
...@@ -83,7 +83,8 @@ class AddressPopup extends Component { ...@@ -83,7 +83,8 @@ class AddressPopup extends Component {
onSubmit={(values) => { onSubmit={(values) => {
this.handleToSubmit(values); this.handleToSubmit(values);
}} }}
render={({errors}) => ( >
{({errors}) => (
<Form className="address-form"> <Form className="address-form">
{ {
prize ? ( prize ? (
...@@ -91,11 +92,13 @@ class AddressPopup extends Component { ...@@ -91,11 +92,13 @@ class AddressPopup extends Component {
) : (null) ) : (null)
} }
{ {
tip ? (<p className="address-form__desc">{tip}</p>) : (<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>) tip ? (<p className="address-form__desc">{tip}</p>) : (
<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>)
} }
<Field <Field
name="name" name="name"
render={({ field }) => ( >
{({field}) => (
<div className="address-form__item"> <div className="address-form__item">
<input <input
{...field} {...field}
...@@ -109,10 +112,11 @@ class AddressPopup extends Component { ...@@ -109,10 +112,11 @@ class AddressPopup extends Component {
} }
</div> </div>
)} )}
/> </Field>
<Field <Field
name="phone" name="phone"
render={({ field }) => ( >
{({field}) => (
<div className="address-form__item"> <div className="address-form__item">
<input <input
{...field} {...field}
...@@ -126,10 +130,11 @@ class AddressPopup extends Component { ...@@ -126,10 +130,11 @@ class AddressPopup extends Component {
} }
</div> </div>
)} )}
/> </Field>
<Field <Field
name="address" name="address"
render={({ field }) => ( >
{({field}) => (
<div className="address-form__item"> <div className="address-form__item">
<input <input
{...field} {...field}
...@@ -143,15 +148,16 @@ class AddressPopup extends Component { ...@@ -143,15 +148,16 @@ class AddressPopup extends Component {
} }
</div> </div>
)} )}
/> </Field>
<button <button
className="address-form__submit" className="address-form__submit"
data-status="do" data-status="do"
type="submit" type="submit"
>提交</button> >提交
</button>
</Form> </Form>
)} )}
/> </Formik>
} }
</> </>
); );
......
src/components/detail/bindPhone/index.js
...@@ -20,11 +20,11 @@ class BargainBindPhone extends Component { ...@@ -20,11 +20,11 @@ class BargainBindPhone extends Component {
} }
// 获取短信验证码 // 获取短信验证码
handleToSendCode = ({ mobile }) => { handleToSendCode = ({mobile}) => {
const { country: { num = 86 } } = this.props; const {country: {num = 86}} = this.props;
let { isTimer, seconds } = this.state; let {isTimer, seconds} = this.state;
if(!isTimer) { if (!isTimer) {
if(!/^\d+$/.test(mobile)){ if (!/^\d+$/.test(mobile)) {
Toast.info('请输入正确的手机号'); Toast.info('请输入正确的手机号');
return; return;
} }
...@@ -34,29 +34,29 @@ class BargainBindPhone extends Component { ...@@ -34,29 +34,29 @@ class BargainBindPhone extends Component {
`${API['passport-api']}/m/personal/bindPhoneSendCode`, `${API['passport-api']}/m/personal/bindPhoneSendCode`,
{ {
area_code: `00${num}`, area_code: `00${num}`,
phone_num: mobile phone_num: mobile,
} },
).then(res => { ).then(res => {
const { errno, msg } = res.data; const {errno, msg} = res.data;
if(errno === 200) { if (errno === 200) {
Toast.info('验证码发送成功', 2, null, false); Toast.info('验证码发送成功', 2, null, false);
// 倒计时 // 倒计时
this.timer = window.setInterval(() => { this.timer = window.setInterval(() => {
if (seconds <= 0) { if (seconds <= 0) {
window.clearInterval(this.timer); window.clearInterval(this.timer);
this.setState({ this.setState({
isTimer: false, isTimer: false,
seconds: 60 seconds: 60,
}); });
}else { } else {
this.setState({ this.setState({
isTimer: true, isTimer: true,
seconds: --seconds seconds: --seconds,
}); });
} }
}, 1000); }, 1000);
}else { } else {
Toast.info(msg); Toast.info(msg);
} }
}); });
...@@ -65,7 +65,7 @@ class BargainBindPhone extends Component { ...@@ -65,7 +65,7 @@ class BargainBindPhone extends Component {
// 绑定手机号 // 绑定手机号
handleToBindPhone = ({code, mobile}) => { handleToBindPhone = ({code, mobile}) => {
const { country: { num = 86}, handleToBargain, confirmBindPhone } = this.props; const {country: {num = 86}, handleToBargain, confirmBindPhone} = this.props;
if (!mobile) { if (!mobile) {
Toast.info('请填手机号码'); Toast.info('请填手机号码');
return; return;
...@@ -87,34 +87,34 @@ class BargainBindPhone extends Component { ...@@ -87,34 +87,34 @@ class BargainBindPhone extends Component {
{ {
...params, ...params,
type: 1, type: 1,
is_valid: 1 is_valid: 1,
} },
).then(res => { ).then(res => {
const { errno, data, msg } = res.data; const {errno, data, msg} = res.data;
if(errno === 200) { if (errno === 200) {
if(data.tip_info) { if (data.tip_info) {
confirmBindPhone(params, data.tip_info); confirmBindPhone(params, data.tip_info);
}else { } else {
handleToBargain(); handleToBargain();
} }
}else { } else {
Toast.info(msg); Toast.info(msg);
} }
}); });
} }
render() { render() {
const { country: { num = '86' } } = this.props; const {country: {num = '86'}} = this.props;
const { isTimer, seconds } = this.state; const {isTimer, seconds} = this.state;
return ( return (
<Formik <Formik
initialValues={{ initialValues={{
mobile: '', mobile: '',
code: '' code: '',
}} }}
validate={({mobile, code}) => { validate={({mobile, code}) => {
const errors = {}; const errors = {};
if(!/^\d+$/.test(mobile)) { if (!/^\d+$/.test(mobile)) {
errors.mobile = '请填写正确格式的手机号'; errors.mobile = '请填写正确格式的手机号';
} }
if (!/[0-9]{6}/.test(code)) { if (!/[0-9]{6}/.test(code)) {
...@@ -122,10 +122,11 @@ class BargainBindPhone extends Component { ...@@ -122,10 +122,11 @@ class BargainBindPhone extends Component {
} }
return errors; return errors;
}} }}
onSubmit={(values, { setStatus, setSubmitting }) => { onSubmit={(values, {setStatus, setSubmitting}) => {
this.handleToBindPhone(values); this.handleToBindPhone(values);
}} }}
render={({values: {mobile, code}, errors}) => ( >
{({values: {mobile, code}, errors}) => (
<Form className="bargain-bind-phone"> <Form className="bargain-bind-phone">
<h2 className="bargain-bind-phone__title">绑定手机，先砍一刀</h2> <h2 className="bargain-bind-phone__title">绑定手机，先砍一刀</h2>
<div className="bargain-bind-phone__item"> <div className="bargain-bind-phone__item">
...@@ -138,52 +139,53 @@ class BargainBindPhone extends Component { ...@@ -138,52 +139,53 @@ class BargainBindPhone extends Component {
</Link> </Link>
<Field <Field
name="mobile" name="mobile"
render={({field}) => ( >
<input {({field}) => (
<input
{...field} {...field}
className="bargain-bind-phone__ipt" className="bargain-bind-phone__ipt"
type="tel" type="tel"
placeholder='手机号' placeholder='手机号'
maxLength={11} maxLength={11}
/> />
)} )}
/> </Field>
</div> </div>
<div className="bargain-bind-phone__item"> <div className="bargain-bind-phone__item">
<Field <Field name="code">
name="code" {({field}) => (
render={({field}) => ( <input
<input
{...field} {...field}
type="tel" type="tel"
placeholder='验证码' placeholder='验证码'
maxLength={6} maxLength={6}
/> />
)} )}
/> </Field>
{errors.mobile} {errors.mobile}
<button <button
type="button" type="button"
className={classnames( className={classnames(
'bargain-bind-phone__button--send', 'bargain-bind-phone__button--send',
{ {
'active': mobile && errors.mobile === undefined 'active': mobile && errors.mobile === undefined,
} },
)} )}
disabled={!(mobile && errors.mobile === undefined)} disabled={!(mobile && errors.mobile === undefined)}
onClick={() => this.handleToSendCode({mobile})} onClick={() => this.handleToSendCode({mobile})}
> >
{isTimer? `重新发送${seconds}s` : '发送验证码'} {isTimer ? `重新发送${seconds}s` : '发送验证码'}
</button> </button>
</div> </div>
<button <button
type="submit" type="submit"
className="bargain-bind-phone__button--bargain" className="bargain-bind-phone__button--bargain"
disabled={!(mobile && code && JSON.stringify(errors) === '{}')} disabled={!(mobile && code && JSON.stringify(errors) === '{}')}
>先砍一刀</button> >先砍一刀
</button>
</Form> </Form>
)} )}
/> </Formik>
) )
} }
} }
......
src/components/order/orderinfo.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile'; import { InputItem, Button, WingBlank, Toast } from 'antd-mobile';
import { Formik, Field, Form, withFormik } from 'formik'; import { withFormik } from 'formik';
import {HeaderBar} from '../../common'; import {HeaderBar} from '../../common';
import { http } from "src/utils"; import { http } from "src/utils";
const InnerForm = ({ const InnerForm = ({
values, values,
errors,
touched,
setFieldValue, setFieldValue,
handleBlur,
handleSubmit, handleSubmit,
isSubmitting,
}) => ( }) => (
<form> <form>
<InputItem <InputItem
......
src/components/passport/accountLogin/index.js
...@@ -27,9 +27,8 @@ class AccountLogin extends PureComponent { ...@@ -27,9 +27,8 @@ class AccountLogin extends PureComponent {
<HeaderBar arrow={true} title={'登录'}/> <HeaderBar arrow={true} title={'登录'}/>
<Header/> <Header/>
<Form className="login-info"> <Form className="login-info">
<FastField <FastField name='account'>
name='account' {({field}) => (
render={({field}) => (
<Input <Input
{...field} {...field}
type={'text'} type={'text'}
...@@ -42,10 +41,9 @@ class AccountLogin extends PureComponent { ...@@ -42,10 +41,9 @@ class AccountLogin extends PureComponent {
} }
/> />
)} )}
/> </FastField>
<FastField <FastField name='password'>
name='password' {({field}) => (
render={({field}) => (
<PasswordInput <PasswordInput
{...field} {...field}
autoComplete={'on'} autoComplete={'on'}
...@@ -55,7 +53,7 @@ class AccountLogin extends PureComponent { ...@@ -55,7 +53,7 @@ class AccountLogin extends PureComponent {
} }
/> />
)} )}
/> </FastField>
<LoginButton active={values.account && values.password && isEmpty(errors)}/> <LoginButton active={values.account && values.password && isEmpty(errors)}/>
<Link className={'forgot-password-btn'} to='/passport/forgot-password'>忘记密码</Link> <Link className={'forgot-password-btn'} to='/passport/forgot-password'>忘记密码</Link>
</Form> </Form>
......
src/components/passport/bindingTel/index.js
...@@ -47,7 +47,8 @@ class BindingTel extends Component { ...@@ -47,7 +47,8 @@ class BindingTel extends Component {
<Form> <Form>
<Field <Field
name='tel' name='tel'
render={({field, form}) => { >
{({field, form}) => {
return ( return (
<ClearableInput <ClearableInput
{...field} {...field}
...@@ -59,10 +60,11 @@ class BindingTel extends Component { ...@@ -59,10 +60,11 @@ class BindingTel extends Component {
) )
}} }}
/> </Field>
<Field <Field
name='veriCode' name='veriCode'
render={({field}) => { >
{({field}) => {
return ( return (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
...@@ -81,7 +83,7 @@ class BindingTel extends Component { ...@@ -81,7 +83,7 @@ class BindingTel extends Component {
) )
}} }}
/> </Field>
<CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance} mb={0}/> <CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance} mb={0}/>
<Button className={'complete-btn'} <Button className={'complete-btn'}
active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button> active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
......
src/components/passport/forgotPassword/index.js
...@@ -52,7 +52,8 @@ class ForgotPassword extends Component { ...@@ -52,7 +52,8 @@ class ForgotPassword extends Component {
<Form className='forgot-password-form'> <Form className='forgot-password-form'>
<Field <Field
name={'tel'} name={'tel'}
render={({field, form}) => { >
{({field, form}) => {
return ( return (
<ClearableInput <ClearableInput
{...field} {...field}
...@@ -63,12 +64,13 @@ class ForgotPassword extends Component { ...@@ -63,12 +64,13 @@ class ForgotPassword extends Component {
country={country} country={country}
/>) />)
}} }}
/> </Field>
{ {
this.state.validate && this.state.validate &&
<Field <Field
name='veriCode' name='veriCode'
render={({field}) => { >
{({field}) => {
return ( return (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
...@@ -86,7 +88,7 @@ class ForgotPassword extends Component { ...@@ -86,7 +88,7 @@ class ForgotPassword extends Component {
/> />
) )
}} }}
/> </Field>
} }
<OnSubmissionError callback={this.onSubmissionError}/> <OnSubmissionError callback={this.onSubmissionError}/>
<CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/> <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
......
src/components/passport/login/index.js
...@@ -18,7 +18,7 @@ class Login extends Component { ...@@ -18,7 +18,7 @@ class Login extends Component {
state = { state = {
validate: null, validate: null,
captchaInstance: null, captchaInstance: null,
validationData: null validationData: null,
} }
loginWaysClick = method => { loginWaysClick = method => {
...@@ -29,7 +29,7 @@ class Login extends Component { ...@@ -29,7 +29,7 @@ class Login extends Component {
let from = location.state && location.state.from || { let from = location.state && location.state.from || {
pathname: '/', pathname: '/',
search: window.location.search, search: window.location.search,
hash: '' hash: '',
}; };
const referrer = document.referrer const referrer = document.referrer
const redirectURI = (!/^https?:\/\/m.julyedu.com\/?$/.test(referrer) && referrer) ? referrer : window.location.origin + from.pathname + from.search + from.hash; const redirectURI = (!/^https?:\/\/m.julyedu.com\/?$/.test(referrer) && referrer) ? referrer : window.location.origin + from.pathname + from.search + from.hash;
...@@ -52,14 +52,14 @@ class Login extends Component { ...@@ -52,14 +52,14 @@ class Login extends Component {
getCaptchaInstance = instance => { getCaptchaInstance = instance => {
this.setState({ this.setState({
captchaInstance: instance captchaInstance: instance,
}) })
} }
onVerify = (data) => { onVerify = (data) => {
this.setState({ this.setState({
validationData: data, validationData: data,
validate: true validate: true,
}) })
} }
...@@ -86,16 +86,15 @@ class Login extends Component { ...@@ -86,16 +86,15 @@ class Login extends Component {
loginWays, loginWays,
errors, errors,
values, values,
country country,
} = this.props } = this.props
return ( return (
<div className='login'> <div className='login'>
<HeaderBar title={'登录'} arrow={true}/> <HeaderBar title={'登录'} arrow={true}/>
<Header/> <Header/>
<Form className="login-info"> <Form className="login-info">
<Field <Field name='tel'>
name='tel' {({field}) => (
render={({field}) => (
<Input <Input
{...field} {...field}
type={'tel'} type={'tel'}
...@@ -105,14 +104,14 @@ class Login extends Component { ...@@ -105,14 +104,14 @@ class Login extends Component {
id={'tel'} id={'tel'}
/> />
)} )}
>
</Field> </Field>
{ {
this.state.validate && this.state.validate &&
<Field <Field
type='number' type='number'
name='veriCode' name='veriCode'
render={({field}) => ( >
{({field}) => (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
className={'verification'} className={'verification'}
...@@ -127,7 +126,7 @@ class Login extends Component { ...@@ -127,7 +126,7 @@ class Login extends Component {
country={country} country={country}
/> />
)} )}
/> </Field>
} }
<CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/> <CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
...@@ -147,7 +146,7 @@ class Login extends Component { ...@@ -147,7 +146,7 @@ class Login extends Component {
const FormikConfig = { const FormikConfig = {
mapPropsToValues: () => ({ mapPropsToValues: () => ({
tel: '', tel: '',
veriCode: '' veriCode: '',
}), }),
handleSubmit(values, {props}) { handleSubmit(values, {props}) {
const from = props.location.state && props.location.state.from const from = props.location.state && props.location.state.from
...@@ -155,7 +154,7 @@ const FormikConfig = { ...@@ -155,7 +154,7 @@ const FormikConfig = {
phone_num: values.tel, phone_num: values.tel,
phone_code: values.veriCode, phone_code: values.veriCode,
area_code: '00' + props.country.num, area_code: '00' + props.country.num,
redirect: from && encodeURIComponent(window.location.origin + from.pathname + from.search + from.hash) redirect: from && encodeURIComponent(window.location.origin + from.pathname + from.search + from.hash),
}).then(res => { }).then(res => {
if (res.hasError) { if (res.hasError) {
Toast.info(res.msg); Toast.info(res.msg);
...@@ -176,13 +175,13 @@ const FormikConfig = { ...@@ -176,13 +175,13 @@ const FormikConfig = {
errors.veriCode = '请输入验证码' errors.veriCode = '请输入验证码'
} }
return errors return errors
} },
} }
export default compose( export default compose(
connect( connect(
state => ({country: state.country}), state => ({country: state.country}),
{quickLogin} {quickLogin},
), ),
withFormik(FormikConfig), withFormik(FormikConfig),
)(Login) )(Login)
src/components/passport/setPassword/index.js
...@@ -9,7 +9,6 @@ import { HeaderBar } from "src/common" ...@@ -9,7 +9,6 @@ import { HeaderBar } from "src/common"
import { http } from "src/utils" import { http } from "src/utils"
import { Toast } from "antd-mobile" import { Toast } from "antd-mobile"
import { encrypt } from "src/components/passport/encryption" import { encrypt } from "src/components/passport/encryption"
import { Link } from "react-router-dom"
import { isEmpty } from "lodash" import { isEmpty } from "lodash"
import { connect } from "react-redux" import { connect } from "react-redux"
import { setCurrentUser } from 'src/store/userAction' import { setCurrentUser } from 'src/store/userAction'
...@@ -20,30 +19,9 @@ class SetPassword extends Component { ...@@ -20,30 +19,9 @@ class SetPassword extends Component {
let historyUrl = window.localStorage.getItem('HistoryUrl') let historyUrl = window.localStorage.getItem('HistoryUrl')
const {history} = this.props const {history} = this.props
history.push(historyUrl) history.push(historyUrl)
// window.localStorage.removeItem('HistoryUrl')
return
} }
//
// componentDidMount() {
// const {location} = this.props
// const {action} = this.props.history
// let pathname = location.state && location.state.from && location.state.from.pathname
// let search = location.state && location.state.from && location.state.from.search
//
// console.log(location);
// console.log(location.state);
// console.log(action,pathname,search);
//
// // if(action !== 'PUSH'){
// // let historyUrl = `${pathname}${search}`
// // window.localStorage.setItem('HistoryUrl',historyUrl)
// // }
//
// }
render() { render() {
let {values, errors, location} = this.props let {values, errors, location} = this.props
let {from} = location.state || {from: {pathname: '/'}} let {from} = location.state || {from: {pathname: '/'}}
...@@ -55,7 +33,8 @@ class SetPassword extends Component { ...@@ -55,7 +33,8 @@ class SetPassword extends Component {
<Form> <Form>
<Field <Field
name='password' name='password'
render={({field}) => { >
{({field}) => {
return ( return (
<PasswordInput <PasswordInput
autoComplete={'on'} autoComplete={'on'}
...@@ -65,7 +44,7 @@ class SetPassword extends Component { ...@@ -65,7 +44,7 @@ class SetPassword extends Component {
/> />
) )
}} }}
/> </Field>
<Button className={'btn-active'} <Button className={'btn-active'}
active={values.password && values.agreement && isEmpty(errors)}>完成</Button> active={values.password && values.agreement && isEmpty(errors)}>完成</Button>
<label htmlFor="agreement" className='user-agreement'> <label htmlFor="agreement" className='user-agreement'>
......
src/components/passport/studentRoot/index.js
...@@ -171,9 +171,8 @@ class StudentRoot extends PureComponent { ...@@ -171,9 +171,8 @@ class StudentRoot extends PureComponent {
const isSubmit = Object.values(props.values).join('') !== '' && props.errors.tip === undefined; const isSubmit = Object.values(props.values).join('') !== '' && props.errors.tip === undefined;
return ( return (
<Form className="student-form"> <Form className="student-form">
<Field <Field name='tel'>
name='tel' {({field}) => (
render={({field}) => (
<Input <Input
{...field} {...field}
type={'tel'} type={'tel'}
...@@ -182,7 +181,7 @@ class StudentRoot extends PureComponent { ...@@ -182,7 +181,7 @@ class StudentRoot extends PureComponent {
country={country} country={country}
/> />
)} )}
/> </Field>
<div className="student-form__item"> <div className="student-form__item">
<Field <Field
className="student-form__input" className="student-form__input"
...@@ -199,7 +198,8 @@ class StudentRoot extends PureComponent { ...@@ -199,7 +198,8 @@ class StudentRoot extends PureComponent {
<Field <Field
type='number' type='number'
name='code' name='code'
render={({field}) => ( >
{({field}) => (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
className={'student-form__code'} className={'student-form__code'}
...@@ -212,7 +212,7 @@ class StudentRoot extends PureComponent { ...@@ -212,7 +212,7 @@ class StudentRoot extends PureComponent {
country={country} country={country}
/> />
)} )}
/> </Field>
} }
<div className="student-form__item"> <div className="student-form__item">
<label className="student-form__label">学校</label> <label className="student-form__label">学校</label>
......
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