首页筛选

Utils/ColorUtils.js

@@ -1,10 +1,10 @@
 const mainColors = [
-  '#22AC38',
-  '#A84200',
-  '#FF5A5A',
-  '#F384EA',
-  '#EC6941',
-  '#00A0E9',
+  'green500',
+  'red500',
+  'teal600',
+  'brand800',
+  'teal300',
+  'blue400',
 ];
 
 function getRndInteger(min, max) {

Utils/MerchantUtils.js

@@ -1,4 +1,4 @@
-const popularTagMap = new Map([
+const sortMap = new Map([
   [
     '',
     {
@@ -9,31 +9,31 @@ const popularTagMap = new Map([
   [
     '1',
     {
-      name: '首单立减',
+      name: '好评优先',
     },
   ],
   [
     '2',
     {
-      name: '满减优惠',
+      name: '起送费最低',
     },
   ],
   [
     '3',
     {
-      name: '折扣商家',
+      name: '配送最快',
     },
   ],
   [
     '4',
     {
-      name: '下单返红包',
+      name: '配送费最低',
     },
   ],
   [
     '5',
     {
-      name: '可用红包',
+      name: '人均最低',
     },
   ],
   [
@@ -72,7 +72,12 @@ const tagMap = new Map([
   ],
 ]);
 
+const filterMap = new Map([
+  ['1', { name: '首单立减' }],
+  ['2', { name: '满减优惠' }],
+  ['3', { name: '折扣商家' }],
+  ['4', { name: '下单返红包' }],
+  ['5', { name: '可用红包' }],
+]);
 
-
-
-export { popularTagMap, tagMap };
+export { sortMap, tagMap, filterMap };

navigation/BaseNavigator.jsx

@@ -39,6 +39,7 @@ import AddressScreen from '../screens/Address/AddressScreen';
 import HomeAddress from '../screens/Main/AddressScreen';
 // 首页新店推荐
 import MerchantsList from '../screens/Main/MerchantsListScreen';
+import Search from '../screens/Main/SearchScreen';
 // 搜索地图
 import SearchMap from '../screens/Map/SearchMapScreen';
 
@@ -123,6 +124,7 @@ export default function BasicScreens(Screen) {
       <Screen name="HomeAddress" component={HomeAddress} />
       {/* 新店推荐 */}
       <Screen name="MerchantsList" component={MerchantsList} />
+      <Screen name="Search" component={Search} />
       <Screen name="SearchMap" component={SearchMap} />
       <Screen name="MapScreen" component={MapScreen} />
       <Screen name="MapMarkScreen" component={MapMarkScreen} />

package-lock.json

@@ -3367,6 +3367,11 @@
       "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-5.9.2.tgz",
       "integrity": "sha512-YPN6Qi9Sf64GlE3muLi4u4p4LaFP/65PTS0xssiGEaBAwSmZoUhzihhW1AptNe66ZQK9PxXfKIJDiLnYveK1aw=="
     },
+    "@react-native-community/slider": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-3.0.0.tgz",
+      "integrity": "sha512-deNc3JHBHz24YN+0DTAocXfrYFIFc1DvsIriMJSsJlR/MvsLzoq2+qwaEN+0/LJ37pstv85wZWY0pNugk4e41g=="
+    },
     "@react-native-community/viewpager": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@react-native-community/viewpager/-/viewpager-1.1.7.tgz",
@@ -4981,9 +4986,9 @@
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
     },
     "commons-validator-js": {
-      "version": "1.0.1615",
-      "resolved": "https://registry.npmjs.org/commons-validator-js/-/commons-validator-js-1.0.1615.tgz",
-      "integrity": "sha512-I6xw2TLbuMeo1W7HHnN2VPkYXni7qHyLbg/zgp+xgeyORkKD4oBprO/r7F1BEPb94PXkuwj7lTTaeFN7uqPT0g==",
+      "version": "1.0.1622",
+      "resolved": "https://registry.npmjs.org/commons-validator-js/-/commons-validator-js-1.0.1622.tgz",
+      "integrity": "sha512-w68Tc6fdgPLdY8TJz3KgzHgRL3Lmb2Hu7jM2zSOCvRh5YVbCh5BcKrgfpmadFlFgAtGR2ymMavFiVWpCxJHBgg==",
       "requires": {
         "bower-auto-release": "^1.1.357",
         "lodash.includes": "^4.3.0",
@@ -14207,6 +14212,11 @@
         "fbjs": "^1.0.0"
       },
       "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+        },
         "fbjs": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-1.0.0.tgz",
@@ -14220,13 +14230,6 @@
             "promise": "^7.1.1",
             "setimmediate": "^1.0.5",
             "ua-parser-js": "^0.7.18"
-          },
-          "dependencies": {
-            "core-js": {
-              "version": "2.6.11",
-              "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-              "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
-            }
           }
         }
       }

package.json

@@ -17,9 +17,9 @@
     "@babel/polyfill": "^7.10.1",
     "@expo/vector-icons": "^10.0.0",
     "@react-native-community/blur": "^3.6.0",
-    "@react-native-community/datetimepicker": "2.4.0",
+    "@react-native-community/datetimepicker": "^2.4.0",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-native-community/netinfo": "5.9.2",
+    "@react-native-community/netinfo": "^5.9.2",
     "@react-navigation/bottom-tabs": "^5.3.1",
     "@react-navigation/material-top-tabs": "^5.2.9",
     "@react-navigation/native": "^5.2.1",
@@ -56,21 +56,22 @@
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz",
     "react-native-animatable": "^1.3.3",
     "react-native-animation-hooks": "^1.0.1",
-    "react-native-gesture-handler": "~1.6.0",
+    "react-native-gesture-handler": "^1.6.1",
     "react-native-magnus": "^1.0.39",
     "react-native-modal": "^11.5.6",
     "react-native-paper": "^3.10.1",
-    "react-native-reanimated": "~1.9.0",
+    "react-native-reanimated": "^1.9.0",
     "react-native-safe-area-context": "~3.0.7",
     "react-native-screens": "~2.9.0",
     "react-native-sticky-parallax-header": "^0.2.1",
     "react-native-svg": "12.1.0",
     "react-native-tab-view": "^2.14.2",
-    "react-native-ui-lib": "^5.8.1",
+    "react-native-ui-lib": "^5.10.2",
     "react-native-vector-icons": "^6.6.0",
     "react-native-web": "~0.11.7",
+    "react-native-webview": "9.4.0",
     "umi-request": "^1.3.5",
-    "react-native-webview": "9.4.0"
+    "@react-native-community/slider": "3.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.1",

screens/Detail/SelectSpecification.jsx

@@ -140,12 +140,12 @@ export default function SelectSpecification() {
             return (
               <Div key={item.id} py={20}>
                 <Text>{item.name}</Text>
-                <Div row flexWrap="wrap" justifyContent="space-between">
+                <Div row flexWrap="wrap">
                   {item.children.map((child) => {
                     const choosed = selectClassifyIds.indexOf(child.id) !== -1;
 
                     return (
-                      <Div key={child.id} w="32%" mt={5}>
+                      <Div key={child.id} w="33.33%" px={5} mt={5}>
                         <Button
                           rounded="xs"
                           bg={choosed ? 'brand200' : 'gray200'}

screens/Main/Home/Filter.jsx

@@ -0,0 +1,186 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { Animated, Dimensions } from 'react-native';
+import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
+import Slider from '@react-native-community/slider';
+import { ScrollView } from 'react-native-gesture-handler';
+import { useSet } from '@umijs/hooks';
+import { useAnimation } from 'react-native-animation-hooks';
+import { filterMap, tagMap } from '../../../Utils/MerchantUtils';
+import { accMul } from '../../../Utils/NumberUtils';
+
+export default function Filter({
+  show,
+  merchantNatureList,
+  filters,
+  tags,
+  natureId,
+  endAmount,
+  clear,
+  submit,
+}) {
+  const filterHeight = useAnimation({
+    type: 'timing',
+    initialValue: 0,
+    duration: 100,
+    toValue: show ? Dimensions.get('window').height * 0.6 : 0,
+  });
+
+  const [chooseFilter, setChooseFilter] = React.useState(new Set());
+  const [chooseTag, setChooseTag] = React.useState('');
+  const [chooseNature, setChooseNature] = React.useState('');
+  const [sliderVal, setsliderVal] = React.useState(200);
+  const [defaultVal, setdefaultVal] = React.useState(200);
+
+  React.useEffect(() => {
+    if (show) {
+      setChooseFilter(new Set(filters ? filters.split(',') : []));
+      setChooseTag(tags || '');
+      setChooseNature(natureId || '');
+      setsliderVal(endAmount || 200);
+      setdefaultVal(endAmount || 200);
+    }
+  }, [show]);
+
+  return (
+    <>
+      <Animated.View
+        style={{
+          height: filterHeight,
+          overflow: 'hidden',
+          backgroundColor: '#fff',
+        }}
+      >
+        <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+          <Div p={10}>
+            <Text fontSize="xs" color="gray300">
+              优惠活动
+            </Text>
+
+            <Div row flexWrap="wrap" py={5}>
+              {[...filterMap.keys()].map((item, index) => {
+                const choose = chooseFilter.has(item);
+                return (
+                  <Div key={index} w="33%" p={5}>
+                    <Button
+                      fontSize="xs"
+                      color={choose ? 'brand600' : 'gray300'}
+                      bg={choose ? 'brand200' : 'gray200'}
+                      block
+                      onPress={() => {
+                        let set = new Set([...chooseFilter]);
+                        if (choose) {
+                          set.delete(item);
+                        } else {
+                          set.add(item);
+                        }
+                        setChooseFilter(set);
+                      }}
+                    >
+                      {filterMap.get(item).name}
+                    </Button>
+                  </Div>
+                );
+              })}
+            </Div>
+            <Div py={5}>
+              <Text fontSize="xs" color="gray300">
+                商家标签
+              </Text>
+
+              <Div row flexWrap="wrap" py={5}>
+                {[...tagMap.keys()].map((item, index) => {
+                  const choose = chooseTag === item;
+                  return (
+                    <Div key={index} w="33%" p={5}>
+                      <Button
+                        fontSize="xs"
+                        color={choose ? 'brand600' : 'gray300'}
+                        bg={choose ? 'brand200' : 'gray200'}
+                        block
+                        onPress={() => {
+                          if (choose) {
+                            setChooseTag('');
+                          } else {
+                            setChooseTag(item);
+                          }
+                        }}
+                      >
+                        {tagMap.get(item).name}
+                      </Button>
+                    </Div>
+                  );
+                })}
+                {merchantNatureList.map((item, index) => {
+                  const choose = chooseNature === item.id;
+                  return (
+                    <Div key={index} w="33%" p={5}>
+                      <Button
+                        fontSize="xs"
+                        color={choose ? 'brand600' : 'gray300'}
+                        bg={choose ? 'brand200' : 'gray200'}
+                        block
+                        onPress={() => {
+                          if (choose) {
+                            setChooseNature('');
+                          } else {
+                            setChooseNature(item.id);
+                          }
+                        }}
+                      >
+                        {item.name}
+                      </Button>
+                    </Div>
+                  );
+                })}
+              </Div>
+            </Div>
+            <Div py={5}>
+              <Text fontSize="xs" color="gray300">
+                人均消费
+              </Text>
+              <Div row py={10}>
+                <Text fontSize="sm" flex={1}>
+                  ¥0
+                </Text>
+                <Text fontSize="sm">¥{sliderVal}</Text>
+              </Div>
+              <Slider
+                style={{ height: 40 }}
+                minimumValue={0}
+                maximumValue={200}
+                minimumTrackTintColor="#FFB11E"
+                maximumTrackTintColor="#EEEEEE"
+                thumbTintColor="#FFB11E"
+                value={defaultVal}
+                onValueChange={(val) => {
+                  setsliderVal(Math.ceil(val));
+                }}
+              />
+            </Div>
+          </Div>
+        </ScrollView>
+        <Div row borderTopWidth={1} borderColor="gray200">
+          <Button flex={1} bg="white" color="gray300" onPress={clear}>
+            清空
+          </Button>
+          <Button
+            flex={1}
+            bg="brand500"
+            rounded="none"
+            onPress={() => {
+              submit(
+                [...chooseFilter].join(','),
+                chooseTag,
+                chooseNature,
+                sliderVal
+              );
+            }}
+          >
+            查看
+          </Button>
+        </Div>
+      </Animated.View>
+    </>
+  );
+}

screens/Main/Home/ListTop.jsx

@@ -1,23 +1,48 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
-import { StyleSheet, Animated, UIManager, findNodeHandle } from 'react-native';
-import Constants from 'expo-constants';
+import { Animated, Dimensions } from 'react-native';
 import { Div, Button, Text, Icon } from 'react-native-magnus';
-import { Menu, Portal } from 'react-native-paper';
-import { useBoolean, useDebounceFn, useCreation } from '@umijs/hooks';
+import { useBoolean, useCreation } from '@umijs/hooks';
 import { useAnimation } from 'react-native-animation-hooks';
 import useModel from 'flooks';
-import MerchantCom from './MerchantCom';
 import HomeModel from './model';
-import { popularTagMap } from '../../../Utils/MerchantUtils';
+import { sortMap, filterMap, tagMap } from '../../../Utils/MerchantUtils';
+import Filter from './Filter';
 
-export default function List({ animatedScrollYValue, topHeight }) {
-  const firstSortMenu = useBoolean(false);
-  const { popularTag, changeTag } = useModel(HomeModel, [
-    'loadingTop',
-    'popularTag',
+export default function List({
+  animatedScrollYValue,
+  topHeight,
+  setscrollEnabled,
+}) {
+  const SortMenu = useBoolean(false);
+  const filterMenu = useBoolean(false);
+  const {
+    sort,
+    changeSort,
+    merchantNatureList,
+    getNature,
+    clearFiliter,
+    ChangeFiliter,
+    filter,
+    tag,
+    natureId,
+    endAmount,
+  } = useModel(HomeModel, [
+    'sort',
+    'merchantNatureList',
+    'filter',
+    'tag',
+    'natureId',
+    'endAmount',
   ]);
 
+  React.useEffect(() => {
+    if (merchantNatureList.length === 0) {
+      getNature();
+      // setscrollEnabled(false);
+    }
+  }, [merchantNatureList]);
+
   const top = useCreation(() => {
     return topHeight ? topHeight + 56 : 200;
   }, [topHeight]);
@@ -27,21 +52,19 @@ export default function List({ animatedScrollYValue, topHeight }) {
     outputRange: [0, 0, 0, 1],
   });
 
-  const [selectHeight, setSelectHeight] = React.useState(0);
-
   const soltType = useCreation(() => {
     return 'first';
-  }, [popularTag]);
+  }, [sort]);
 
-  const popularInfo = useCreation(() => {
-    return popularTagMap.get(popularTag);
-  }, [popularTag]);
+  const sortInfo = useCreation(() => {
+    return sortMap.get(sort);
+  }, [sort]);
 
-  const height = useAnimation({
+  const SortHeight = useAnimation({
     type: 'timing',
     initialValue: 0,
     duration: 100,
-    toValue: firstSortMenu.state ? 230 : 0,
+    toValue: SortMenu.state ? 230 : 0,
   });
 
   return (
@@ -55,7 +78,7 @@ export default function List({ animatedScrollYValue, topHeight }) {
       >
         <Div row bg="white">
           <Button
-            onPress={firstSortMenu.setTrue}
+            onPress={SortMenu.setTrue}
             bg="hide"
             fontSize="xl"
             px={10}
@@ -76,41 +99,89 @@ export default function List({ animatedScrollYValue, topHeight }) {
           </Button>
         </Div>
         <Div row bg="white" alignItems="center">
-          <Button onPress={() => firstSortMenu.toggle()} bg="hide" px={10}>
+          <Button
+            onPress={() => {
+              SortMenu.toggle();
+              filterMenu.setFalse();
+            }}
+            bg="hide"
+            px={10}
+          >
             <Text
               fontSize="xs"
               color={
-                popularTag && popularInfo.showType !== 'top'
-                  ? 'brand500'
-                  : 'gray600'
+                sort && sortInfo.showType !== 'top' ? 'brand500' : 'gray600'
               }
             >
-              {popularInfo.name}
+              {sortInfo.showType !== 'top'
+                ? sortInfo.name
+                : sortMap.get('').name}
             </Text>
             <Icon
               name="down"
               fontSize="xs"
               color={
-                popularTag && popularInfo.showType !== 'top'
-                  ? 'brand500'
-                  : 'gray600'
+                sort && sortInfo.showType !== 'top' ? 'brand500' : 'gray600'
               }
             />
           </Button>
 
-          <Button fontSize="xs" bg="hide" color="gray600" px={10}>
+          <Button
+            fontSize="xs"
+            bg="hide"
+            color={sort === '7' ? 'brand500' : 'gray600'}
+            px={10}
+            onPress={() => {
+              changeSort('7');
+              SortMenu.setFalse();
+              filterMenu.setFalse();
+            }}
+          >
             距离
           </Button>
-          <Button fontSize="xs" bg="hide" color="gray600" px={10}>
+          <Button
+            fontSize="xs"
+            bg="hide"
+            color={sort === '8' ? 'brand500' : 'gray600'}
+            px={10}
+            onPress={() => {
+              changeSort('8');
+              SortMenu.setFalse();
+              filterMenu.setFalse();
+            }}
+          >
             销量
           </Button>
+          <Div flex={1} />
+          <Button
+            onPress={() => {
+              filterMenu.toggle();
+              SortMenu.setFalse();
+            }}
+            bg="hide"
+            px={10}
+          >
+            <Text fontSize="xs" color="gray600">
+              筛选
+            </Text>
+            <Icon
+              name="down"
+              fontSize="xs"
+              color={
+                sort && sortInfo.showType !== 'top' ? 'brand500' : 'gray600'
+              }
+            />
+          </Button>
         </Div>
-
         <Animated.View
-          style={{ height, overflow: 'hidden', backgroundColor: '#fff' }}
+          style={{
+            height: SortHeight,
+            overflow: 'hidden',
+            backgroundColor: '#fff',
+          }}
         >
-          {[...popularTagMap.keys()].map((item, index) => {
-            const info = popularTagMap.get(item);
+          {[...sortMap.keys()].map((item, index) => {
+            const info = sortMap.get(item);
             return info.showType !== 'top' ? (
               <Button
                 key={index}
@@ -118,14 +189,14 @@ export default function List({ animatedScrollYValue, topHeight }) {
                 bg="white"
                 rounded="none"
                 onPress={() => {
-                  firstSortMenu.setFalse();
-                  changeTag(item);
+                  SortMenu.setFalse();
+                  changeSort(item);
                 }}
               >
                 <Text
                   fontSize="xs"
                   flex={1}
-                  color={popularTag === item ? 'brand500' : 'gray600'}
+                  color={sort === item ? 'brand500' : 'gray600'}
                 >
                   {info.name}
                 </Text>
@@ -135,8 +206,23 @@ export default function List({ animatedScrollYValue, topHeight }) {
             );
           })}
         </Animated.View>
+        <Filter
+          show={filterMenu.state}
+          merchantNatureList={merchantNatureList}
+          filters={filter}
+          tags={tag}
+          natureId={natureId}
+          endAmount={endAmount}
+          clear={() => {
+            filterMenu.setFalse();
+            clearFiliter();
+          }}
+          submit={(filter, tag, natureId, endAmount) => {
+            filterMenu.setFalse();
+          }}
+        />
       </Animated.View>
-      {firstSortMenu.state && (
+      {(SortMenu.state || filterMenu.state) && (
         <Button
           bg="black600"
           position="absolute"
@@ -145,7 +231,10 @@ export default function List({ animatedScrollYValue, topHeight }) {
           right={0}
           bottom={0}
           zIndex={2}
-          onPress={firstSortMenu.setFalse}
+          onPress={() => {
+            SortMenu.setFalse();
+            filterMenu.setFalse();
+          }}
         />
       )}
     </>

screens/Main/Home/MerchantCom.js

@@ -1,21 +1,22 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Div, Text, Image } from 'react-native-magnus';
+import { Div, Text, Image, Tag } from 'react-native-magnus';
 import { Flex, SwipeAction } from '@ant-design/react-native';
 import { TouchableRipple } from 'react-native-paper';
 
+import useModel from 'flooks';
 import { useCreation } from '@umijs/hooks';
 import { useNavigation } from '@react-navigation/native';
 import Chip from '../../../components/Chip';
 import Icon from '../../../components/SvgIcon';
-import useModel from 'flooks';
 import DetailModel from '../../Detail/model';
+import { getColor } from '../../../Utils/ColorUtils';
 
 // 首页商家组件
 
 export default function MerchantCom(props) {
-  const { info, isCollection, CollectionId, freash } = props;
+  const { info, isCollection, CollectionId, freash, isNew } = props;
   const navigation = useNavigation();
 
   const { delLike } = useModel(DetailModel, []);
@@ -79,11 +80,11 @@ export default function MerchantCom(props) {
       right={right}
       disabled={!isCollection}
     >
-      <Div my={isCollection ? 5 : 0}>
+      <Div my={isCollection || isNew ? 5 : 0}>
         <TouchableRipple
           onPress={() => {
             navigation.navigate('MerchantDetail', {
-              merchantId: isCollection ? info.id : mid,
+              merchantId: isCollection || isNew ? info.id : mid,
             });
           }}
         >
@@ -110,11 +111,23 @@ export default function MerchantCom(props) {
                 {showName}
               </Text>
               {tags.length > 0 && (
-                <Flex>
+                <Div row my={3}>
                   {tags.map((item, index) => {
-                    return <Chip key={index}>{item.name}</Chip>;
+                    return (
+                      <Tag
+                        bg={getColor()}
+                        color="white"
+                        key={index}
+                        rounded="circle"
+                        fontSize="sm"
+                        py={2}
+                        ml={3}
+                      >
+                        {item.name}
+                      </Tag>
+                    );
                   })}
-                </Flex>
+                </Div>
               )}
 
               <Flex>

screens/Main/Home/RecommendStore.jsx

@@ -35,9 +35,11 @@ export default function RecommendStore() {
           新店推荐
         </Text>
         <Button
-          bg="hide"
+          bg="white"
           fontSize="xs"
           color="gray600"
+          py={5}
+          px={10}
           onPress={() => {
             navigation.navigate('MerchantsList');
           }}

screens/Main/Home/model.js

@@ -18,7 +18,12 @@ const HomeModel = (now) => ({
   location: {},
   addressName: '',
   loadingTop: true,
-  popularTag: '',
+  sort: '',
+  filter: '',
+  tag: '',
+  natureId: '',
+  endAmount: '',
+  merchantNatureList: [],
   initHome() {
     now({
       bannerList: [],
@@ -30,7 +35,7 @@ const HomeModel = (now) => ({
       promote2: [],
       timeTag: {},
       loadingTop: true,
-      popularTag: '',
+      sort: '',
     });
 
     const { locationEvent } = now();
@@ -54,8 +59,8 @@ const HomeModel = (now) => ({
           timeTag: res.timeTag,
           loadingTop: false,
         });
-        const { changeTag } = now();
-        return changeTag('');
+        const { changeSort } = now();
+        return changeSort('');
       });
   },
   locationEvent() {
@@ -67,14 +72,28 @@ const HomeModel = (now) => ({
     }
   },
   getData() {
-    const { page, size, list, popularTag } = now();
+    const { page, size, list, sort, filter, tag, natureId, endAmount } = now();
     const { loading, warnning, clearLoading } = now(Toast);
     loading();
     const { chooseInfo } = now(MapModel);
     const { location } = chooseInfo;
     const params = { latitude: location.lat, longitude: location.lng };
-    if (popularTag) {
-      params.filter = popularTag;
+    if (sort) {
+      params.sort = sort;
+    }
+
+    if (filter) {
+      params.filter = filter;
+    }
+    if (tag) {
+      params.tag = tag;
+    }
+    if (natureId) {
+      params.natureId = natureId;
+    }
+    if (endAmount) {
+      params.startAmount = 0;
+      params.endAmount = endAmount;
     }
     request
       .get('/settings/show', {
@@ -96,9 +115,40 @@ const HomeModel = (now) => ({
   changeChooseMap(info) {
     console.log(info);
   },
-  changeTag(type) {
+  changeSort(type) {
+    now({
+      sort: type,
+      page: 0,
+      list: [],
+    });
+    const { getData } = now();
+    getData();
+  },
+  getNature() {
+    request.get('/merchantNature/all').then((res) => {
+      now({
+        merchantNatureList: res.content,
+      });
+    });
+  },
+  ChangeFiliter(filter, tag, natureId, endAmount) {
+    now({
+      filter,
+      tag,
+      natureId,
+      endAmount,
+      page: 0,
+      list: [],
+    });
+    const { getData } = now();
+    getData();
+  },
+  clearFiliter() {
     now({
-      popularTag: type,
+      filter: '',
+      tag: '',
+      natureId: '',
+      endAmount: '',
       page: 0,
       list: [],
     });

screens/Main/HomeScreen.jsx

@@ -26,6 +26,8 @@ export default function HomeScreen({ navigation }) {
     'loadingTop',
   ]);
 
+  const [scrollEnabled, setscrollEnabled] = React.useState(true);
+
   const [topHeight, settopHeight] = React.useState(100);
 
   const animatedScrollYValue = React.useRef(new Animated.Value(0)).current;
@@ -85,6 +87,7 @@ export default function HomeScreen({ navigation }) {
         <ListTop
           animatedScrollYValue={animatedScrollYValue}
           topHeight={topHeight}
+          setscrollEnabled={setscrollEnabled}
         />
         <List />
       </Animated.ScrollView>

screens/Main/MerchantsListScreen.jsx

@@ -5,6 +5,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 
 import useModel from 'flooks';
 import HomeModel from './Home/model';
+import MerchantCom from './Home/MerchantCom';
 
 import Header from '../../components/Header';
 
@@ -20,12 +21,13 @@ export default function MerchantsListScreen() {
           backgroundColor: '#fff',
         }}
       >
-				<Div >
-
-				</Div>
-        {/* {allnewMerchants.map((item) => {
-          return <MerchantCom key={item.id} info={item} isCollection />;
-        })} */}
+        {allnewMerchants.map((item) => {
+          return (
+            <Div key={item.id}>
+              <MerchantCom info={item} />
+            </Div>
+          );
+        })}
       </ScrollView>
     </>
   );

screens/Main/SearchScreen.jsx

@@ -0,0 +1,26 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
+import { ScrollView } from 'react-native-gesture-handler';
+
+import useModel from 'flooks';
+import User from '../../flooks/User'; // detail模块通用方法
+
+import Header from '../../components/Header';
+
+export default function SearchScreen() {
+  const { userInfo } = useModel(User, ['id']);
+
+  return (
+    <>
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          backgroundColor: '#fff',
+        }}
+      >
+        <Div />
+      </ScrollView>
+    </>
+  );
+}