TaxControlAppTest/page/homePage/home_page.js

import React, {Component} from 'react';
import {
  Image,
  StyleSheet,
  Dimensions,
  ImageBackground,
  TouchableOpacity,
  ScrollView,
  Text,
  View,
  DeviceEventEmitter,
} from 'react-native';

import {GetDataPost} from '../../data/encryption';
import {IndividualStorageData, RetrieveData} from '../../data/storage';
import {ShowToast} from '../../components/rootToast/root_toast';

export default class home_page extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      info: '',
      totalAmt: 0.0,
      totalTaxes: 0.0,
      sumNum: 0.0,
      authority: '',
      landingStatus: 0, //登录状态，0：表示未登录,1：表示已登录
      curCompany: '首页',
    };
    this.fetchDefaultEnt();
  }

  componentDidMount() {
    this.getAuthority();
    // 收到监听
    this.listener = DeviceEventEmitter.addListener('updateCurMon', message => {
      // 收到监听后想做的事情 // 监听
      this.fetchDefaultEnt();
      //this.getKPStatsMonth();
    });
  }
  componentWillUnmount() {
    // 移除监听
    if (this.listener) {
      this.listener.remove();
    }
    this.setState = (state, callback) => {
      return;
    };
  }

  render() {
    return (
      <View>
        <ScrollView style={styles.homePageBak}>
          <View style={styles.topImgBak}>
            <ImageBackground
              style={styles.topImg}
              source={require('../../source/img/homeImg/topbak.png')}
              resizeMode="cover">
              <View style={styles.topImgTxt}>
                <Text style={styles.ydkpTxt}>移动开票</Text>
                <Text style={styles.ydkpTips}>省时省心</Text>
                <Text style={styles.ydkpTips}>您身边的开票小能手</Text>
              </View>
              <View style={styles.whiteSpaces} />
            </ImageBackground>
          </View>
          <View style={styles.taxItemBak}>
            <View style={styles.tapBtnBak}>
              {this.state.landingStatus === 1 ? (
                this.state.authority.includes('sys:invoice:add') ? (
                  <TouchableOpacity
                    style={styles.tapBtnBakCol}
                    onPress={() => {
                      this.getLandingStatus(1);
                    }}>
                    <Image
                      source={require('../../source/img/homeImg/taxManagement.png')}
                      style={styles.tapBtnImg}
                    />
                    <Text style={styles.tapBtnTips}>发票管理</Text>
                  </TouchableOpacity>
                ) : (
                  <TouchableOpacity />
                )
              ) : (
                <TouchableOpacity
                  style={styles.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(1);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/taxManagement.png')}
                    style={styles.tapBtnImg}
                  />
                  <Text style={styles.tapBtnTips}>发票管理</Text>
                </TouchableOpacity>
              )}
              {this.state.landingStatus === 1 ? (
                this.state.authority.includes('sys:product:view') ? (
                  <TouchableOpacity
                    style={styles.tapBtnBakCol}
                    onPress={() => {
                      this.getLandingStatus(2);
                    }}>
                    <Image
                      source={require('../../source/img/homeImg/productManagement.png')}
                      style={styles.tapBtnImg}
                    />
                    <Text style={styles.tapBtnTips}>商品管理</Text>
                  </TouchableOpacity>
                ) : (
                  <TouchableOpacity />
                )
              ) : (
                <TouchableOpacity
                  style={styles.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(2);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/productManagement.png')}
                    style={styles.tapBtnImg}
                  />
                  <Text style={styles.tapBtnTips}>商品管理</Text>
                </TouchableOpacity>
              )}
              {this.state.landingStatus === 1 ? (
                this.state.authority.includes('sys:customer:view') ? (
                  <TouchableOpacity
                    style={styles.tapBtnBakCol}
                    onPress={() => {
                      this.getLandingStatus(3);
                    }}>
                    <Image
                      source={require('../../source/img/homeImg/userManagement.png')}
                      style={styles.tapBtnImg}
                    />
                    <Text style={styles.tapBtnTips}>客户管理</Text>
                  </TouchableOpacity>
                ) : (
                  <TouchableOpacity />
                )
              ) : (
                <TouchableOpacity
                  style={styles.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(3);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/userManagement.png')}
                    style={styles.tapBtnImg}
                  />
                  <Text style={styles.tapBtnTips}>客户管理</Text>
                </TouchableOpacity>
              )}
            </View>
            <View style={styles.userOnlineBak}>
              <View style={styles.userOnlineLeft}>
                <Image
                  source={require('../../source/img/homeImg/personNum.png')}
                  style={{width: 16, height: 16}}
                />
                <Text style={{marginLeft: 5, color: '#8B7D7B'}}>
                  本企业当前在线人数...
                </Text>
              </View>
              <View style={styles.userOnlineRight}>
                <Text style={{color: 'blue', alignSelf: 'flex-end'}}>
                  999人
                </Text>
              </View>
            </View>
          </View>
          <View style={styles.yxTopicBak}>
            <View style={styles.yxTopicTop}>
              <View style={styles.userOnlineLeft}>
                <Image
                  source={require('../../source/img/homeImg/service.png')}
                  style={{width: 18, height: 18}}
                />
                <Text
                  style={{
                    marginLeft: 10,
                    fontSize: 16,
                    color: 'rgba(51, 51, 51, 1)',
                  }}>
                  本月情况
                </Text>
              </View>
              <TouchableOpacity style={styles.userOnlineRight}>
                <Text style={{color: 'rgba(153, 153, 153, 1)', marginRight: 5}}>
                  查看全部
                </Text>
                <Image
                  source={require('../../source/img/homeImg/go.png')}
                  style={{marginTop: 3, width: 12, height: 12}}
                />
              </TouchableOpacity>
            </View>
            <View style={styles.yxTopicBottom}>
              <TouchableOpacity
                style={[styles.yxTopicItem, styles.yxTopicItem_2]}>
                <Text style={styles.yxTopicItemTextA}>开票总数</Text>
                {/*<Text style={styles.yxTopicItemTextB}>剩余发票数量</Text>*/}
                <Text style={styles.yxTopicItemTextC}>{this.state.sumNum}</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.yxTopicItem, styles.yxTopicItem_3]}>
                <Text style={styles.yxTopicItemTextA}>开票总额</Text>
                {/*<Text style={styles.yxTopicItemTextB}>待勾选发票数</Text>*/}
                <Text style={styles.yxTopicItemTextC}>
                  {this.state.totalAmt}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.yxTopicItem, styles.yxTopicItem_3]}>
                <Text style={styles.yxTopicItemTextA}>税额</Text>
                {/*<Text style={styles.yxTopicItemTextB}>待勾选发票数</Text>*/}
                <Text style={styles.yxTopicItemTextC}>
                  {this.state.totalTaxes}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
          <View style={styles.xpPushBak}>
            <View style={styles.xpPushTop}>
              <View style={styles.userOnlineLeft}>
                <Image
                  source={require('../../source/img/homeImg/recommend.png')}
                  style={{width: 18, height: 18}}
                />
                <Text
                  style={{
                    marginLeft: 10,
                    fontSize: 16,
                    color: 'rgba(51, 51, 51, 1)',
                  }}>
                  新品推荐
                </Text>
              </View>
              <TouchableOpacity style={styles.userOnlineRight}>
                <Text style={{color: 'rgba(153, 153, 153, 1)', marginRight: 5}}>
                  查看全部
                </Text>
                <Image
                  source={require('../../source/img/homeImg/go.png')}
                  style={{marginTop: 3, width: 12, height: 12}}
                />
              </TouchableOpacity>
            </View>
            <View style={styles.xpPushBottom}>
              <View style={styles.xpPushItem}>
                <ImageBackground
                  style={{
                    height: '100%',
                    width: '100%',
                    borderRadius: 10,
                    resizeMode: 'stretch',
                  }}
                  source={require('../../source/img/homeImg/item.png')}
                />
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }

  //首页数据获取
  getKPStatsMonth = async curEntId => {
    const res = await RetrieveData('token');
    const account = await RetrieveData('account');
    //const curEntId =await RetrieveData('defaultEnt');
    if (res && account) {
      let token = res.substring(1, res.length - 1);
      const url = '/sys/invoiceInfo/getKPStatsMonth';
      let response = await GetDataPost(
        url,
        token,
        {
          entTaxId: curEntId,
        },
        false,
        2,
      );
      if (response.code != 0) {
        //console.log(response);
        this.setState({
          sumNum: 0.0,
          totalAmt: 0.0,
          totalTaxes: 0.0,
        });
      } else {
        this.setState({
          sumNum: response.data.cnt,
          totalAmt: response.data.totalAmt,
          totalTaxes: response.data.totalTaxes,
        });
      }
    }
  };

  获取当前默认绑定企业;
  fetchDefaultEnt = async () => {
    //const  defaultFirm =await RetrieveData('defaultEnt');
    //console.log( "default ent:" + JSON.stringify(defaultFirm));
    //console.log( "default ent:");
    const res = await RetrieveData('token');
    const account = await RetrieveData('account');
    if (res && account) {
      let token = res.substring(1, res.length - 1);
      let mobile = account.substring(1, account.length - 1);
      const url = '/auth/comm/user/findDefaultChoose';
      let response = await GetDataPost(
        url,
        token,
        {
          mobile: mobile,
        },
        false,
        2,
      );
      if (response.code != 0) {
        ShowToast(response.msg);
      } else {
        this.setState({curCompany: response.data.entName});
        //console.log("当前默认绑定企业: "+JSON.stringify(response.data));
        await IndividualStorageData(
          'defaultEnt',
          JSON.stringify(response.data),
        );
        await this.getKPStatsMonth(response.data.entTaxId);
        this.props.navigation.setOptions({
          headerTitleAlign: 'center',
          headerTitle: props => {
            return (
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text style={{color: '#fff', fontSize: 16, fontWeight: '700'}}>
                  {this.state.curCompany ? this.state.curCompany : '首页'}
                </Text>
                <TouchableOpacity
                  onPress={async () => {
                    const res = await RetrieveData('token');
                    const account = await RetrieveData('account');
                    if (res && account) {
                      this.props.navigation.navigate('enterprise_list');
                    } else {
                      ShowToast('请先登录');
                    }
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/change.png')}
                    style={{marginLeft: 5, width: 14, height: 14}}
                  />
                </TouchableOpacity>
              </View>
            );
          },
          headerStyle: {backgroundColor: '#00A2FE', borderWidth: 0},
        });
      }
    } else {
      this.setState({
        sumNum: 0.0,
        totalAmt: 0.0,
        totalTaxes: 0.0,
        curCompany: '首页',
      });
      this.props.navigation.setOptions({
        headerTitle: props => {
          //console.log("==="+ this.state.curCompany);
          return (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'flex-end',
              }}>
              <Text style={{color: '#fff', fontSize: 20, fontWeight: '600'}}>
                {this.state.curCompany ? this.state.curCompany : '首页'}
              </Text>
            </View>
          );
        },
        headerTintColor: '#fff',
      });
    }
  };

  //判断是否登录
  getLandingStatus = async type => {
    const account = await RetrieveData('account');
    if (account) {
      this.setState({
        landingStatus: 1,
      });
      if (type == 1) {
        this.props.navigation.navigate('invoice_product_list');
      }
      if (type == 2) {
        this.props.navigation.navigate('product_infos');
      }
      if (type == 3) {
        this.props.navigation.navigate('customer_information');
      }
    } else {
      this.setState({
        landingStatus: 0,
      });
      this.props.navigation.navigate('login_head');
    }
  };

  //获取权限信息
  getAuthority = async () => {
    const authority = await RetrieveData('authority');
    if (authority) {
      this.setState({
        authority: authority,
        landingStatus: 1,
      });
    }
  };
}

