0616

components/DetailHeader.js

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { Platform } from 'react-native';
-import { StatusBar } from 'expo-status-bar';
-import Constants from 'expo-constants';
-import { Appbar } from 'react-native-paper';
-import { goBack } from '../navigation/RootNavigation';
-
-export default function Header() {
-  return (
-    <>
-      {Platform.OS !== 'ios' && <StatusBar hidden translucent />}
-
-      <Appbar.Header
-        dark
-        statusBarHeight={Platform.OS === 'ios' ? Constants.statusBarHeight : 0}
-      >
-        <Appbar.BackAction onPress={goBack} />
-        <Appbar.Content
-          title="忘记密码"
-          titleStyle={{ textAlign: 'center', fontSize: 16 }}
-        />
-        <Appbar.Action icon="dots-vertical" />
-      </Appbar.Header>
-    </>
-  );
-}

components/Header.js

@@ -8,12 +8,9 @@ import { goBack } from '../navigation/RootNavigation';
 export default function Header() {
   return (
     <>
-      <StatusBar backgroundColor="#FFC21C" translucent={false} />
+      <StatusBar backgroundColor="#FFC21C" style="light" translucent />
 
-      <Appbar.Header
-        dark
-        statusBarHeight={Platform.OS === 'ios' ? Constants.statusBarHeight : 0}
-      >
+      <Appbar.Header dark>
         <Appbar.BackAction onPress={goBack} />
         <Appbar.Content
           title="忘记密码"

components/HomeHeader.js

@@ -21,7 +21,7 @@ export default function Header() {
 
   return (
     <>
-      <StatusBar backgroundColor="#fff" translucent={false} />
+      <StatusBar backgroundColor="transparent" style="dark" translucent />
 
       <Appbar.Header
         theme={{ colors: { primary: '#fff' } }}
@@ -48,7 +48,7 @@ export default function Header() {
             }}
             title={local ? TchangeToChinese : TchangeToth}
           />
-          <Menu.Item onPress={() => {}} title="版本06.04.0.1" />
+          <Menu.Item onPress={() => {}} title="版本06.16.1" />
         </Menu>
       </Appbar.Header>
     </>

screens/Detail/Header.jsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { ImageBackground, StyleSheet } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import Constants from 'expo-constants';
+import { Appbar } from 'react-native-paper';
+import useModel from 'flooks';
+import Detail from './model';
+import { goBack } from '../../navigation/RootNavigation';
+
+export default function Header() {
+  const { merchantInfo } = useModel(Detail);
+
+  const { logo } = merchantInfo;
+  return (
+    <>
+      <StatusBar backgroundColor="transparent" style="light" translucent />
+      <ImageBackground
+        style={{
+          height: 118 + Constants.statusBarHeight,
+        }}
+        resizeMode="cover"
+        source={{ uri: logo }}
+      >
+        <Appbar.Header
+          dark
+          theme={{ colors: { primary: 'transparent' } }}
+          style={styles.header}
+        >
+          <Appbar.BackAction onPress={goBack} />
+          <Appbar.Content />
+          <Appbar.Action icon="magnify" />
+          <Appbar.Action icon="share-variant" />
+        </Appbar.Header>
+      </ImageBackground>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    elevation: 0,
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+    shadowOpacity: 0,
+  },
+});

screens/Detail/MerchantDetailScreen.jsx

@@ -1,16 +1,39 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, Image } from 'react-native';
+import { useRoute } from '@react-navigation/native';
+import useModel from 'flooks';
+import Detail from './model';
 import Text from '../../components/Text';
-import DetailHeader from '../../components/DetailHeader';
+import Header from './Header';
 
 export default function MerchantDetail() {
+  const route = useRoute();
+  const { params } = route;
+
+  const { init, merchantInfo } = useModel(Detail);
+
+  const { logo } = merchantInfo;
+  React.useEffect(() => {
+    if (params.merchantId) {
+      init(params.merchantId);
+    }
+  }, [params]);
+
   return (
     <>
-      <DetailHeader />
-      <Text>1122</Text>
+      <Header />
+      <View>
+        <Image style={styles.icon} resizeMode="cover" source={{ uri: logo }} />
+      </View>
     </>
   );
 }
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+  icon: {
+    width: 53,
+    height: 53,
+    borderRadius: 3,
+  },
+});

