详情页

App.js

@@ -49,8 +49,8 @@ export default function App() {
           index: 0,
           routes: [
             {
-              name: initName,
-              // name: 'MerchantDetail',
+              // name: initName,
+              name: 'MerchantDetail',
             },
           ],
         })

screens/Detail/Center.jsx

@@ -0,0 +1,116 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { StyleSheet, View, Image } from 'react-native';
+import { Flex } from '@ant-design/react-native';
+import { TouchableRipple } from 'react-native-paper';
+import useModel from 'flooks';
+import Detail from './model';
+import Text from '../../components/Text';
+import Chip from '../../components/Chip';
+import Icon from '../../components/SvgIcon';
+
+export default function Center() {
+  const { merchantInfo } = useModel(Detail);
+  const {
+    logo,
+    showName,
+    monthSales,
+    goodNum,
+    badNum,
+    fullReductions,
+    proclamation,
+  } = merchantInfo;
+  return (
+    <View style={styles.main}>
+      <Flex>
+        <Image style={styles.icon} resizeMode="cover" source={{ uri: logo }} />
+        <Flex.Item style={styles.center}>
+          <Text size="s1" bold center>
+            {showName}
+          </Text>
+          <Flex justify="space-around" style={styles.lab}>
+            <Flex>
+              <Icon name="zan" type="primary" width={18} height={18} />
+              <Text size="c1" type="primary">
+                {goodNum || 0}
+              </Text>
+            </Flex>
+            <Flex style={styles.text}>
+              <Icon name="zan" Flip color="#000" width={18} height={18} />
+              <Text size="c1" type="info">
+                {badNum || 0}
+              </Text>
+            </Flex>
+            <Flex style={styles.text}>
+              <Text size="c1" type="info">
+                月售
+                {monthSales}
+              </Text>
+            </Flex>
+          </Flex>
+        </Flex.Item>
+        <TouchableRipple
+          onPress={() => {
+            console.log('like');
+          }}
+          style={styles.like}
+        >
+          <Icon name="like" width={15} height={15} color="#FF0000" />
+        </TouchableRipple>
+      </Flex>
+
+      {fullReductions && (
+        <Flex style={styles.chips}>
+          {fullReductions.map((item) => {
+            return (
+              <Chip size="mini" key={item.id} outline color="#FF0000">
+                满{item.fullAmount}减{item.minusAmount}
+              </Chip>
+            );
+          })}
+        </Flex>
+      )}
+      <Text size="c1" color="#787878" style={styles.pro} center>
+        {proclamation}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  main: {
+    marginHorizontal: 15,
+    marginTop: -20,
+    backgroundColor: '#fff',
+    borderRadius: 3,
+    padding: 10,
+  },
+  icon: {
+    width: 53,
+    height: 53,
+    borderRadius: 3,
+  },
+  text: {
+    marginLeft: 5,
+  },
+  like: {
+    padding: 5,
+    alignSelf: 'flex-start',
+  },
+  pro: {
+    marginTop: 3,
+  },
+  center: {
+    alignItems: 'center',
+    paddingRight: 28,
+  },
+  lab: {
+    minWidth: 180,
+  },
+  chips: {
+    maxWidth: '80%',
+    overflow: 'hidden',
+    alignSelf: 'center',
+    marginTop: 5,
+  },
+});

screens/Detail/Comment.jsx

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

screens/Detail/Header.jsx

