From 353e1d51e00c72b4547a6ef1d60ee6e95551fcb4 Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Fri, 8 Sep 2023 10:16:09 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=90=9C=E7=B4=A2=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E5=86=B2=E7=AA=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../preview/search/search/components/list.tsx | 166 +++++++++--------- .../preview/search/search/index.module.scss | 52 +++--- src/pages/preview/search/search/index.tsx | 159 +++++++++-------- 3 files changed, 204 insertions(+), 173 deletions(-) diff --git a/src/pages/preview/search/search/components/list.tsx b/src/pages/preview/search/search/components/list.tsx index 88c0e32..b2be759 100644 --- a/src/pages/preview/search/search/components/list.tsx +++ b/src/pages/preview/search/search/components/list.tsx @@ -4,17 +4,17 @@ import styles from './list.module.scss' import Taro from "@tarojs/taro"; import Empty from "@/components/empty/empty"; import Img from "@/components/image/image"; -import { SearchApi } from "@/api/search"; -import { AtLoadMore } from 'taro-ui' +import {SearchApi} from "@/api/search"; +import {AtLoadMore} from 'taro-ui' import {rfc33392time} from "@/utils/day"; import play from "@/static/img/play.png"; type Props = { - name:string - clear:boolean + name: string + clear: boolean } -const SearchList: FC = ({name,clear}) => { - console.log(name,'name') +const SearchList: FC = ({name, clear}) => { + console.log(name, 'name') const globalData = Taro.getApp().globalData const [page, setPage] = useState(1) const [brands, setBrands] = useState([]) @@ -22,31 +22,31 @@ const SearchList: FC = ({name,clear}) => { const [text, setText] = useState('') const [loading, setLoading] = useState(true) - useEffect(()=>{ - if(!clear){ + useEffect(() => { + if (!clear) { setBrands([]) setLoading(true) } - },[clear]) + }, [clear]) useEffect(() => { - if(name && clear){ + if (name && clear) { getData() } - }, [page,name,clear]) + }, [page, name, clear]) const getData = useCallback(async () => { try { - const data = await SearchApi.list(page, 10,name) + const data = await SearchApi.list(page, 10, name) if (page === 1) { if (data.data.length < 10) { - setText('没有更多了~') + setText('没有更多了') } else { - setText('上拉加载更多~') + setText('上拉加载更多') } setBrands([ ...data.data ]) - }else{ + } else { setBrands([ ...brands, ...data.data @@ -57,13 +57,13 @@ const SearchList: FC = ({name,clear}) => { } catch (e) { } setLoading(false) - }, [page,name]) + }, [page, name]) - function jumpInfo(id: number,type:string,health:any) { - console.log(type,'type') + function jumpInfo(id: number, type: string, health: any) { + console.log(type, 'type') let url = '' - switch (type){ + switch (type) { case 'brand': url = '/pages/preview/brand/info/info'; break; @@ -74,7 +74,7 @@ const SearchList: FC = ({name,clear}) => { url = '/pages/preview/illness/article/article' break case 'video_records': - return Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resources.url}&poster=${health.url_path}&title=${health.title}`}) + return Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resources.url}&poster=${health.url_path}&title=${health.title}`}) case 'courses': url = '/pages/business/videoInfo/videoInfo' break @@ -83,13 +83,13 @@ const SearchList: FC = ({name,clear}) => { } - function onScrollToLower(){ - if (brands?.length < total) { - setPage(page + 1) - getData().then() - } else { - setText('没有更多了~') - } + function onScrollToLower() { + if (brands?.length < total) { + setPage(page + 1) + getData().then() + } else { + setText('没有更多了') + } } return ( @@ -97,68 +97,70 @@ const SearchList: FC = ({name,clear}) => { className='scrollview' scrollY scrollWithAnimation - style={{height:`${globalData.windowHeight-140}px`,backgroundColor:`#f5f5f5`}} + style={{height: `${globalData.pageHeight - 20}px`, backgroundColor: `#f5f5f5`}} onScrollToLower={onScrollToLower} > - { loading && } + {loading && } { brands.length >= 1 && !loading && - <> - {brands.map((d) => - jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}> - { - d.data.table === 'brand' && - <> - - - {d.data.title} - {d.data.content || '暂无品牌简介'} - - - } - { - d.data.table === 'article' && - <> - - {d.data['@data'].title} - {rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读 - - - - } - { - d.data.table === 'video_records' && - <> - - - - {d.data['@data'].title} - {d.data['@data'].introduction} - 播放量: {d.data['@data'].video_view} - - - } - { - d.data.table === 'courses' && - <> - - - {d.data['@data'].title} - 课时:{d.data['@data'].class_hour}节 销量：{d.data['@data'].charge} - - - } - - + <> + {brands.map((d) => + jumpInfo(d.data.id, d.data.table, d.data['@data'])} className={styles.box} + key={d.data.id}> + { + d.data.table === 'brand' && + <> + + + {d.data.title} + {d.data.content || '暂无品牌简介'} + + + } + { + d.data.table === 'article' && + <> + + {d.data['@data'].title} + {rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读 + + + + } + { + d.data.table === 'video_records' && + <> + + + + {d.data['@data'].title} + {d.data['@data'].introduction} + 播放量: {d.data['@data'].video_view} + + + } + { + d.data.table === 'courses' && + <> + + + {d.data['@data'].title} + 课时:{d.data['@data'].class_hour}节 + 销量：{d.data['@data'].charge} + + + } - - ) - } - {text} - + + ) + } + {text} + } - { !loading && brands.length === 0 && } + {!loading && brands.length === 0 && } ) } diff --git a/src/pages/preview/search/search/index.module.scss b/src/pages/preview/search/search/index.module.scss index 88d34c3..3ead51e 100644 --- a/src/pages/preview/search/search/index.module.scss +++ b/src/pages/preview/search/search/index.module.scss @@ -1,46 +1,58 @@ -page{ - background-color:#F2F8F6; +page { + background-color: #F2F8F6; - .navBox{ - position: fixed; - width:750rpx; + .searchHeader { + margin-top: 10px; + padding: 0 20rpx; + display: flex; + align-items: center; + justify-content: space-between; + transition: all 200ms; + position: sticky; + z-index: 200 ; + overflow: hidden; } - .searchBox{ - width: 690rpx; + + .searchBox { + flex: 1; height: 68rpx; background: #FFFFFF; - border-radius: 32rpx 32rpx 32rpx 32rpx; + border-radius: 32rpx; box-sizing: border-box; display: flex; align-items: center; - padding:0 24rpx; - .input{ + padding: 0 24rpx; + + .input { font-size: 28rpx; - font-weight: 500; - margin-left: 24rpx; - flex:1; + margin-left: 20rpx; + flex: 1; } } - .titleBox{ - margin-top: 60rpx; + + .titleBox { + margin-top: 40rpx; width: 100%; display: flex; box-sizing: border-box; padding-right: 30rpx; justify-content: space-between; - .title{ - font-size: 28rpx; + + .title { + font-size: 30rpx; font-weight: bold; color: #323635; } } - .contentBox{ + + .contentBox { display: flex; flex-wrap: wrap; - .items{ + + .items { display: inline-block; background: #FFFFFF; - border-radius:32rpx; + border-radius: 32rpx; padding: 10rpx 24rpx; font-size: 24rpx; font-weight: 500; diff --git a/src/pages/preview/search/search/index.tsx b/src/pages/preview/search/search/index.tsx index 4641474..f68dbaa 100644 --- a/src/pages/preview/search/search/index.tsx +++ b/src/pages/preview/search/search/index.tsx @@ -1,110 +1,121 @@ -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 {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 NavigationBar from "@/components/navigationBar/navigationBar"; +import search from '@/static/img/search.png' +import del from '@/static/img/del.png' -const Search:FC = () => { - const globalData = Taro.getApp().globalData +const Search: FC = () => { const [value, setValue] = useState('') const [recentSearch, setRecentSearch] = useState([]) - const [hotSearch,setHotSearch] = useState([]) + const [hotSearch] = useState([]) const [show, setShow] = useState(false) + const [focus, setFocus] = useState(false) - useReady(()=>{ - console.log('onReady') - }) - useDidShow(()=>{ - getRecentSearch() - }) - useEffect(()=>{ - if(!show){ - getRecentSearch() - } - },[show]) + useDidShow(getRecentSearch) - function inpFn(e){ + useEffect(() => { + !show && getRecentSearch() + }, [show]) + + function inpFn(e) { setValue(e.detail.value) } - function clearSearch(){ + function clearSearch() { Taro.removeStorageSync('recentSearch') getRecentSearch() + Taro.showToast({title: '删除成功'}) } - 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)]) + } - function navBack(){ - Taro.navigateBack() - } + function cancelSearch(){ + setValue('') + setShow(false) + setFocus(false) + } + + + const searchStyles = useMemo((): React.CSSProperties | undefined => { + if (focus || show) { + return { + transform: "translateY(-43px)", + width: "70%", + } + } + }, [focus, show]) return ( - - - - - - - 搜索 - - - - - + + - - { show ? - {value}: - - } + + setFocus(true)} + onBlur={() => setFocus(false)} + className={styles.input} + placeholder={(focus || show) ? '' : "输入关键字搜索"} + type='text' + value={value} + confirmType='search' + onInput={inpFn} + onConfirm={searchInput}/> + + {focus || show ? 取消 : null} + + { recentSearch.length >= 1 && !show && - <> - + + 最近搜索 - + - - { - recentSearch.length && - recentSearch?.map(d => - - {getSearchItem(d)}} className="font-28" >{d} - ) - } - - + + { + recentSearch.length > 0 && + recentSearch?.map(d => + + getSearchItem(d)} className="font-28">{d} + ) + } + + } { hotSearch.length >= 1 && !show && <> - + 热门搜索 @@ -114,7 +125,9 @@ const Search:FC = () => { hotSearch.length && hotSearch.map(d => - {getSearchItem(d)}} className="font-28" >{d} + { + getSearchItem(d) + }} className="font-28">{d} ) } @@ -122,11 +135,15 @@ const Search:FC = () => { } - {setShow(false)}} onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} > - + + - - ) }