parent
d47392954a
commit
5e00de014c
@ -1,5 +1,5 @@ |
||||
#TARO_APP_API=https://yjx.dev.yaojiankang.top |
||||
TARO_APP_API=https://mooc.yaojiankang.top |
||||
#TARO_APP_API=https://shopfix.yaojiankang.top |
||||
#TARO_APP_API=https://mooc.yaojiankang.top |
||||
TARO_APP_API=https://shopfix.yaojiankang.top |
||||
#TARO_APP_API=https://playedu.yaojiankang.top |
||||
TARO_APP_LGOIN=true |
||||
|
||||
@ -0,0 +1,3 @@ |
||||
export default definePageConfig({ |
||||
navigationBarTitleText: '收藏列表', |
||||
}) |
||||
@ -0,0 +1,63 @@ |
||||
.height { |
||||
height: calc(100vh - 80rpx - env(safe-area-inset-bottom)); |
||||
overflow: hidden; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.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{ |
||||
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; |
||||
} |
||||
.courseRightBox{ |
||||
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; |
||||
} |
||||
@ -0,0 +1,203 @@ |
||||
import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components"; |
||||
import {HomeApi, userApi} from "@/api"; |
||||
import {useEffect, useState} from "react"; |
||||
import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs"; |
||||
import Empty from "@/components/empty/empty"; |
||||
import Taro from "@tarojs/taro"; |
||||
import styles from './collect.module.scss' |
||||
import Spin from "@/components/spinner"; |
||||
import Img from "@/components/image/image"; |
||||
import {rfc33392time} from "@/utils/day"; |
||||
import play from "@/static/img/play.png"; |
||||
|
||||
interface KillData { |
||||
data: Kill[] |
||||
total: number |
||||
page: number |
||||
} |
||||
|
||||
const Profession = () => { |
||||
const [tabs, setTabs] = useState<TabList[]>([]) |
||||
const [categoryId, setCategoryId] = useState<number | null>(null) |
||||
const [data, setData] = useState<Map<number, KillData>>(new Map) |
||||
const [enable, setEnable] = useState(true) |
||||
|
||||
/** |
||||
* more 开启加载更多 |
||||
*/ |
||||
async function getData(more = false) { |
||||
if (!categoryId) return; |
||||
const oldData = new Map<number, KillData>(data) |
||||
const categoryData = oldData.get(categoryId) |
||||
const page = more ? (categoryData?.page || 0) + 1 : categoryData?.page || 1 |
||||
|
||||
/** 无更多 */ |
||||
if (more && categoryData && categoryData.data.length >= categoryData.total) { |
||||
return |
||||
} |
||||
|
||||
try { |
||||
const res = await userApi.collectList(categoryId!, page, 10) |
||||
const dataList = res.data.reduce((pre, cur) => { |
||||
const index = pre.findIndex(d => d.id === cur.id) |
||||
if (index === -1) { |
||||
pre.push(cur) |
||||
} else { |
||||
pre.splice(index, 1, cur) |
||||
} |
||||
return pre |
||||
}, categoryData?.data || []) |
||||
oldData.delete(categoryId) |
||||
oldData.set(categoryId, { |
||||
data: dataList, |
||||
total: res.total, |
||||
page: page |
||||
}) |
||||
setData(oldData) |
||||
} catch (e) { |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
categoryId && getData() |
||||
}, [categoryId]) |
||||
|
||||
async function getCategory() { |
||||
try { |
||||
const res = [{name:'视频',id:2},{name:'文章',id:1},{name:'课程',id:3},{name:'其他',id:4}] |
||||
const newTabs = res.map<TabList>(d => ({title: d.name, value: d.id})) |
||||
setTabs(newTabs) |
||||
setCategoryId(newTabs[0].value as number) |
||||
} catch (e) { |
||||
} |
||||
setEnable(false) |
||||
} |
||||
|
||||
function tabsChange(tab: OnChangOpt) { |
||||
setCategoryId(tab.tab?.value as number) |
||||
} |
||||
|
||||
// function jump(kill: Kill) {
|
||||
// HomeApi.skillSetPlay(kill.id)
|
||||
// Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${kill.resource.url}&poster=${kill.url_path}&title=${kill.resource.name}`})
|
||||
// }
|
||||
|
||||
function jumpInfo(id: number,type:string,health:any) { |
||||
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_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}`}) |
||||
|
||||
} |
||||
|
||||
function swiperChange(e) { |
||||
const categoryId = tabs[e.target.current].value |
||||
setCategoryId(Number(categoryId)) |
||||
} |
||||
|
||||
Taro.useLoad(getCategory) |
||||
|
||||
function KillList(data: KillData): JSX.Element { |
||||
if (!data?.data?.length) { |
||||
return <Empty name='暂无数据'/> |
||||
} |
||||
return ( |
||||
<ScrollView |
||||
scrollY |
||||
onScrollToLower={() => getData(true)} |
||||
className={styles.height}> |
||||
{ |
||||
data.data.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?.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.courseRightBox}> |
||||
<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 className='text-center font-24 text-dark mt-2'>暂无更多</View> |
||||
</ScrollView> |
||||
) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<Spin enable={enable} overlay/> |
||||
<View className='bg-white'> |
||||
<Tabs tabList={tabs} onChange={tabsChange} current={categoryId!}/> |
||||
</View> |
||||
|
||||
<Swiper |
||||
current={tabs.findIndex(d => d.value === categoryId)} |
||||
onChange={swiperChange} |
||||
className={styles.height} |
||||
style={{paddingTop: '10px'}}> |
||||
{ |
||||
tabs.map(d => <SwiperItem key={d.title}> |
||||
{KillList(data.get(Number(d.value))!)} |
||||
</SwiperItem>) |
||||
} |
||||
</Swiper> |
||||
</> |
||||
) |
||||
} |
||||
export default Profession |
||||
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in new issue