@ -1,206 +1,151 @@
// import {Input, View, Text, PageContainer, Image} from "@tarojs/components";
import { Input , View , Text , PageContainer , Image } from "@tarojs/components" ;
// import {FC, useEffect, useMemo, useState} from "react";
import { FC , useEffect , useMemo , useState } from "react" ;
// 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 { useDidShow } from '@tarojs/taro'
// import SearchList from './components/list'
import SearchList from './components/list'
// import NavigationBar from "@/components/navigationBar/navigationBar";
import NavigationBar from "@/components/navigationBar/navigationBar" ;
// import search from '@/static/img/search.png'
import search from '@/static/img/search.png'
// import del from '@/static/img/del.png'
import del from '@/static/img/del.png'
//
//
// const Search: FC = () => {
const Search : FC = ( ) = > {
// const [value, setValue] = useState('')
const [ value , setValue ] = useState ( '' )
// const [recentSearch, setRecentSearch] = useState<string[]>([])
const [ recentSearch , setRecentSearch ] = useState < string [ ] > ( [ ] )
// const [hotSearch] = useState<any[]>([])
const [ hotSearch ] = useState < any [ ] > ( [ ] )
// const [show, setShow] = useState(false)
const [ show , setShow ] = useState ( false )
// const [focus, setFocus] = useState(false)
const [ focus , setFocus ] = useState ( false )
//
//
// useDidShow(getRecentSearch)
useDidShow ( getRecentSearch )
//
// useEffect(() => {
useEffect ( ( ) = > {
// !show && getRecentSearch()
! show && 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 ( )
// Taro.showToast({title: '删除成功'})
Taro . showToast ( { title : '删除成功' } )
// }
}
//
// function getRecentSearch() {
function getRecentSearch() {
// setRecentSearch(Taro.getStorageSync('recentSearch'))
setRecentSearch ( Taro . getStorageSync ( 'recentSearch' ) )
// }
}
//
// function getSearchItem(value) {
function getSearchItem ( value ) {
// setValue(value)
setValue ( 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 cancelSearch(){
function cancelSearch ( ) {
// setValue('')
setValue ( '' )
// setShow(false)
setShow ( false )
// setFocus(false)
setFocus ( false )
// Taro.navigateBack()
Taro . navigateBack ( )
// }
}
//
//
// const searchStyles = useMemo((): React.CSSProperties | undefined => {
const searchStyles = useMemo ( ( ) : React . CSSProperties | undefined = > {
// if (focus || show) {
if ( focus || show ) {
// return {
return {
// // transform: "translateY(-43px)",
// transform: "translateY(-43px)",
// // width: "100%",
// width: "100%",
// }
}
// }
}
// }, [focus, show])
} , [ focus , show ] )
//
//
// return (
// <View className="flex flex-column">
// <NavigationBar cancelBack={true} backgroundColor={'#F2F8F6'} 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>
// <View className='px-2 text-dark' onClick={cancelSearch}>取消</View>
// {/*{focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null}*/}
// </View>
//
//
// {
// recentSearch.length >= 1 && !show &&
// <View className='px-2'>
// <View className={styles.titleBox}>
// <Text className={styles.title}>最近搜索</Text>
// <Image
// src={del}
// mode='widthFix'
// style={{width: '16px', height: '16px', padding: '0 20rpx'}}
// onClick={clearSearch}/>
// </View>
// <View className={styles.contentBox}>
// {
// recentSearch.length > 0 &&
// recentSearch?.map(d =>
// <View className={styles.items}>
// <View onClick={() => getSearchItem(d)} className="font-28">{d}</View>
// </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>
// </View>
// </>
// }
//
// <PageContainer
// onBeforeLeave={cancelSearch}
// onClickOverlay={cancelSearch}
// show={show}
// round
// overlay
// overlayStyle={'background:rgba(0,0,0,0)'}>
// {show && <SearchList name={value} clear={show}/>}
// </PageContainer>
// </View>
// )
// }
// export default Search
import { FC , useState , useMemo , memo , useCallback } from "react" ;
import { Button , Text , View } from "@tarojs/components" ;
type Props = {
items : number [ ]
}
const Inner :FC < Props > = memo ( ( { items } ) = >
{
console . log ( '子组件渲染' )
return ( return (
< View > < View className = "flex flex-column" >
{ items . length && < NavigationBar cancelBack = { true } backgroundColor = { '#F2F8F6' } text = '搜索' / >
items . map ( d = > < Text key = { d } > { d } < / 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 >
< View className = 'px-2 text-dark' onClick = { cancelSearch } > 取 消 < / View >
{ /*{focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null}*/ }
< / View >
{
recentSearch . length >= 1 && ! show &&
< View className = 'px-2' >
< View className = { styles . titleBox } >
< Text className = { styles . title } > 最 近 搜 索 < / Text >
< Image
src = { del }
mode = 'widthFix'
style = { { width : '16px' , height : '16px' , padding : '0 20rpx' } }
onClick = { clearSearch } / >
< / View >
< View className = { styles . contentBox } >
{
recentSearch . length > 0 &&
recentSearch ? . map ( d = >
< View className = { styles . items } >
< View onClick = { ( ) = > getSearchItem ( d ) } className = "font-28" > { d } < / View >
< / View > )
} }
< / View > < / View >
) < / View >
} ) }
{
hotSearch . length >= 1 && ! show &&
< >
< View className = { ` flex justify-between ${ styles . titleBox } ` } >
type Props1 = { < Text className = "font-32 fwb" > 热 门 搜 索 < / Text >
change : ( e ) = > void < / View >
} < View className = "wid100 pt-3 pl-3 box-b" >
const NewInner :FC < Props1 > = memo ( ( { change } ) = > { < View className = "wid100 flex flex-wrap" >
console . log ( '子组件渲染' ) {
return ( hotSearch . length &&
< Button onClick = { ( e ) = > { change ( e ) } } > 1111111 < / Button > 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 >
< / >
}
const Search : FC = ( ) = > { < PageContainer
const [ b , setB ] = useState ( 1 ) onBeforeLeave = { cancelSearch }
const [ todos ] = useState ( [ 1 , 2 , 3 , 4 , 5 ] ) onClickOverlay = { cancelSearch }
const [ tab , setTab ] = useState ( 1 ) show = { show }
console . log ( '父组件渲染' ) round
const mNum = useMemo ( ( ) = > todos . filter ( d = > d !== tab ) , [ todos , tab ] ) overlay
overlayStyle = { 'background:rgba(0,0,0,0)' } >
const change = useCallback ( ( e :any ) = > { { show && < SearchList name = { value } clear = { show } / > }
console . log ( e ) < / PageContainer >
console . log ( b , 'b' )
setB ( b + 1 )
} , [ b ] )
return (
< View style = { { marginTop : '200px' } } >
< Text > { b } < / Text >
{ /*<Button onClick={()=>{setTab(2);setB(b=> b + 1)}}>==2</Button>*/ }
{ /*<Button onClick={()=>{setTab(3);setB(b=> b + 1)}}>==3</Button>*/ }
{ /*<Button onClick={()=>{setTab(4);setB(b=> b + 1)}}>==4</Button>*/ }
{ /*<Button onClick={()=>{setTab(1);setB(b=> b + 1)}}>==1</Button>*/ }
{ /*<Inner items={mNum}></Inner>*/ }
< NewInner change = { change } > < / NewInner >
< / View > < / View >
) )
} }
