0618

App.js

@@ -50,7 +50,8 @@ export default function App() {
           routes: [
             {
               // name: initName,
-              name: 'MerchantDetail',
+              // name: 'MerchantDetail',
+              name: 'OrderDetail',
             },
           ],
         })

components/Button.js

@@ -59,7 +59,7 @@ function MyButton(props) {
   }
 
   if (outline) {
-    mode = 'outline';
+    mode = 'outlined';
     dark = false;
   }
   if (text) {

navigation/BaseNavigator.jsx

@@ -3,6 +3,8 @@ import Login from '../screens/Login';
 import Detail from '../screens/Detail';
 import InitAppScreen from '../screens/InitAppScreen';
 
+import OrderDetail from '../screens/Order/OrderDetail';
+
 export default function BasicScreens(Screen) {
   return (
     <>
@@ -10,6 +12,12 @@ export default function BasicScreens(Screen) {
       {/* 登录路由 */}
       {Login(Screen)}
       {Detail(Screen)}
+
+      <Screen
+        name="OrderDetail"
+        initialParams={{ orderId: 189 }}
+        component={OrderDetail}
+      />
     </>
   );
 }

navigation/BottomTabNavigator.jsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import HomeScreen from '../screens/Main/HomeScreen';
-import LinksScreen from '../screens/Main/LinksScreen';
+import OrderScreen from '../screens/Order/OrderScreen';
+import UserScreen from '../screens/User/UserScreen';
 import Icon from '../components/SvgIcon';
 import Text from '../components/Text';
 
@@ -9,7 +10,7 @@ const BottomTab = createBottomTabNavigator();
 
 export default function BottomTabNavigator() {
   return (
-    <BottomTab.Navigator initialRouteName="Home">
+    <BottomTab.Navigator initialRouteName="Order">
       <BottomTab.Screen
         name="Home"
         component={HomeScreen}
@@ -30,8 +31,8 @@ export default function BottomTabNavigator() {
         }}
       />
       <BottomTab.Screen
-        name="Links"
-        component={LinksScreen}
+        name="Order"
+        component={OrderScreen}
         options={{
           title: ({ focused }) => (
             <Text size="c2" bold type={focused ? 'primary' : 'info'}>
@@ -43,9 +44,9 @@ export default function BottomTabNavigator() {
           ),
         }}
       />
-      {/* <BottomTab.Screen
+      <BottomTab.Screen
         name="User"
-        component={LinksScreen}
+        component={UserScreen}
         options={{
           title: ({ focused }) => (
             <Text size="c2" bold type={focused ? 'primary' : 'info'}>
@@ -60,7 +61,7 @@ export default function BottomTabNavigator() {
             />
           ),
         }}
-      /> */}
+      />
     </BottomTab.Navigator>
   );
 }

screens/Main/Home/model.js

@@ -24,7 +24,7 @@ const HomeModel = (now) => ({
     });
     return request
       .get('/merchant/index', {
-        params: { latitude: '', longitude: '' },
+        params: { latitude: '1', longitude: '1' },
       })
       .then((res) => {
         now({

screens/Order/Header.js

@@ -0,0 +1,19 @@
+/* eslint-disable react/style-prop-object */
+import * as React from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { Appbar } from 'react-native-paper';
+
+export default function Header({ title }) {
+  return (
+    <>
+      <StatusBar backgroundColor="#FFC21C" style="light" translucent />
+
+      <Appbar.Header dark>
+        <Appbar.Content
+          title={title || '我的订单'}
+          titleStyle={{ textAlign: 'center', fontSize: 16 }}
+        />
+      </Appbar.Header>
+    </>
+  );
+}

screens/Order/OrderDetail.jsx

@@ -0,0 +1,52 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { StyleSheet, View, FlatList, Image } from 'react-native';
+import { Flex } from '@ant-design/react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+
+import Header from './Header'; // 头部
+
+import Text from '../../components/Text';
+import Button from '../../components/Button';
+
+export default function OrderScreen() {
+  const [orderList, setorderList] = React.useState([{ id: 1, name: '订单1' }]);
+
+  return (
+    <>
+      <Header title="订单已送达" />
+      <ScrollView contentContainerStyle={styles.scroll}>
+        <View style={[styles.card]}>
+          <Flex>
+            <Text size="s1">感谢您使用叮咚，期待您再次使用！</Text>
+          </Flex>
+          <Flex justify="between">
+            <Button outline size="small" fontColor="#000">
+              联系商家
+            </Button>
+            <Button outline size="small" fontColor="#000">
+              联系商家
+            </Button>
+            <Button outline size="small" fontColor="#000">
+              联系商家
+            </Button>
+          </Flex>
+        </View>
+      </ScrollView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    flexGrow: 1,
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+  },
+  card: {
+    borderRadius: 3,
+    backgroundColor: '#fff',
+    marginBottom: 5,
+    padding: 15,
+  },
+});

screens/Order/OrderScreen.jsx

@@ -0,0 +1,100 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { StyleSheet, View, FlatList, Image } from 'react-native';
+import { Flex } from '@ant-design/react-native';
+
+import Header from './Header'; // 头部
+
+import Text from '../../components/Text';
+import Button from '../../components/Button';
+
+export default function OrderScreen() {
+  const [orderList, setorderList] = React.useState([{ id: 1, name: '订单1' }]);
+
+  return (
+    <>
+      <Header />
+
+      <FlatList
+        contentContainerStyle={styles.list}
+        data={orderList}
+        renderItem={({ item }) => <Item name={item.name} />}
+        keyExtractor={(item) => item.id}
+      />
+    </>
+  );
+}
+
+// 订单组件
+function Item({ name }) {
+  return (
+    <View style={styles.item}>
+      <Flex align="start">
+        <Image
+          style={styles.icon}
+          resizeMode="cover"
+          source={{ uri: 'https://picsum.photos/700' }}
+        />
+        <Flex.Item style={styles.main}>
+          <Flex>
+            <Flex.Item>
+              <Text size="s1" bold>
+                麦当劳
+              </Text>
+            </Flex.Item>
+            <Text size="c2">预计14:26送达</Text>
+          </Flex>
+          <Text size="c2" style={{ marginTop: 10 }}>
+            订单时间:2019-05-21
+          </Text>
+          <Flex style={styles.orderDetail}>
+            <Text size="c1">订单商品</Text>
+            <Flex.Item>
+              <Text size="c2">大鸡腿等3件</Text>
+            </Flex.Item>
+            <Text size="c2">¥9999.99</Text>
+          </Flex>
+        </Flex.Item>
+      </Flex>
+      <Image
+        style={{ height: 200 }}
+        resizeMode="cover"
+        source={{ uri: 'https://picsum.photos/700' }}
+      />
+      <Flex justify="end" style={styles.btns}>
+        <Button outline size="small" fontColor="#000">
+          联系商家
+        </Button>
+      </Flex>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  item: {
+    paddingVertical: 20,
+    paddingHorizontal: 10,
+    backgroundColor: '#fff',
+    borderRadius: 3,
+  },
+  list: {
+    padding: 15,
+  },
+  icon: {
+    width: 53,
+    height: 53,
+    borderRadius: 3,
+  },
+  main: {
+    marginLeft: 5,
+  },
+  orderDetail: {
+    paddingVertical: 10,
+    borderTopWidth: 1,
+    borderColor: '#E5E5E5',
+    marginTop: 10,
+  },
+  btns: {
+    paddingTop: 15,
+  },
+});

screens/User/UserScreen.jsx

@@ -0,0 +1,9 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+export default function UserScreen() {
+  return <View />;
+}
+
+const styles = StyleSheet.create({});