DingdongRider/order/OrderCom.tsx

import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { useTranslation } from 'react-i18next';
import { RiderStatusMap } from '../utils/RiderInfoUtils';

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

  const { t } = useTranslation();
  const orderStatusInfo = RiderStatusMap.get(riderStatus);
  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">{t('song-da')}</Text>
            <Text
              fontSize="xl"
              color="red500"
              fontWeight="bold"
              flex={1}
              textAlign="right"
            >
              {deliveryAmount}
            </Text>
          </Div>
          {orderStatusInfo.type === 'merchant' && (
            <Text fontSize="xl" color="black" fontWeight="bold" pt={2}>
              {t('liu-shui-hao')}：{info.id}
            </Text>
          )}

          <Div row mt={10}>
            <Text
              fontSize={orderStatusInfo.type === 'merchant' ? 'xl' : 'sm'}
              color={orderStatusInfo.type === 'merchant' ? 'black' : 'gray500'}
              fontWeight={
                orderStatusInfo.type === 'merchant' ? 'bold' : 'normal'
              }
            >
              1.5Km
            </Text>
            <Div flex={1} ml={12}>
              <Text
                fontSize={orderStatusInfo.type === 'merchant' ? 'xl' : 'sm'}
                color={
                  orderStatusInfo.type === 'merchant' ? 'black' : 'gray600'
                }
                fontWeight={
                  orderStatusInfo.type === 'merchant' ? 'bold' : 'normal'
                }
                pb={3}
              >
                {merShowName}
              </Text>
              <Text
                fontSize={orderStatusInfo.type === 'merchant' ? 'lg' : 'xs'}
                color={
                  orderStatusInfo.type === 'merchant' ? 'black' : 'gray600'
                }
                fontWeight={
                  orderStatusInfo.type === 'merchant' ? 'bold' : 'normal'
                }
              >
                {merAddress}
              </Text>
            </Div>
          </Div>
          <Div row mt={10}>
            <Text
              fontSize={orderStatusInfo.type === 'user' ? 'xl' : 'sm'}
              color={orderStatusInfo.type === 'user' ? 'black' : 'gray500'}
              fontWeight={orderStatusInfo.type === 'user' ? 'bold' : 'normal'}
            >
              1.5Km
            </Text>
            <Div flex={1} ml={12}>
              {user.nickName && (
                <Text
                  fontSize={orderStatusInfo.type === 'user' ? 'xl' : 'sm'}
                  color={orderStatusInfo.type === 'user' ? 'black' : 'gray500'}
                  fontWeight={
                    orderStatusInfo.type === 'user' ? 'bold' : 'normal'
                  }
                  pb={5}
                >
                  {user.nickName}
                </Text>
              )}

              <Text
                fontSize={orderStatusInfo.type === 'user' ? 'lg' : 'xs'}
                color={orderStatusInfo.type === 'user' ? 'black' : 'gray500'}
                fontWeight={orderStatusInfo.type === 'user' ? 'bold' : 'normal'}
              >
                {userAddress}
              </Text>
            </Div>
          </Div>
        </Div>
        {riderStatus === 'NOT_RECEIVED' && (
          <Button
            block
            mx={15}
            mb={20}
            bg={sign ? 'yellow500' : 'gray500'}
            disabled={!sign}
            onPress={receiverOrder}
          >
            {t('jie-dan')}
          </Button>
        )}

        {riderStatus != 'NOT_RECEIVED' && (
          <Div row mx={15} mb={20}>
            <Button
              flex={1}
              color="black"
              bg="white"
              borderColor="yellow500"
              borderWidth={1}
              onPress={goMap}
            >
              {t('cha-kan-dao-hang')}
            </Button>
            {riderStatus === 'RECEIVED' && (
              <Button ml={20} flex={1} bg="yellow500" onPress={changeStatus}>
                {t('wo-yi-dao-dian')}
              </Button>
            )}

            {riderStatus === 'ARRIVE' && (
              <Button ml={20} flex={1} bg="yellow500" onPress={goDetail}>
                {t('pai-zhao-qu-huo')}
              </Button>
            )}

            {riderStatus === 'TAKE_MEAL' && (
              <Button ml={20} flex={1} bg="yellow500" onPress={changeStatus}>
                {t('que-ren-song-da')}
              </Button>
            )}
          </Div>
        )}
      </Div>
    </Button>
  );
}