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

解决搜索代码冲突

Browse Source
v2
king 1 year ago
parent d47392954a
commit 353e1d51e0
3 changed files with 204 additions and 173 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 166
      src/pages/preview/search/search/components/list.tsx
  2. 52
      src/pages/preview/search/search/index.module.scss
  3. 159
      src/pages/preview/search/search/index.tsx

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

@ -4,17 +4,17 @@ import styles from './list.module.scss'
import Taro from "@tarojs/taro"; import Taro from "@tarojs/taro";
import Empty from "@/components/empty/empty"; import Empty from "@/components/empty/empty";
import Img from "@/components/image/image"; import Img from "@/components/image/image";
import { SearchApi } from "@/api/search"; import {SearchApi} from "@/api/search";
import { AtLoadMore } from 'taro-ui' import {AtLoadMore} from 'taro-ui'
import {rfc33392time} from "@/utils/day"; import {rfc33392time} from "@/utils/day";
import play from "@/static/img/play.png"; import play from "@/static/img/play.png";
type Props = { type Props = {
name:string name: string
clear:boolean clear: boolean
} }
const SearchList: FC<Props> = ({name,clear}) => { const SearchList: FC<Props> = ({name, clear}) => {
console.log(name,'name') console.log(name, 'name')
const globalData = Taro.getApp().globalData const globalData = Taro.getApp().globalData
const [page, setPage] = useState(1) const [page, setPage] = useState(1)
const [brands, setBrands] = useState<any[]>([]) const [brands, setBrands] = useState<any[]>([])
@ -22,31 +22,31 @@ const SearchList: FC<Props> = ({name,clear}) => {
const [text, setText] = useState('') const [text, setText] = useState('')
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
useEffect(()=>{ useEffect(() => {
if(!clear){ if (!clear) {
setBrands([]) setBrands([])
setLoading(true) setLoading(true)
} }
},[clear]) }, [clear])
useEffect(() => { useEffect(() => {
if(name && clear){ if (name && clear) {
getData() getData()
} }
}, [page,name,clear]) }, [page, name, clear])
const getData = useCallback(async () => { const getData = useCallback(async () => {
try { try {
const data = await SearchApi.list(page, 10,name) const data = await SearchApi.list(page, 10, name)
if (page === 1) { if (page === 1) {
if (data.data.length < 10) { if (data.data.length < 10) {
setText('没有更多了~') setText('没有更多了')
} else { } else {
setText('上拉加载更多~') setText('上拉加载更多')
} }
setBrands([ setBrands([
...data.data ...data.data
]) ])
}else{ } else {
setBrands([ setBrands([
...brands, ...brands,
...data.data ...data.data
@ -57,13 +57,13 @@ const SearchList: FC<Props> = ({name,clear}) => {
} catch (e) { } catch (e) {
} }
setLoading(false) setLoading(false)
}, [page,name]) }, [page, name])
function jumpInfo(id: number,type:string,health:any) { function jumpInfo(id: number, type: string, health: any) {
console.log(type,'type') console.log(type, 'type')
let url = '' let url = ''
switch (type){ switch (type) {
case 'brand': case 'brand':
url = '/pages/preview/brand/info/info'; url = '/pages/preview/brand/info/info';
break; break;
@ -74,7 +74,7 @@ const SearchList: FC<Props> = ({name,clear}) => {
url = '/pages/preview/illness/article/article' url = '/pages/preview/illness/article/article'
break break
case 'video_records': 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': case 'courses':
url = '/pages/business/videoInfo/videoInfo' url = '/pages/business/videoInfo/videoInfo'
break break
@ -83,13 +83,13 @@ const SearchList: FC<Props> = ({name,clear}) => {
} }
function onScrollToLower(){ function onScrollToLower() {
if (brands?.length < total) { if (brands?.length < total) {
setPage(page + 1) setPage(page + 1)
getData().then() getData().then()
} else { } else {
setText('没有更多了~') setText('没有更多了')
} }
} }
return ( return (
@ -97,68 +97,70 @@ const SearchList: FC<Props> = ({name,clear}) => {
className='scrollview' className='scrollview'
scrollY scrollY
scrollWithAnimation scrollWithAnimation
style={{height:`${globalData.windowHeight-140}px`,backgroundColor:`#f5f5f5`}} style={{height: `${globalData.pageHeight - 20}px`, backgroundColor: `#f5f5f5`}}
onScrollToLower={onScrollToLower} onScrollToLower={onScrollToLower}
> >
{ loading && <AtLoadMore status={'loading'}/>} {loading && <AtLoadMore status={'loading'}/>}
{ {
brands.length >= 1 && !loading && brands.length >= 1 && !loading &&
<> <>
{brands.map((d) => {brands.map((d) =>
<View onClick={() => jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}> <View onClick={() => jumpInfo(d.data.id, d.data.table, d.data['@data'])} className={styles.box}
{ key={d.data.id}>
d.data.table === 'brand' && {
<> d.data.table === 'brand' &&
<Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/> <>
<View className={styles.rightBox}> <Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
<View className='font-weight mb-2 font-28'>{d.data.title}</View> <View className={styles.rightBox}>
<View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View> <View className='font-weight mb-2 font-28'>{d.data.title}</View>
</View> <View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View>
</> </View>
} </>
{ }
d.data.table === 'article' && {
<> 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.articleLeftBox}>
<View className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View> <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
</View> <View
<Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/> 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}/> d.data.table === 'video_records' &&
<Image src={play} className={styles.play} mode='aspectFit'/> <>
<View className={styles.videoRightBox}> <Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill'
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View> className={styles.image}/>
<View className={styles.desc}>{d.data['@data'].introduction}</View> <Image src={play} className={styles.play} mode='aspectFit'/>
<View className={`${styles.desc} mt-2`}>播放量: {d.data['@data'].video_view}</View> <View className={styles.videoRightBox}>
</View> <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}> d.data.table === 'courses' &&
<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> <Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
</View> <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>
) )
} }
<View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3 mb-3">{text}</View> <View className='text-center font-24 text-dark mt-3'>{text}</View>
</> </>
} }
{ !loading && brands.length === 0 && <Empty name='空空如也'/>} {!loading && brands.length === 0 && <Empty name='空空如也'/>}
</ScrollView> </ScrollView>
) )
} }

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

@ -1,46 +1,58 @@
page{ page {
background-color:#F2F8F6; background-color: #F2F8F6;
.navBox{ .searchHeader {
position: fixed; margin-top: 10px;
width:750rpx; 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; height: 68rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 32rpx 32rpx 32rpx 32rpx; border-radius: 32rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
padding:0 24rpx; padding: 0 24rpx;
.input{
.input {
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; margin-left: 20rpx;
margin-left: 24rpx; flex: 1;
flex:1;
} }
} }
.titleBox{
margin-top: 60rpx; .titleBox {
margin-top: 40rpx;
width: 100%; width: 100%;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
padding-right: 30rpx; padding-right: 30rpx;
justify-content: space-between; justify-content: space-between;
.title{
font-size: 28rpx; .title {
font-size: 30rpx;
font-weight: bold; font-weight: bold;
color: #323635; color: #323635;
} }
} }
.contentBox{
.contentBox {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.items{
.items {
display: inline-block; display: inline-block;
background: #FFFFFF; background: #FFFFFF;
border-radius:32rpx; border-radius: 32rpx;
padding: 10rpx 24rpx; padding: 10rpx 24rpx;
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;

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

@ -1,110 +1,121 @@
import {Input, View, Text, PageContainer} from "@tarojs/components"; import {Input, View, Text, PageContainer, Image} from "@tarojs/components";
import {FC, useEffect, useState} from "react"; import {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 NavigationBar from "@/components/navigationBar/navigationBar";
import search from '@/static/img/search.png'
import del from '@/static/img/del.png'
const Search:FC = () => { const Search: FC = () => {
const globalData = Taro.getApp().globalData
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(()=>{
console.log('onReady')
})
useDidShow(()=>{
getRecentSearch()
})
useEffect(()=>{ useDidShow(getRecentSearch)
if(!show){
getRecentSearch()
}
},[show])
function inpFn(e){ useEffect(() => {
!show && getRecentSearch()
}, [show])
function inpFn(e) {
setValue(e.detail.value) setValue(e.detail.value)
} }
function clearSearch(){ function clearSearch() {
Taro.removeStorageSync('recentSearch') Taro.removeStorageSync('recentSearch')
getRecentSearch() getRecentSearch()
Taro.showToast({title: '删除成功'})
} }
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)])
} }
function navBack(){ function cancelSearch(){
Taro.navigateBack() setValue('')
} setShow(false)
setFocus(false)
}
const searchStyles = useMemo((): React.CSSProperties | undefined => {
if (focus || show) {
return {
transform: "translateY(-43px)",
width: "70%",
}
}
}, [focus, show])
return ( return (
<View className="flex flex-column"> <View className="flex flex-column">
<View className={styles.navBox} style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}> <NavigationBar text='搜索'/>
<View style={{height:`${globalData.statusBarHeight}px`}}></View> <View className={styles.searchHeader} style={searchStyles}>
<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}> <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'
value={value}
confirmType='search'
onInput={inpFn}
onConfirm={searchInput}/>
</View> </View>
{focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null}
</View>
{ {
recentSearch.length >= 1 && !show && recentSearch.length >= 1 && !show &&
<> <View className='px-2'>
<View className={styles.titleBox} > <View className={styles.titleBox}>
<Text className={styles.title}>最近搜索</Text> <Text className={styles.title}>最近搜索</Text>
<AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon> <Image
src={del}
mode='widthFix'
style={{width: '16px', height: '16px', padding: '0 20rpx'}}
onClick={clearSearch}/>
</View> </View>
<View className={styles.contentBox}> <View className={styles.contentBox}>
{ {
recentSearch.length && recentSearch.length > 0 &&
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>
</> </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>
@ -114,7 +125,9 @@ const Search:FC = () => {
hotSearch.length && hotSearch.length &&
hotSearch.map(d => hotSearch.map(d =>
<View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white"> <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 onClick={() => {
getSearchItem(d)
}} className="font-28">{d}</View>
</View>) </View>)
} }
</View> </View>
@ -122,11 +135,15 @@ const Search:FC = () => {
</> </>
} }
<PageContainer onBeforeLeave={() => {setShow(false)}} onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} > <PageContainer
<SearchList name={value} clear={show} /> onBeforeLeave={cancelSearch}
onClickOverlay={cancelSearch}
show={show}
round
overlay
overlayStyle={'background:rgba(0,0,0,0)'}>
<SearchList name={value} clear={show}/>
</PageContainer> </PageContainer>
</View>
</View> </View>
) )
} }

Write Preview
Loading…
Cancel
Save