DingdongRider/order/OrderCom.tsx

import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';

export default function OrderCom({
  info,
  type,
  goDetail,
  receiverOrder,
  goMap,
  changeStatus,
}) {
  const {
    user,
    userAddress,
    merchant,
    riderStatus,
    timeOfArrival,
    deliveryAmount,
    merShowName,
    merAddress,
  } = info;

  return (
    <Button bg="white" p={0} block mb={15} onPress={goDetail}>
      <Div flex={1}>
        <Div px={10} py={15}>
          <Div row alignItems="center">
            <Text fontSize="xl" color="red500" fontWeight="bold">
              43分钟内
            </Text>
            <Text fontSize="xl">送达</Text>
            <Text
              fontSize="xl"
              color="red500"
              fontWeight="bold"
              flex={1}
              textAlign="right"
            >
              {deliveryAmount}
            </Text>
          </Div>
          <Div row mt={10}>
            <Text fontSize="sm" color="gray600">
              1.5Km
            </Text>
            <Div flex={1} ml={12}>
              <Text fontSize="sm" pb={3}>
                {merShowName || merchant.showName}
              </Text>
              <Text fontSize="xs">{merAddress || merchant.address}</Text>
            </Div>
          </Div>
          <Div row mt={10}>
            <Text fontSize="sm" color="gray600">
              1.5Km
            </Text>
            <Div flex={1} ml={12}>
              {user.nickName && (
                <Text fontSize="sm" pb={5}>
                  {user.nickName}
                </Text>
              )}

              <Text fontSize="xs">{userAddress}</Text>
            </Div>
          </Div>
        </Div>
        {riderStatus === 'NOT_RECEIVED' && (
          <Button block mx={15} mb={20} bg="yellow500" onPress={receiverOrder}>
            接单
          </Button>
        )}

        {riderStatus != 'NOT_RECEIVED' && (
          <Div row mx={15} mb={20}>
            <Button
              flex={1}
              color="black"
              bg="white"
              borderColor="yellow500"
              borderWidth={1}
              onPress={goMap}
            >
              查看导航
            </Button>
            {riderStatus === 'RECEIVED' && (
              <Button ml={20} flex={1} bg="yellow500" onPress={changeStatus}>
                我已到店
              </Button>
            )}

            {riderStatus === 'ARRIVE' && (
              <Button ml={20} flex={1} bg="yellow500" onPress={goDetail}>
                拍照取货
              </Button>
            )}

            {riderStatus === 'TAKE_MEAL' && (
              <Button ml={20} flex={1} bg="yellow500" onPress={changeStatus}>
                确认送达
              </Button>
            )}
          </Div>
        )}
      </Div>
    </Button>
  );
}