|
|
|
|
@ -1,24 +1,22 @@ |
|
|
|
|
import {Input, View, Text, PageContainer} from "@tarojs/components"; |
|
|
|
|
import {FC, useEffect, useState} from "react"; |
|
|
|
|
import { AtIcon } from 'taro-ui' |
|
|
|
|
import {Input, View, Text, PageContainer, Image} from "@tarojs/components"; |
|
|
|
|
import React, {FC, useEffect, useMemo, useState} from "react"; |
|
|
|
|
import styles from './index.module.scss' |
|
|
|
|
import Taro from "@tarojs/taro"; |
|
|
|
|
import { useReady, useDidShow } from '@tarojs/taro' |
|
|
|
|
import {useDidShow} from '@tarojs/taro' |
|
|
|
|
import SearchList from './components/list' |
|
|
|
|
import search from '@/static/img/search.png' |
|
|
|
|
import NavigationBar from "@/components/navigationBar/navigationBar"; |
|
|
|
|
import del from '@/static/img/del.png' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Search: FC = () => { |
|
|
|
|
const [value, setValue] = useState('') |
|
|
|
|
const [recentSearch, setRecentSearch] = useState<string[]>([]) |
|
|
|
|
const [hotSearch,setHotSearch] = useState<any[]>([]) |
|
|
|
|
const [hotSearch] = useState<any[]>([]) |
|
|
|
|
const [show, setShow] = useState(false) |
|
|
|
|
const [focus, setFocus] = useState(false) |
|
|
|
|
|
|
|
|
|
useReady(()=>{ |
|
|
|
|
console.log('onReady') |
|
|
|
|
}) |
|
|
|
|
useDidShow(()=>{ |
|
|
|
|
getRecentSearch() |
|
|
|
|
}) |
|
|
|
|
useDidShow(getRecentSearch) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (!show) { |
|
|
|
|
@ -38,11 +36,9 @@ const Search:FC = () => { |
|
|
|
|
function getRecentSearch() { |
|
|
|
|
setRecentSearch(Taro.getStorageSync('recentSearch')) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getSearchItem(value) { |
|
|
|
|
setValue(value) |
|
|
|
|
// Taro.navigateTo({
|
|
|
|
|
// url:`/pages/preview/search/list/index?name=${value}`
|
|
|
|
|
// })
|
|
|
|
|
setShow(true) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -55,31 +51,48 @@ const Search:FC = () => { |
|
|
|
|
Taro.setStorageSync('recentSearch', [...new Set(recentSearch)]) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const searchStyles = useMemo((): React.CSSProperties | undefined => { |
|
|
|
|
if (focus || show) { |
|
|
|
|
return { |
|
|
|
|
transform: "translateY(-43px)", |
|
|
|
|
width: "70%", |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, [focus, show]) |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<View className="flex flex-column"> |
|
|
|
|
<> |
|
|
|
|
<NavigationBar text='搜索'/> |
|
|
|
|
<View className={styles.searchHeader} style={searchStyles}> |
|
|
|
|
<View className={styles.searchBox}> |
|
|
|
|
<AtIcon value='search' size='20' color='#ccc'></AtIcon> |
|
|
|
|
{ show ? |
|
|
|
|
<Text className={styles.input} >{value}</Text>: |
|
|
|
|
<Input className={styles.input} placeholder="输入关键字搜索" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} /> |
|
|
|
|
} |
|
|
|
|
<Image src={search} style={{width: '32rpx', height: '32rpx'}} mode='widthFix'/> |
|
|
|
|
<Input |
|
|
|
|
onFocus={() => setFocus(true)} |
|
|
|
|
onBlur={() => setFocus(false)} |
|
|
|
|
className={styles.input} |
|
|
|
|
placeholder={(focus || show) ? '' : "输入关键字搜索"} |
|
|
|
|
type='text' |
|
|
|
|
confirmType='search' |
|
|
|
|
onInput={inpFn} |
|
|
|
|
onConfirm={searchInput}/> |
|
|
|
|
|
|
|
|
|
</View> |
|
|
|
|
{focus || show ? <View className='px-2 text-dark' onClick={() => setShow(false)}>取消</View> : null} |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<View className="flex flex-column px-2"> |
|
|
|
|
{ |
|
|
|
|
recentSearch.length >= 1 && !show && |
|
|
|
|
<> |
|
|
|
|
<View className={styles.titleBox}> |
|
|
|
|
<Text className={styles.title}>最近搜索</Text> |
|
|
|
|
<AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon> |
|
|
|
|
<Text className={styles.title}>搜索历史</Text> |
|
|
|
|
<Image src={del} mode='widthFix' style={{width: '16px'}} onClick={clearSearch}/> |
|
|
|
|
</View> |
|
|
|
|
<View className={styles.contentBox}> |
|
|
|
|
{ |
|
|
|
|
recentSearch.length && |
|
|
|
|
recentSearch?.map(d => |
|
|
|
|
<View className={styles.items}> |
|
|
|
|
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View> |
|
|
|
|
recentSearch?.map(d => <View className={styles.items}> |
|
|
|
|
<View onClick={() => getSearchItem(d)} className="font-28">{d}</View> |
|
|
|
|
</View>) |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
@ -98,7 +111,9 @@ const Search:FC = () => { |
|
|
|
|
hotSearch.length && |
|
|
|
|
hotSearch.map(d => |
|
|
|
|
<View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white"> |
|
|
|
|
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View> |
|
|
|
|
<View onClick={() => { |
|
|
|
|
getSearchItem(d) |
|
|
|
|
}} className="font-28">{d}</View> |
|
|
|
|
</View>) |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
@ -106,11 +121,16 @@ const Search:FC = () => { |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
<PageContainer onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} > |
|
|
|
|
<PageContainer |
|
|
|
|
onClickOverlay={() => setShow(false)} |
|
|
|
|
show={show} |
|
|
|
|
overlay |
|
|
|
|
overlayStyle={'background:rgba(0,0,0,0)'}> |
|
|
|
|
<SearchList name={value} clear={show}/> |
|
|
|
|
</PageContainer> |
|
|
|
|
|
|
|
|
|
</View> |
|
|
|
|
</> |
|
|
|
|
|
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
export default Search |
|
|
|
|
|
king
