TaxControlApp/page/configure/enterpriseInformation/enterprise_list.js

import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  Dimensions,
  FlatList,
  RefreshControl,
  ActivityIndicator,
  DeviceEventEmitter,
} from 'react-native';
import {
  List,
  SearchBar,
  SwipeAction,
  WingBlank,
} from '@ant-design/react-native';

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

import enterprise_css from './enterprise_css';

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

  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#ffffff'}}>
        <View
          style={{
            width: Dimensions.get('window').width,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#ffffff',
            height: 50,
          }}>
          <SearchBar
            placeholder="搜索"
            value={this.state.search_data}
            // onSubmit={value => Alert.alert(value)}
            onCancel={() => this.searchClear()}
            onChange={(value) => this.searchData(value)}
            showCancelButton={false}
            style={{borderRadius: 15}}
          />
        </View>
        <View style={enterprise_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.2}
          />
        </View>
      </View>
    );
  }

  //搜索数据
  searchData = (value) => {
    this.setState({
      search_data: value,
    });
    this.timer = setTimeout(() => {
      this.initData();
    }, 1000);
  };

  //清空搜索
  searchClear = () => {
    this.setState({
      search_data: '',
    });
    this.initData();
  };

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

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

  //显示list尾部
  _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={enterprise_css.footer}>
          <ActivityIndicator />
          <Text>正在加载更多数据...</Text>
        </View>
      );
    } else if (this.state.showFoot === 0) {
      return (
        <View style={enterprise_css.footer}>
          <Text />
        </View>
      );
    }
  }

  //显示页面加载
  componentDidMount(): void {
    this.getCustomerData();
    //收到监听
    this.listener = DeviceEventEmitter.addListener('企业信息刷新', (data) => {
      //收到监听后想做的事情
      this.initData();
    });
  }

  //关闭页面加载
  componentWillUnmount(): void {
    pageNo = 1;
    this.timer && clearTimeout(this.timer);
    //移除监听
    if (this.listener) {
      this.listener.remove();
    }
  }

  //获取客户数据
  getCustomerData = async () => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      const url = '/sys/entInfo/findPageByMobile';
      let res = await RequestNetwork(
        url,
        token,
        {
          userMobile: account,
          reqChannel: 3,
          pageNum: pageNo,
          pageSize: 10,
          entName: this.state.search_data,
        },
        false,
        2,
      );
      if (res) {
        console.log(res);
        if (res.code === 0) {
          totalPage = res.data.pages;
          this.setList(res.data.records);
        }
      }
    }
  };

  //设置客户数据列表
  setList = (data) => {
    let listDatas = data.map((_, i) => ({
      key: data[i].entInfoId,
      entTaxId: data[i].entTaxId,
      entName: data[i].entName,
      entShortName: data[i].entShortName,
      entType: data[i].entType,
      entAddress: data[i].entAddress,
      entContactPerson: data[i].entContactPerson,
      entTaxOfficeCode: data[i].entTaxOfficeCode,
      entTaxOfficeName: data[i].entTaxOfficeName,
      serviceStatus: data[i].serviceStatus,
      availableTaxes: data[i].availableTaxes,
      entPhone: data[i].entPhone,
      bankName: data[i].bankName,
      bankAccountNumber: data[i].bankAccountNumber,
      payees: data[i].payees,
      reviewers: data[i].reviewers,
      drawers: data[i].drawers,
      defaultTaxCode: data[i].defaultTaxCode,
      defaultItemName: data[i].defaultItemName,
      defaultTaxRate: data[i].defaultTaxRate,
      defaultInvoiceDevice: data[i].defaultInvoiceDevice,
      isvPlatform: data[i].isvPlatform,
      businessLicenseImg: data[i].businessLicenseImg,
      entLogo: data[i].entLogo,
      authProtocol: data[i].authProtocol,
      ispId: data[i].ispId,
      createBy: data[i].createBy,
      createTime: data[i].createTime,
      lastUpdateBy: data[i].lastUpdateBy,
      lastUpdateTime: data[i].lastUpdateTime,
      hasConfirm: data[i].hasConfirm,
      bwCloudInfo: data[i].bwCloudInfo,
      defaultDeviceInfo: data[i].defaultDeviceInfo,
    }));
    let list = this.state.listData.concat(listDatas);
    this.setState({
      listData: list,
      showFoot: 0,
    });
  };

  //加载客户列表数据
  renderItem = (data) => (
    <SwipeAction
      autoClose
      style={{backgroundColor: 'transparent'}}>
      <List.Item
        style={{backgroundColor: '#F7F7F7'}}
        onPress={() => {
          this.props.navigation.navigate('enterprise_edit', {
            enterprise: data.item,
          });
        }}>
        <View style={{backgroundColor: '#ffffff'}}>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              margin: 5,
              borderBottomWidth: 1,
              borderBottomColor: '#E5E5E5',
              height: 50,
            }}>
            <View
              style={{
                borderWidth: 2,
                borderColor: '#2A67FE',
                height: 18,
                borderRadius: 3,
              }}
            />
            <View style={{marginLeft: 5, marginRight: 5, flex: 1}}>
              <Text
                style={{
                  fontSize: 18,
                  color: '#4B4B4B',
                  fontWeight: 'bold',
                }}
                numberOfLines={1}
                ellipsizeMode={'tail'}>
                {data.item.entName}
              </Text>
            </View>
            <View
              style={{
                borderWidth: 1,
                borderColor: '#2A67FE',
                borderRadius: 6,
                width: 40,
                height: 20,
              }}>
              <Text
                style={{color: '#2A67FE', fontSize: 13, textAlign: 'center'}}>
                企业
              </Text>
            </View>
          </View>
          <View style={{margin: 10}}>
            <Text style={{color: '#808080', fontSize: 15}}>
              企业税号：{data.item.entTaxId}
            </Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              height: 32,
              backgroundColor: '#F5F7FC',
              marginLeft: 10,
              marginRight: 10,
            }}>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                flex: 1,
                marginLeft: 5,
              }}>
              {data.item.entPhone === '' ? (
                <Text
                  style={{
                    fontSize: 13,
                    color: '#808080',
                  }}>
                  联系电话：暂未填写
                </Text>
              ) : (
                <Text
                  style={{
                    fontSize: 13,
                    color: '#808080',
                  }}>
                  联系电话：
                  {data.item.entPhone}
                </Text>
              )}
            </View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                margin: 5,
                flex: 1,
              }}>
              <Text
                style={{
                  fontSize: 13,
                  color: '#808080',
                }}>
                邮箱：暂未填写
              </Text>
            </View>
          </View>
          <View style={{height: 10}} />
        </View>
      </List.Item>
    </SwipeAction>
  );
}