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';
import { checkEmail, checkMobile } from '../../../../../src/services/Tools';

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

  init() {
    this.validMobileNumber = 0;
    this.validEmailNumber = 0;
  }

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

  validMobile(login) {
    const { data } = this.state;
    const { area, mobile } = data;
    if (!area || !mobile) return;
    if (!checkMobile(mobile)) {
      this.setState({ emailError: '请输入正确的手机号' });
      return;
    }
    this.setState({ emailError: null });
    this.validMobileNumber += 1;
    const number = this.validMobileNumber;
    User.validWechat(area, mobile)
      .then(result => {
        if (result) {
          this.setState({ mobileError: '' });
          return User.validMobile(area, mobile).then(r => {
            if (number !== this.validMobileNumber) return;
            this.setState({ needEmail: r });
          });
        }
        this.setState({ needEmail: false });
        return login ? Promise.resolve() : Promise.reject(new Error('该手机已绑定其他账号，请更换手机号码'));
      })
      .catch(err => {
        this.setState({ mobileError: err.message });
      });
  }

  validEmail() {
    const { data } = this.state;
    const { email } = data;
    if (!email) return;
    if (!checkEmail(email)) {
      this.setState({ emailError: '请输入正确的邮箱' });
      return;
    }
    this.setState({ emailError: null });
    this.validEmailNumber += 1;
    const number = this.validEmailNumber;
    User.validEmail(email)
      .then(result => {
        if (number !== this.validEmailNumber) return Promise.resolve();
        if (result) {
          this.setState({ emailError: '' });
          return Promise.resolve();
        }
        return Promise.reject(new Error('该邮箱已绑定其他账号，请更换邮箱地址'));
      })
      .catch(err => {
        this.setState({ emailError: 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, emailError, validError } = this.state;
    const { area, mobile, mobileVerifyCode, email } = data;
    if (mobileError || emailError || validError) return;
    if (!area || !mobile || !mobileVerifyCode || (needEmail && !email)) {
      this.setState({ error: { mobile: !mobile, mobileVerifyCode: !mobileVerifyCode, email: !email } });
      return;
    }
    if (needEmail && !email) return;
    User.bind(area, mobile, mobileVerifyCode, email)
      .then(() => {
        const { url } = this.props.core.query;
        if (url) {
          toLink(url);
        } else {
          linkTo('/product');
        }
      })
      .catch(err => {
        if (err.message.indexOf('验证码') >= 0) {
          this.setState({ validError: err.message });
        } else if (err.message.indexOf('邮箱') >= 0) {
          this.setState({ emailError: 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}
          empty={this.state.empty.mobile}
          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}
          empty={this.state.empty.mobileVerifyCode}
          onSend={() => {
            return this.sendValid();
          }}
          onChange={e => {
            this.changeData('mobileVerifyCode', e.target.value);
            this.setState({ validError: '' });
          }}
        />
        {needEmail && (
          <Input
            placeholder="请输入邮箱"
            value={this.state.data.email}
            empty={this.state.empty.email}
            onChange={e => {
              this.changeData('email', e.target.value);
            }}
          />
        )}
        <Button
          margin={25}
          radius
          block
          disabled={this.state.validError || this.state.mobileError}
          onClick={() => {
            this.submit();
          }}
        >
          绑定
        </Button>
      </div>
    );
  }
}