king
1 year ago
commit
d47392954a
@ -1,6 +1,3 @@ |
||||
export default definePageConfig({ |
||||
navigationBarTitleText: '搜索', |
||||
navigationBarBackgroundColor: '#F2F8F6', |
||||
onReachBottomDistance: 50, |
||||
navigationStyle: 'custom', |
||||
navigationStyle: 'custom' |
||||
}) |
||||
|
||||
@ -1,136 +1,133 @@ |
||||
import {Input, View, Text, PageContainer, Image} from "@tarojs/components"; |
||||
import React, {FC, useEffect, useMemo, useState} from "react"; |
||||
import {Input, View, Text, PageContainer} from "@tarojs/components"; |
||||
import {FC, useEffect, useState} from "react"; |
||||
import { AtIcon } from 'taro-ui' |
||||
import styles from './index.module.scss' |
||||
import Taro from "@tarojs/taro"; |
||||
import {useDidShow} from '@tarojs/taro' |
||||
import { useReady, 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 Search:FC = () => { |
||||
const globalData = Taro.getApp().globalData |
||||
const [value, setValue] = useState('') |
||||
const [recentSearch, setRecentSearch] = useState<string[]>([]) |
||||
const [hotSearch] = useState<any[]>([]) |
||||
const [hotSearch,setHotSearch] = useState<any[]>([]) |
||||
const [show, setShow] = useState(false) |
||||
const [focus, setFocus] = useState(false) |
||||
|
||||
useDidShow(getRecentSearch) |
||||
useReady(()=>{ |
||||
console.log('onReady') |
||||
}) |
||||
useDidShow(()=>{ |
||||
getRecentSearch() |
||||
}) |
||||
|
||||
useEffect(() => { |
||||
if (!show) { |
||||
useEffect(()=>{ |
||||
if(!show){ |
||||
getRecentSearch() |
||||
} |
||||
}, [show]) |
||||
},[show]) |
||||
|
||||
function inpFn(e) { |
||||
function inpFn(e){ |
||||
setValue(e.detail.value) |
||||
} |
||||
|
||||
function clearSearch() { |
||||
function clearSearch(){ |
||||
Taro.removeStorageSync('recentSearch') |
||||
getRecentSearch() |
||||
} |
||||
|
||||
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() { |
||||
if (value === "") return; |
||||
getSearchItem(value) |
||||
//记录最近搜索
|
||||
let recentSearch = Taro.getStorageSync('recentSearch') || []; |
||||
recentSearch.unshift(value); |
||||
Taro.setStorageSync('recentSearch', [...new Set(recentSearch)]) |
||||
} |
||||
function searchInput(){ |
||||
if (value === "") return; |
||||
getSearchItem(value) |
||||
//记录最近搜索
|
||||
let recentSearch = Taro.getStorageSync('recentSearch') || []; |
||||
recentSearch.unshift(value); |
||||
Taro.setStorageSync('recentSearch', [...new Set(recentSearch)]) |
||||
} |
||||
|
||||
function navBack(){ |
||||
Taro.navigateBack() |
||||
} |
||||
|
||||
const searchStyles = useMemo((): React.CSSProperties | undefined => { |
||||
if (focus || show) { |
||||
return { |
||||
transform: "translateY(-43px)", |
||||
width: "70%", |
||||
} |
||||
} |
||||
}, [focus, show]) |
||||
|
||||
return ( |
||||
<> |
||||
<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' |
||||
confirmType='search' |
||||
onInput={inpFn} |
||||
onConfirm={searchInput}/> |
||||
<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> |
||||
</View> |
||||
</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> |
||||
{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> |
||||
<Image src={del} mode='widthFix' style={{width: '16px'}} onClick={clearSearch}/> |
||||
</View> |
||||
|
||||
{ |
||||
recentSearch.length >= 1 && !show && |
||||
<> |
||||
<View className={styles.titleBox} > |
||||
<Text className={styles.title}>最近搜索</Text> |
||||
<AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon> |
||||
</View> |
||||
<View className={styles.contentBox}> |
||||
{ |
||||
recentSearch.length && |
||||
recentSearch?.map(d => <View className={styles.items}> |
||||
<View onClick={() => getSearchItem(d)} className="font-28">{d}</View> |
||||
</View>) |
||||
recentSearch?.map(d => |
||||
<View className={styles.items}> |
||||
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View> |
||||
</View>) |
||||
} |
||||
</View> |
||||
</> |
||||
} |
||||
{ |
||||
hotSearch.length >= 1 && !show && |
||||
<> |
||||
<View className={`flex justify-between ${styles.titleBox}`}> |
||||
|
||||
<Text className="font-32 fwb">热门搜索</Text> |
||||
</View> |
||||
<View className="wid100 pt-3 pl-3 box-b"> |
||||
<View className="wid100 flex flex-wrap"> |
||||
{ |
||||
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>) |
||||
} |
||||
</View> |
||||
</> |
||||
} |
||||
{ |
||||
hotSearch.length >= 1 && !show && |
||||
<> |
||||
<View className={`flex justify-between ${styles.titleBox}`} > |
||||
|
||||
<Text className="font-32 fwb">热门搜索</Text> |
||||
</View> |
||||
<View className="wid100 pt-3 pl-3 box-b"> |
||||
<View className="wid100 flex flex-wrap"> |
||||
{ |
||||
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>) |
||||
} |
||||
</View> |
||||
</> |
||||
} |
||||
|
||||
<PageContainer |
||||
onClickOverlay={() => setShow(false)} |
||||
show={show} |
||||
overlay |
||||
overlayStyle={'background:rgba(0,0,0,0)'}> |
||||
<SearchList name={value} clear={show}/> |
||||
</PageContainer> |
||||
</View> |
||||
</> |
||||
</View> |
||||
</> |
||||
} |
||||
|
||||
<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> |
||||
</View> |
||||
|
||||
</View> |
||||
) |
||||
} |
||||
export default Search |
||||
|
||||
@ -0,0 +1,12 @@ |
||||
let timeout:any = null |
||||
function debounce(func, wait = 500) { |
||||
console.log(arguments[0],'arguments') |
||||
timeout && clearTimeout(timeout) |
||||
timeout = setTimeout(() => { |
||||
console.log('执行') |
||||
typeof func === 'function' && func() |
||||
}, wait) |
||||
} |
||||
|
||||
export default debounce |
||||
|
||||
Loading…
Reference in new issue