screens/Detail/model.js

@@ -0,0 +1,17 @@
+import request from '../../Utils/RequestUtils';
+import Toast from '../../flooks/Toast';
+
+const DetailModel = (now) => ({
+  id: 0,
+  merchantInfo: {},
+  init(id) {
+    now({ id, merchantInfo: {} });
+    return request.get(`/merchant/get/${id}`).then((res) => {
+      now({
+        merchantInfo: res,
+      });
+    });
+  },
+});
+
+export default DetailModel;

screens/Main/Home/List.jsx

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

screens/Main/Home/MerchantCom.jsx

@@ -2,50 +2,93 @@ 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 { useCreation } from '@umijs/hooks';
 import Text from '../../../components/Text';
 import Chip from '../../../components/Chip';
 import Icon from '../../../components/SvgIcon';
 
 // 首页商家组件
 
-export default function MerchantCom() {
+export default function MerchantCom(props) {
+  const { info } = props;
+
+  const {
+    showName,
+    logo,
+    distance,
+    firstOrder,
+    category,
+    merchantNature,
+    startingAmount,
+    monthSales,
+    goodNum,
+    badNum,
+  } = info;
+
+  const tags = useCreation(() => {
+    let list = [];
+    if (merchantNature) {
+      list.push({
+        name: merchantNature.name,
+      });
+    }
+    if (category) {
+      list = list.concat(
+        category.map((item) => {
+          return { name: item.name };
+        })
+      );
+    }
+    return list;
+  }, [category, merchantNature]);
+
+  const long = useCreation(() => {
+    if (distance < 1000) {
+      return `${distance}米`;
+    } else {
+      return `${(distance / 1000).toFixed(1)}km`;
+    }
+  }, [distance]);
+
   return (
     <Flex align="start" style={styles.merchant}>
-      <Image
-        style={styles.image}
-        resizeMode="cover"
-        source={{ uri: 'https://picsum.photos/700' }}
-      />
+      <Image style={styles.image} resizeMode="cover" source={{ uri: logo }} />
       <Flex.Item style={styles.main}>
         <Text size="s1" bold>
-          111
+          {showName}
         </Text>
-        <Flex>
-          <Chip>连锁品牌</Chip>
-          <Chip>百年老店</Chip>
-        </Flex>
+        {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">
-              9999+
+              {goodNum || 0}
             </Text>
           </Flex>
           <Flex style={styles.text}>
             <Icon name="zan" Flip color="#000" width={18} height={18} />
             <Text size="c1" type="info">
-              9999+
+              {badNum || 0}
             </Text>
           </Flex>
           <Flex style={styles.text}>
             <Text size="c1" type="info">
-              月售9999+
+              月售
+              {monthSales}
             </Text>
           </Flex>
         </Flex>
         <Flex>
           <Text size="c1" type="info">
-            起送$ 10
+            起送$
+            {startingAmount || 0}
           </Text>
           <Flex.Item style={styles.text}>
             <Text size="c1" type="info">
@@ -57,7 +100,7 @@ export default function MerchantCom() {
           </Text>
           <View style={styles.text}>
             <Text size="c1" type="info">
-              4.2km
+              {long}
             </Text>
           </View>
         </Flex>

screens/Main/Home/model.js

@@ -51,9 +51,9 @@ const HomeModel = (now) => ({
         params: {
           page,
           size,
-          latitude: '',
-          longitude: '',
-          popularTag: '首单立减',
+          latitude: '1',
+          longitude: '1',
+          // popularTag: '首单立减',
         },
       })
       .then((res) => {