TaxBackApp/page/personalCenter/personal_center_page.js

import React, {Component} from 'react';
import {
  Image,
  Text,
  View,
  TouchableOpacity,
  DeviceEventEmitter,
  Alert,
} from 'react-native';

import personal_center_page_css from './personal_center_page_css';
import public_css from '../../source/css/public_css';
import {RetrieveData, ClearAll} from '../../data/storage';
import loading_css from '../../source/css/loading_css';
import {GetDataPost} from '../../data/encryption';
import Spinner from 'react-native-loading-spinner-overlay';

export default class personal_center_page extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user_name: '',
      user_type: '',
      spinner: false,
      user: '',
    };
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <Spinner
          visible={this.state.spinner}
          textContent={'Loading...'}
          textStyle={loading_css.spinnerTextStyle}
        />
        <View style={{flexDirection: 'row', backgroundColor: '#ffffff'}}>
          {this.state.user == '' || this.state.user == null ? (
            <Image
              source={require('../../source/img/personal/headImg.png')}
              style={[personal_center_page_css.headImg]}
            />
          ) : (
            <Image
              source={{
                uri: 'https://app.taxbk.cn:9443' + this.state.user.avatar,
              }}
              style={[personal_center_page_css.headImg]}
            />
          )}
          {this.state.user_name === '' ? (
            <View style={[personal_center_page_css.headStyle]}>
              <TouchableOpacity
                onPress={() => this.props.navigation.navigate('login_head')}>
                <Text>登陆</Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View style={[personal_center_page_css.headStyle]}>
              <Text style={{fontSize: 18}}>{this.state.user_name}</Text>
            </View>
          )}
        </View>
        <View>
          <TouchableOpacity
            onPress={() => this.getLandingStatus(1)}
            style={personal_center_page_css.textListStyle}>
            <Text style={personal_center_page_css.textListFontStyle}>
              修改手机号
            </Text>
          </TouchableOpacity>
        </View>
        <View>
          <TouchableOpacity
            onPress={() => this.getLandingStatus(1)}
            style={personal_center_page_css.textListStyle}>
            <Text style={personal_center_page_css.textListFontStyle}>
              联系客服
            </Text>
          </TouchableOpacity>
        </View>
        {this.state.user_name === '' ? (
          <View />
        ) : (
          <View style={public_css.buttonView}>
            <TouchableOpacity
              style={public_css.button}
              onPress={() => this.showAlert()}>
              <Text style={public_css.buttonText}>退出登录</Text>
            </TouchableOpacity>
          </View>
        )}
      </View>
    );
  }

  //页面加载获取信息
  componentDidMount(): void {
    this.getSignIn();
  }

  //获取登陆信息
  getSignIn = async () => {
    let user_name = await RetrieveData('userName');
    let user_type = await RetrieveData('usertype');
    let token = await RetrieveData('token');
    let account = await RetrieveData('account');
    if (user_name && user_type && token && account) {
      user_name = user_name.substring(1, user_name.length - 1);
      account = account.substring(1, account.length - 1);
      token = token.substring(1, token.length - 1);
      this.setState({
        user_name: user_name,
        user_type: user_type,
      });
      this.getUserInformation(account, token);
    }
  };

  //获取用户信息
  getUserInformation = async (account, token) => {
    const url = 'https://app.taxbk.cn:9443/auth/comm/user/personalInfo/find';
    let response = await GetDataPost(
      url,
      token,
      {
        mobile: account,
      },
      false,
      2,
    );
    if (response) {
      this.setState({
        user: response.data,
      });
    }
  };

  //退出登陆
  signOut = async () => {
    this.setLoadingStatus(true);
    await ClearAll();
    this.setLoadingStatus(false);
    // DeviceEventEmitter.emit('updateCurMon', null);
    this.props.navigation.navigate('home_navigation');
  };

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

  //判断是否登陆
  getLandingStatus = async (type) => {
    const account = await RetrieveData('account');
    if (account) {
      if (type == 1) {
        this.props.navigation.navigate('personal_information', {
          user: this.state.user,
        });
      }
      // if (type == 2) {
      //   this.props.navigation.navigate('customer_information');
      // }
      // if (type == 3) {
      //   this.props.navigation.navigate('enterprise_list');
      // }
    } else {
      this.props.navigation.navigate('login_head');
    }
  };

  //显示红冲确认信息
  showAlert = () => {
    Alert.alert(
      '退出登陆',
      '确定要退出登陆吗！',
      [
        {
          text: '取消',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {text: '确定', onPress: () => this.signOut()},
      ],
      {cancelable: false},
    );
  };
}