video/src/pages/search/index.tsx

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 {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 [value, setValue] = useState('')
  const [recentSearch, setRecentSearch] = useState<string[]>([])
  const [hotSearch] = useState<any[]>([])
  const [show, setShow] = useState(false)
  const [focus, setFocus] = useState(false)


  useDidShow(getRecentSearch)

  useEffect(() => {
    !show && getRecentSearch()
  }, [show])

  function inpFn(e) {
    setValue(e.detail.value)
  }

  function clearSearch() {
    Taro.removeStorageSync('recentSearch')
    getRecentSearch()
    Taro.showToast({title: '删除成功'})
  }

  function getRecentSearch() {
    setRecentSearch(Taro.getStorageSync('recentSearch'))
  }

  function getSearchItem(value) {
    setValue(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 cancelSearch(){
    setValue('')
    setShow(false)
    setFocus(false)
    // Taro.navigateBack()
  }


  const searchStyles = useMemo((): React.CSSProperties | undefined => {
    if (focus || show) {
      return {
        // transform: "translateY(-43px)",
        // width: "100%",
      }
    }
  }, [focus, show])


  return (
    <View className="flex flex-column">
      <NavigationBar cancelBack={true} backgroundColor={'#F2F8F6'} leftNode={
        <Text className="bold font-36 ml-1" style={{color:'#323635'}} >搜索</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