king
1 year ago
commit
d47392954a
@ -1,6 +1,3 @@ |
|||||||
export default definePageConfig({ |
export default definePageConfig({ |
||||||
navigationBarTitleText: '搜索', |
navigationStyle: 'custom' |
||||||
navigationBarBackgroundColor: '#F2F8F6', |
|
||||||
onReachBottomDistance: 50, |
|
||||||
navigationStyle: 'custom', |
|
||||||
}) |
}) |
||||||
|
|||||||
@ -1,136 +1,133 @@ |
|||||||
import {Input, View, Text, PageContainer, Image} from "@tarojs/components"; |
import {Input, View, Text, PageContainer} from "@tarojs/components"; |
||||||
import React, {FC, useEffect, useMemo, useState} from "react"; |
import {FC, useEffect, useState} from "react"; |
||||||
|
import { AtIcon } from 'taro-ui' |
||||||
import styles from './index.module.scss' |
import styles from './index.module.scss' |
||||||
import Taro from "@tarojs/taro"; |
import Taro from "@tarojs/taro"; |
||||||
import {useDidShow} from '@tarojs/taro' |
import { useReady, useDidShow } from '@tarojs/taro' |
||||||
import SearchList from './components/list' |
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 [value, setValue] = useState('') |
||||||
const [recentSearch, setRecentSearch] = useState<string[]>([]) |
const [recentSearch, setRecentSearch] = useState<string[]>([]) |
||||||
const [hotSearch] = useState<any[]>([]) |
const [hotSearch,setHotSearch] = useState<any[]>([]) |
||||||
const [show, setShow] = useState(false) |
const [show, setShow] = useState(false) |
||||||
const [focus, setFocus] = useState(false) |
|
||||||
|
|
||||||
useDidShow(getRecentSearch) |
useReady(()=>{ |
||||||
|
console.log('onReady') |
||||||
|
}) |
||||||
|
useDidShow(()=>{ |
||||||
|
getRecentSearch() |
||||||
|
}) |
||||||
|
|
||||||
useEffect(() => { |
useEffect(()=>{ |
||||||
if (!show) { |
if(!show){ |
||||||
getRecentSearch() |
getRecentSearch() |
||||||
} |
} |
||||||
}, [show]) |
},[show]) |
||||||
|
|
||||||
function inpFn(e) { |
function inpFn(e){ |
||||||
setValue(e.detail.value) |
setValue(e.detail.value) |
||||||
} |
} |
||||||
|
|
||||||
function clearSearch() { |
function clearSearch(){ |
||||||
Taro.removeStorageSync('recentSearch') |
Taro.removeStorageSync('recentSearch') |
||||||
getRecentSearch() |
getRecentSearch() |
||||||
} |
} |
||||||
|
|
||||||
function getRecentSearch() { |
function getRecentSearch () { |
||||||
setRecentSearch(Taro.getStorageSync('recentSearch')) |
setRecentSearch(Taro.getStorageSync('recentSearch')) |
||||||
} |
} |
||||||
|
|
||||||
function getSearchItem(value) { |
function getSearchItem(value) { |
||||||
setValue(value) |
setValue(value) |
||||||
|
// Taro.navigateTo({
|
||||||
|
// url:`/pages/preview/search/list/index?name=${value}`
|
||||||
|
// })
|
||||||
setShow(true) |
setShow(true) |
||||||
} |
} |
||||||
|
|
||||||
function searchInput() { |
function searchInput(){ |
||||||
if (value === "") return; |
if (value === "") return; |
||||||
getSearchItem(value) |
getSearchItem(value) |
||||||
//记录最近搜索
|
//记录最近搜索
|
||||||
let recentSearch = Taro.getStorageSync('recentSearch') || []; |
let recentSearch = Taro.getStorageSync('recentSearch') || []; |
||||||
recentSearch.unshift(value); |
recentSearch.unshift(value); |
||||||
Taro.setStorageSync('recentSearch', [...new Set(recentSearch)]) |
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 ( |
return ( |
||||||
<> |
<View className="flex flex-column"> |
||||||
<NavigationBar text='搜索'/> |
<View className={styles.navBox} style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}> |
||||||
<View className={styles.searchHeader} style={searchStyles}> |
<View style={{height:`${globalData.statusBarHeight}px`}}></View> |
||||||
<View className={styles.searchBox}> |
<View style={{height:`${globalData.textBarHeight}px`,display:'flex',alignItems:'center'}}> |
||||||
<Image src={search} style={{width: '32rpx', height: '32rpx'}} mode='widthFix'/> |
<View className="flex justify-end" style={{width:'40px'}}> |
||||||
<Input |
<AtIcon value='chevron-left' size='25' color='#333' onClick={navBack}></AtIcon> |
||||||
onFocus={() => setFocus(true)} |
</View> |
||||||
onBlur={() => setFocus(false)} |
<View className="font-28 font-weight flex-1" style={{display:'flex',justifyContent:'center',paddingRight:'40px',boxSizing:'border-box'}}>搜索</View> |
||||||
className={styles.input} |
</View> |
||||||
placeholder={(focus || show) ? '' : "输入关键字搜索"} |
</View> |
||||||
type='text' |
|
||||||
confirmType='search' |
|
||||||
onInput={inpFn} |
|
||||||
onConfirm={searchInput}/> |
|
||||||
|
|
||||||
|
<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> |
</View> |
||||||
{focus || show ? <View className='px-2 text-dark' onClick={() => setShow(false)}>取消</View> : null} |
|
||||||
</View> |
{ |
||||||
|
recentSearch.length >= 1 && !show && |
||||||
<View className="flex flex-column px-2"> |
<> |
||||||
{ |
<View className={styles.titleBox} > |
||||||
recentSearch.length >= 1 && !show && |
<Text className={styles.title}>最近搜索</Text> |
||||||
<> |
<AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon> |
||||||
<View className={styles.titleBox}> |
</View> |
||||||
<Text className={styles.title}>搜索历史</Text> |
|
||||||
<Image src={del} mode='widthFix' style={{width: '16px'}} onClick={clearSearch}/> |
|
||||||
</View> |
|
||||||
<View className={styles.contentBox}> |
<View className={styles.contentBox}> |
||||||
{ |
{ |
||||||
recentSearch.length && |
recentSearch.length && |
||||||
recentSearch?.map(d => <View className={styles.items}> |
recentSearch?.map(d => |
||||||
<View onClick={() => getSearchItem(d)} className="font-28">{d}</View> |
<View className={styles.items}> |
||||||
</View>) |
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View> |
||||||
|
</View>) |
||||||
} |
} |
||||||
</View> |
</View> |
||||||
</> |
</> |
||||||
} |
} |
||||||
{ |
{ |
||||||
hotSearch.length >= 1 && !show && |
hotSearch.length >= 1 && !show && |
||||||
<> |
<> |
||||||
<View className={`flex justify-between ${styles.titleBox}`}> |
<View className={`flex justify-between ${styles.titleBox}`} > |
||||||
|
|
||||||
<Text className="font-32 fwb">热门搜索</Text> |
<Text className="font-32 fwb">热门搜索</Text> |
||||||
</View> |
</View> |
||||||
<View className="wid100 pt-3 pl-3 box-b"> |
<View className="wid100 pt-3 pl-3 box-b"> |
||||||
<View className="wid100 flex flex-wrap"> |
<View className="wid100 flex flex-wrap"> |
||||||
{ |
{ |
||||||
hotSearch.length && |
hotSearch.length && |
||||||
hotSearch.map(d => |
hotSearch.map(d => |
||||||
<View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white"> |
<View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white"> |
||||||
<View onClick={() => { |
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View> |
||||||
getSearchItem(d) |
</View>) |
||||||
}} className="font-28">{d}</View> |
} |
||||||
</View>) |
|
||||||
} |
|
||||||
</View> |
|
||||||
</View> |
</View> |
||||||
</> |
</View> |
||||||
} |
</> |
||||||
|
} |
||||||
<PageContainer |
|
||||||
onClickOverlay={() => setShow(false)} |
<PageContainer onBeforeLeave={() => {setShow(false)}} onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} > |
||||||
show={show} |
<SearchList name={value} clear={show} /> |
||||||
overlay |
</PageContainer> |
||||||
overlayStyle={'background:rgba(0,0,0,0)'}> |
</View> |
||||||
<SearchList name={value} clear={show}/> |
|
||||||
</PageContainer> |
|
||||||
</View> |
|
||||||
</> |
|
||||||
|
|
||||||
|
</View> |
||||||
) |
) |
||||||
} |
} |
||||||
export default Search |
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