TaxControlApp/page/tax/invoiceInquiry/invoice_inquiry_ongoing.js

import React, {Component} from 'react';
import {
  ActivityIndicator,
  FlatList,
  RefreshControl,
  Text,
  View,
} from 'react-native';
import {List, SwipeAction} from '@ant-design/react-native';
import {RetrieveData} from '../../../data/storage';
import {RequestNetwork} from '../../../data/encryption';
import invoice_inquiry_css from './invoice_inquiry_css';

let pageNo = 1; //当前第几页
let totalPage = 5; //总的页数
export default class invoice_inquiry_ongoing extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: [],
      search_data: '',
      showFoot: 0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
      isLoading: false,
      visible1: false,
    };
  }

  render() {
    return (
      <View style={invoice_inquiry_css.container}>
        <FlatList
          data={this.state.listData}
          renderItem={(item) => this.renderItem(item)}
          refreshControl={
            <RefreshControl
              title={'加载中...'}
              colors={['#B7B7B7']} //此颜色无效
              tintColor={'#B7B7B7'}
              titleColor={'#B7B7B7'} //只有ios有效
              refreshing={this.state.isLoading}
              onRefresh={() => {
                this.initData();
              }}
            />
          }
          ListFooterComponent={this._renderFooter.bind(this)}
          onEndReached={this._onEndReached.bind(this)}
          onEndReachedThreshold={0.1}
        />
      </View>
    );
  }

  //初始化数据
  initData = () => {
    this.setState({
      listData: [],
      isLoading: false,
      showFoot: 0,
    });
    pageNo = 1;
    this.getSearchData();
  };

  //上拉加载
  _onEndReached() {
    if (this.state.showFoot === 0) {
      if (pageNo >= totalPage) {
        this.setState({showFoot: 1});
        return;
      } else {
        pageNo++;
        this.setState({showFoot: 2});
        //获取数据
        this.getSearchData();
      }
    }
  }

  //显示列表尾部
  _renderFooter() {
    if (this.state.showFoot === 1) {
      return (
        <View
          style={{
            height: 30,
            alignItems: 'center',
            justifyContent: 'flex-start',
          }}>
          <Text
            style={{
              color: '#999999',
              fontSize: 14,
              marginTop: 5,
              marginBottom: 5,
            }}>
            没有更多数据了
          </Text>
        </View>
      );
    } else if (this.state.showFoot === 2) {
      return (
        <View style={invoice_inquiry_css.footer}>
          <ActivityIndicator />
          <Text>正在加载更多数据...</Text>
        </View>
      );
    } else if (this.state.showFoot === 0) {
      return (
        <View style={invoice_inquiry_css.footer}>
          <Text />
        </View>
      );
    }
  }

  //页面加载完成后加载数据
  componentDidMount(): void {
    this.props.children.getOnGoingRef(this);
    this.getSearchData();
  }

  //页面销毁
  componentWillUnmount(): void {
    pageNo = 1;
  }

  //获取查询数据
  getSearchData = async () => {
    let beginTime = '';
    let endTime = '';
    if (this.props.children.state.beginDateText !== undefined) {
      if (this.props.children.state.beginDateText !== '开始时间') {
        beginTime = this.props.children.state.beginDateText + ' 00:00:00';
      }
    }
    if (this.props.children.state.endDateText !== undefined) {
      if (this.props.children.state.endDateText !== '结束时间') {
        endTime = this.props.children.state.endDateText + ' 23:59:59';
      }
    }
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    let company = JSON.parse(await RetrieveData('company'));
    console.log('12345');
    if (token && account) {
      const url = '/sys/invoice/findPage';
      let res = await RequestNetwork(
        url,
        token,
        {
          belongEntTaxId: company.entTaxId,
          mobile: account,
          reqChannel: 3,
          pageNum: pageNo,
          pageSize: 10,
          status: 1,
          invoiceDateBegin: beginTime,
          invoiceDateEnd: endTime,
          invoiceCategory: this.props.children.state.invoiceCategory,
          customerName: this.props.children.state.customerName,
          customerEntTaxId: this.props.children.state.customerEntTaxId,
          invoiceCode: this.props.children.state.invoiceCode,
          invoiceNumber: this.props.children.state.invoiceNumber,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          this.setList(res.data.records);
        }
      }
    }
  };

  //设置列表的list
  setList = data => {
    let listDatas = data.map((_, i) => ({
      key: data[i].invoiceId,
      invoiceType: data[i].invoiceType,
      invoiceCategory: data[i].invoiceCategory,
      invoiceCode: data[i].invoiceCode,
      invoiceNumber: data[i].invoiceNumber,
      invoiceDate: data[i].invoiceDate,
      customerName: data[i].customerName,
      customerEntTaxId: data[i].customerEntTaxId,
      totalAmountTaxes: data[i].totalAmountTaxes,
      invoiceReqFlowNo: data[i].invoiceReqFlowNo,
      status: data[i].status,
    }));
    let list = this.state.listData.concat(listDatas);
    this.setState({
      listData: list,
      showFoot: 0,
    });
  };

  //加载列表list
  renderItem = (data) => (
    <SwipeAction autoClose style={{backgroundColor: 'transparent'}}>
      <List.Item
        style={{backgroundColor: '#F7F7F7'}}>
        <View style={{backgroundColor: '#ffffff'}}>
          <View style={{flexDirection: 'row', marginLeft: 5, marginTop: 5, marginBottom: 5}}>
            <View style={{flex: 1}}>
              <Text style={invoice_inquiry_css.listHead}>{data.item.customerName}</Text>
            </View>
            {data.item.invoiceType === 0 ? (
              <View style={invoice_inquiry_css.listBlueHead}>
                <Text style={{color: '#ffffff'}}>蓝字发票</Text>
              </View>
            ) : data.item.invoiceType === 1 ? (
              <View style={invoice_inquiry_css.listRedHead}>
                <Text style={{color: '#ffffff'}}>红字发票</Text>
              </View>
            ) : data.item.invoiceType === 2 ? (
              <View style={invoice_inquiry_css.listInvalidHead}>
                <Text style={{color: '#ffffff'}}>空白作废发票</Text>
              </View>
            ) : (
              <View />
            )}
          </View>
          <View style={{marginLeft: 5}}>
            {data.item.invoiceCategory === 1 ? (
              <View>
                <Text style={{color: '#898989'}}>增值税普通电子发票</Text>
              </View>
            ) : data.item.invoiceCategory === 2 ? (
              <View>
                <Text style={{color: '#898989'}}>增值税电子专用发票</Text>
              </View>
            ) : data.item.invoiceCategory === 3 ? (
              <View>
                <Text style={{color: '#898989'}}>增值税普通纸质发票</Text>
              </View>
            ) : data.item.invoiceCategory === 4 ? (
              <View>
                <Text style={{color: '#898989'}}>增值税专用纸质发票</Text>
              </View>
            ) : (
              <View />
            )}
          </View>
          <View style={{flexDirection: 'row', margin: 5}}>
            <View style={{flex: 1}}>
              <View style={{marginTop: 5}}>
                {data.item.status === 1 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>开票中</Text>
                  </View>
                ) : data.item.status === 2 ? (
                  <View style={invoice_inquiry_css.listRedStatus}>
                    <Text style={{color: '#F06969'}}>开票失败</Text>
                  </View>
                ) : data.item.status === 3 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>正数开具成功</Text>
                  </View>
                ) : data.item.status === 4 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>负数开具成功</Text>
                  </View>
                ) : data.item.status === 5 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>正数已作废</Text>
                  </View>
                ) : data.item.status === 6 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>负数已作废</Text>
                  </View>
                ) : data.item.status === 7 ? (
                  <View style={invoice_inquiry_css.listBlueStatus}>
                    <Text style={{color: '#2A67FE'}}>空白作废</Text>
                  </View>
                ) : (
                  <View />
                )}
              </View>
              <View style={{marginTop: 5}}>
                <Text style={{color: '#A0A0A0'}}>{data.item.invoiceDate}</Text>
              </View>
            </View>
            <View style={{flex: 1, flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-end', marginRight: 5}}>
              <Text style={{color: '#393939', fontSize: 18, fontWeight: 'bold'}}>¥{data.item.totalAmountTaxes}</Text>
            </View>
          </View>
        </View>
      </List.Item>
    </SwipeAction>
  );
}