xing
/
video
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: xing:c37e360cb68e00a41ea14e55c5b84d01fb9d1f4c
Branches Tags
xing:main
xing:master
xing:v2
..
compare: xing:29006f34f342f7d0053035b37610fe61f4d45950
Branches Tags
xing:main
xing:master
xing:v2

2 Commits
c37e360cb6 ... 29006f34f3

Author SHA1 Message Date
一杯沧海 29006f34f3 Merge branch 'master' of https://git.yaojiankang.top/xing/video
1 year ago
一杯沧海 c332fdca11 搜索页面bug&个人中心学习记录bug&防抖
1 year ago
7 changed files with 210 additions and 213 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats
  1. 9
      src/components/learningRecord/learningRecord.tsx
  2. 2
      src/pages/my/my.tsx
  3. 162
      src/pages/preview/search/search/components/list.tsx
  4. 5
      src/pages/preview/search/search/index.config.ts
  5. 48
      src/pages/preview/search/search/index.module.scss
  6. 185
      src/pages/preview/search/search/index.tsx
  7. 12
      src/utils/debounce.ts

9
src/components/learningRecord/learningRecord.tsx
Unescape View File

@ -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<any>[] = [
{
@ -63,11 +64,15 @@ const LearningRecord: FC<Props> = ({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 (<View className={[styles.box, className].filter(Boolean).join(' ')} style={{display: 'block', ...style}}>

2
src/pages/my/my.tsx
Unescape View File

@ -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'})
@ -169,6 +168,7 @@ const My: FC = () => {
</PageContainer>
</View>
</View>
)
}

162
src/pages/preview/search/search/components/list.tsx
Unescape View File

@ -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<Props> = ({name, clear}) => {
const SearchList: FC<Props> = ({name,clear}) => {
console.log(name,'name')
const globalData = Taro.getApp().globalData
const [page, setPage] = useState(1)
const [brands, setBrands] = useState<any[]>([])
@ -21,21 +22,21 @@ const SearchList: FC<Props> = ({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<Props> = ({name, clear}) => {
setBrands([
...data.data
])
} else {
}else{
setBrands([
...brands,
...data.data
@ -56,13 +57,13 @@ const SearchList: FC<Props> = ({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<Props> = ({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<Props> = ({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<Props> = ({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 && <AtLoadMore status={'loading'}/>}
{ loading && <AtLoadMore status={'loading'}/>}
{
brands.length >= 1 && !loading &&
<>
{brands.map((d) =>
<View onClick={() => jumpInfo(d.data.id, d.data.table, d.data['@data'])} className={styles.box}
key={d.data.id}>
{
d.data.table === 'brand' &&
<>
<Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
<View className={styles.rightBox}>
<View className='font-weight mb-2 font-28'>{d.data.title}</View>
<View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View>
</View>
</>
}
{
d.data.table === 'article' &&
<>
<View className={styles.articleLeftBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View
className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
</View>
<Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
</>
}
{
d.data.table === 'video_records' &&
<>
<Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill'
className={styles.image}/>
<Image src={play} className={styles.play} mode='aspectFit'/>
<View className={styles.videoRightBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>{d.data['@data'].introduction}</View>
<View className={`${styles.desc} mt-2`}>播放量: {d.data['@data'].video_view}</View>
</View>
</>
}
{
d.data.table === 'courses' &&
<>
<Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
<View className={styles.articleLeftBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>课时:{d.data['@data'].class_hour}节
销量：{d.data['@data'].charge}</View>
</View>
</>
}
<>
{brands.map((d) =>
<View onClick={() => jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}>
{
d.data.table === 'brand' &&
<>
<Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
<View className={styles.rightBox}>
<View className='font-weight mb-2 font-28'>{d.data.title}</View>
<View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View>
</View>
</>
}
{
d.data.table === 'article' &&
<>
<View className={styles.articleLeftBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
</View>
<Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
</>
}
{
d.data.table === 'video_records' &&
<>
<Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill' className={styles.image}/>
<Image src={play} className={styles.play} mode='aspectFit'/>
<View className={styles.videoRightBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>{d.data['@data'].introduction}</View>
<View className={`${styles.desc} mt-2`}>播放量: {d.data['@data'].video_view}</View>
</View>
</>
}
{
d.data.table === 'courses' &&
<>
<Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
<View className={styles.articleLeftBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>课时:{d.data['@data'].class_hour}节 销量：{d.data['@data'].charge}</View>
</View>
</>
}
</View>
)
}
<View style={{width: '750rpx', textAlign: 'center', color: '#999'}}
className="font-28 mt-3 mb-3">{text}</View>
</>
</View>
)
}
<View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3 mb-3">{text}</View>
</>
}
{!loading && brands.length === 0 && <Empty name='空空如也'/>}
{ !loading && brands.length === 0 && <Empty name='空空如也'/>}
</ScrollView>
)
}

5
src/pages/preview/search/search/index.config.ts
Unescape View File

@ -1,6 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '搜索',
navigationBarBackgroundColor: '#F2F8F6',
onReachBottomDistance: 50,
navigationStyle: 'custom',
navigationStyle: 'custom'
})

48
src/pages/preview/search/search/index.module.scss
Unescape View File

@ -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;

185
src/pages/preview/search/search/index.tsx
Unescape View File

@ -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<string[]>([])
const [hotSearch] = useState<any[]>([])
const [hotSearch,setHotSearch] = useState<any[]>([])
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 (
<>
<NavigationBar 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'
confirmType='search'
onInput={inpFn}
onConfirm={searchInput}/>
<View className="flex flex-column">
<View className={styles.navBox} style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}>
<View style={{height:`${globalData.statusBarHeight}px`}}></View>
<View style={{height:`${globalData.textBarHeight}px`,display:'flex',alignItems:'center'}}>
<View className="flex justify-end" style={{width:'40px'}}>
<AtIcon value='chevron-left' size='25' color='#333' onClick={navBack}></AtIcon>
</View>
<View className="font-28 font-weight flex-1" style={{display:'flex',justifyContent:'center',paddingRight:'40px',boxSizing:'border-box'}}>搜索</View>
</View>
</View>
<View style={{paddingLeft: '30rpx'}}>
<View style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}></View>
<View className={styles.searchBox}>
<AtIcon value='search' size='20' color='#ccc'></AtIcon>
{ show ?
<Text className={styles.input} >{value}</Text>:
<Input className={styles.input} placeholder="输入关键字搜索" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} />
}
</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 &&
<>
<View className={styles.titleBox}>
<Text className={styles.title}>搜索历史</Text>
<Image src={del} mode='widthFix' style={{width: '16px'}} onClick={clearSearch}/>
</View>
{
recentSearch.length >= 1 && !show &&
<>
<View className={styles.titleBox} >
<Text className={styles.title}>最近搜索</Text>
<AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon>
</View>
<View className={styles.contentBox}>
{
recentSearch.length &&
recentSearch?.map(d => <View className={styles.items}>
<View onClick={() => getSearchItem(d)} className="font-28">{d}</View>
</View>)
recentSearch?.map(d =>
<View className={styles.items}>
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</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>
</>
}
{
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>
</>
}
<PageContainer
onClickOverlay={() => setShow(false)}
show={show}
overlay
overlayStyle={'background:rgba(0,0,0,0)'}>
<SearchList name={value} clear={show}/>
</PageContainer>
</View>
</>
</View>
</>
}
<PageContainer onBeforeLeave={() => {setShow(false)}} onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} >
<SearchList name={value} clear={show} />
</PageContainer>
</View>
</View>
)
}
export default Search

12
src/utils/debounce.ts
Unescape View File

@ -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
Write Preview
Loading…
Cancel
Save