Skip to content

M
mr-julyedu
Commit c9da436c by zhanghaozhe
Options

绑定手机号

parent 6a749753
Showing with 164 additions and 46 deletions
scripts/start.js
......@@ -41,7 +41,8 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
// const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 80;
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 80;
const HOST = process.env.HOST || '0.0.0.0';
if (process.env.HOST) {
......
src/components/passport/bindingTel/binding-tel.scss
......@@ -11,13 +11,6 @@
margin-bottom: 21px;
}
.place {
width: 100%;
height: 39px;
margin-bottom: 33px;
background: #56abff;
}
.verification {
margin-bottom: 21px;
}
......
src/components/passport/bindingTel/index.js
import React, { Component } from 'react';
import './binding-tel.scss'
import { withFormik, Field, Form } from "formik";
import { validateTel, http, api, getParam } from "@/utils";
import { compose } from "redux";
import { connect } from "react-redux";
import { setCurrentUser } from "@/store/userAction";
import Captcha from '@/common/Captcha'
import ClearableInput from '@common/ClearableInput'
import Button from '../common/Button'
import VeriCodeInput from '../common/veriCodeInput'
import { Toast } from "antd-mobile";
import { isEmpty } from "lodash";
class BindingTel extends Component {
constructor(props) {
super(props);
this.state = {
veriCode: ''
};
state = {
validate: null,
captchaInstance: null
}
handleChange = (val) => {
this.setState({veriCode: val});
getCaptchaInstance = instance => {
this.setState({
captchaInstance: instance
})
}
onVerify = (err, data) => {
if (err) {
console.log(err)
} else {
this.setState({
validate: data.validate
})
}
}
render() {
const {
values,
errors
} = this.props
return (
<div className={'binding-tel'}>
<p className={'title'}>为提高您的账号安全，请绑定手机号</p>
<ClearableInput
type={'number'}
placeholder={'请输入需要绑定的手机号'}
wrapperClass={'tel'}
icon={<i className={'iconfont iconshouji'}
style={{fontSize: '22px', left: '11px'}}
/>}
/>
<VeriCodeInput
type={'number'}
className={'verification'}
onChange={this.handleChange}
icon={<i className={'iconfont iconduanxin'}
style={{fontSize: '20px', left: '12px'}}
/>}
/>
<div className="place"/>
<Button className={'complete-btn'}>完成</Button>
<Form>
<Field
name='tel'
render={({field, form}) => {
return (
<ClearableInput
{...field}
setFieldValue={form.setFieldValue}
placeholder={'请输入需要绑定的手机号'}
wrapperClass={'tel'}
icon={<i className={'iconfont iconshouji'}
style={{fontSize: '22px', left: '11px'}}
/>}
/>
)
}}
/>
<Field
name='veriCode'
render={({field}) => {
return (
<VeriCodeInput
{...field}
className={'verification'}
icon={<i className={'iconfont iconduanxin'}
style={{fontSize: '20px', left: '12px'}}
/>}
account={values.tel}
tel={values.tel}
challenge={this.state.validate}
instance={this.state.captchaInstance}
action={'auth'}
/>
)
}}
/>
<Captcha onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
<Button className={'complete-btn'} active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
</Form>
</div>
);
}
}
export default BindingTel;
\ No newline at end of file
const formikConfig = {
mapPropsToValues() {
return {
tel: '',
veriCode: ''
}
},
validateOnChange: true,
validate(values) {
let errors = {}
if (!validateTel(values.tel)) {
errors.tel = '请输入正确的手机号'
}
if (!values.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'),
plat: 5
}).then(res => {
const data = res.data
if (data.errno == 200) {
if (data.data.is_set_pwd) {
console.log('set')
}else {
location.assign(data.data.jump_url)
}
} else {
Toast.info(data.msg, 2, null, false)
}
/*props.setCurrentUser({
hasError,
data
})*/
})
}
}
export default compose(
connect(
null,
{setCurrentUser}
),
withFormik(formikConfig),
)(BindingTel);
\ No newline at end of file
src/components/passport/common/LoginWays/index.js
......@@ -16,9 +16,11 @@ class LoginWays extends PureComponent {
{
this.props.loginWays.map((item, index) => {
return (
<li key={index} onClick={this.handleClick.bind(this, index)}>
<img src={item.logo} alt=""/>
<p>{item.text}</p>
<li key={index} onClick={this.handleClick.bind(this, item.text)}>
<a href={item.url}>
<img src={item.logo} alt=""/>
<p>{item.text}</p>
</a>
</li>
)
})
......
src/components/passport/common/LoginWays/loginWays.scss
......@@ -36,6 +36,10 @@
li {
text-align: center;
a{
display: block;
}
img {
width: 34px;
}
......
src/components/passport/common/veriCodeInput/index.js
......@@ -110,7 +110,7 @@ class VeriCodeInput extends Component {
if (!tel) {
content = '手机号码不能为空'
}
if (validateTel(tel)) {
if (!validateTel(tel)) {
content = '请输入正确格式的手机号码'
}
} else {
......
src/components/passport/index.js
......@@ -8,6 +8,7 @@ import AccountLogin from './accountLogin'
import ForgotPassword from './forgotPassword'
import SetPassword from './setPassword'
import BindingTel from './bindingTel'
import {api} from "@/utils";
import account from './account.png'
import qq from './qq.png'
......@@ -17,6 +18,7 @@ import wechat from './wechat.png'
class Passport extends Component {
redirect_url = location.protocol + '//' + location.hostname
constructor(props) {
super(props);
......@@ -28,15 +30,19 @@ class Passport extends Component {
},
{
logo: wechat,
text: '微信'
text: '微信',
url: 'https://www.baidu.com'
},
{
logo: qq,
text: 'QQ'
text: 'QQ',
url: 'https://www.baidu.com'
},
{
logo: sina,
text: '新浪'
text: '新浪',
url: `http://passport-test.julyedu.com/mob/sinalogin?redirect_url=${this.redirect_url}`
},
]
}
......
src/components/passport/login/index.js
......@@ -21,12 +21,19 @@ class WechatLogin extends Component {
captchaInstance: null
}
loginWaysClick = index => {
switch (index) {
loginWaysClick = method => {
console.log(method);
const {history} = this.props
switch (method) {
case '账号登录':
history.push('/passport/account-login')
break;
}
/*switch (index) {
case 0:
this.props.history.push('/passport/account-login')
break;
}
}*/
}
getCaptchaInstance = instance => {
......
src/components/passport/setPassword/index.js
......@@ -10,11 +10,13 @@ import { http, api } from "@/utils";
import { Toast } from "antd-mobile";
import { encrypt } from "@/components/passport/encryption";
import { Link } from "react-router-dom";
import { isEmpty } from "lodash";
class SetPassword extends Component {
render() {
const {values, errors} = this.props
return (
<>
<HeaderBar arrow={true} title={'设置密码'}/>
......@@ -34,7 +36,8 @@ class SetPassword extends Component {
)
}}
/>
<Button className={'btn-active'}>完成</Button>
<Button className={'btn-active'}
active={values.password && values.agreement && isEmpty(errors)}>完成</Button>
<label htmlFor="agreement" className='user-agreement'>
<Field type='checkbox'
name='agreement'
......
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