TaxControlApp/page/login/login.js

import React, {Component} from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
  SafeAreaView,
  DeviceEventEmitter,
  ScrollView,
} from 'react-native';
import {WhiteSpace, WingBlank} from '@ant-design/react-native';

import {
  IndividualStorageData,
  RetrieveData,
  StorageData,
} from '../../data/storage';
import {RequestNetwork} from '../../data/encryption';

import Spinner from 'react-native-loading-spinner-overlay';

import public_css from '../../source/css/public_css';
import loading_css from '../../source/css/loading_css';
import login_css from './login_css';
import {CheckPhoneNumber, CheckPassword} from '../../source/inspect/inspect';
import {ToastShow} from '../../components/toast/toast';
import BouncyCheckbox from 'react-native-bouncy-checkbox';

export default class login extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.afterEnd = this.afterEnd;
    this.state = {
      user_name: '',
      user_password: '',
      user_verification: '',
      user_status: 1,
      token: '',
      timeLeft: 60,
      begin: 0,
      isDisable: false,
      spinner: false,
      initRealmMark: false,
      initData: 'loading',
      userAgreement: false,
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <View style={public_css.body}>
          <View style={login_css.bg}>
            <View style={login_css.login_bg_img}>
              <Image
                source={require('../../source/img/login/login_bg.png')}
                style={login_css.bgImg}
                resizeMode="cover"
              />
            </View>
            <Spinner
              visible={this.state.spinner}
              textContent={this.state.initData}
              textStyle={loading_css.spinnerTextStyle}
            />
            <View style={login_css.full_box}>
              <ScrollView style={login_css.inner_con}>
                <WhiteSpace />
                <WingBlank>
                  <View style={login_css.input_item}>
                    <Text style={login_css.text_label}>手机号：</Text>
                    <TextInput
                      style={login_css.text_input}
                      ref="mobileInput"
                      placeholder="请输入您的手机号码"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      keyboardType={'numeric'}
                      onChangeText={(text) => {
                        this.setState({
                          user_name: text,
                        });
                      }}
                    />
                  </View>
                </WingBlank>
                <WingBlank>
                  {this.state.user_status === 1 ? (
                    <View style={login_css.input_item}>
                      <Text style={login_css.text_label}>密码：</Text>
                      <TextInput
                        style={login_css.text_input}
                        ref="passwordInput"
                        placeholder="请输入您的密码"
                        clearButtonMode="while-editing"
                        secureTextEntry
                        value={this.state.user_password}
                        onChangeText={(text) => {
                          this.setState({
                            user_password: text,
                          });
                        }}
                      />
                    </View>
                  ) : (
                    <View style={login_css.input_item}>
                      <Text style={login_css.text_label}>验证码：</Text>
                      <TextInput
                        style={login_css.text_input}
                        placeholder="请输入您的短信验证码"
                        clearButtonMode="while-editing"
                        value={this.state.user_verification}
                        onChangeText={(text) => {
                          this.setState({
                            user_verification: text,
                          });
                        }}
                      />
                      <TouchableOpacity
                        style={login_css.vertify}
                        disabled={this.state.isDisable}
                        onPress={this.beginCountDown.bind(this)}>
                        <Text style={login_css.texts}>
                          {this.state.begin === 0
                            ? '获取验证码'
                            : this.state.timeLeft + '秒后重试'}
                        </Text>
                      </TouchableOpacity>
                    </View>
                  )}
                </WingBlank>
                <WhiteSpace />
                <WingBlank>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                    }}>
                    <Text
                      onPress={() =>
                        this.props.navigation.navigate('forget_password')
                      }
                      style={{color: '#B6B8C0'}}>
                      忘记密码?
                    </Text>
                  </View>
                </WingBlank>
                <TouchableOpacity
                  style={login_css.button}
                  onPress={() => this.login()}>
                  <View style={login_css.buttonView}>
                    <Text style={login_css.buttonText}>登 录</Text>
                  </View>
                </TouchableOpacity>
                <View style={login_css.login_text_view}>
                  {this.state.user_status === 1 ? (
                    <Text
                      onPress={() => this.changeState(2)}
                      style={{color: '#1263EA'}}>
                      短信验证码登录
                    </Text>
                  ) : (
                    <Text
                      onPress={() => this.changeState(1)}
                      style={{color: '#1263EA'}}>
                      账号登录
                    </Text>
                  )}
                </View>
                <WhiteSpace />
                <WhiteSpace />
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <BouncyCheckbox
                    size={20}
                    // style={{backgroundColor: 'red'}}
                    disableText={true}
                    fillColor="#2A67FE"
                    unfillColor="#FFFFFF"
                    // text="我以阅读并同意"
                    iconStyle={{borderColor: '#A3A3A3'}}
                    // textStyle={{
                    //   fontFamily: 'JosefinSans-Regular',
                    //   textDecorationLine: 'none',
                    // }}
                    onPress={(isChecked: boolean) => {
                      this.setState({
                        userAgreement: isChecked,
                      });
                    }}
                  />
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'center',
                      alignItems: 'center',
                      marginLeft: 5,
                    }}>
                    <Text style={{color: '#A3A3A3', fontSize: 16}}>
                      我已阅读并同意
                    </Text>
                    <TouchableOpacity onPress={() => {this.props.navigation.navigate('user_agreement')}}>
                      <Text style={{color: '#2A67FE', fontSize: 16}}>
                        《云票在线用户使用协议》
                      </Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </ScrollView>
            </View>
          </View>
          {/*<View style={{alignItems: 'center', justifyContent: 'center', height: 50}}>*/}
          {/*  <TouchableOpacity*/}
          {/*    onPress={() => {*/}
          {/*      this.loginWeChat();*/}
          {/*    }}>*/}
          {/*    <Image source={require('../../source/img/wechat.png')} />*/}
          {/*  </TouchableOpacity>*/}
          {/*</View>*/}
        </View>
      </SafeAreaView>
    );
  }

  //是否显示Loading层
  setLoadingStatus(isLoading) {
    this.setState({
      spinner: isLoading,
    });
  }

  //更新验证码状态
  updateVerificationCodeStatus(timeLeft, callback, begin) {
    if (timeLeft > 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);
    }
  }

  //开始验证码计时
  beginCountDown = async () => {
    let {status, msg} = CheckPhoneNumber(`${this.state.user_name}`);
    if (!status) {
      ToastShow(1, msg);
      return;
    }
    if (this.state.begin === 1) {
      return;
    }
    let time = this.state.timeLeft;
    let afterEnd = this.afterEnd;
    let begin = this.state.begin;
    this.updateVerificationCodeStatus(time, afterEnd, begin);
    await this.sendVerificationCode();
  };

  //验证码时间
  afterEnd(that) {
    that.setState({
      begin: 0,
      timeLeft: 60,
    });
  }

  //修改登录方式状态
  changeState = async (status) => {
    this.setState({
      user_status: status,
      user_password: '',
      user_verification: '',
    });
  };

  //登录
  login = async () => {
    if (this.state.user_status === 2) {
      if (this.state.user_verification === '') {
        ToastShow(1, '验证码不能为空!');
        return;
      }
      let {status, msg} = CheckPhoneNumber(`${this.state.user_name}`);
      if (status) {
        await this.signIn();
      } else {
        ToastShow(1, msg);
      }
    } else {
      let {status, msg} = CheckPhoneNumber(`${this.state.user_name}`);
      if (status) {
        let {status, msg} = CheckPassword(`${this.state.user_password}`);
        if (status) {
          await this.signIn();
        } else {
          ToastShow(1, msg);
        }
      } else {
        ToastShow(1, msg);
      }
    }
  };

  //提交登录信息
  signIn = async () => {
    if (!this.state.userAgreement) {
      ToastShow(1, '请先勾选同意「云票在线用户使用协议」');
      return;
    }
    this.setLoadingStatus(true);
    const url = '/login';
    let token = null;
    let response = await RequestNetwork(
      url,
      token,
      {
        account: this.state.user_name,
        password: this.state.user_password,
        smsCode: this.state.user_verification,
        reqChannel: 3,
        loginType: this.state.user_status,
      },
      false,
      1,
    );
    if (response) {
      if (response.code === 0) {
        await StorageData(response);
        await this.getCompanyInfo(response.data.account, response.data.token);
        await this.getUserInformation();
        DeviceEventEmitter.emit('updateCompany', null);
        this.props.route.params.refresh(true);
        this.props.navigation.goBack();
        this.setLoadingStatus(false);
      } else {
        this.setLoadingStatus(false);
        ToastShow(1, response.msg);
      }
    } else {
      this.setLoadingStatus(false);
      ToastShow(1, response.msg);
    }
  };

  // 获取默认企业信息
  getCompanyInfo = async (account, token) => {
    const url = '/auth/comm/user/findDefaultChoose';
    let response = await RequestNetwork(
      url,
      token,
      {
        mobile: account,
      },
      false,
      2,
    );
    if (response) {
      if (response.code === 0) {
        await IndividualStorageData('company', JSON.stringify(response.data));
      }
    }
  };

  //获取短信验证码
  sendVerificationCode = async () => {
    let {status, msg} = CheckPhoneNumber(`${this.state.user_name}`);
    if (status) {
      const url = '/sms/getSmscode';
      let token = null;
      let response = await RequestNetwork(
        url,
        token,
        {
          phoneNo: this.state.user_name,
        },
        false,
        1,
      );
      if (response) {
        ToastShow(1, '验证码发送成功!');
      } else {
        ToastShow(1, '验证码发送失败!');
      }
    } else {
      ToastShow(1, msg);
    }
  };

  //获取用户信息
  getUserInformation = async () => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      const url = '/auth/comm/user/personalInfo/find';
      let response = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
        },
        false,
        2,
      );
      if (response) {
        if (response.code === 0) {
          let userHeadImg = {
            headImage: '',
            sex: 'M',
          };
          if (response.data !== null) {
            userHeadImg.headImage = response.data.avatar;
            userHeadImg.sex = response.data.sex;
          }
          await IndividualStorageData(
            'userHeadImg',
            JSON.stringify(userHeadImg),
          );
        }
      }
    }
  };
}