king
1 year ago
parent
805b47435f
commit
5137d3297f
@ -1,5 +1,5 @@ |
|||||||
TARO_APP_API=https://yjx.dev.yaojiankang.top |
#TARO_APP_API=https://yjx.dev.yaojiankang.top |
||||||
#TARO_APP_API=https://mooc.yaojiankang.top |
TARO_APP_API=https://mooc.yaojiankang.top |
||||||
#TARO_APP_API=https://shopfix.yaojiankang.top |
#TARO_APP_API=https://shopfix.yaojiankang.top |
||||||
#TARO_APP_API=https://playedu.yaojiankang.top |
#TARO_APP_API=https://playedu.yaojiankang.top |
||||||
TARO_APP_LGOIN=true |
TARO_APP_LGOIN=true |
||||||
|
|||||||
@ -1,5 +1,6 @@ |
|||||||
export default definePageConfig({ |
export default definePageConfig({ |
||||||
navigationBarTitleText: '搜索', |
navigationBarTitleText: '搜索', |
||||||
navigationBarBackgroundColor:'#F2F8F6', |
navigationBarBackgroundColor: '#F2F8F6', |
||||||
onReachBottomDistance: 50 |
onReachBottomDistance: 50, |
||||||
|
navigationStyle: 'custom', |
||||||
}) |
}) |
||||||
|
|||||||
@ -1,116 +1,136 @@ |
|||||||
import {Input, View, Text, PageContainer} from "@tarojs/components"; |
import {Input, View, Text, PageContainer, Image} from "@tarojs/components"; |
||||||
import {FC, useEffect, useState} from "react"; |
import React, {FC, useEffect, useMemo, 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 { useReady, useDidShow } from '@tarojs/taro' |
import {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 [value, setValue] = useState('') |
const [value, setValue] = useState('') |
||||||
const [recentSearch, setRecentSearch] = useState<string[]>([]) |
const [recentSearch, setRecentSearch] = useState<string[]>([]) |
||||||
const [hotSearch,setHotSearch] = useState<any[]>([]) |
const [hotSearch] = useState<any[]>([]) |
||||||
const [show, setShow] = useState(false) |
const [show, setShow] = useState(false) |
||||||
|
const [focus, setFocus] = useState(false) |
||||||
|
|
||||||
useReady(()=>{ |
useDidShow(getRecentSearch) |
||||||
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)]) |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
|
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.searchHeader} style={searchStyles}> |
||||||
<View className={styles.searchBox}> |
<View className={styles.searchBox}> |
||||||
<AtIcon value='search' size='20' color='#ccc'></AtIcon> |
<Image src={search} style={{width: '32rpx', height: '32rpx'}} mode='widthFix'/> |
||||||
{ show ? |
<Input |
||||||
<Text className={styles.input} >{value}</Text>: |
onFocus={() => setFocus(true)} |
||||||
<Input className={styles.input} placeholder="输入关键字搜索" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} /> |
onBlur={() => setFocus(false)} |
||||||
} |
className={styles.input} |
||||||
|
placeholder={(focus || show) ? '' : "输入关键字搜索"} |
||||||
|
type='text' |
||||||
|
confirmType='search' |
||||||
|
onInput={inpFn} |
||||||
|
onConfirm={searchInput}/> |
||||||
|
|
||||||
</View> |
</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 && |
{ |
||||||
<> |
recentSearch.length >= 1 && !show && |
||||||
<View className={styles.titleBox} > |
<> |
||||||
<Text className={styles.title}>最近搜索</Text> |
<View className={styles.titleBox}> |
||||||
<AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon> |
<Text className={styles.title}>搜索历史</Text> |
||||||
</View> |
<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 => |
recentSearch?.map(d => <View className={styles.items}> |
||||||
<View className={styles.items}> |
<View onClick={() => getSearchItem(d)} className="font-28">{d}</View> |
||||||
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View> |
</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 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> |
||||||
</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)'} > |
<PageContainer |
||||||
<SearchList name={value} clear={show} /> |
onClickOverlay={() => setShow(false)} |
||||||
</PageContainer> |
show={show} |
||||||
|
overlay |
||||||
|
overlayStyle={'background:rgba(0,0,0,0)'}> |
||||||
|
<SearchList name={value} clear={show}/> |
||||||
|
</PageContainer> |
||||||
|
</View> |
||||||
|
</> |
||||||
|
|
||||||
</View> |
|
||||||
) |
) |
||||||
} |
} |
||||||
export default Search |
export default Search |
||||||
|
|||||||
|
After Width: | Height: | Size: 400 B |
Loading…
Reference in new issue