Skip to content

M
mr-julyedu
Commit 4d4316e7 by zhanghaozhe
Options

update formik

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