Dingdong_client/screens/Order/OrderScreen.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, View, FlatList } from 'react-native';
import { Div, Button, Text, Avatar, Image } from 'react-native-magnus';
import { Flex } from '@ant-design/react-native';
import { TouchableRipple } from 'react-native-paper';

import { useCreation, useRequest } from '@umijs/hooks';
import { useFocusEffect } from '@react-navigation/native';
import Header from './Header'; // 头部

import Time from '../../Utils/TimeUtils';

export default function OrderScreen({ navigation }) {
  const [orderList, setorderList] = React.useState();

  const orderRequest = useRequest('/orderInfo/my?sort=id,desc', {
    manual: true,
    onSuccess: (result) => {
      setorderList(result.content);
    },
  });

  useFocusEffect(
    React.useCallback(() => {
      orderRequest.run();
    }, [])
  );

  return (
    <>
      <Header noBack />

      <FlatList
        onRefresh={() => orderRequest.run()}
        refreshing={orderRequest.loading}
        contentContainerStyle={styles.list}
        data={orderList}
        renderItem={({ item }) => (
          <Item
            merchant={item.merchant}
            info={item}
            orderGoodsSpecs={item.orderGoodsSpecs}
            goNext={() => {
              navigation.navigate('OrderDetail', {
                orderId: item.id,
              });
            }}
          />
        )}
        keyExtractor={(item) => item.id.toString()}
      />
    </>
  );
}

// 订单组件
function Item({ merchant, info, goNext, orderGoodsSpecs }) {
  const orderInfo =
    orderGoodsSpecs.length > 0 ? orderGoodsSpecs[0].goods.name : '';
  return (
    <TouchableRipple style={{ marginBottom: 10 }} onPress={goNext}>
      <View style={styles.item}>
        <Div row>
          <Image w={53} h={53} source={{ uri: merchant.logo }} />
          <Div flex={1} ml={10}>
            <Div row>
              <Text fontSize="xl" flex={1} fontWeight="bold">
                {merchant.name}
              </Text>
              <Text fontSize="xs">
                预计
                <Text color="red500">
                  {new Time(
                    info.timeOfArrival,
                    'yyyy-MM-DD HH:mm:ss'
                  ).getFormat('HH:mm')}
                </Text>
                送达
              </Text>
            </Div>
            <Text fontSize="xs" my={10}>
              订单时间: {info.orderTime}
            </Text>
            <Div h={1} bg="gray200" />
            <Div row py={10} alignItems="center">
              <Text fontSize="sm">订单商品</Text>
              <Text fontSize="xs" ml={5} flex={1}>
                {orderInfo}等{info.num}件
              </Text>
              <Text size="sm">¥{info.realAmount}</Text>
            </Div>
          </Div>
        </Div>
        <Image h={200} source={{ uri: 'https://picsum.photos/700' }} />
        <Flex justify="end" style={styles.btns}>
          <Button
            w={100}
            fontSize="xs"
            bg="white"
            color="gray600"
            borderColor="brand500"
            borderWidth={1}
            rounded={3}
          >
            联系商家
          </Button>
        </Flex>
      </View>
    </TouchableRipple>
  );
}

const styles = StyleSheet.create({
  item: {
    paddingVertical: 20,
    paddingHorizontal: 10,
    backgroundColor: '#fff',
    borderRadius: 3,
  },
  list: {
    padding: 15,
  },
  icon: {
    width: 53,
    height: 53,
    borderRadius: 3,
    backgroundColor: '#eee',
  },
  main: {
    marginLeft: 5,
  },
  orderDetail: {
    paddingVertical: 10,
    borderTopWidth: 1,
    borderColor: '#E5E5E5',
    marginTop: 10,
  },
  btns: {
    paddingTop: 15,
  },
});