|
|
|
|
@ -1,53 +1,48 @@ |
|
|
|
|
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 {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 NavigationBar from "@/components/navigationBar/navigationBar"; |
|
|
|
|
import search from '@/static/img/search.png' |
|
|
|
|
import del from '@/static/img/del.png' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Search:FC = () => { |
|
|
|
|
const globalData = Taro.getApp().globalData |
|
|
|
|
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() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
useEffect(()=>{ |
|
|
|
|
if(!show){ |
|
|
|
|
getRecentSearch() |
|
|
|
|
} |
|
|
|
|
},[show]) |
|
|
|
|
useDidShow(getRecentSearch) |
|
|
|
|
|
|
|
|
|
function inpFn(e){ |
|
|
|
|
useEffect(() => { |
|
|
|
|
!show && getRecentSearch() |
|
|
|
|
}, [show]) |
|
|
|
|
|
|
|
|
|
function inpFn(e) { |
|
|
|
|
setValue(e.detail.value) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function clearSearch(){ |
|
|
|
|
function clearSearch() { |
|
|
|
|
Taro.removeStorageSync('recentSearch') |
|
|
|
|
getRecentSearch() |
|
|
|
|
Taro.showToast({title: '删除成功'}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getRecentSearch () { |
|
|
|
|
function getRecentSearch() { |
|
|
|
|
setRecentSearch(Taro.getStorageSync('recentSearch')) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getSearchItem(value) { |
|
|
|
|
setValue(value) |
|
|
|
|
// Taro.navigateTo({
|
|
|
|
|
// url:`/pages/preview/search/list/index?name=${value}`
|
|
|
|
|
// })
|
|
|
|
|
setShow(true) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function searchInput(){ |
|
|
|
|
function searchInput() { |
|
|
|
|
if (value === "") return; |
|
|
|
|
getSearchItem(value) |
|
|
|
|
//记录最近搜索
|
|
|
|
|
@ -56,55 +51,71 @@ const Search:FC = () => { |
|
|
|
|
Taro.setStorageSync('recentSearch', [...new Set(recentSearch)]) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function navBack(){ |
|
|
|
|
Taro.navigateBack() |
|
|
|
|
function cancelSearch(){ |
|
|
|
|
setValue('') |
|
|
|
|
setShow(false) |
|
|
|
|
setFocus(false) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const searchStyles = useMemo((): React.CSSProperties | undefined => { |
|
|
|
|
if (focus || show) { |
|
|
|
|
return { |
|
|
|
|
transform: "translateY(-43px)", |
|
|
|
|
width: "70%", |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, [focus, show]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<View className="flex flex-column"> |
|
|
|
|
<View className={styles.navBox} style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}> |
|
|
|
|
<View style={{height:`${globalData.statusBarHeight}px`}}></View> |
|
|
|
|
<View style={{height:`${globalData.textBarHeight}px`,display:'flex',alignItems:'center'}}> |
|
|
|
|
<View className="flex justify-end" style={{width:'40px'}}> |
|
|
|
|
<AtIcon value='chevron-left' size='25' color='#333' onClick={navBack}></AtIcon> |
|
|
|
|
</View> |
|
|
|
|
<View className="font-28 font-weight flex-1" style={{display:'flex',justifyContent:'center',paddingRight:'40px',boxSizing:'border-box'}}>搜索</View> |
|
|
|
|
<NavigationBar text='搜索'/> |
|
|
|
|
<View className={styles.searchHeader} style={searchStyles}> |
|
|
|
|
<View className={styles.searchBox}> |
|
|
|
|
<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' |
|
|
|
|
value={value} |
|
|
|
|
confirmType='search' |
|
|
|
|
onInput={inpFn} |
|
|
|
|
onConfirm={searchInput}/> |
|
|
|
|
|
|
|
|
|
</View> |
|
|
|
|
{focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null} |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<View style={{paddingLeft: '30rpx'}}> |
|
|
|
|
<View style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}></View> |
|
|
|
|
<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} /> |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
recentSearch.length >= 1 && !show && |
|
|
|
|
<> |
|
|
|
|
<View className={styles.titleBox} > |
|
|
|
|
<View className='px-2'> |
|
|
|
|
<View className={styles.titleBox}> |
|
|
|
|
<Text className={styles.title}>最近搜索</Text> |
|
|
|
|
<AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon> |
|
|
|
|
<Image |
|
|
|
|
src={del} |
|
|
|
|
mode='widthFix' |
|
|
|
|
style={{width: '16px', height: '16px', padding: '0 20rpx'}} |
|
|
|
|
onClick={clearSearch}/> |
|
|
|
|
</View> |
|
|
|
|
<View className={styles.contentBox}> |
|
|
|
|
{ |
|
|
|
|
recentSearch.length && |
|
|
|
|
recentSearch.length > 0 && |
|
|
|
|
recentSearch?.map(d => |
|
|
|
|
<View className={styles.items}> |
|
|
|
|
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View> |
|
|
|
|
<View onClick={() => getSearchItem(d)} className="font-28">{d}</View> |
|
|
|
|
</View>) |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
</> |
|
|
|
|
</View> |
|
|
|
|
} |
|
|
|
|
{ |
|
|
|
|
hotSearch.length >= 1 && !show && |
|
|
|
|
<> |
|
|
|
|
<View className={`flex justify-between ${styles.titleBox}`} > |
|
|
|
|
<View className={`flex justify-between ${styles.titleBox}`}> |
|
|
|
|
|
|
|
|
|
<Text className="font-32 fwb">热门搜索</Text> |
|
|
|
|
</View> |
|
|
|
|
@ -114,7 +125,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> |
|
|
|
|
@ -122,12 +135,16 @@ const Search:FC = () => { |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
<PageContainer onBeforeLeave={() => {setShow(false)}} onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} > |
|
|
|
|
<SearchList name={value} clear={show} /> |
|
|
|
|
<PageContainer |
|
|
|
|
onBeforeLeave={cancelSearch} |
|
|
|
|
onClickOverlay={cancelSearch} |
|
|
|
|
show={show} |
|
|
|
|
round |
|
|
|
|
overlay |
|
|
|
|
overlayStyle={'background:rgba(0,0,0,0)'}> |
|
|
|
|
<SearchList name={value} clear={show}/> |
|
|
|
|
</PageContainer> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
export default Search |
|
|
|
|
|
king
1 year ago