TaxBackApp/page/login/forget_password.js

import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';

import login_css from './login_css';
import public_css from '../../source/css/public_css';

import {CheckPassword, CheckPhoneNumber} from '../../source/inspect/inspect';
import {GetDataPost} from '../../data/encryption';
import {ShowToast} from '../../components/rootToast/root_toast';

export default class forget_password extends Component {
  constructor(props) {
    super(props);
    this.afterEnd = this._afterEnd;
    this.state = {
      phone: '',
      user_password: '',
      user_password_again: '',
      verification_code: '',
      token: '',
      timeLeft: 60,
      begin: 0,
      isDisable: false,
    };
  }

  render() {
    return (
      <View style={[public_css.body]}>
        <View style={login_css.inputView}>
          <View style={[public_css.view, public_css.lineTopBottom]}>
            <Text style={public_css.text}>
              *手机号:
            </Text>
            <TextInput
              style={public_css.textInputStyle}
              placeholder="请输入您的手机号码"
              clearButtonMode="while-editing"
              secureTextEntry={false}
              onChangeText={text => {
                this.setState({
                  phone: text,
                });
              }}
            />
          </View>
          <View style={[public_css.view, public_css.lineTopBottom]}>
            <Text style={public_css.text}>
              *密码:
            </Text>
            <TextInput
              style={public_css.textInputStyle}
              placeholder="请输入密码"
              clearButtonMode="while-editing"
              secureTextEntry
              onChangeText={text => {
                this.setState({
                  user_password: text,
                });
              }}
            />
          </View>
          <View style={[public_css.view, public_css.lineTopBottom]}>
            <Text style={public_css.text}>
              *确认密码:
            </Text>
            <TextInput
              style={public_css.textInputStyle}
              placeholder="请再次输入密码"
              clearButtonMode="while-editing"
              secureTextEntry
              onChangeText={text => {
                this.setState({
                  user_password_again: text,
                });
              }}
            />
          </View>
          <View style={[public_css.view, public_css.lineTopBottom]}>
            <Text style={public_css.text}>
              *验证码:
            </Text>
            <TextInput
              style={public_css.textInputStyle}
              placeholder="请输入验证码"
              clearButtonMode="while-editing"
              secureTextEntry
              onChangeText={text => {
                this.setState({
                  verification_code: text,
                });
              }}
            />
            <TouchableOpacity
              disabled={this.state.isDisable}
              onPress={this._beginCountDown.bind(this)}>
              <Text style={login_css.texts}>
                {this.state.begin === 0
                  ? '获取验证码'
                  : this.state.timeLeft + '秒后重试'}
              </Text>
            </TouchableOpacity>
          </View>
          <View style={public_css.buttonView}>
            <TouchableOpacity
              style={public_css.button}
              onPress={() => this.verificationCode()}>
              <Text style={public_css.buttonText}>修改密码</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }

  //开始验证码计时
  _beginCountDown() {
    if (this.state.begin === 1) {
      return;
    }
    let time = this.state.timeLeft;
    let afterEnd = this.afterEnd;
    let begin = this.state.begin;
    this.countDownInfo(time, afterEnd, begin);
    this.sendVerificationCode();
  }

  //更新验证码状态
  countDownInfo(time, callback, begin) {
    if (time > 0) {
      this.state.begin = 1;
      let that = this;
      let interval = setInterval(function() {
        if (that.state.timeLeft < 1) {
          clearInterval(interval);
          callback(that);
          that.setState({
            isDisable: false,
          });
        } else {
          let totalTime = that.state.timeLeft;
          that.setState({
            timeLeft: totalTime - 1,
            isDisable: true,
          });
        }
      }, 1000);
    }
  }

  //提交登录信息
  sendVerificationCode = async () => {
    let {status, msg} = CheckPhoneNumber(`${this.state.phone}`);
    if (status) {
      const url = 'https://app.taxbk.cn:9443/sms/getSmscode';
      let token = null;
      let response = await GetDataPost(
        url,
        token,
        {
          phoneNo: this.state.phone,
        },
        false,
        1,
      );
      if (response) {
        ShowToast('验证码发送成功！');
      } else {
        ShowToast('验证码发送失败！');
      }
    } else {
      ShowToast(msg);
    }
  };

  //验证短信验证码是否正确
  verificationCode = async () => {
    if (this.state.verification_code == '') {
      ShowToast('验证码不能为空！');
      return;
    }
    let {status, msg} = CheckPhoneNumber(`${this.state.user_name}`);
    if (status) {
      let {status, msg} = CheckPassword(`${this.state.user_password}`);
      if (status) {
        let {status, msg} = CheckPassword(`${this.state.user_password_again}`);
        if (status) {
          const url = 'https://app.taxbk.cn:9443/sms/matchSmscode';
          let token = null;
          let response = await GetDataPost(
            url,
            token,
            {
              phoneNo: this.state.phone,
              smscode: this.state.verification_code,
            },
            false,
            1,
          );
          if (response) {
            this.submitData();
          } else {
            ShowToast('验证码不正确！');
          }
        } else {
          ShowToast(msg);
        }
      } else {
        ShowToast(msg);
      }
    } else {
      ShowToast(msg);
    }
  };

  //提交修改密码数据
  submitData = async () => {
    const url = 'https://app.taxbk.cn:9443/auth/comm/user/forgotpwd';
    let token = null;
    let response = await GetDataPost(
      url,
      token,
      {
        mobile: this.state.phone,
        password: this.state.user_password,
        confirmPassword: this.state.user_password_again,
        smsCode: this.state.verification_code,
        reqChannel: 3,
      },
      false,
      1,
    );
    if (response) {
      // setInterval(() => {
      //   this.setState({
      //     spinner: isLoading,
      //   });
      // }, 3000);
      ShowToast('修改密码成功！');
    } else {
      ShowToast('忘记密码失败，请重试！');
    }
  };
}