DingdongRider/order/OrderScreen.tsx

import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { RefreshControl } from 'react-native';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { FlatList } from 'react-native-gesture-handler';
import Constants from 'expo-constants';
import TimScreen from '../notice/TimScreen';

import useModel from 'flooks';
import Map from '../map/model';
import OrderModel from './model';
import { useMount, useRequest, useCreation } from 'ahooks';
import { useTranslation } from 'react-i18next';

import moment from 'moment';

import { promot } from '../utils/SystemUtils';
import { orderRiderStatus } from '../utils/RiderInfoUtils';
import request from '../utils/RequestUtils';
import { toastSuccess } from '../utils/SystemUtils';

import OrderCom from './OrderCom';

export default function OrderScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();
  const { locationInfo, getNowLocation } = useModel(Map, ['locationInfo']);

  const { receiverOrder } = useModel(OrderModel, []);

  const [chooseStatus, setChooseStatus] = React.useState<string>('RECEIVED');
  useMount(() => {
    getNowLocation();
  });
  const { addressName } = locationInfo;

  const chooseStatusInfo = useCreation(() => {
    return orderRiderStatus.get(chooseStatus);
  }, [chooseStatus]);

  const { data, loading, reload } = useRequest(
    () => {
      return request.get(chooseStatusInfo.requestUrl, {
        params: chooseStatusInfo.params,
      });
    },
    {
      refreshDeps: [chooseStatusInfo],
      formatResult: chooseStatusInfo.formatResult,
      defaultLoading: false,
      debounceInterval: 1000,
    }
  );

  return (
    <Div bg="gray100" flex={1}>
      <Div
        pt={Constants.statusBarHeight + 11}
        pb={11}
        bg="yellow500"
        row
        alignItems="center"
        px={14}
        px={15}
      >
        <Image w={50} h={50} source={require('../assets/images/logo.png')} />
        <Text fontSize="xl" color="white" mr={50} textAlign="center" flex={1}>
          骑手客户端
        </Text>
      </Div>
      <Div row>
        {[...orderRiderStatus.keys()].map((item) => {
          const info = orderRiderStatus.get(item);
          return (
            <Button
              key={item}
              flex={1}
              bg="transparent"
              color={chooseStatus === item ? 'yellow500' : 'black'}
              fontSize="lg"
              py={15}
              onPress={() => setChooseStatus(item)}
            >
              {t(info.name)}
            </Button>
          );
        })}
      </Div>

      <FlatList
        renderItem={({ item }) => {
          return (
            <OrderCom
              info={item}
              goDetail={() =>
                navigation.navigate('OrderStack', {
                  screen: 'OrderDetail',
                  params: {
                    orderId: item.id,
                  },
                })
              }
              receiverOrder={() => {
                receiverOrder(item.id, (res) => {
                  toastSuccess('接单成功');
                });
              }}
              goMap={() =>
                navigation.navigate('OrderStack', {
                  screen: 'OrderMap',
                  params: {
                    orderId: item.id,
                  },
                })
              }
            />
          );
        }}
        data={data}
        contentContainerStyle={{
          flexGrow: 1,
          paddingHorizontal: 15,
          backgroundColor: '#f2f2f2',
        }}
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={reload} />
        }
      />

      <Div position="absolute" w={0} h={0} bottom={0} left={0} zIndex={0}>
        <TimScreen />
      </Div>
    </Div>
  );
}