绑定手机号

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>
+                <Form>
+                    <Field
+                        name='tel'
+                        render={({field, form}) => {
+                            return (
                                 <ClearableInput
-                    type={'number'}
+                                    {...field}
+                                    setFieldValue={form.setFieldValue}
                                     placeholder={'请输入需要绑定的手机号'}
                                     wrapperClass={'tel'}
                                     icon={<i className={'iconfont iconshouji'}
                                              style={{fontSize: '22px', left: '11px'}}
                                     />}
                                 />
+
+                            )
+                        }}
+                    />
+                    <Field
+                        name='veriCode'
+                        render={({field}) => {
+                            return (
                                 <VeriCodeInput
-                    type={'number'}
+                                    {...field}
                                     className={'verification'}
-                    onChange={this.handleChange}
                                     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'}
                                 />
-                <div className="place"/>
-                <Button className={'complete-btn'}>完成</Button>
+
+                            )
+                        }}
+                    />
+                    <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)}>
+                                <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'