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 { Common } from '../../../stores/common';

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

  init() {
    this.validNumber = 0;
  }

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

  validMobile(login) {
    const { data } = this.state;
    const { area, mobile } = data;
    if (!area || !mobile) return;
    this.validNumber += 1;
    const number = this.validNumber;
    User.validWechat(area, mobile)
      .then(result => {
        if (result) {
          this.setState({ mobileError: '' });
          return User.validMobile(area, mobile)
            .then(r => {
              if (number !== this.validNumber) return;
              this.setState({ needEmail: r });
            });
        }
        this.setState({ needEmail: false });
        return login ? Promise.resolve() : 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, email).then(() => {
      linkTo(this.state.search.jump || '/');
    })
      .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);
          this.validMobile();
        }} onChange={(e) => {
          this.changeData('mobile', e.target.value);
          this.validMobile();
        }} />
        <VerificationInput placeholder="请输入验证码" value={this.state.data.mobileVerifyCode} error={this.state.validError} onSend={() => {
          return this.sendValid();
        }} onChange={(e) => {
          this.changeData('mobileVerifyCode', e.target.value);
        }} />
        {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>
    );
  }
}