sourcecode/front/project/h5/routes/page/bind/page.js

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { asyncSMessage } from '@src/services/AsyncTools';
import { MobileArea } from '../../../../Constant';
import Input, { SelectInput, VerificationInput } from '../../../components/Input';
import Button from '../../../components/Button';
import { User } from '../../../stores/user';
import { My } from '../../../stores/my';
import { Common } from '../../../stores/common';

export default class extends Page {
  initState() {
    return {
      data: { mobile: '', area: MobileArea[0].value, email: '' },
    };
  }

  init() { }

  changeData(field, value) {
    let { data } = this.state;
    data = data || {};
    data[field] = value;
    this.setState({ data });
  }

  validMobile() {
    const { data } = this.state;
    const { area, mobile } = data;
    if (area === '' || mobile === '') return;
    User.validWechat(area, mobile)
      .then(result => {
        if (result) {
          this.setState({ mobileError: '' });
          return User.validMobile(area, mobile)
            .then(r => {
              this.setState({ needEmail: r });
            });
        }
        this.setState({ needEmail: false });
        return Promise.reject(new Error('该手机已绑定其他账号，请更换手机号码'));
      })
      .catch(err => {
        this.setState({ mobileError: err.message });
      });
  }

  sendValid() {
    const { data, mobileError } = this.state;
    const { area, mobile } = data;
    if (area === '' || mobile === '' || mobileError !== '') return Promise.reject();
    return Common.sendSms(area, mobile)
      .then((result) => {
        if (result) {
          asyncSMessage('发送成功');
          this.setState({ mobileError: '', validError: '' });
        } else {
          throw new Error('发送失败');
        }
      })
      .catch(err => {
        this.setState({ mobileError: err.message });
        throw err;
      });
  }

  submit() {
    const { data, needEmail, mobileError, validError } = this.state;
    const { area, mobile, mobileVerifyCode, email } = data;
    if (mobileError !== '' || validError !== '') return;
    if (area === '' || mobile === '' || mobileVerifyCode === '') return;
    if (needEmail && email === '') return;
    User.bind(area, mobile, mobileVerifyCode).then(() => {
      let handler = null;
      if (needEmail) {
        handler = My.bindEmail(email);
      } else {
        handler = Promise.resolve();
      }
      handler.then(() => {
        linkTo('/identity');
      });
    })
      .catch(err => {
        if (err.message.indexOf('验证码') >= 0) {
          this.setState({ validError: err.message });
        } else {
          this.setState({ mobileError: err.message });
        }
      });
  }

  renderView() {
    const { needEmail } = this.state;
    return (
      <div>
        <SelectInput placeholder="请输入手机号" selectValue={this.state.data.area} select={MobileArea} value={this.state.data.mobile} error={this.state.mobileError} onSelect={(value) => {
          this.changeData('area', value);
        }} onChange={(e) => {
          this.changeData('mobile', e.target.value);
          this.validMobile(e.target.value);
        }} />
        <VerificationInput placeholder="请输入验证码" value={this.state.data.mobileVerifyCode} error={this.state.validError} onSend={() => {
          return this.sendValid();
        }} />
        {needEmail && <Input placeholder="请输入邮箱" value={this.state.data.email} onChange={(e) => {
          this.changeData('email', e.target.value);
        }} />}
        <Button margin={25} radius block onClick={() => {
          this.submit();
        }}>
          绑定
        </Button>
      </div>
    );
  }
}