@@ -10,7 +10,7 @@ import { goBack } from '../../navigation/RootNavigation';
 export default function Header() {
   const { merchantInfo } = useModel(Detail);
 
-  const { logo } = merchantInfo;
+  const { banner } = merchantInfo;
   return (
     <>
       <StatusBar backgroundColor="transparent" style="light" translucent />
@@ -19,7 +19,7 @@ export default function Header() {
           height: 118 + Constants.statusBarHeight,
         }}
         resizeMode="cover"
-        source={{ uri: logo }}
+        source={{ uri: banner }}
       >
         <Appbar.Header
           dark

screens/Detail/MerchantDetailScreen.jsx

@@ -1,11 +1,23 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
-import { StyleSheet, View, Image } from 'react-native';
+import { StyleSheet, View, Image, Dimensions } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import Icon from 'react-native-vector-icons/Ionicons';
 import { useRoute } from '@react-navigation/native';
 import useModel from 'flooks';
-import Detail from './model';
+import Detail from './model'; // detail模块通用方法
 import Text from '../../components/Text';
+
 import Header from './Header';
+import Center from './Center';
+
+import Order from './Order';
+import Comment from './Comment';
+
+const Tab = createMaterialTopTabNavigator();
+
+const { height, width } = Dimensions.get('window');
 
 export default function MerchantDetail() {
   const route = useRoute();
@@ -22,18 +34,56 @@ export default function MerchantDetail() {
 
   return (
     <>
-      <Header />
-      <View>
-        <Image style={styles.icon} resizeMode="cover" source={{ uri: logo }} />
-      </View>
+      <ScrollView>
+        <Header />
+        <Center />
+        <Tab.Navigator
+          tabBarOptions={{
+            activeTintColor: '#FFC750',
+            inactiveTintColor: '#000',
+            indicatorStyle: {
+              backgroundColor: '#FFC750',
+              height: 0,
+            },
+            labelStyle: {
+              fontSize: 16,
+            },
+            style: {
+              backgroundColor: 'transparent',
+              height: 50,
+              elevation: 0,
+              shadowOffset: {
+                width: 0,
+                height: 0,
+              },
+              shadowOpacity: 0,
+              shadowRadius: 0,
+              borderBottomWidth: 1,
+              borderColor: '#eee',
+            },
+          }}
+          backBehavior="initialRoute"
+          initialRouteName="order"
+          style={{ height }}
+        >
+          <Tab.Screen
+            name="order"
+            options={{
+              title: '点餐',
+            }}
+            component={Order}
+          />
+          <Tab.Screen
+            name="comment"
+            options={{
+              title: '评价',
+            }}
+            component={Comment}
+          />
+        </Tab.Navigator>
+      </ScrollView>
     </>
   );
 }
 
-const styles = StyleSheet.create({
-  icon: {
-    width: 53,
-    height: 53,
-    borderRadius: 3,
-  },
-});
+const styles = StyleSheet.create({});

screens/Detail/Order.jsx

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

screens/Detail/model.js

@@ -6,7 +6,7 @@ const DetailModel = (now) => ({
   merchantInfo: {},
   init(id) {
     now({ id, merchantInfo: {} });
-    return request.get(`/merchant/get/${id}`).then((res) => {
+    return request.get(`/merchant/getDTO/${id}`).then((res) => {
       now({
         merchantInfo: res,
       });

screens/Main/Home/List.jsx

@@ -41,8 +41,8 @@ export default function List() {
   };
 
   const MerchantComList = (_list) => {
-    return _list.map((item) => {
-      return <MerchantCom key={item.id} info={item} />;
+    return _list.map((item, index) => {
+      return <MerchantCom key={index} info={item} />;
     });
   };
 

screens/Main/Home/MerchantCom.jsx

@@ -1,8 +1,10 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { StyleSheet, View, Image } from 'react-native';
-import { Flex, WhiteSpace, WingBlank, Badge } from '@ant-design/react-native';
+import { Flex } from '@ant-design/react-native';
+import { TouchableRipple } from 'react-native-paper';
 import { useCreation } from '@umijs/hooks';
+import { useNavigation } from '@react-navigation/native';
 import Text from '../../../components/Text';
 import Chip from '../../../components/Chip';
 import Icon from '../../../components/SvgIcon';
@@ -12,6 +14,8 @@ import Icon from '../../../components/SvgIcon';
 export default function MerchantCom(props) {
   const { info } = props;
 
+  const navigation = useNavigation();
+
   const {
     showName,
     logo,
@@ -23,6 +27,8 @@ export default function MerchantCom(props) {
     monthSales,
     goodNum,
     badNum,
+    preparationTime,
+    mid,
   } = info;
 
   const tags = useCreation(() => {
@@ -51,74 +57,83 @@ export default function MerchantCom(props) {
   }, [distance]);
 
   return (
-    <Flex align="start" style={styles.merchant}>
-      <Image style={styles.image} resizeMode="cover" source={{ uri: logo }} />
-      <Flex.Item style={styles.main}>
-        <Text size="s1" bold>
-          {showName}
-        </Text>
-        {tags.length > 0 && (
-          <Flex>
-            {tags.map((item, index) => {
-              return <Chip key={index}>{item.name}</Chip>;
-            })}
-          </Flex>
-        )}
+    <TouchableRipple
+      onPress={() => {
+        navigation.navigate('MerchantDetail', {
+          merchantId: mid,
+        });
+      }}
+    >
+      <Flex align="start" style={styles.merchant}>
+        <Image style={styles.image} resizeMode="cover" source={{ uri: logo }} />
+        <Flex.Item style={styles.main}>
+          <Text size="s1" bold>
+            {showName}
+          </Text>
+          {tags.length > 0 && (
+            <Flex>
+              {tags.map((item, index) => {
+                return <Chip key={index}>{item.name}</Chip>;
+              })}
+            </Flex>
+          )}
 
-        <Flex>
           <Flex>
-            <Icon name="zan" type="primary" width={18} height={18} />
-            <Text size="c1" type="primary">
-              {goodNum || 0}
-            </Text>
+            <Flex>
+              <Icon name="zan" type="primary" width={18} height={18} />
+              <Text size="c1" type="primary">
+                {goodNum || 0}
+              </Text>
+            </Flex>
+            <Flex style={styles.text}>
+              <Icon name="zan" Flip color="#000" width={18} height={18} />
+              <Text size="c1" type="info">
+                {badNum || 0}
+              </Text>
+            </Flex>
+            <Flex style={styles.text}>
+              <Text size="c1" type="info">
+                月售
+                {monthSales}
+              </Text>
+            </Flex>
           </Flex>
-          <Flex style={styles.text}>
-            <Icon name="zan" Flip color="#000" width={18} height={18} />
+          <Flex>
             <Text size="c1" type="info">
-              {badNum || 0}
+              起送$
+              {startingAmount || 0}
             </Text>
-          </Flex>
-          <Flex style={styles.text}>
+            <Flex.Item style={styles.text}>
+              <Text size="c1" type="info">
+                配送$ 10
+              </Text>
+            </Flex.Item>
             <Text size="c1" type="info">
-              月售
-              {monthSales}
+              {preparationTime || 60}
+              分钟
             </Text>
+            <View style={styles.text}>
+              <Text size="c1" type="info">
+                {long}
+              </Text>
+            </View>
           </Flex>
-        </Flex>
-        <Flex>
-          <Text size="c1" type="info">
-            起送$
-            {startingAmount || 0}
-          </Text>
-          <Flex.Item style={styles.text}>
-            <Text size="c1" type="info">
-              配送$ 10
-            </Text>
-          </Flex.Item>
-          <Text size="c1" type="info">
-            20分钟
-          </Text>
-          <View style={styles.text}>
-            <Text size="c1" type="info">
-              {long}
-            </Text>
-          </View>
-        </Flex>
-        <Flex style={styles.label2}>
-          <Chip size="mini" color="#FFE3B9" fontColor="#FF0000">
-            “喜欢您来金拱门喜欢您来金拱门”
-          </Chip>
-          <Chip size="mini" color="#FFE3B9" fontColor="#FF0000">
-            “喜欢您来金拱门喜欢您来金拱门”
-          </Chip>
-        </Flex>
-        <Flex style={styles.label2} wrap="wrap">
-          <Chip size="mini" outline color="#FF0000">
-            12减5
-          </Chip>
-        </Flex>
-      </Flex.Item>
-    </Flex>
+          <Flex style={styles.label2}>
+            <Chip size="mini" color="#FFE3B9" fontColor="#FF0000">
+              “喜欢您来金拱门喜欢您来金拱门”
+            </Chip>
+            <Chip size="mini" color="#FFE3B9" fontColor="#FF0000">
+              “喜欢您来金拱门喜欢您来金拱门”
+            </Chip>
+          </Flex>
+          <Flex style={styles.label2} wrap="wrap">
+            <Chip size="mini" outline color="#FF0000">
+              12减5
+            </Chip>
+          </Flex>
+        </Flex.Item>
+      </Flex>
+    </TouchableRipple>
   );
 }