DingdongRider/mine/MineComplaint.tsx

import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import * as Animatable from 'react-native-animatable';
import {
  Div,
  Button,
  Image,
  Text,
  Avatar,
  Icon,
  Tag,
} from 'react-native-magnus';
import { FlatList } from 'react-native-gesture-handler';
import { RefreshControl } from 'react-native';

import { useTranslation } from 'react-i18next';
import { useRequest, useCreation } from 'ahooks';

import { riderScore } from '../utils/RiderInfoUtils';

import { MonthDate, getSearchDate } from '../utils/TimeUtils';
import request from '../utils/RequestUtils';

const AppraisalCom = ({ info }) => {
  const { t } = useTranslation();
  const {
    content,
    enabled,
    id,
    img,
    orderId,
    resolve,
    solution,
    target,
    time,
    type,
  } = info;
  const imgs = img ? img.split(',') : [];
  return (
    <Div mb={10} bg="white" p={15}>
      <Text fontSize="sm">
        {t('tou-su-lei-xing')}:{type}
      </Text>
      <Text fontSize="sm">
        {t('tou-su-shi-jian')}:{time}
      </Text>
      <Text
        fontSize="sm"
        color="gray500"
        pt={10}
        borderTopColor="gray100"
        borderTopWidth={1}
      >
        {content}
      </Text>
      <Div row>
        {imgs.map((item, index) => {
          return (
            <Image source={item} key={index} w={36} h={36} mr={13} mt={10} />
          );
        })}
      </Div>
    </Div>
  );
};
interface Result {
  list: Item[];
  last: boolean;
  current: number;
  empty: boolean;
}

export default function MineAppraisalScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();

  const { data, loading, loadMore, loadingMore, reload } = useRequest(
    (d: Result | undefined) => {
      return request.get(__DEV__ ? '/complaint/all' : '/complaint/my');
    },
    {
      formatResult: (response) => {
        return {
          list: __DEV__ ? response.content : response,
          last: true,
          empty: __DEV__ ? response.empty : response.length === 0,
        };
      },
      isNoMore: (r: Result) => {
        return false;
      },
      defaultLoading: false,
      debounceInterval: 1000,
      loadMore: true,
    }
  );

  return (
    <Div bg="gray100" flex={1}>
      <FlatList
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={reload} />
        }
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
          paddingTop: 10,
        }}
        data={data.list}
        renderItem={({ item }) => {
          return <AppraisalCom info={item} />;
        }}
        keyExtractor={(item) => item.id.toString()}
        ListFooterComponent={() => {
          return (
            <>
              {!data.empty && (
                <Text p={15} textAlign="center">
                  {data.last ? t('dao-di-le') : t('jia-zai-zhong')}
                </Text>
              )}
            </>
          );
        }}
        ListEmptyComponent={() => {
          return (
            <>
              {!loading && (
                <Text textAlign="center" p={15}>
                  {t('wu-shu-ju')}
                </Text>
              )}
            </>
          );
        }}
      />
    </Div>
  );
}