|
@@ -1,26 +1,161 @@
|
|
|
import * as WebBrowser from 'expo-web-browser';
|
|
import * as WebBrowser from 'expo-web-browser';
|
|
|
import * as React from 'react';
|
|
import * as React from 'react';
|
|
|
-import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
|
|
|
|
|
-import { ScrollView } from 'react-native-gesture-handler';
|
|
|
|
|
|
|
+import { StatusBar } from 'expo-status-bar';
|
|
|
|
|
+import {
|
|
|
|
|
+ Div,
|
|
|
|
|
+ Button,
|
|
|
|
|
+ Image,
|
|
|
|
|
+ Text,
|
|
|
|
|
+ Avatar,
|
|
|
|
|
+ Input,
|
|
|
|
|
+ Icon,
|
|
|
|
|
+ Tag,
|
|
|
|
|
+} from 'react-native-magnus';
|
|
|
|
|
+import { FlatList } from 'react-native-gesture-handler';
|
|
|
|
|
|
|
|
import useModel from 'flooks';
|
|
import useModel from 'flooks';
|
|
|
-import User from '../../flooks/User'; // detail模块通用方法
|
|
|
|
|
|
|
+import HomeModel from './Home/model';
|
|
|
|
|
+import MerchantCom from './Home/MerchantCom';
|
|
|
|
|
|
|
|
import Header from '../../components/Header';
|
|
import Header from '../../components/Header';
|
|
|
|
|
|
|
|
-export default function SearchScreen() {
|
|
|
|
|
- const { userInfo } = useModel(User, ['id']);
|
|
|
|
|
|
|
+import { filterMap } from '../../Utils/MerchantUtils';
|
|
|
|
|
+export default function SearchScreen({ navigation }) {
|
|
|
|
|
+ const { searchHome } = useModel(HomeModel, ['searchHome']);
|
|
|
|
|
+
|
|
|
|
|
+ const [isSearch, setIsSearch] = React.useState(false);
|
|
|
|
|
+ const [searchType, setsearchType] = React.useState('');
|
|
|
|
|
+ const [empty, setEmpty] = React.useState(false);
|
|
|
|
|
+ const [last, setLast] = React.useState(false);
|
|
|
|
|
+ const [searchVal, setsearchVal] = React.useState('');
|
|
|
|
|
+
|
|
|
|
|
+ const [searchKey, setsearchKey] = React.useState('');
|
|
|
|
|
+ const [page, setPage] = React.useState(0);
|
|
|
|
|
+ const [list, setlist] = React.useState([]);
|
|
|
|
|
+
|
|
|
|
|
+ function search() {
|
|
|
|
|
+ if (searchHome.loading) {
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+ setIsSearch(true);
|
|
|
|
|
+ setEmpty(false);
|
|
|
|
|
+ setLast(false);
|
|
|
|
|
+ searchHome(searchVal, searchType, page)
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ if (!res.last) {
|
|
|
|
|
+ setPage(page + 1);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ setLast(true);
|
|
|
|
|
+ }
|
|
|
|
|
+ if (res.empty) {
|
|
|
|
|
+ setEmpty(true);
|
|
|
|
|
+ }
|
|
|
|
|
+ if (page === 0) {
|
|
|
|
|
+ setlist(res.content);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ setlist(list.concat(res.content));
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(() => {
|
|
|
|
|
+ setlist([]);
|
|
|
|
|
+ setLast(true);
|
|
|
|
|
+ setEmpty(true);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ function chooseTag(key) {
|
|
|
|
|
+ setsearchKey(filterMap.get(key).name);
|
|
|
|
|
+ setPage(0);
|
|
|
|
|
+ setsearchType('popularTag');
|
|
|
|
|
+ setsearchVal(key);
|
|
|
|
|
+ search();
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
- <ScrollView
|
|
|
|
|
- contentContainerStyle={{
|
|
|
|
|
- flexGrow: 1,
|
|
|
|
|
- backgroundColor: '#fff',
|
|
|
|
|
- }}
|
|
|
|
|
- >
|
|
|
|
|
- <Div />
|
|
|
|
|
- </ScrollView>
|
|
|
|
|
|
|
+ <StatusBar backgroundColor="transparent" style="dark" translucent />
|
|
|
|
|
+ <Div row bg="white" py={10} alignItems="center">
|
|
|
|
|
+ <Input
|
|
|
|
|
+ bg="gray200"
|
|
|
|
|
+ placeholder="想吃什么搜一搜"
|
|
|
|
|
+ p={10}
|
|
|
|
|
+ fontSize="xs"
|
|
|
|
|
+ flex={1}
|
|
|
|
|
+ ml={15}
|
|
|
|
|
+ autoFocus
|
|
|
|
|
+ blurOnSubmit
|
|
|
|
|
+ value={searchKey}
|
|
|
|
|
+ focusBorderColor="brand500"
|
|
|
|
|
+ prefix={<Icon name="search" color="gray300" fontFamily="Feather" />}
|
|
|
|
|
+ onChangeText={(text) => {
|
|
|
|
|
+ setsearchKey(text);
|
|
|
|
|
+ }}
|
|
|
|
|
+ onSubmitEditing={() => {
|
|
|
|
|
+ setPage(0);
|
|
|
|
|
+ setsearchType('search');
|
|
|
|
|
+ setsearchVal(searchKey);
|
|
|
|
|
+ search();
|
|
|
|
|
+ }}
|
|
|
|
|
+ />
|
|
|
|
|
+ <Div>
|
|
|
|
|
+ {isSearch ? (
|
|
|
|
|
+ <Button
|
|
|
|
|
+ w={60}
|
|
|
|
|
+ bg="hide"
|
|
|
|
|
+ color="brand500"
|
|
|
|
|
+ fontSize="xs"
|
|
|
|
|
+ onPress={() => {
|
|
|
|
|
+ setsearchKey('');
|
|
|
|
|
+ setIsSearch(false);
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ 取消
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ ) : (
|
|
|
|
|
+ <Button
|
|
|
|
|
+ w={60}
|
|
|
|
|
+ bg="hide"
|
|
|
|
|
+ color="brand500"
|
|
|
|
|
+ fontSize="xs"
|
|
|
|
|
+ onPress={() => navigation.goBack()}
|
|
|
|
|
+ >
|
|
|
|
|
+ 返回
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ )}
|
|
|
|
|
+ </Div>
|
|
|
|
|
+ </Div>
|
|
|
|
|
+ {!isSearch && (
|
|
|
|
|
+ <Div bg="white" flex={1}>
|
|
|
|
|
+ <Div px={10} mt={10}>
|
|
|
|
|
+ <Text>热门搜索</Text>
|
|
|
|
|
+
|
|
|
|
|
+ <Div row flexWrap="wrap">
|
|
|
|
|
+ {[...filterMap.keys()].map((item, index) => {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <Div key={index} w="33.33%" px={3} mt={10}>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ block
|
|
|
|
|
+ bg="gray200"
|
|
|
|
|
+ color="gray300"
|
|
|
|
|
+ fontSize="xs"
|
|
|
|
|
+ onPress={() => chooseTag(item)}
|
|
|
|
|
+ >
|
|
|
|
|
+ {filterMap.get(item).name}
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </Div>
|
|
|
|
|
+ );
|
|
|
|
|
+ })}
|
|
|
|
|
+ </Div>
|
|
|
|
|
+ </Div>
|
|
|
|
|
+ </Div>
|
|
|
|
|
+ )}
|
|
|
|
|
+ {isSearch && (
|
|
|
|
|
+ <FlatList
|
|
|
|
|
+ data={list}
|
|
|
|
|
+ renderItem={({ item }) => <MerchantCom info={item} />}
|
|
|
|
|
+ onEndReached={search}
|
|
|
|
|
+ ListEmptyComponent={() => empty && <Text>暂无数据</Text>}
|
|
|
|
|
+ />
|
|
|
|
|
+ )}
|
|
|
</>
|
|
</>
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|