diff --git a/src/components/learningRecord/learningRecord.tsx b/src/components/learningRecord/learningRecord.tsx index 54cabdf..8e3db5c 100644 --- a/src/components/learningRecord/learningRecord.tsx +++ b/src/components/learningRecord/learningRecord.tsx @@ -8,6 +8,7 @@ import styles from './learningRecord.module.scss' // import Spin from "@/components/spinner"; import {Profile} from "@/store"; import Taro from "@tarojs/taro"; +import debounce from "@/utils/debounce"; const tabList: TabList[] = [ { @@ -63,11 +64,15 @@ const LearningRecord: FC = ({userId, style, className}) => { Taro.navigateTo({url: '/pages/login/login'}) return } - getStatistics(tab?.value! as StatisticsParam) + // getStatistics(tab?.value! as StatisticsParam) + debounce(()=>{ + // console.log(this,'this') + getStatistics(tab?.value! as StatisticsParam) + }) } useEffect(() => { - userId && getStatistics(tabList[0].value) + userId && setTimeout(() => {getStatistics(tabList[0].value)},500) }, [userId]) return ( diff --git a/src/pages/my/my.tsx b/src/pages/my/my.tsx index 6a48127..67c67a5 100644 --- a/src/pages/my/my.tsx +++ b/src/pages/my/my.tsx @@ -21,7 +21,6 @@ interface List { src: string, type?: number } - function jump(token: string | null, type?: number) { if (!token) { Taro.navigateTo({url: '/pages/login/login'}) @@ -174,6 +173,7 @@ const My: FC = () => { + ) } diff --git a/src/pages/preview/search/search/components/list.tsx b/src/pages/preview/search/search/components/list.tsx index d07e620..88c0e32 100644 --- a/src/pages/preview/search/search/components/list.tsx +++ b/src/pages/preview/search/search/components/list.tsx @@ -4,16 +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}) => { +const SearchList: FC = ({name,clear}) => { + console.log(name,'name') const globalData = Taro.getApp().globalData const [page, setPage] = useState(1) const [brands, setBrands] = useState([]) @@ -21,21 +22,21 @@ 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('没有更多了~') @@ -45,7 +46,7 @@ const SearchList: FC = ({name, clear}) => { setBrands([ ...data.data ]) - } else { + }else{ setBrands([ ...brands, ...data.data @@ -56,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; @@ -73,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 @@ -82,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 ( @@ -96,71 +97,68 @@ const SearchList: FC = ({name, clear}) => { className='scrollview' scrollY scrollWithAnimation - style={{height: `${globalData.pageHeight - 20}px`, backgroundColor: `#f5f5f5`}} + style={{height:`${globalData.windowHeight-140}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.config.ts b/src/pages/preview/search/search/index.config.ts index 0b7d560..23c20dd 100644 --- a/src/pages/preview/search/search/index.config.ts +++ b/src/pages/preview/search/search/index.config.ts @@ -1,6 +1,3 @@ export default definePageConfig({ - navigationBarTitleText: '搜索', - navigationBarBackgroundColor: '#F2F8F6', - onReachBottomDistance: 50, - navigationStyle: 'custom', + navigationStyle: 'custom' }) diff --git a/src/pages/preview/search/search/index.module.scss b/src/pages/preview/search/search/index.module.scss index fb4571b..88d34c3 100644 --- a/src/pages/preview/search/search/index.module.scss +++ b/src/pages/preview/search/search/index.module.scss @@ -1,58 +1,46 @@ -page { - background-color: #F2F8F6; +page{ + background-color:#F2F8F6; - .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; + .navBox{ + position: fixed; + width:750rpx; } - - .searchBox { - flex: 1; + .searchBox{ + width: 690rpx; height: 68rpx; background: #FFFFFF; - border-radius: 32rpx; + border-radius: 32rpx 32rpx 32rpx 32rpx; box-sizing: border-box; display: flex; align-items: center; - padding: 0 24rpx; - - .input { + padding:0 24rpx; + .input{ font-size: 28rpx; - margin-left: 20rpx; - flex: 1; + font-weight: 500; + margin-left: 24rpx; + flex:1; } } - - .titleBox { + .titleBox{ margin-top: 60rpx; width: 100%; display: flex; box-sizing: border-box; padding-right: 30rpx; justify-content: space-between; - - .title { + .title{ font-size: 28rpx; 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 a854d64..4641474 100644 --- a/src/pages/preview/search/search/index.tsx +++ b/src/pages/preview/search/search/index.tsx @@ -1,136 +1,133 @@ -import {Input, View, Text, PageContainer, Image} from "@tarojs/components"; -import React, {FC, useEffect, useMemo, useState} from "react"; +import {Input, View, Text, PageContainer} from "@tarojs/components"; +import {FC, useEffect, useState} from "react"; +import { AtIcon } from 'taro-ui' import styles from './index.module.scss' import Taro from "@tarojs/taro"; -import {useDidShow} from '@tarojs/taro' +import { useReady, 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 globalData = Taro.getApp().globalData const [value, setValue] = useState('') const [recentSearch, setRecentSearch] = useState([]) - const [hotSearch] = useState([]) + const [hotSearch,setHotSearch] = useState([]) const [show, setShow] = useState(false) - const [focus, setFocus] = useState(false) - useDidShow(getRecentSearch) + useReady(()=>{ + console.log('onReady') + }) + 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)]) + } + + function navBack(){ + Taro.navigateBack() + } - const searchStyles = useMemo((): React.CSSProperties | undefined => { - if (focus || show) { - return { - transform: "translateY(-43px)", - width: "70%", - } - } - }, [focus, show]) return ( - <> - - - - - setFocus(true)} - onBlur={() => setFocus(false)} - className={styles.input} - placeholder={(focus || show) ? '' : "输入关键字搜索"} - type='text' - confirmType='search' - onInput={inpFn} - onConfirm={searchInput}/> + + + + + + + + 搜索 + + + + + + + { show ? + {value}: + + } - {focus || show ? setShow(false)}>取消 : null} - - - - { - recentSearch.length >= 1 && !show && - <> - - 搜索历史 - - + + { + recentSearch.length >= 1 && !show && + <> + + 最近搜索 + + { recentSearch.length && - recentSearch?.map(d => - getSearchItem(d)} className="font-28">{d} - ) + recentSearch?.map(d => + + {getSearchItem(d)}} className="font-28" >{d} + ) } - - } - { - hotSearch.length >= 1 && !show && - <> - - - 热门搜索 - - - - { - hotSearch.length && - hotSearch.map(d => - - { - getSearchItem(d) - }} className="font-28">{d} - ) - } - + + } + { + hotSearch.length >= 1 && !show && + <> + + + 热门搜索 + + + + { + hotSearch.length && + hotSearch.map(d => + + {getSearchItem(d)}} className="font-28" >{d} + ) + } - - } - - setShow(false)} - show={show} - overlay - overlayStyle={'background:rgba(0,0,0,0)'}> - - - - + + + } + + {setShow(false)}} onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} > + + + + ) } export default Search diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts new file mode 100644 index 0000000..0ef681f --- /dev/null +++ b/src/utils/debounce.ts @@ -0,0 +1,12 @@ +let timeout:any = null +function debounce(func, wait = 500) { + console.log(arguments[0],'arguments') + timeout && clearTimeout(timeout) + timeout = setTimeout(() => { + console.log('执行') + typeof func === 'function' && func() + }, wait) +} + +export default debounce +