TaxControlApp/components/product/product_list_info.js

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

import {RetrieveData} from '../../data/storage';
import {RequestNetwork} from '../../data/encryption';
import public_css from '../../source/css/public_css';
import {Footer} from '../listPage/pagination';
import {CleanAll} from '../abnormalMessage/abnormal_message';
import {ToastShow} from '../toast/toast';

let pageNo = 1; //当前页码
let totalPage = 5; //总的页数
let pageSize = 10; //每页数量
export default class product_list_info extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: this.props.route.params.status, // 请求页面类型： 1：手工开票页面, 2:购方开票 3：抬头开票
      listData: [],
      productName: '',
      showFoot: 0, // 控制foot， 0：无数据  1：加载中   2 ：上拉加载
      isLoading: false,
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <View style={public_css.search}>
          <SearchBar
            placeholder="搜索"
            value={this.state.productName}
            onCancel={() => this.searchClear()}
            onChange={(value) => this.searchData(value)}
            showCancelButton={false}
            style={{borderRadius: 15}}
          />
        </View>
        <FlatList
          data={this.state.listData}
          renderItem={(item) => this.renderItem(item)}
          onRefresh={this.initData.bind(this)}
          refreshing={this.state.isLoading}
          refreshControl={
            <RefreshControl
              title={'加载中...'}
              colors={['#B7B7B7']} //此颜色无效
              tintColor={'#B7B7B7'}
              titleColor={'#B7B7B7'} //只有ios有效
              refreshing={this.state.isLoading}
              onRefresh={() => {
                this.initData();
              }}
            />
          }
          ListFooterComponent={() => Footer(this.state.showFoot)}
          onEndReached={() => this.onEndReached()}
          onEndReachedThreshold={0.1}
        />
      </SafeAreaView>
    );
  }

  //页面渲染完成后加载
  async componentDidMount(): void {
    pageNo = 1;
    this.setState({
      listData: [],
      productName: '',
      showFoot: 1,
    });
    await this.getProductList();
  }

  //搜索
  searchData = async (text) => {
    pageNo = 1;
    this.setState({
      listData: [],
      productName: text,
      showFoot: 0,
    });
    await this.getProductList();
  };

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

  //清空搜索栏
  searchClear = async () => {
    await this.initData();
  };

  //获取产品列表
  getProductList = async () => {
    let token = await RetrieveData('token');
    let account = await RetrieveData('account');
    let company = JSON.parse(await RetrieveData('company'));
    if (token && account) {
      const url = '/sys/product/findPage';
      let res = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
          entTaxId: company.entTaxId,
          pageNum: pageNo,
          pageSize: pageSize,
          productName: this.state.productName,
        },
        false,
        2,
      );
      if (res) {
        if (res.code === 0) {
          totalPage = res.data.pages;
          this.setList(res.data.records);
        } else {
          this.setState({
            showFoot: 0,
          });
          await this.abnormalMessage(res);
        }
      }
    }
  };

  //加载产品列表
  setList = (data) => {
    let listDatas = data.map((_, i) => ({
      key: data[i].productId, //产品Id
      SPHH: i,
      FPHXZ: '0', //发票行性质 0正常行 1折扣行 2被折扣行 必填
      SPBM: data[i].taxationCateCode, //商品编码
      ZXBM: data[i].productCode, //自行编码
      YHZCBS: data[i].preferentialFlag, //优惠政策标识 0不使用 1使用
      LSLBS: data[i].zeroRateFlag, //零税率标识
      ZZSTSGL: data[i].preferentialType, //增值税特殊管理
      XMMC: data[i].productName, //项目名称 必填
      DW: data[i].unit, //计量单位
      GGXH: data[i].specsModel, //规格型号
      XMSL: '', //项目数量
      XMDJ: data[i].price, //项目单价
      XMJE: '', //项目金额 不含税
      SL: data[i].taxRate, //税率 必填
      SE: '', //税额 必填
    }));
    let list = this.state.listData.concat(listDatas);
    if (list.length > 0) {
      this.setState({
        showFoot: 2,
        isLoading: false,
        listData: list,
      });
    } else {
      this.setState({
        showFoot: 0,
        isLoading: false,
        listData: list,
      });
    }
  };

  //加载列表item
  renderItem = (data) => (
    <List.Item
      onPress={() => {
        this.props.navigation.navigate('product_confirm', {
          data: data.item,
          status: this.state.status,
        });
      }}
      style={{display: 'flex', backgroundColor: '#F7F7F7'}}>
      <View style={{flex: 1, backgroundColor: '#ffffff'}}>
        <View style={{}}>
          <Text
            style={{
              color: '#050505',
              fontWeight: 'bold',
              fontSize: 18,
              marginLeft: 10,
              marginTop: 10,
            }}>
            {data.item.XMMC}
          </Text>
          <Text
            style={{
              color: '#B1B2B7',
              fontSize: 16,
              marginLeft: 10,
              marginTop: 10,
            }}>
            {data.item.SPBM}
          </Text>
        </View>
        <View style={{flexDirection: 'row', marginLeft: 10, marginTop: 10}}>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              backgroundColor: '#F4F5F9',
              borderRadius: 24,
              height: 25,
              margin: 5,
            }}>
            <View
              style={{flexDirection: 'row', alignItems: 'center', padding: 5}}>
              <Text style={{color: '#888888'}}>税率：</Text>
              <Text style={{color: '#888888'}}>{data.item.SL}</Text>
            </View>
          </View>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              backgroundColor: '#F4F5F9',
              borderRadius: 24,
              height: 25,
              margin: 5,
            }}>
            {data.item.GGXH === '' ? (
              <View
                style={{flexDirection: 'row', alignItems: 'center', padding: 5}}>
                <Text style={{color: '#888888'}}>规格：</Text>
                <Text style={{color: '#888888'}}>暂无</Text>
              </View>
            ) : (
              <View
                style={{flexDirection: 'row', alignItems: 'center', padding: 5}}>
                <Text style={{color: '#888888'}}>规格：</Text>
                <Text style={{color: '#888888'}}>{data.item.GGXH}</Text>
              </View>
            )}
          </View>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              backgroundColor: '#F4F5F9',
              borderRadius: 24,
              height: 25,
              margin: 5,
            }}>
            {data.item.DW === '' ? (
              <View
                style={{flexDirection: 'row', alignItems: 'center', padding: 5}}>
                <Text style={{color: '#888888'}}>计量单位：</Text>
                <Text style={{color: '#888888'}}>暂无</Text>
              </View>
            ) : (
              <View
                style={{flexDirection: 'row', alignItems: 'center', padding: 5}}>
                <Text style={{color: '#888888'}}>计量单位：</Text>
                <Text style={{color: '#888888'}}>{data.item.DW}</Text>
              </View>
            )}
          </View>
        </View>
        <View
          style={{
            borderTopWidth: 1,
            borderColor: '#E8E8E8',
            marginLeft: 5,
            marginRight: 5,
          }}
        />
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            margin: 10,
          }}>
          <Text style={{color: '#5F5F5F'}}>单价：</Text>
          <Text style={{color: '#2A67FE'}}>¥{data.item.XMDJ}</Text>
        </View>
      </View>
    </List.Item>
  );

  //列表上拉加载
  onEndReached = async () => {
    if (this.state.showFoot === 2) {
      if (pageNo >= totalPage) {
        this.setState({showFoot: 0});
        return;
      } else {
        pageNo++;
        this.setState({showFoot: 1});
        await this.getProductList();
      }
    }
  };

  // 处理网络请求数据
  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);
    }
  };
}