Skip to content

M
mr-julyedu
Commit f3e1141d by xuzhenghua
Options

tupian

parents 33138c8e 336e4b58
Showing with 265 additions and 253 deletions
src/App.js
...@@ -63,6 +63,9 @@ class App extends Component { ...@@ -63,6 +63,9 @@ class App extends Component {
if (cookie.get('uid') && this.props.user.hasError) { if (cookie.get('uid') && this.props.user.hasError) {
this.getUser() this.getUser()
} }
if(location.pathname==='/passport'){
window.localStorage.setItem('binding_redirect', JSON.stringify(this.previousLocation))
}
const {pathname, state} = location const {pathname, state} = location
if (pathname.startsWith('/passport')) { if (pathname.startsWith('/passport')) {
location.state = { location.state = {
......
src/components/activity/index.js
...@@ -26,7 +26,7 @@ class Activity extends Component { ...@@ -26,7 +26,7 @@ class Activity extends Component {
getGift = () => { getGift = () => {
if(this.props.user.hasError) { if(this.props.user.hasError) {
this.props.history.push('/passport'); this.props.history.push('/passport', {from: this.props.location.pathname});
} else { } else {
Toast.info('领取成功，你可前往七月在线官网/APP进行查看', 2); Toast.info('领取成功，你可前往七月在线官网/APP进行查看', 2);
localStorage.setItem('lingqu', 1); localStorage.setItem('lingqu', 1);
......
src/components/passport/bindingTel/index.js
import React, { Component } from 'react'; import React, { Component } from 'react'
import './binding-tel.scss' import './binding-tel.scss'
import { withFormik, Field, Form } from "formik"; import { withFormik, Field, Form } from "formik"
import { http, getParam } from "@/utils"; import { http, getParam } from "@/utils"
import { compose } from "redux"; import { compose } from "redux"
import { connect } from "react-redux"; import { connect } from "react-redux"
import { setCurrentUser } from "@/store/userAction"; import { setCurrentUser } from "@/store/userAction"
import Captcha from '@/common/Captcha' import Captcha from '@/common/Captcha'
import { HeaderBar } from '@/common' import { HeaderBar } from '@/common'
...@@ -13,147 +13,148 @@ import { HeaderBar } from '@/common' ...@@ -13,147 +13,148 @@ import { HeaderBar } from '@/common'
import ClearableInput from '../common/clearableInputWithCountryCodes' import ClearableInput from '../common/clearableInputWithCountryCodes'
import Button from '../common/Button' import Button from '../common/Button'
import VeriCodeInput from '../common/veriCodeInput' import VeriCodeInput from '../common/veriCodeInput'
import { Toast } from "antd-mobile"; import { Toast } from "antd-mobile"
import { isEmpty } from "lodash"; import { isEmpty } from "lodash"
class BindingTel extends Component { class BindingTel extends Component {
state = { state = {
validate: null, validate: null,
captchaInstance: null captchaInstance: null
} }
getCaptchaInstance = instance => { getCaptchaInstance = instance => {
this.setState({ this.setState({
captchaInstance: instance captchaInstance: instance
}) })
} }
onVerify = (err, data) => { onVerify = (err, data) => {
if (err) { if (err) {
console.log(err) console.log(err)
} else { } else {
this.setState({ this.setState({
validate: data.validate validate: data.validate
}) })
}
} }
}
render() { render() {
const { const {
values, values,
errors, errors,
country country
} = this.props } = this.props
return ( return (
<> <>
<HeaderBar title={'绑定手机号'} arrow={true}/> <HeaderBar title={'绑定手机号'} arrow={true}/>
<div className={'binding-tel'}> <div className={'binding-tel'}>
<p className={'title'}>为提高您的账号安全，请绑定手机号</p> <p className={'title'}>为提高您的账号安全，请绑定手机号</p>
<Form> <Form>
<Field <Field
name='tel' name='tel'
render={({field, form}) => { render={({field, form}) => {
return ( return (
<ClearableInput <ClearableInput
{...field} {...field}
setFieldValue={form.setFieldValue} setFieldValue={form.setFieldValue}
placeholder={'请输入需要绑定的手机号'} placeholder={'请输入需要绑定的手机号'}
wrapperClass={'tel'} wrapperClass={'tel'}
country={country} country={country}
/> />
) )
}} }}
/> />
<Field <Field
name='veriCode' name='veriCode'
render={({field}) => { render={({field}) => {
return ( return (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
className={'verification'} className={'verification'}
icon={<i className={'iconfont iconduanxin'} icon={<i className={'iconfont iconduanxin'}
style={{fontSize: '20px', left: '12px'}} style={{fontSize: '20px', left: '12px'}}
/>} />}
placeholder={'验证码'} placeholder={'验证码'}
account={values.tel} account={values.tel}
tel={values.tel} tel={values.tel}
challenge={this.state.validate} challenge={this.state.validate}
instance={this.state.captchaInstance} instance={this.state.captchaInstance}
action={'auth'} action={'auth'}
country={country} country={country}
/> />
) )
}} }}
/> />
<Captcha onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/> <Captcha onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
<Button className={'complete-btn'} <Button className={'complete-btn'}
active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button> active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
</Form> </Form>
</div> </div>
</> </>
); )
} }
} }
const formikConfig = { const formikConfig = {
mapPropsToValues() { mapPropsToValues() {
return { return {
tel: '', tel: '',
veriCode: '' veriCode: ''
} }
}, },
validateOnChange: true, validateOnChange: true,
validate(values) { validate(values) {
let errors = {} let errors = {}
if (!/\d/.test(values.tel)) { if (!/\d/.test(values.tel)) {
errors.tel = '请输入正确的手机号' errors.tel = '请输入正确的手机号'
} }
if (!values.veriCode) { if (!values.veriCode) {
errors.veriCode = '请填写验证码' errors.veriCode = '请填写验证码'
}
return errors
},
handleSubmit(values, {props}) {
http.post(`${API['passport-api']}/bind_mobile`, {
phone_num: values.tel,
phone_code: values.veriCode,
mkey: getParam('mkey'),
area_code: '00' + props.country.num,
plat: 5
}).then(res => {
const data = res.data
if (data.errno == 200) {
if (data.data['is_set_pwd']) {
const {history} = props
history.replace(`/passport/set-password`, {
user: {
hasError: false,
data: {
uid: data.data.uid
},
msg: data.data.msg,
stage: 'binding'
}
})
} else {
location.assign(data.data['jump_url'])
} }
return errors
},
handleSubmit(values, {props}) {
http.post(`${API['passport-api']}/bind_mobile`, {
phone_num: values.tel,
phone_code: values.veriCode,
mkey: getParam('mkey'),
area_code: '00'+props.country.num,
plat: 5
}).then(res => {
const data = res.data
if (data.errno == 200) {
if (data.data['is_set_pwd']) {
props.setCurrentUser({
hasError: false,
data: {
uid: data.data.uid
},
msg: data.data.msg,
stage: 'binding'
})
props.history.replace(`/passport/set-password`)
} else {
location.assign(data.data['jump_url'])
}
} else {
} else { Toast.info(data.msg, 2, null, false)
Toast.info(data.msg, 2, null, false) }
} })
}) }
}
} }
export default compose( export default compose(
connect( connect(
state => ({country: state.country}), state => ({country: state.country}),
{setCurrentUser} {setCurrentUser}
), ),
withFormik(formikConfig), withFormik(formikConfig),
)(BindingTel); )(BindingTel)
src/components/passport/index.js
...@@ -23,6 +23,7 @@ class Passport extends Component { ...@@ -23,6 +23,7 @@ class Passport extends Component {
redirectURL = '/' redirectURL = '/'
count = 1 count = 1
blackList = new Set(['/passport/binding-tel', '/passport/set-password'])
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -85,7 +86,7 @@ class Passport extends Component { ...@@ -85,7 +86,7 @@ class Passport extends Component {
routeWhenUserLoggedIn = () => { routeWhenUserLoggedIn = () => {
let {hasError} = this.props.user let {hasError} = this.props.user
if (!hasError) { if (!hasError && !this.blackList.has(this.props.location.pathname)) {
const redirectURI = getParam('redirect') const redirectURI = getParam('redirect')
redirectURI ? (window.location.href = redirectURI) : this.props.history.go(-this.count) redirectURI ? (window.location.href = redirectURI) : this.props.history.go(-this.count)
} }
...@@ -108,7 +109,9 @@ class Passport extends Component { ...@@ -108,7 +109,9 @@ class Passport extends Component {
<Route path={match.url + '/account-login'} component={AccountLogin}/> <Route path={match.url + '/account-login'} component={AccountLogin}/>
<Route path={match.url + '/forgot-password'} component={ForgotPassword}/> <Route path={match.url + '/forgot-password'} component={ForgotPassword}/>
<Route path={match.url + '/forgot-password-email'} component={ForgotPasswordEmail}/> <Route path={match.url + '/forgot-password-email'} component={ForgotPasswordEmail}/>
<Route path={match.url + '/set-password'} component={SetPassword}/> <Route path={match.url + '/set-password'} render={props => {
return <SetPassword {...props} count={this.count}/>
}}/>
<Route path={match.url + '/binding-tel'} component={BindingTel}/> <Route path={match.url + '/binding-tel'} component={BindingTel}/>
</Switch> </Switch>
</div> </div>
...@@ -123,4 +126,4 @@ export default compose( ...@@ -123,4 +126,4 @@ export default compose(
null null
), ),
WithFullSize WithFullSize
)(Passport) )(Passport)
\ No newline at end of file
src/components/passport/setPassword/index.js
import React, { Component } from 'react'; import React, { Component } from 'react'
import './set-password.scss' import './set-password.scss'
import { withFormik, Form, Field } from "formik"; import { withFormik, Form, Field } from "formik"
import PasswordInput from '../common/passwordInput' import PasswordInput from '../common/passwordInput'
import Button from '../common/Button' import Button from '../common/Button'
import classnames from 'classnames' import classnames from 'classnames'
import { compose } from 'redux' import { compose } from 'redux'
import { HeaderBar } from "@/common"; import { HeaderBar } from "@/common"
import { http, api } from "@/utils"; import { http } from "@/utils"
import { Toast } from "antd-mobile"; import { Toast } from "antd-mobile"
import { encrypt } from "@/components/passport/encryption"; import { encrypt } from "@/components/passport/encryption"
import { Link } from "react-router-dom"; 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 '@/store/userAction'
class SetPassword extends Component { class SetPassword extends Component {
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: '/'}}
return ( return (
<> <>
<HeaderBar arrow={true} title={'设置密码'}/> <HeaderBar arrow={true} title={'设置密码'}/>
<div className={'set-password'}> <div className={'set-password'}>
<p className='title'>密码需要包含6-16位字母及数字</p> <p className='title'>密码需要包含6-16位字母及数字</p>
<Form> <Form>
<Field <Field
name='password' name='password'
render={({field}) => { render={({field}) => {
return ( return (
<PasswordInput <PasswordInput
autoComplete={'on'} autoComplete={'on'}
placeholder={'设置密码'} placeholder={'设置密码'}
onChange={this.handleChange} onChange={this.handleChange}
{...field} {...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'>
<Field type='checkbox' <Field type='checkbox'
name='agreement' name='agreement'
id='agreement' id='agreement'
className={classnames([ className={classnames([
this.props.values.agreement ? 'iconfont iconiconfront-3' : 'disagree' this.props.values.agreement ? 'iconfont iconiconfront-3' : 'disagree'
])} ])}
/> />
同意<span>《七月在线用户使用协议》</span> 同意<span>《七月在线用户使用协议》</span>
</label> </label>
</Form> </Form>
<div className="skip" <div className="skip"
style={{display: from && from.pathname.includes('forgot-password') ? 'none' : 'block'}}> style={{display: from && from.pathname.includes('forgot-password') ? 'none' : 'block'}}>
<Link replace to='/passport/account-login'>跳过</Link> <Link replace to='/passport/account-login'>跳过</Link>
</div> </div>
</div> </div>
</> </>
); )
} }
} }
const formikConfig = { const formikConfig = {
mapPropsToValues() { mapPropsToValues() {
return { return {
password: '', password: '',
agreement: true agreement: true
} }
}, },
handleSubmit: (values, {props}) => { handleSubmit: (values, {props}) => {
let from = props.location.state && props.location.state.from || {pathname: '/'} let from = props.location.state && props.location.state.from || {pathname: '/'}
if (from.pathname.includes('forgot-password')) { if (from.pathname.includes('forgot-password')) {
forgotPasswordReset(values, props); forgotPasswordReset(values, props)
} else { } else {
bindMobileSetPassword(values, props) bindMobileSetPassword(values, props)
} }
}, },
validateOnChange: false, validateOnChange: false,
validate: values => { validate: values => {
let errors = {} let errors = {}
const re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/; const re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
if (!re.test(values.password)) { if (!re.test(values.password)) {
errors.password = '密码需要包含6-16位字母及数字' errors.password = '密码需要包含6-16位字母及数字'
Toast.info(errors.password, 2, null, false) Toast.info(errors.password, 2, null, false)
} }
if (!values.agreement) { if (!values.agreement) {
errors.agreement = '您须同意《七月在线用户使用协议》' errors.agreement = '您须同意《七月在线用户使用协议》'
Toast.info(errors.agreement, 2, null, false) Toast.info(errors.agreement, 2, null, false)
}
return errors
} }
return errors
}
} }
function forgotPasswordReset(values, props) { function forgotPasswordReset(values, props) {
let key = sessionStorage.getItem('r_type') === 'email' ? 'email' : 'tel' let key = sessionStorage.getItem('r_type') === 'email' ? 'email' : 'tel'
let requestKey = key === 'email' ? 'email' : 'phone' let requestKey = key === 'email' ? 'email' : 'phone'
http.post(`${API['passport-api']}/account/up_pass_by_${requestKey}`, { http.post(`${API['passport-api']}/account/up_pass_by_${requestKey}`, {
[requestKey]: sessionStorage.getItem(key), [requestKey]: sessionStorage.getItem(key),
password: encrypt(values.password) password: encrypt(values.password)
})
.then(res => {
if (res.data.errno == 200) {
Toast.info('密码设置成功')
setTimeout(function () {
props.history.replace('/passport/account-login')
}, 1000)
} else {
Toast.info(res.data.msg, 2, null, false)
}
}) })
.then(res => {
if (res.data.errno == 200) {
Toast.info('密码设置成功')
setTimeout(function () {
props.history.replace('/passport/account-login')
}, 1000)
} else {
Toast.info(res.data.msg, 2, null, false)
}
})
} }
function bindMobileSetPassword(values, props) { function bindMobileSetPassword(values, props) {
http.post(`${API['passport-api']}/bind_mobile/set_pwd_new`, { http.post(`${API['passport-api']}/bind_mobile/set_pwd_new`, {
uid: props.user.data.uid, uid: props.user.data.uid,
password: encrypt(values.password) password: encrypt(values.password)
})
.then(res => {
if (res.data.errno == 200) {
const {location, history} = props
Toast.info('密码设置成功')
let from = location.state && location.state.from || {pathname: '/'}
let local_redirect_url = JSON.parse(window.localStorage.getItem('binding_redirect'))
setTimeout(function () {
if (local_redirect_url) {
const {pathname, search, hash} = local_redirect_url
history.replace(pathname + search + hash)
} else {
history.replace(from.pathname)
}
}, 1000)
} else {
Toast.info(res.data.msg, 2, null, false)
}
}) })
.then(res => {
if (res.data.errno == 200) {
Toast.info('密码设置成功')
let from = props.location.state && props.location.state.from || {pathname: '/'}
setTimeout(function () {
props.history.replace(from.pathname)
}, 1000)
} else {
Toast.info(res.data.msg, 2, null, false)
}
})
} }
export default compose( export default compose(
connect( connect(
state => ({user: state.user}), state => ({user: state.user}),
null {setCurrentUser}
), ),
withFormik(formikConfig) withFormik(formikConfig)
)(SetPassword); )(SetPassword)
\ No newline at end of file
src/router/router-config.js
...@@ -207,7 +207,7 @@ export default [ ...@@ -207,7 +207,7 @@ export default [
}, },
// 定金-邀请好友助力 // 定金-邀请好友助力
{ {
path: '/expand/index', path: '/expand/indexactivity',
component: ExpandShare component: ExpandShare
}, },
{ {
......
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