index.js 4.04 KB
Newer Older
xuzhenghua committed
1
import React, { Component } from 'react'
zhanghaozhe committed
2
import './binding-tel.scss'
xuzhenghua committed
3 4 5 6 7
import { withFormik, Field, Form } from "formik"
import { http, getParam } from "@/utils"
import { compose } from "redux"
import { connect } from "react-redux"
import { setCurrentUser } from "@/store/userAction"
zhanghaozhe committed
8
import Captcha from '@/common/Captcha'
zhanghaozhe committed
9
import { HeaderBar } from '@/common'
zhanghaozhe committed
10

zhanghaozhe committed
11

zhanghaozhe committed
12 13
// import ClearableInput from '@common/ClearableInput'
import ClearableInput from '../common/clearableInputWithCountryCodes'
zhanghaozhe committed
14 15
import Button from '../common/Button'
import VeriCodeInput from '../common/veriCodeInput'
xuzhenghua committed
16 17
import { Toast } from "antd-mobile"
import { isEmpty } from "lodash"
zhanghaozhe committed
18 19 20

class BindingTel extends Component {

zhanghaozhe committed
21

xuzhenghua committed
22 23 24 25
  state = {
    validate: null,
    captchaInstance: null
  }
zhanghaozhe committed
26

xuzhenghua committed
27 28 29 30 31 32 33 34 35 36 37 38
  getCaptchaInstance = instance => {
    this.setState({
      captchaInstance: instance
    })
  }
  onVerify = (err, data) => {
    if (err) {
      console.log(err)
    } else {
      this.setState({
        validate: data.validate
      })
zhanghaozhe committed
39
    }
xuzhenghua committed
40
  }
zhanghaozhe committed
41

zhanghaozhe committed
42

xuzhenghua committed
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
  render() {
    const {
      values,
      errors,
      country
    } = this.props
    return (
      <>
        <HeaderBar title={'绑定手机号'} arrow={true}/>
        <div className={'binding-tel'}>
          <p className={'title'}>为提高您的账号安全,请绑定手机号</p>
          <Form>
            <Field
              name='tel'
              render={({field, form}) => {
                return (
                  <ClearableInput
                    {...field}
                    setFieldValue={form.setFieldValue}
                    placeholder={'请输入需要绑定的手机号'}
                    wrapperClass={'tel'}
                    country={country}
                  />
zhanghaozhe committed
66

xuzhenghua committed
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
                )
              }}
            />
            <Field
              name='veriCode'
              render={({field}) => {
                return (
                  <VeriCodeInput
                    {...field}
                    className={'verification'}
                    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}
                  />
zhanghaozhe committed
88

xuzhenghua committed
89 90 91 92 93 94 95 96 97 98 99
                )
              }}
            />
            <Captcha onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
            <Button className={'complete-btn'}
                    active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
          </Form>
        </div>
      </>
    )
  }
zhanghaozhe committed
100 101
}

zhanghaozhe committed
102 103

const formikConfig = {
xuzhenghua committed
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
  mapPropsToValues() {
    return {
      tel: '',
      veriCode: ''
    }
  },
  validateOnChange: true,
  validate(values) {
    let errors = {}
    if (!/\d/.test(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'),
      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'])
zhanghaozhe committed
145 146 147
        }


xuzhenghua committed
148 149 150 151 152
      } else {
        Toast.info(data.msg, 2, null, false)
      }
    })
  }
zhanghaozhe committed
153 154
}
export default compose(
xuzhenghua committed
155 156 157 158 159 160
  connect(
    state => ({country: state.country}),
    {setCurrentUser}
  ),
  withFormik(formikConfig),
)(BindingTel)