Compare commits
4 Commits
68d99f86b1
...
c37e360cb6
| Author | SHA1 | Date |
|---|---|---|
king
|
c37e360cb6 | 1 year ago |
|
king
|
5137d3297f | 1 year ago |
|
king
|
805b47435f | 1 year ago |
|
king
|
3e4a30cf1f | 1 year ago |
@ -1,5 +1,6 @@ |
||||
export default definePageConfig({ |
||||
navigationBarTitleText: '搜索', |
||||
navigationBarBackgroundColor:'#F2F8F6', |
||||
onReachBottomDistance: 50 |
||||
navigationBarBackgroundColor: '#F2F8F6', |
||||
onReachBottomDistance: 50, |
||||
navigationStyle: 'custom', |
||||
}) |
||||
|
||||
@ -1,116 +1,136 @@ |
||||
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 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){ |
||||
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)]) |
||||
} |
||||
|
||||
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> |
||||
|
||||
{ |
||||
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="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> |
||||
<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>) |
||||
} |
||||
</> |
||||
} |
||||
{ |
||||
hotSearch.length >= 1 && !show && |
||||
<> |
||||
<View className={`flex justify-between ${styles.titleBox}`}> |
||||
|
||||
<Text className="font-32 fwb">热门搜索</Text> |
||||
</View> |
||||
</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> |
||||
</View> |
||||
</> |
||||
} |
||||
|
||||
<PageContainer onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} > |
||||
<SearchList name={value} clear={show} /> |
||||
</PageContainer> |
||||
<PageContainer |
||||
onClickOverlay={() => setShow(false)} |
||||
show={show} |
||||
overlay |
||||
overlayStyle={'background:rgba(0,0,0,0)'}> |
||||
<SearchList name={value} clear={show}/> |
||||
</PageContainer> |
||||
</View> |
||||
</> |
||||
|
||||
</View> |
||||
) |
||||
} |
||||
export default Search |
||||
|
||||
|
After Width: | Height: | Size: 400 B |
Loading…
Reference in new issue