绑定手机号

src/components/passport/bindingTel/binding-tel.scss

@@ -7,10 +7,6 @@
         color: $color_666;
     }
 
-    .tel {
-        margin-bottom: 21px;
-    }
-
     .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 { http, getParam } from "@/utils";
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { setCurrentUser } from "@/store/userAction";
 import Captcha from '@/common/Captcha'
-import {HeaderBar} from '@/common'
+import { HeaderBar } from '@/common'
 
 
-import ClearableInput from '@common/ClearableInput'
+// import ClearableInput from '@common/ClearableInput'
+import ClearableInput from '../common/clearableInputWithCountryCodes'
 import Button from '../common/Button'
 import VeriCodeInput from '../common/veriCodeInput'
 import { Toast } from "antd-mobile";
@@ -42,7 +43,8 @@ class BindingTel extends Component {
     render() {
         const {
             values,
-            errors
+            errors,
+            country
         } = this.props
         return (
             <>
@@ -59,9 +61,7 @@ class BindingTel extends Component {
                                         setFieldValue={form.setFieldValue}
                                         placeholder={'请输入需要绑定的手机号'}
                                         wrapperClass={'tel'}
-                                        icon={<i className={'iconfont iconshouji'}
-                                                 style={{fontSize: '22px', left: '11px'}}
-                                        />}
+                                        country={country}
                                     />
 
                                 )
@@ -77,18 +77,21 @@ class BindingTel extends Component {
                                         icon={<i className={'iconfont iconduanxin'}
                                                  style={{fontSize: '20px', left: '12px'}}
                                         />}
+                                        placeholder={'验证码'}
                                         account={values.tel}
                                         tel={values.tel}
                                         challenge={this.state.validate}
                                         instance={this.state.captchaInstance}
                                         action={'auth'}
+                                        country={country}
                                     />
 
                                 )
                             }}
                         />
                         <Captcha onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
-                        <Button className={'complete-btn'} active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
+                        <Button className={'complete-btn'}
+                                active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
                     </Form>
                 </div>
             </>
@@ -107,7 +110,7 @@ const formikConfig = {
     validateOnChange: true,
     validate(values) {
         let errors = {}
-        if (!validateTel(values.tel)) {
+        if (!/\d/.test(values.tel)) {
             errors.tel = '请输入正确的手机号'
         }
         if (!values.veriCode) {
@@ -116,10 +119,12 @@ const formikConfig = {
         return errors
     },
     handleSubmit(values, {props}) {
+        alert(props.country.num)
         http.post(`${API['passport-api']}/bind_mobile`, {
             phone_num: values.tel,
             phone_code: values.veriCode,
             mkey: getParam('mkey'),
+            area_code: props.country.num,
             plat: 5
         }).then(res => {
             const data = res.data
@@ -135,7 +140,7 @@ const formikConfig = {
                         msg: data.data.msg
                     })
                     props.history.replace(`/passport/set-password`)
-                }else {
+                } else {
                     location.assign(data.data['jump_url'])
                 }
 
@@ -143,17 +148,12 @@ const formikConfig = {
             } else {
                 Toast.info(data.msg, 2, null, false)
             }
-
-            /*props.setCurrentUser({
-                hasError,
-                data
-            })*/
         })
     }
 }
 export default compose(
     connect(
-        null,
+        state => ({country: state.country}),
         {setCurrentUser}
     ),
     withFormik(formikConfig),