绑定手机号

package-lock.json

@@ -3692,6 +3692,11 @@
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
     },
+    "clipboard-copy": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.1.0.tgz",
+      "integrity": "sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA=="
+    },
     "cliui": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
@@ -3984,14 +3989,6 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
-    "copy-to-clipboard": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.2.0.tgz",
-      "integrity": "sha512-eOZERzvCmxS8HWzugj4Uxl8OJxa7T2k1Gi0X5qavwydHIfuSHq2dTD09LOg/XyGq4Zpb5IsR/2OJ5lbOegz78w==",
-      "requires": {
-        "toggle-selection": "^1.0.6"
-      }
-    },
     "core-js": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
@@ -12087,15 +12084,6 @@
         }
       }
     },
-    "react-copy-to-clipboard": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
-      "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==",
-      "requires": {
-        "copy-to-clipboard": "^3",
-        "prop-types": "^15.5.8"
-      }
-    },
     "react-dev-utils": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-8.0.0.tgz",
@@ -14514,11 +14502,6 @@
         "repeat-string": "^1.6.1"
       }
     },
-    "toggle-selection": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
-      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
-    },
     "topo": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz",

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) {
@@ -120,6 +123,7 @@ const formikConfig = {
             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 +139,7 @@ const formikConfig = {
                         msg: data.data.msg
                     })
                     props.history.replace(`/passport/set-password`)
-                }else {
+                } else {
                     location.assign(data.data['jump_url'])
                 }
 
@@ -143,17 +147,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),