|
|
@@ -4,6 +4,9 @@ import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
|
|
|
import { ScrollView } from 'react-native-gesture-handler';
|
|
|
import { useRequest, useCreation } from 'ahooks';
|
|
|
import { RefreshControl } from 'react-native';
|
|
|
+import { toastInfo } from '../utils/SystemUtils';
|
|
|
+
|
|
|
+import { RiderStatusMap } from '../utils/RiderInfoUtils';
|
|
|
|
|
|
export default function OrderDetailScreen({
|
|
|
navigation,
|
|
|
@@ -22,6 +25,14 @@ export default function OrderDetailScreen({
|
|
|
return data.orderGoodsSpecs || [];
|
|
|
}, [data]);
|
|
|
|
|
|
+ const statusInfo = useCreation(() => {
|
|
|
+ if (data.riderStatus) {
|
|
|
+ return RiderStatusMap.get(data.riderStatus);
|
|
|
+ } else {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ }, [data]);
|
|
|
+
|
|
|
const totalNum = useCreation(() => {
|
|
|
return orderGoodsSpecs.reduce((total, currentValue) => {
|
|
|
return total + currentValue.num;
|
|
|
@@ -30,7 +41,7 @@ export default function OrderDetailScreen({
|
|
|
|
|
|
return (
|
|
|
<Div bg="gray100" flex={1}>
|
|
|
- {data.merchantStatus && data.merchantStatus !== 'NOT_RECEIVED' && (
|
|
|
+ {statusInfo.type && statusInfo.type !== 'order' && (
|
|
|
<Div row bg="white" py={12}>
|
|
|
<Div flex={1} alignItems="center">
|
|
|
<Text fontSize="xl" color="red500">
|
|
|
@@ -41,14 +52,25 @@ export default function OrderDetailScreen({
|
|
|
</Text>
|
|
|
</Div>
|
|
|
<Div w={1} bg="gray100" />
|
|
|
- <Div flex={1} alignItems="center">
|
|
|
- <Text fontSize="xl" color="red500">
|
|
|
- {data.timeOfArrival}
|
|
|
- </Text>
|
|
|
- <Text fontSize="sm" color="gray600">
|
|
|
- 预计送达时间
|
|
|
- </Text>
|
|
|
- </Div>
|
|
|
+ {statusInfo.type === 'finish' ? (
|
|
|
+ <Div flex={1} alignItems="center">
|
|
|
+ <Text fontSize="xl" color="red500">
|
|
|
+ {data.userReceivedTime}
|
|
|
+ </Text>
|
|
|
+ <Text fontSize="sm" color="gray600">
|
|
|
+ 用户收到时间
|
|
|
+ </Text>
|
|
|
+ </Div>
|
|
|
+ ) : (
|
|
|
+ <Div flex={1} alignItems="center">
|
|
|
+ <Text fontSize="xl" color="red500">
|
|
|
+ {data.timeOfArrival}
|
|
|
+ </Text>
|
|
|
+ <Text fontSize="sm" color="gray600">
|
|
|
+ 预计送达时间
|
|
|
+ </Text>
|
|
|
+ </Div>
|
|
|
+ )}
|
|
|
</Div>
|
|
|
)}
|
|
|
|
|
|
@@ -63,115 +85,176 @@ export default function OrderDetailScreen({
|
|
|
<RefreshControl refreshing={loading} onRefresh={reload} />
|
|
|
}
|
|
|
>
|
|
|
- {data.id && (
|
|
|
- <Div bg="white" rounded="xs" px={15} py={10}>
|
|
|
- {data.riderStatus !== 'NOT_RECEIVED' &&
|
|
|
- data.riderStatus !== 'TAKE_MEAL' && (
|
|
|
- <Div row py={10}>
|
|
|
- <Div flex={1}>
|
|
|
- <Text>我已到店</Text>
|
|
|
- <Text fontSize="sm" color="gray600" mt={2}>
|
|
|
- 流水号:{data.id}
|
|
|
+ {statusInfo.type && (
|
|
|
+ <>
|
|
|
+ <Div bg="white" rounded="xs" px={15} py={10}>
|
|
|
+ {statusInfo.type === 'merchant' && (
|
|
|
+ <>
|
|
|
+ <Div row py={10}>
|
|
|
+ <Div flex={1}>
|
|
|
+ <Text>我已到店</Text>
|
|
|
+ <Text fontSize="sm" color="gray600" mt={2}>
|
|
|
+ 流水号:{data.id}
|
|
|
+ </Text>
|
|
|
+ </Div>
|
|
|
+ <Button
|
|
|
+ bg="yellow500"
|
|
|
+ w={112}
|
|
|
+ disabled={statusInfo.status != 0}
|
|
|
+ >
|
|
|
+ 我已到店
|
|
|
+ </Button>
|
|
|
+ </Div>
|
|
|
+
|
|
|
+ {statusInfo.status === 1 && (
|
|
|
+ <Div row py={10}>
|
|
|
+ <Div flex={1}>
|
|
|
+ <Text>我已取货</Text>
|
|
|
+ <Text fontSize="sm" color="gray600" mt={2} pr={48}>
|
|
|
+ 为避免货物纠纷,请在取货时 检查并拍照存证
|
|
|
+ </Text>
|
|
|
+ </Div>
|
|
|
+ <Button bg="yellow500" w={112}>
|
|
|
+ 拍照取货
|
|
|
+ </Button>
|
|
|
+ </Div>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ {(statusInfo.type === 'user' || statusInfo.type === 'finish') && (
|
|
|
+ <Div py={10}>
|
|
|
+ <Text fontSize="sm">用户信息</Text>
|
|
|
+ <Div px={10} mt={10}>
|
|
|
+ <Text fontSize="xl" fontWeight="bold">
|
|
|
+ {data.nickname}
|
|
|
+ </Text>
|
|
|
+ <Text fontSize="sm" mt={5}>
|
|
|
+ {data.userAddress}
|
|
|
</Text>
|
|
|
</Div>
|
|
|
<Button
|
|
|
+ block
|
|
|
bg="yellow500"
|
|
|
- w={112}
|
|
|
- disabled={data.riderStatus != 'RECEIVED'}
|
|
|
+ mt={15}
|
|
|
+ onPress={() => {
|
|
|
+ if (!data.userId) {
|
|
|
+ toastInfo('该订单缺少用户id,请重新下单');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ navigation.navigate('NoticeStack', {
|
|
|
+ screen: 'Chat',
|
|
|
+ params: {
|
|
|
+ toUserId: data.userId,
|
|
|
+ toUserName: data.nickname,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
>
|
|
|
- 我已到店
|
|
|
+ 联系客户
|
|
|
</Button>
|
|
|
</Div>
|
|
|
)}
|
|
|
|
|
|
- {data.riderStatus === 'ARRIVE' && (
|
|
|
- <Div row py={10}>
|
|
|
- <Div flex={1}>
|
|
|
- <Text>我已取货</Text>
|
|
|
- <Text fontSize="sm" color="gray600" mt={2} pr={48}>
|
|
|
- 为避免货物纠纷,请在取货时 检查并拍照存证
|
|
|
- </Text>
|
|
|
- </Div>
|
|
|
- <Button bg="yellow500" w={112}>
|
|
|
- 拍照取货
|
|
|
- </Button>
|
|
|
- </Div>
|
|
|
- )}
|
|
|
-
|
|
|
- {data.riderStatus !== 'NOT_RECEIVED' && (
|
|
|
- <Div borderTopColor="gray100" borderTopWidth={1} py={10}>
|
|
|
- <Text fontSize="sm">商家信息</Text>
|
|
|
- <Div px={10} mt={10}>
|
|
|
- <Text fontSize="sm">{data.merchantShowName}</Text>
|
|
|
- <Text fontSize="sm" mt={5}>
|
|
|
- {data.merchantShowName}
|
|
|
- </Text>
|
|
|
- </Div>
|
|
|
- <Button block bg="yellow500" mt={15}>
|
|
|
- 联系商家
|
|
|
- </Button>
|
|
|
- </Div>
|
|
|
- )}
|
|
|
- {data.riderStatus !== 'NOT_RECEIVED' && (
|
|
|
- <Div py={15}>
|
|
|
- <Div row mt={10}>
|
|
|
- <Text fontSize="sm" color="gray600">
|
|
|
- 1.5Km
|
|
|
- </Text>
|
|
|
- <Div flex={1} ml={12}>
|
|
|
- <Text fontSize="md" pb={3}>
|
|
|
- {data.merchantShowName}
|
|
|
+ {(statusInfo.type === 'merchant' ||
|
|
|
+ statusInfo.type === 'finish') && (
|
|
|
+ <Div borderTopColor="gray100" borderTopWidth={1} py={10}>
|
|
|
+ <Text fontSize="sm">商家信息</Text>
|
|
|
+ <Div px={10} mt={10}>
|
|
|
+ <Text fontSize="xl" fontWeight="bold">
|
|
|
+ {data.merShowName}
|
|
|
+ </Text>
|
|
|
+ <Text fontSize="sm" mt={5}>
|
|
|
+ {data.merAddress}
|
|
|
</Text>
|
|
|
- <Text fontSize="sm">{data.merchantShowName}</Text>
|
|
|
</Div>
|
|
|
+ <Button
|
|
|
+ block
|
|
|
+ bg="yellow500"
|
|
|
+ mt={15}
|
|
|
+ onPress={() => {
|
|
|
+ if (!data.muserId) {
|
|
|
+ toastInfo('该订单缺少商家id,请重新下单');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ navigation.navigate('NoticeStack', {
|
|
|
+ screen: 'Chat',
|
|
|
+ params: {
|
|
|
+ toUserId: data.muserId,
|
|
|
+ toUserName: data.merShowName,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 联系商家
|
|
|
+ </Button>
|
|
|
</Div>
|
|
|
- <Div row mt={10}>
|
|
|
- <Text fontSize="sm" color="gray600">
|
|
|
- 1.5Km
|
|
|
- </Text>
|
|
|
- <Div flex={1} ml={12}>
|
|
|
- {data.nickName && (
|
|
|
- <Text fontSize="md" pb={5}>
|
|
|
- {data.nickName}
|
|
|
+ )}
|
|
|
+ {statusInfo.type === 'order' && (
|
|
|
+ <Div py={15}>
|
|
|
+ <Div row mt={10}>
|
|
|
+ <Text fontSize="sm" color="gray600">
|
|
|
+ 1.5Km
|
|
|
+ </Text>
|
|
|
+ <Div flex={1} ml={12}>
|
|
|
+ <Text fontSize="md" pb={3}>
|
|
|
+ {data.merShowName}
|
|
|
</Text>
|
|
|
- )}
|
|
|
- <Text fontSize="sm">{data.userAddress}</Text>
|
|
|
+ <Text fontSize="sm">{data.merAddress}</Text>
|
|
|
+ </Div>
|
|
|
+ </Div>
|
|
|
+ <Div row mt={10}>
|
|
|
+ <Text fontSize="sm" color="gray600">
|
|
|
+ 1.5Km
|
|
|
+ </Text>
|
|
|
+ <Div flex={1} ml={12}>
|
|
|
+ {data.nickName && (
|
|
|
+ <Text fontSize="md" pb={5}>
|
|
|
+ {data.nickName}
|
|
|
+ </Text>
|
|
|
+ )}
|
|
|
+ <Text fontSize="sm">{data.userAddress}</Text>
|
|
|
+ </Div>
|
|
|
</Div>
|
|
|
</Div>
|
|
|
- </Div>
|
|
|
- )}
|
|
|
+ )}
|
|
|
|
|
|
- <Div borderTopColor="gray100" borderTopWidth={1} py={10}>
|
|
|
- <Div row>
|
|
|
- <Text fontSize="sm" flex={2}>
|
|
|
- 商品信息
|
|
|
- </Text>
|
|
|
- <Text fontSize="sm" flex={1} textAlign="right">
|
|
|
- {totalNum}份
|
|
|
- </Text>
|
|
|
- <Text fontSize="sm" flex={1} color="red500" textAlign="right">
|
|
|
- ¥{data.totalAmount || 0}
|
|
|
- </Text>
|
|
|
- </Div>
|
|
|
+ <Div borderTopColor="gray100" borderTopWidth={1} py={10}>
|
|
|
+ <Div row>
|
|
|
+ <Text fontSize="sm" flex={2}>
|
|
|
+ 商品信息
|
|
|
+ </Text>
|
|
|
+ <Text fontSize="sm" flex={1} textAlign="right">
|
|
|
+ {totalNum}份
|
|
|
+ </Text>
|
|
|
+ <Text fontSize="sm" flex={1} color="red500" textAlign="right">
|
|
|
+ ¥{data.totalAmount || 0}
|
|
|
+ </Text>
|
|
|
+ </Div>
|
|
|
|
|
|
- <Div p={15}>
|
|
|
- {orderGoodsSpecs.map((item) => {
|
|
|
- const goods = item.goods;
|
|
|
- return (
|
|
|
- <Div row key={item.id} mt={5}>
|
|
|
- <Text fontSize="sm"> {goods.name}</Text>
|
|
|
- <Text fontSize="sm" color="gray500" ml={5}>
|
|
|
- {item.specification}
|
|
|
- </Text>
|
|
|
- <Text fontSize="sm" flex={1} textAlign="right">
|
|
|
- X {item.num}
|
|
|
- </Text>
|
|
|
- </Div>
|
|
|
- );
|
|
|
- })}
|
|
|
+ <Div p={15}>
|
|
|
+ {orderGoodsSpecs.map((item) => {
|
|
|
+ const goods = item.goods;
|
|
|
+ return (
|
|
|
+ <Div row key={item.id} mt={5}>
|
|
|
+ <Text fontSize="sm"> {goods.name}</Text>
|
|
|
+ <Text fontSize="sm" color="gray500" ml={5}>
|
|
|
+ {item.specification}
|
|
|
+ </Text>
|
|
|
+ <Text fontSize="sm" flex={1} textAlign="right">
|
|
|
+ X {item.num}
|
|
|
+ </Text>
|
|
|
+ </Div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </Div>
|
|
|
</Div>
|
|
|
</Div>
|
|
|
- </Div>
|
|
|
+ {(statusInfo.type === 'merchant' || statusInfo.type === 'user') && (
|
|
|
+ <Button block mx={15} my={10} bg="yellow500">
|
|
|
+ 查看导航
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
)}
|
|
|
</ScrollView>
|
|
|
</Div>
|