TaxControlApp/page/notice/message.js

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

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

import notice_css from './notice_css';
import {ToastShow} from '../../components/toast/toast';
import {CleanAll} from '../../components/abnormalMessage/abnormal_message';

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

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <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()}
          onEndReached={() => this.onEndReached()}
          onEndReachedThreshold={0.1}
        />
      </SafeAreaView>
    );
  }

  //页面加载完成后加载数据
  async componentDidMount(): void {
    await this.getMessageList();
  }

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

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

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

  //获取消息列表数据
  getMessageList = async () => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      const url = '/auth/user/msg/findUserMsg';
      let res = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
          pageNum: pageNo,
          pageSize: 10,
        },
        false,
        2,
      );
      if (res) {
        console.log(res);
        if (res.code === 0) {
          totalPage = res.data.pages;
          this.setList(res.data.records);
        } else {
          await this.abnormalMessage(res);
        }
      }
    }
  };

  //设置抬头列表
  setList = (data) => {
    let listDatas = data.map((_, i) => ({
      key: data[i].msgId,
      msgType: data[i].msgType,
      msgTitle: data[i].msgTitle,
      msgBrief: data[i].msgBrief,
      entTaxId: data[i].entTaxId,
      ispId: data[i].ispId,
      userId: data[i].userId,
      createTime: data[i].createTime,
    }));
    let list = this.state.listData.concat(listDatas);
    this.setState({
      listData: list,
      showFoot: 0,
    });
  };

  //显示发票抬头列表
  renderItem = (data) => (
    <List.Item
      style={{backgroundColor: '#F7F7F7'}}
      onPress={() => {
        this.props.children.props.navigation.navigate('message_info', {
          id: data.item.key,
        });
      }}>
      <View style={{backgroundColor: '#ffffff'}}>
        <View style={{margin: 10}}>
          <Text
            style={{fontWeight: 'bold', fontSize: 16, color: '#050505'}}
            ellipsizeMode={'tail'}
            numberOfLines={1}>
            {data.item.msgTitle}
          </Text>
          <Text style={{color: '#898989', marginTop: 5}}>
            简介：{data.item.msgBrief}
          </Text>
        </View>
        <WingBlank>
          <View style={{borderTopWidth: 1, borderColor: '#D9D9D9'}} />
        </WingBlank>
        <View style={{flexDirection: 'row', margin: 10}}>
          <View style={{flex: 1, justifyContent: 'center'}}>
            <Text>{data.item.createTime}</Text>
          </View>
        </View>
      </View>
    </List.Item>
  );

  // 处理网络请求数据
  abnormalMessage = async (jason) => {
    if (jason.code === 401) {
      await Alert.alert(
        '登录失效',
        '登录状态已失效，请重新登录！',
        [
          {
            text: '确定',
            onPress: () => {
              CleanAll();
              this.props.navigation.popToTop();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code === 403) {
      Alert.alert(
        '权限',
        '暂无权限操作此模块！',
        [
          {
            text: '确定',
            onPress: () => {
              this.props.navigation.goBack();
            },
          },
        ],
        {cancelable: false},
      );
    }
    if (jason.code !== 401 && jason.code !== 403) {
      ToastShow(1, jason.msg);
    }
  };
}