搜索页面列表兼容多种类

v2
一杯沧海 1 year ago
parent 3c8e8f626c
commit e629874abe
  1. 1
      src/app.config.ts
  2. 2
      src/pages/home/components/search.tsx
  3. 72
      src/pages/preview/brand/info/info.tsx
  4. 5
      src/pages/preview/search/list/index.config.ts
  5. 32
      src/pages/preview/search/list/index.module.scss
  6. 95
      src/pages/preview/search/list/index.tsx
  7. 25
      src/pages/preview/search/search/components/list.module.scss
  8. 77
      src/pages/preview/search/search/components/list.tsx
  9. 2
      src/pages/preview/search/search/index.config.ts
  10. 6
      src/pages/preview/search/search/index.tsx
  11. 1
      src/utils/day.ts

@ -94,7 +94,6 @@ export default defineAppConfig({
'illness/article/article',
'webView/webView',
'search/search/index',
'search/list/index',
]
},
],

@ -13,7 +13,7 @@ export const Search: FC = () => {
return (
<View className={styles.search} onClick={jump}>
<Icon name='search' size={18} color='#808080'/>
<View className='ml-1'></View>
<View className='ml-1'></View>
</View>
)
}

@ -66,43 +66,49 @@ const BrandInfo: FC = () => {
return (
<View className='flex flex-column' style={{display: 'flex'}}>
<Spin enable={enable} overlay/>
<Swiper
className={styles['swiper']}
indicatorColor='#999'
indicatorActiveColor='#333'
indicatorDots={false}
onChange={onChange}
{
brandInfo?.introductory_video_resource?.url || brandInfo?.brand_album?.length &&
<>
<Swiper
className={styles['swiper']}
indicatorColor='#999'
indicatorActiveColor='#333'
indicatorDots={false}
onChange={onChange}
>
{brandInfo?.introductory_video_resource?.url && <SwiperItem>
<Video
style={{width: '750rpx', height: '600rpx'}}
playBtnPosition={"center"}
id='video'
src={brandInfo?.introductory_video_resource?.url}
initialTime={0}
controls={true}
enableProgressGesture={false}
showFullscreenBtn={false}
autoplay={false}
loop={false}
muted={false}
/>
</SwiperItem>}
{brandInfo?.brand_album?.length
&& brandInfo?.brand_album?.split(',').map((d) =>
<SwiperItem>
<Image mode={'aspectFill'} style={{width: '750rpx', height: '600rpx'}} src={d}></Image>
</SwiperItem>)
}
</Swiper>
<View className={styles.curIndexBox}>
<Text>{curIndex} / {(brandInfo?.brand_album?.split(',').length || 0) + ((brandInfo && brandInfo.introductory_video_resource) ? 1 : 0)}</Text>
</View>
</>
}
>
{brandInfo?.introductory_video_resource?.url && <SwiperItem>
<Video
style={{width: '750rpx', height: '600rpx'}}
playBtnPosition={"center"}
id='video'
src={brandInfo?.introductory_video_resource?.url}
initialTime={0}
controls={true}
enableProgressGesture={false}
showFullscreenBtn={false}
autoplay={false}
loop={false}
muted={false}
/>
</SwiperItem>}
{brandInfo?.brand_album?.length
&& brandInfo?.brand_album?.split(',').map((d) =>
<SwiperItem>
<Image mode={'aspectFill'} style={{width: '750rpx', height: '600rpx'}} src={d}></Image>
</SwiperItem>)
}
</Swiper>
<View className={styles.curIndexBox}>
<Text>{curIndex} / {(brandInfo?.brand_album?.split(',').length || 0) + ((brandInfo && brandInfo.introductory_video_resource) ? 1 : 0)}</Text>
</View>
<View className={styles['body']}>
<View className={styles['top']}>
<Text className={styles['title']}>{brandInfo?.name}</Text>
<LineEllipsis text={brandInfo?.graphic_introduction || ''}></LineEllipsis>
<LineEllipsis text={brandInfo?.graphic_introduction || '暂无简介'}></LineEllipsis>
</View>
<View className={styles['bottom']}>
{

@ -1,5 +0,0 @@
export default definePageConfig({
navigationBarTitleText: '搜索列表',
navigationBarBackgroundColor:'#F2F8F6',
onReachBottomDistance: 50
})

@ -1,32 +0,0 @@
.box {
display: flex;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx;
box-sizing: border-box;
}
.image{
width: 128rpx;
height:128rpx;
background-color: #ededed;
border-radius: 8rpx;
}
.rightBox{
padding-left: 24rpx;
box-sizing: border-box;
flex: 1;
}
.desc{
font-size: 24rpx;
font-weight: 500;
color: #909795;
line-height: 34rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}

@ -1,95 +0,0 @@
import {FC, useCallback, useEffect, useState} from "react";
import {View} from "@tarojs/components";
import styles from './index.module.scss'
import Taro, {useReachBottom, useRouter} from "@tarojs/taro";
import Empty from "@/components/empty/empty";
import Spinner from "@/components/spinner";
import Img from "@/components/image/image";
import { SearchApi } from "@/api/search";
const SearchList: FC = () => {
const {name} = useRouter().params as unknown as { name: string}
const [page, setPage] = useState(1)
const [brands, setBrands] = useState<any[]>([])
const [total, setTotal] = useState(0)
const [text, setText] = useState('')
const [loading, setLoading] = useState(true)
useEffect(() => {
getData()
}, [page,name])
const getData = useCallback(async () => {
try {
const data = await SearchApi.list(page, 10,name)
if (page === 1) {
if (data.data.length < 10) {
setText('没有更多了~')
} else {
setText('上拉加载更多~')
}
}
setTotal(data.total)
setBrands([
...brands,
...data.data
])
} catch (e) {
}
setLoading(false)
}, [page])
function jumpInfo(id: number,type:string) {
console.log(type,'type')
let url = ''
switch (type){
case 'brand':
url = '/pages/preview/brand/info/info';
break;
case 'illness':
url = '/pages/preview/illness/list/list';
break;
case 'article':
url = '/pages/preview/illness/article/article'
break
case 'video_record':
url = '/pages/preview/videoFull/videoFull'
break
}
Taro.navigateTo({url: `${url}?id=${id}`})
}
useReachBottom(useCallback(() => {
if (brands?.length < total) {
setPage(page + 1)
} else {
setText('没有更多了~')
}
}, [total, brands]))
return (
<View className='p-2'>
<Spinner enable={loading} overlay/>
{
brands.length ?
<>
{brands.map((d) => <View onClick={() => jumpInfo(d.data.id,d.data.table)} className={styles.box} key={d.data.id}>
<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.graphic_introduction}</View>
</View>
</View>)
}
<View style={{width: '710rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3">{text}</View>
</> : <Empty name='空空如也'/>
}
</View>
)
}
export default SearchList

@ -1,22 +1,43 @@
.box {
margin-left:30rpx;
margin-bottom: 24rpx;
width:690rpx;
display: flex;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx;
box-sizing: border-box;
position: relative;
}
.image{
width: 128rpx;
height:128rpx;
background-color: #ededed;
border-radius: 8rpx;
}
.play {
position: absolute;
z-index: 9999;
width: 50rpx !important;
height: 50rpx !important;
top: 99rpx;
left: 99rpx;
background: transparent !important;
}
.rightBox{
padding-left: 24rpx;
box-sizing: border-box;
flex: 1;
}
.articleLeftBox{
padding-right: 24rpx;
box-sizing: border-box;
flex: 1;
}
.videoRightBox{
padding-left: 24rpx;
box-sizing: border-box;
flex: 1;
}
.desc{
font-size: 24rpx;
font-weight: 500;

@ -1,17 +1,20 @@
import {FC, useCallback, useEffect, useState} from "react";
import {ScrollView, View} from "@tarojs/components";
import {Image, ScrollView, View} from "@tarojs/components";
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 {rfc33392time} from "@/utils/day";
import play from "@/static/img/play.png";
type Props = {
name:string
clear:boolean
}
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[]>([])
@ -26,14 +29,13 @@ const SearchList: FC<Props> = ({name,clear}) => {
}
},[clear])
useEffect(() => {
if(name){
if(name && clear){
getData()
}
}, [page,name])
}, [page,name,clear])
const getData = useCallback(async () => {
try {
console.log(name)
const data = await SearchApi.list(page, 10,name)
if (page === 1) {
if (data.data.length < 10) {
@ -58,7 +60,7 @@ const SearchList: FC<Props> = ({name,clear}) => {
}, [page,name])
function jumpInfo(id: number,type:string) {
function jumpInfo(id: number,type:string,health:any) {
console.log(type,'type')
let url = ''
switch (type){
@ -71,8 +73,10 @@ const SearchList: FC<Props> = ({name,clear}) => {
case 'article':
url = '/pages/preview/illness/article/article'
break
case 'video_record':
url = '/pages/preview/videoFull/videoFull'
case 'video_records':
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
}
Taro.navigateTo({url: `${url}?id=${id}`})
@ -93,22 +97,65 @@ const SearchList: FC<Props> = ({name,clear}) => {
className='scrollview'
scrollY
scrollWithAnimation
style={{height:`${globalData.windowHeight-60-30}px`,paddingBottom:`30px`}}
style={{height:`${globalData.windowHeight-60}px`,backgroundColor:`#f5f5f5`}}
onScrollToLower={onScrollToLower}
>
{ loading && <AtLoadMore status={'loading'}/>}
{
brands.length >= 1 && !loading &&
<>
{brands.map((d) => <View onClick={() => jumpInfo(d.data.id,d.data.table)} className={styles.box} key={d.data.id}>
<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.graphic_introduction}</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>)
)
}
<View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3">{text}</View>
<View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3 mb-3">{text}</View>
</>
}
{ !loading && brands.length === 0 && <Empty name='空空如也'/>}

@ -1,5 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '课程搜索',
navigationBarTitleText: '搜索',
navigationBarBackgroundColor:'#F2F8F6',
onReachBottomDistance: 50
})

@ -21,8 +21,10 @@ const Search:FC = () => {
})
useEffect(()=>{
getRecentSearch()
},[!show])
if(!show){
getRecentSearch()
}
},[show])
function inpFn(e){
setValue(e.detail.value)

@ -15,6 +15,7 @@ export const rfc33392time = (dateStr: string): string => {
.toISOString()
.replace(/T/g, ' ')
.replace(/\.[\d]{3}Z/, '')
.slice(0,16)
}
const TIME_OFFSET = (() => {

Loading…
Cancel
Save