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 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}) => {
console.log(name,'name')
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[]>([])
@ -22,31 +22,31 @@ 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('没有更多了~')
setText('没有更多了')
} else {
setText('上拉加载更多~')
setText('上拉加载更多')
}
setBrands([
...data.data
])
}else{
} else {
setBrands([
...brands,
...data.data
@ -57,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;
@ -74,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
@ -83,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 (
@ -97,68 +97,70 @@ const SearchList: FC<Props> = ({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 && <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 className='text-center font-24 text-dark mt-3'>{text}</View>
</>
}
{ !loading && brands.length === 0 && <Empty name='空空如也'/>}
{!loading && brands.length === 0 && <Empty name='空空如也'/>}
</ScrollView>
)
}

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

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

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

@ -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<string[]>([])
const [hotSearch,setHotSearch] = useState<any[]>([])
const [hotSearch] = useState<any[]>([])
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 (
<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>
<NavigationBar text='搜索'/>
<View className={styles.searchHeader} style={searchStyles}>
<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} />
}
<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'
value={value}
confirmType='search'
onInput={inpFn}
onConfirm={searchInput}/>
</View>
{focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null}
</View>
{
recentSearch.length >= 1 && !show &&
<>
<View className={styles.titleBox} >
<View className='px-2'>
<View className={styles.titleBox}>
<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 className={styles.contentBox}>
{
recentSearch.length &&
recentSearch?.map(d =>
<View className={styles.items}>
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
</View>)
}
</View>
</>
<View className={styles.contentBox}>
{
recentSearch.length > 0 &&
recentSearch?.map(d =>
<View className={styles.items}>
<View onClick={() => getSearchItem(d)} className="font-28">{d}</View>
</View>)
}
</View>
</View>
}
{
hotSearch.length >= 1 && !show &&
<>
<View className={`flex justify-between ${styles.titleBox}`} >
<View className={`flex justify-between ${styles.titleBox}`}>
<Text className="font-32 fwb">热门搜索</Text>
</View>
@ -114,7 +125,9 @@ const Search:FC = () => {
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 onClick={() => {
getSearchItem(d)
}} className="font-28">{d}</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)'} >
<SearchList name={value} clear={show} />
<PageContainer
onBeforeLeave={cancelSearch}
onClickOverlay={cancelSearch}
show={show}
round
overlay
overlayStyle={'background:rgba(0,0,0,0)'}>
<SearchList name={value} clear={show}/>
</PageContainer>
</View>
</View>
)
}

Write Preview
Loading…
Cancel
Save