const styles = StyleSheet.create({
  homePageBak: {
    flexDirection: 'column',
  },
  topImgBak: {
    height: 184,
    // backgroundColor: 'blue',
  },
  topImgTxt: {
    flex: 3,
    justifyContent: 'center',
    marginLeft: 40,
  },
  ydkpTxt: {
    fontSize: 32,
    color: '#fff',
  },
  ydkpTips: {
    marginTop: 10,
    fontSize: 12,
    color: '#fff',
  },
  topImg: {
    flex: 1,
    width: '100%',
    height: '100%',
    flexDirection: 'column',
    justifyContent: 'flex-end',
  },
  whiteSpaces: {
    height: 30,
    flexDirection: 'row',
    borderTopLeftRadius: Dimensions.get('window').width * 0.8,
    borderTopRightRadius: Dimensions.get('window').width * 0.8,
    backgroundColor: '#fff',
    // alignSelf: 'flex-end',
  },
  taxItemBak: {
    height: 145,
    backgroundColor: '#fff',
    flexDirection: 'column',
    // marginTop: 20,
    justifyContent: 'center',
  },
  tapBtnBak: {
    flex: 5,
    flexDirection: 'row',
    justifyContent: 'space-around',
    // alignItems: 'center',
  },
  tapBtnBakCol: {
    flexDirection: 'column',
  },
  tapBtnImg: {
    width: 53,
    height: 53,
  },
  userOnlineBak: {
    flex: 2,
    flexDirection: 'row',
    borderTopWidth: 1,
    borderTopColor: '#E0EEEE',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
  },
  tapBtnTips: {
    marginTop: 10,
    color: '#000',
  },
  userOnlineLeft: {
    flex: 1,
    flexDirection: 'row',
    marginLeft: 10,
  },
  userOnlineRight: {
    flex: 1,
    marginRight: 10,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  yxTopicBak: {
    marginTop: 20,
    // height: 200,
    backgroundColor: '#fff',
    flexDirection: 'column',
  },
  yxTopicTop: {
    height: 45,
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#E0EEEE',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
  },
  yxTopicBottom: {
    // height: 260,
    flexDirection: 'row',
    // justifyContent: 'space-around',
    // alignItems: 'center',
    flexWrap: 'wrap',
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 10,
  },
  yxTopicItem: {
    width: 120,
    height: 120,
    marginTop: 10,
    marginLeft: 5,
    marginRight: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  yxTopicItem_1: {backgroundColor: 'rgba(116, 211, 255, 0.1)'},
  yxTopicItem_2: {backgroundColor: 'rgba(255, 82, 71, 0.1)'},
  yxTopicItem_3: {backgroundColor: 'rgba(200, 121, 255, 0.1)'},
  yxTopicItemTextA: {
    color: 'rgba(51, 51, 51, 1)',
    fontWeight: '600',
    fontFamily: 'MicrosoftYaHei',
    fontSize: 17,
  },
  yxTopicItemTextB: {
    color: 'rgba(102, 102, 102, 1)',
    fontFamily: 'MicrosoftYaHei',
    fontSize: 12,
    marginTop: 5,
  },
  yxTopicItemTextC: {
    color: 'rgba(255, 75, 67, 1)',
    fontWeight: '600',
    fontFamily: 'MicrosoftYaHei',
    fontSize: 24,
    marginTop: 11,
  },
  xpPushBak: {
    height: 292,
    marginTop: 20,
    backgroundColor: '#fff',
    flexDirection: 'column',
  },
  xpPushTop: {
    height: 45,
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#E0EEEE',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
  },
  xpPushBottom: {},
  xpPushItem: {
    height: 148,
    marginTop: 20,
    marginRight: 24,
    marginLeft: 24,
    borderRadius: 10,
    backgroundColor: 'red',
  },
});