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

搜索页面列表兼容多种类

Browse Source
v2
一杯沧海 1 year ago
parent 3c8e8f626c
commit e629874abe
11 changed files with 131 additions and 187 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. 1
      src/app.config.ts
  2. 2
      src/pages/home/components/search.tsx
  3. 10
      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. 71
      src/pages/preview/search/search/components/list.tsx
  9. 2
      src/pages/preview/search/search/index.config.ts
  10. 4
      src/pages/preview/search/search/index.tsx
  11. 1
      src/utils/day.ts

1
src/app.config.ts
Unescape View File

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

2
src/pages/home/components/search.tsx
Unescape View File

@ -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>
)
}

10
src/pages/preview/brand/info/info.tsx
Unescape View File

@ -66,13 +66,15 @@ const BrandInfo: FC = () => {
return (
<View className='flex flex-column' style={{display: 'flex'}}>
<Spin enable={enable} overlay/>
{
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
@ -99,10 +101,14 @@ const BrandInfo: FC = () => {
<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']}>
{

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

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

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

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

95
src/pages/preview/search/list/index.tsx
Unescape View File

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

25
src/pages/preview/search/search/components/list.module.scss
Unescape View File

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

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

@ -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}>
{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.graphic_introduction}</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>
</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">{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='空空如也'/>}

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

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

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

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

1
src/utils/day.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save