|
|
@@ -1,6 +1,12 @@
|
|
|
import * as WebBrowser from 'expo-web-browser';
|
|
|
import * as React from 'react';
|
|
|
-import { StyleSheet, View, Clipboard, RefreshControl } from 'react-native';
|
|
|
+import {
|
|
|
+ StyleSheet,
|
|
|
+ View,
|
|
|
+ Clipboard,
|
|
|
+ RefreshControl,
|
|
|
+ Dimensions,
|
|
|
+} from 'react-native';
|
|
|
import { Div, Button, Image, Text } from 'react-native-magnus';
|
|
|
|
|
|
import { Flex } from '@ant-design/react-native';
|
|
|
@@ -22,6 +28,8 @@ import {
|
|
|
} from '../../Utils/OrderUtils';
|
|
|
import Time from '../../Utils/TimeUtils';
|
|
|
|
|
|
+import MapScreen from '../Map/MapScreen';
|
|
|
+
|
|
|
export default function OrderScreen({ navigation }) {
|
|
|
const [orderInfo, setorderInfo] = React.useState({
|
|
|
merchant: {},
|
|
|
@@ -84,7 +92,8 @@ export default function OrderScreen({ navigation }) {
|
|
|
}, [orderInfo]);
|
|
|
|
|
|
return (
|
|
|
- <>
|
|
|
+ <Div bg="gray200">
|
|
|
+ <MapScreen orderInfo={orderInfo} />
|
|
|
<Header title={statusInfo.name} />
|
|
|
<ScrollView
|
|
|
contentContainerStyle={styles.scroll}
|
|
|
@@ -95,80 +104,33 @@ export default function OrderScreen({ navigation }) {
|
|
|
/>
|
|
|
}
|
|
|
>
|
|
|
- <View style={[styles.card]}>
|
|
|
- {finish ? (
|
|
|
- <Text fontSize="xl">
|
|
|
- <Text fontSize="xl" color="brand500" mr={10} fontWeight="bold">
|
|
|
- {statusInfo.name}
|
|
|
+ <Div pt={Dimensions.get('window').height * 0.6} pb={50} px={15}>
|
|
|
+ <View style={[styles.card]}>
|
|
|
+ {finish ? (
|
|
|
+ <Text fontSize="xl">
|
|
|
+ <Text fontSize="xl" color="brand500" mr={10} fontWeight="bold">
|
|
|
+ {statusInfo.name}
|
|
|
+ </Text>
|
|
|
+ {new Time(
|
|
|
+ orderInfo.userReceivedTime,
|
|
|
+ 'yyyy-MM-DD HH:mm:ss'
|
|
|
+ ).getFormat('HH:mm')}
|
|
|
+ 送达
|
|
|
</Text>
|
|
|
- {new Time(
|
|
|
- orderInfo.userReceivedTime,
|
|
|
- 'yyyy-MM-DD HH:mm:ss'
|
|
|
- ).getFormat('HH:mm')}
|
|
|
- 送达
|
|
|
- </Text>
|
|
|
- ) : (
|
|
|
- <Text fontSize="xl">
|
|
|
- <Text fontSize="xl" color="brand500" mr={10} fontWeight="bold">
|
|
|
- {statusInfo.name}
|
|
|
+ ) : (
|
|
|
+ <Text fontSize="xl">
|
|
|
+ <Text fontSize="xl" color="brand500" mr={10} fontWeight="bold">
|
|
|
+ {statusInfo.name}
|
|
|
+ </Text>
|
|
|
+ 预计
|
|
|
+ {new Time(
|
|
|
+ orderInfo.timeOfArrival,
|
|
|
+ 'yyyy-MM-DD HH:mm:ss'
|
|
|
+ ).getFormat('HH:mm')}
|
|
|
+ 送达
|
|
|
</Text>
|
|
|
- 预计
|
|
|
- {new Time(
|
|
|
- orderInfo.timeOfArrival,
|
|
|
- 'yyyy-MM-DD HH:mm:ss'
|
|
|
- ).getFormat('HH:mm')}
|
|
|
- 送达
|
|
|
- </Text>
|
|
|
- )}
|
|
|
- <Div row mt={10}>
|
|
|
- <Button
|
|
|
- fontSize="xs"
|
|
|
- flex={1}
|
|
|
- mx={5}
|
|
|
- bg="white"
|
|
|
- color="gray600"
|
|
|
- borderColor="brand500"
|
|
|
- borderWidth={1}
|
|
|
- rounded={3}
|
|
|
- onPress={() => connectKefu(orderId)}
|
|
|
- >
|
|
|
- 联系客服
|
|
|
- </Button>
|
|
|
- {!finish && (
|
|
|
- <Button
|
|
|
- fontSize="xs"
|
|
|
- flex={1}
|
|
|
- mx={5}
|
|
|
- bg="white"
|
|
|
- color="gray600"
|
|
|
- borderColor="brand500"
|
|
|
- borderWidth={1}
|
|
|
- rounded={3}
|
|
|
- onPress={() => {
|
|
|
- warnning('正在帮您联系骑手');
|
|
|
- }}
|
|
|
- >
|
|
|
- 联系骑手
|
|
|
- </Button>
|
|
|
- )}
|
|
|
- {!finish && (
|
|
|
- <Button
|
|
|
- fontSize="xs"
|
|
|
- flex={1}
|
|
|
- mx={5}
|
|
|
- bg="white"
|
|
|
- color="gray600"
|
|
|
- borderColor="brand500"
|
|
|
- borderWidth={1}
|
|
|
- rounded={3}
|
|
|
- onPress={() => {
|
|
|
- warnning('正在帮您催单');
|
|
|
- }}
|
|
|
- >
|
|
|
- 催单
|
|
|
- </Button>
|
|
|
)}
|
|
|
- {finish && !Allfinish && (
|
|
|
+ <Div row mt={10}>
|
|
|
<Button
|
|
|
fontSize="xs"
|
|
|
flex={1}
|
|
|
@@ -178,237 +140,288 @@ export default function OrderScreen({ navigation }) {
|
|
|
borderColor="brand500"
|
|
|
borderWidth={1}
|
|
|
rounded={3}
|
|
|
- onPress={() => {
|
|
|
- navigation.navigate('Evaluate', {
|
|
|
- orderId,
|
|
|
- });
|
|
|
- }}
|
|
|
+ onPress={() => connectKefu(orderId)}
|
|
|
>
|
|
|
- 立即评价
|
|
|
+ 联系客服
|
|
|
</Button>
|
|
|
- )}
|
|
|
- {finish && (
|
|
|
+ {!finish && (
|
|
|
+ <Button
|
|
|
+ fontSize="xs"
|
|
|
+ flex={1}
|
|
|
+ mx={5}
|
|
|
+ bg="white"
|
|
|
+ color="gray600"
|
|
|
+ borderColor="brand500"
|
|
|
+ borderWidth={1}
|
|
|
+ rounded={3}
|
|
|
+ onPress={() => {
|
|
|
+ warnning('正在帮您联系骑手');
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 联系骑手
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ {!finish && (
|
|
|
+ <Button
|
|
|
+ fontSize="xs"
|
|
|
+ flex={1}
|
|
|
+ mx={5}
|
|
|
+ bg="white"
|
|
|
+ color="gray600"
|
|
|
+ borderColor="brand500"
|
|
|
+ borderWidth={1}
|
|
|
+ rounded={3}
|
|
|
+ onPress={() => {
|
|
|
+ warnning('正在帮您催单');
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 催单
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ {finish && !Allfinish && (
|
|
|
+ <Button
|
|
|
+ fontSize="xs"
|
|
|
+ flex={1}
|
|
|
+ mx={5}
|
|
|
+ bg="white"
|
|
|
+ color="gray600"
|
|
|
+ borderColor="brand500"
|
|
|
+ borderWidth={1}
|
|
|
+ rounded={3}
|
|
|
+ onPress={() => {
|
|
|
+ navigation.navigate('Evaluate', {
|
|
|
+ orderId,
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 立即评价
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ {finish && (
|
|
|
+ <Button
|
|
|
+ fontSize="xs"
|
|
|
+ flex={1}
|
|
|
+ mx={5}
|
|
|
+ bg="white"
|
|
|
+ color="gray600"
|
|
|
+ borderColor="brand500"
|
|
|
+ borderWidth={1}
|
|
|
+ rounded={3}
|
|
|
+ onPress={() => {
|
|
|
+ navigation.navigate('MerchantDetail', {
|
|
|
+ merchantId: orderInfo.merchantId,
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 再来一单
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ </Div>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View style={[styles.card]}>
|
|
|
+ <Div row pb={10}>
|
|
|
+ <Text fontSize="xl" fontWeight="bold">
|
|
|
+ {merchant.showName}
|
|
|
+ </Text>
|
|
|
<Button
|
|
|
fontSize="xs"
|
|
|
- flex={1}
|
|
|
- mx={5}
|
|
|
+ w={100}
|
|
|
bg="white"
|
|
|
color="gray600"
|
|
|
borderColor="brand500"
|
|
|
borderWidth={1}
|
|
|
rounded={3}
|
|
|
+ ml={14}
|
|
|
onPress={() => {
|
|
|
- navigation.navigate('MerchantDetail', {
|
|
|
- merchantId: orderInfo.merchantId,
|
|
|
- });
|
|
|
+ warnning('正在帮您联系商家');
|
|
|
}}
|
|
|
>
|
|
|
- 再来一单
|
|
|
+ 联系商家
|
|
|
</Button>
|
|
|
- )}
|
|
|
- </Div>
|
|
|
- </View>
|
|
|
-
|
|
|
- <View style={[styles.card]}>
|
|
|
- <Div row pb={10}>
|
|
|
- <Text fontSize="xl" fontWeight="bold">
|
|
|
- {merchant.showName}
|
|
|
- </Text>
|
|
|
- <Button
|
|
|
- fontSize="xs"
|
|
|
- w={100}
|
|
|
- bg="white"
|
|
|
- color="gray600"
|
|
|
- borderColor="brand500"
|
|
|
- borderWidth={1}
|
|
|
- rounded={3}
|
|
|
- ml={14}
|
|
|
- onPress={() => {
|
|
|
- warnning('正在帮您联系商家');
|
|
|
- }}
|
|
|
- >
|
|
|
- 联系商家
|
|
|
- </Button>
|
|
|
- </Div>
|
|
|
- <Div>
|
|
|
- {orderGoodsSpecs.map((item) => {
|
|
|
- return <GoodsItem info={item} goods={item.goods} key={item.id} />;
|
|
|
- })}
|
|
|
- </Div>
|
|
|
- <Flex style={styles.info}>
|
|
|
- <Flex.Item>
|
|
|
- <Flex>
|
|
|
- <Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
- 包装费
|
|
|
- </Text>
|
|
|
- <Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
- 餐盒
|
|
|
- </Text>
|
|
|
- </Flex>
|
|
|
- </Flex.Item>
|
|
|
- <Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
- ¥{orderInfo.packingPrice}
|
|
|
- </Text>
|
|
|
- </Flex>
|
|
|
- <Flex style={styles.info}>
|
|
|
- <Flex.Item>
|
|
|
+ </Div>
|
|
|
+ <Div>
|
|
|
+ {orderGoodsSpecs.map((item) => {
|
|
|
+ return (
|
|
|
+ <GoodsItem info={item} goods={item.goods} key={item.id} />
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </Div>
|
|
|
+ <Flex style={styles.info}>
|
|
|
+ <Flex.Item>
|
|
|
+ <Flex>
|
|
|
+ <Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
+ 包装费
|
|
|
+ </Text>
|
|
|
+ <Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
+ 餐盒
|
|
|
+ </Text>
|
|
|
+ </Flex>
|
|
|
+ </Flex.Item>
|
|
|
<Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
- 配送费（叮咚专送）
|
|
|
+ ¥{orderInfo.packingPrice}
|
|
|
</Text>
|
|
|
- </Flex.Item>
|
|
|
- <Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
- ¥{orderInfo.deliveryAmount}
|
|
|
- </Text>
|
|
|
- </Flex>
|
|
|
- <Flex style={styles.info}>
|
|
|
- <Flex.Item>
|
|
|
+ </Flex>
|
|
|
+ <Flex style={styles.info}>
|
|
|
+ <Flex.Item>
|
|
|
+ <Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
+ 配送费（叮咚专送）
|
|
|
+ </Text>
|
|
|
+ </Flex.Item>
|
|
|
<Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
- 满减
|
|
|
+ ¥{orderInfo.deliveryAmount}
|
|
|
</Text>
|
|
|
- </Flex.Item>
|
|
|
- <Text fontSize="xs" color="red500" textAlign="left">
|
|
|
- -¥{orderInfo.fullReduction}
|
|
|
- </Text>
|
|
|
- </Flex>
|
|
|
- {!!orderInfo.firstBuy && (
|
|
|
+ </Flex>
|
|
|
<Flex style={styles.info}>
|
|
|
<Flex.Item>
|
|
|
<Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
- 首单
|
|
|
+ 满减
|
|
|
</Text>
|
|
|
</Flex.Item>
|
|
|
<Text fontSize="xs" color="red500" textAlign="left">
|
|
|
- ¥{orderInfo.firstBuy}
|
|
|
+ -¥{orderInfo.fullReduction}
|
|
|
</Text>
|
|
|
</Flex>
|
|
|
- )}
|
|
|
-
|
|
|
- <Flex style={styles.info}>
|
|
|
- <Flex.Item>
|
|
|
- <Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
- 红包
|
|
|
- </Text>
|
|
|
- </Flex.Item>
|
|
|
- <Text fontSize="xs" color="red500" textAlign="left">
|
|
|
- -¥{orderInfo.redBag || 0}
|
|
|
- </Text>
|
|
|
- </Flex>
|
|
|
- <Flex style={styles.total} justify="end">
|
|
|
- <Text size="s1">小计 ¥{orderInfo.realAmount}</Text>
|
|
|
- </Flex>
|
|
|
- </View>
|
|
|
+ {!!orderInfo.firstBuy && (
|
|
|
+ <Flex style={styles.info}>
|
|
|
+ <Flex.Item>
|
|
|
+ <Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
+ 首单
|
|
|
+ </Text>
|
|
|
+ </Flex.Item>
|
|
|
+ <Text fontSize="xs" color="red500" textAlign="left">
|
|
|
+ ¥{orderInfo.firstBuy}
|
|
|
+ </Text>
|
|
|
+ </Flex>
|
|
|
+ )}
|
|
|
|
|
|
- <View style={[styles.card]}>
|
|
|
- <Text size="c1">订单信息</Text>
|
|
|
- <View style={styles.main}>
|
|
|
- <Flex style={styles.info2}>
|
|
|
+ <Flex style={styles.info}>
|
|
|
<Flex.Item>
|
|
|
- <Text fontSize="xs" textAlign="left">
|
|
|
- 下单时间
|
|
|
+ <Text fontSize="xs" color="gray300" textAlign="left">
|
|
|
+ 红包
|
|
|
</Text>
|
|
|
</Flex.Item>
|
|
|
- <Text fontSize="xs" textAlign="left">
|
|
|
- {orderInfo.orderTime}
|
|
|
+ <Text fontSize="xs" color="red500" textAlign="left">
|
|
|
+ -¥{orderInfo.redBag || 0}
|
|
|
</Text>
|
|
|
</Flex>
|
|
|
- {orderInfo.userReceivedTime ? (
|
|
|
+ <Flex style={styles.total} justify="end">
|
|
|
+ <Text size="s1">小计 ¥{orderInfo.realAmount}</Text>
|
|
|
+ </Flex>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View style={[styles.card]}>
|
|
|
+ <Text size="c1">订单信息</Text>
|
|
|
+ <View style={styles.main}>
|
|
|
<Flex style={styles.info2}>
|
|
|
<Flex.Item>
|
|
|
<Text fontSize="xs" textAlign="left">
|
|
|
- 送达时间
|
|
|
+ 下单时间
|
|
|
</Text>
|
|
|
</Flex.Item>
|
|
|
<Text fontSize="xs" textAlign="left">
|
|
|
- {orderInfo.userReceivedTime}
|
|
|
+ {orderInfo.orderTime}
|
|
|
</Text>
|
|
|
</Flex>
|
|
|
- ) : (
|
|
|
+ {orderInfo.userReceivedTime ? (
|
|
|
+ <Flex style={styles.info2}>
|
|
|
+ <Flex.Item>
|
|
|
+ <Text fontSize="xs" textAlign="left">
|
|
|
+ 送达时间
|
|
|
+ </Text>
|
|
|
+ </Flex.Item>
|
|
|
+ <Text fontSize="xs" textAlign="left">
|
|
|
+ {orderInfo.userReceivedTime}
|
|
|
+ </Text>
|
|
|
+ </Flex>
|
|
|
+ ) : (
|
|
|
+ <Flex style={styles.info2}>
|
|
|
+ <Flex.Item>
|
|
|
+ <Text fontSize="xs" textAlign="left">
|
|
|
+ 预计送达时间
|
|
|
+ </Text>
|
|
|
+ </Flex.Item>
|
|
|
+ <Text fontSize="xs" textAlign="left">
|
|
|
+ {orderInfo.timeOfArrival}
|
|
|
+ </Text>
|
|
|
+ </Flex>
|
|
|
+ )}
|
|
|
+
|
|
|
<Flex style={styles.info2}>
|
|
|
- <Flex.Item>
|
|
|
+ <Flex.Item style={styles.address}>
|
|
|
<Text fontSize="xs" textAlign="left">
|
|
|
- 预计送达时间
|
|
|
+ 收货地址
|
|
|
</Text>
|
|
|
</Flex.Item>
|
|
|
<Text fontSize="xs" textAlign="left">
|
|
|
- {orderInfo.timeOfArrival}
|
|
|
+ {orderInfo.userAddress}
|
|
|
</Text>
|
|
|
</Flex>
|
|
|
- )}
|
|
|
-
|
|
|
- <Flex style={styles.info2}>
|
|
|
- <Flex.Item style={styles.address}>
|
|
|
+ <Flex style={styles.info2}>
|
|
|
+ <Flex.Item>
|
|
|
+ <Text fontSize="xs" textAlign="left">
|
|
|
+ 配送骑手
|
|
|
+ </Text>
|
|
|
+ </Flex.Item>
|
|
|
+ <Flex>
|
|
|
+ <Button
|
|
|
+ fontSize="xs"
|
|
|
+ w={100}
|
|
|
+ bg="white"
|
|
|
+ color="gray600"
|
|
|
+ borderColor="brand500"
|
|
|
+ borderWidth={1}
|
|
|
+ rounded={3}
|
|
|
+ onPress={() => {
|
|
|
+ warnning('正在帮您联系骑手');
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 联系骑手
|
|
|
+ </Button>
|
|
|
+ <Text fontSize="xs" ml={20} textAlign="left">
|
|
|
+ 周猩猩
|
|
|
+ </Text>
|
|
|
+ </Flex>
|
|
|
+ </Flex>
|
|
|
+ <Flex style={styles.info2}>
|
|
|
<Text fontSize="xs" textAlign="left">
|
|
|
- 收货地址
|
|
|
+ 订 单 号
|
|
|
</Text>
|
|
|
- </Flex.Item>
|
|
|
- <Text fontSize="xs" textAlign="left">
|
|
|
- {orderInfo.userAddress}
|
|
|
- </Text>
|
|
|
- </Flex>
|
|
|
- <Flex style={styles.info2}>
|
|
|
- <Flex.Item>
|
|
|
- <Text fontSize="xs" textAlign="left">
|
|
|
- 配送骑手
|
|
|
+ <Text fontSize="xs" textAlign="right" ml={10} flex={1}>
|
|
|
+ {orderInfo.id}
|
|
|
</Text>
|
|
|
- </Flex.Item>
|
|
|
- <Flex>
|
|
|
<Button
|
|
|
fontSize="xs"
|
|
|
- w={100}
|
|
|
+ w={62}
|
|
|
bg="white"
|
|
|
color="gray600"
|
|
|
borderColor="brand500"
|
|
|
borderWidth={1}
|
|
|
rounded={3}
|
|
|
onPress={() => {
|
|
|
- warnning('正在帮您联系骑手');
|
|
|
+ Clipboard.setString(orderInfo.id.toString());
|
|
|
+ success('复制成功');
|
|
|
}}
|
|
|
+ ml={5}
|
|
|
>
|
|
|
- 联系骑手
|
|
|
+ 复制
|
|
|
</Button>
|
|
|
- <Text fontSize="xs" ml={20} textAlign="left">
|
|
|
- 周猩猩
|
|
|
- </Text>
|
|
|
</Flex>
|
|
|
- </Flex>
|
|
|
- <Flex style={styles.info2}>
|
|
|
- <Text fontSize="xs" textAlign="left">
|
|
|
- 订 单 号
|
|
|
- </Text>
|
|
|
- <Text fontSize="xs" textAlign="right" ml={10} flex={1}>
|
|
|
- {orderInfo.id}
|
|
|
- </Text>
|
|
|
- <Button
|
|
|
- fontSize="xs"
|
|
|
- w={62}
|
|
|
- bg="white"
|
|
|
- color="gray600"
|
|
|
- borderColor="brand500"
|
|
|
- borderWidth={1}
|
|
|
- rounded={3}
|
|
|
- onPress={() => {
|
|
|
- Clipboard.setString(orderInfo.id.toString());
|
|
|
- success('复制成功');
|
|
|
- }}
|
|
|
- ml={5}
|
|
|
- >
|
|
|
- 复制
|
|
|
- </Button>
|
|
|
- </Flex>
|
|
|
- {payMap.has(orderInfo.payMethod) && (
|
|
|
- <Flex style={styles.info2}>
|
|
|
- <Text fontSize="xs" flex={1}>
|
|
|
- 支付方式
|
|
|
- </Text>
|
|
|
- <Text fontSize="xs" textAlign="left">
|
|
|
- {payMap.get(orderInfo.payMethod).name}
|
|
|
- </Text>
|
|
|
- </Flex>
|
|
|
- )}
|
|
|
+ {payMap.has(orderInfo.payMethod) && (
|
|
|
+ <Flex style={styles.info2}>
|
|
|
+ <Text fontSize="xs" flex={1}>
|
|
|
+ 支付方式
|
|
|
+ </Text>
|
|
|
+ <Text fontSize="xs" textAlign="left">
|
|
|
+ {payMap.get(orderInfo.payMethod).name}
|
|
|
+ </Text>
|
|
|
+ </Flex>
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
</View>
|
|
|
- </View>
|
|
|
+ </Div>
|
|
|
</ScrollView>
|
|
|
- </>
|
|
|
+ </Div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
@@ -435,9 +448,6 @@ const GoodsItem = ({ info, goods }) => {
|
|
|
const styles = StyleSheet.create({
|
|
|
scroll: {
|
|
|
flexGrow: 1,
|
|
|
- paddingHorizontal: 15,
|
|
|
- paddingVertical: 10,
|
|
|
- backgroundColor: '#eee',
|
|
|
},
|
|
|
card: {
|
|
|
borderRadius: 3,
|
