一杯沧海 1 year ago
commit 97fbd3343a
  1. 6
      src/components/videoCover/videoCover.scss
  2. 4
      src/pages/home/components/curRecommended.tsx
  3. 2
      src/pages/home/components/feature.tsx
  4. 10
      src/pages/home/home.module.scss
  5. 2
      src/pages/home/home.tsx
  6. 3
      src/pages/preview/illness/sort/sort.module.scss
  7. 30
      src/pages/preview/illness/sort/sort.tsx
  8. 4
      src/pages/preview/profession/profession.module.scss
  9. 9
      src/pages/preview/profession/profession.tsx

@ -51,7 +51,7 @@
.box { .box {
box-sizing: border-box; box-sizing: border-box;
padding: 15rpx; padding: 20rpx;
.title { .title {
width: 100%; width: 100%;
@ -61,6 +61,10 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #323635;
} }
} }

@ -37,9 +37,9 @@ const CurRecommended: FC = () => {
return ( return (
<> <>
{ {
data.length > 0 && <View className='mt-8'> data.length > 0 && <View>
<Image src={courseTag} mode='widthFix' className={styles.courseTag}/> <Image src={courseTag} mode='widthFix' className={styles.courseTag}/>
<View className={'py-2 flex justify-between flex-wrap ' + styles.videoListBox}> <View className={'pb-2 flex justify-between flex-wrap ' + styles.videoListBox}>
{ {
data.map(c => <VideoCover data.map(c => <VideoCover
thumb={c.thumb} thumb={c.thumb}

@ -20,7 +20,7 @@ const Feature: FC = () => {
} }
return ( return (
<View className='flex justify-around' style={{marginBottom: '20px'}}> <View className='flex justify-around' style={{marginBottom: '25px'}}>
{ {
list.map(d => <View className='text-center' onClick={() => jump(d.url)}> list.map(d => <View className='text-center' onClick={() => jump(d.url)}>
<Image src={d.image} style={{width: '48px', height: '48px'}}/> <Image src={d.image} style={{width: '48px', height: '48px'}}/>

@ -71,8 +71,8 @@
.courseTag { .courseTag {
width: 200px; width: 162px;
margin: auto; margin: 0 auto 30rpx;
display: block; display: block;
} }
@ -80,7 +80,7 @@
color: #323635; color: #323635;
background: #fff; background: #fff;
padding: 30rpx 0 30rpx 30rpx; padding: 30rpx 0 30rpx 30rpx;
margin-bottom: 40rpx; margin-bottom: 50rpx;
border-radius: 30rpx; border-radius: 30rpx;
} }
@ -119,8 +119,8 @@
.ranking { .ranking {
position: absolute; position: absolute;
left: 24rpx; left: 24rpx;
width: 40px; width: 30px;
height: 40px; height: 30px;
} }
.featureImage { .featureImage {

@ -28,7 +28,7 @@ const Home: FC = () => {
}, []) }, [])
return ( return (
<View className={styles.content} style={{paddingTop: '20px'}}> <View className={styles.content}>
{/*<Search/>*/} {/*<Search/>*/}
<Adware data={data?.adverts || []} only_flag='routine_home_top_banner' width={710}/> <Adware data={data?.adverts || []} only_flag='routine_home_top_banner' width={710}/>
<Feature/> <Feature/>

@ -1,11 +1,12 @@
.scrollView { .scrollView {
height: auto !important;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
width: 100%;
margin: auto; margin: auto;
display: flex;
} }
.firstOrder { .firstOrder {

@ -1,4 +1,4 @@
import {Image, ScrollView, View} from "@tarojs/components"; import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
import {FC, useEffect, useMemo, useState} from "react"; import {FC, useEffect, useMemo, useState} from "react";
import {Category, HomeApi} from "@/api"; import {Category, HomeApi} from "@/api";
import Taro from "@tarojs/taro"; import Taro from "@tarojs/taro";
@ -11,8 +11,8 @@ import leftArrow from "@/static/img/leftArrow.png"
const prefix = 'SORT' const prefix = 'SORT'
const Sort: FC = () => { const Sort: FC = () => {
const [data, setData] = useState<Category[]>([]) const [data, setData] = useState<Category[]>([])
const [firstId, setFirstId] = useState<number | undefined>(undefined) const [firstId, setFirstId] = useState<number | undefined>(undefined) // 一级分类
const [secondId, setSecondId] = useState<number | undefined>(undefined) const [secondId, setSecondId] = useState<number | undefined>(undefined) // 二级分类
const [list, setList] = useState<any[]>([]) const [list, setList] = useState<any[]>([])
const globalData = Taro.getApp().globalData const globalData = Taro.getApp().globalData
const menu = Taro.getMenuButtonBoundingClientRect() const menu = Taro.getMenuButtonBoundingClientRect()
@ -67,6 +67,13 @@ const Sort: FC = () => {
} }
}, [secondId]) }, [secondId])
function swiperChange(e) {
const firstData = data[e.target.current]
if (!firstData) return;
setFirstId(firstData.id)
setSecondId(firstData?.resource_category?.[0]?.id)
}
return ( return (
<View> <View>
<View style={headerStyles}> <View style={headerStyles}>
@ -78,6 +85,7 @@ const Sort: FC = () => {
<View style={{width: '200px', margin: 'auto'}}> <View style={{width: '200px', margin: 'auto'}}>
<Tabs <Tabs
tabList={getTabList} tabList={getTabList}
current={firstId}
onChange={(data) => firstIdChange(data.tab?.value as number)}/> onChange={(data) => firstIdChange(data.tab?.value as number)}/>
</View> </View>
</View> </View>
@ -85,10 +93,16 @@ const Sort: FC = () => {
{/*<Search onConfirm={onConfirm}/>*/} {/*<Search onConfirm={onConfirm}/>*/}
<View className={styles.scrollView} style={{top: `${globalData.statusBarHeight + 59}px`}}> <Swiper
onChange={swiperChange}
className={styles.scrollView}
current={data.findIndex(d => d.id === firstId)}
style={{top: `${globalData.statusBarHeight + 59}px`}}>
{
data.map(d => <SwiperItem key={d.id} className='flex'>
<ScrollView scrollY className={styles.firstOrder} enhanced showScrollbar={false}> <ScrollView scrollY className={styles.firstOrder} enhanced showScrollbar={false}>
{ {
data.find(d => d.id === firstId)?.resource_category?.map(d => <View d.resource_category?.map(d => <View
id={`${prefix}-${d.id}`} id={`${prefix}-${d.id}`}
key={d.id} key={d.id}
onClick={() => setSecondId(d.id)} onClick={() => setSecondId(d.id)}
@ -110,7 +124,11 @@ const Sort: FC = () => {
: <Empty name='暂无数据'/> : <Empty name='暂无数据'/>
} }
</ScrollView> </ScrollView>
</View> </SwiperItem>)
}
</Swiper>
</View> </View>
) )
} }

@ -13,8 +13,10 @@
Image, Image,
image { image {
width: 200rpx; width: 320rpx;
max-height: 180rpx;
margin-right: 20rpx; margin-right: 20rpx;
border-radius: 10rpx; border-radius: 10rpx;
background: #eee;
} }
} }

@ -21,7 +21,7 @@ const Profession = () => {
* more * more
*/ */
async function getData(more = false) { async function getData(more = false) {
if (categoryId) { if (!categoryId) return;
const oldData = new Map<number, KillData>(data) const oldData = new Map<number, KillData>(data)
const categoryData = oldData.get(categoryId) const categoryData = oldData.get(categoryId)
const page = more ? (categoryData?.page || 0) + 1 : categoryData?.page || 1 const page = more ? (categoryData?.page || 0) + 1 : categoryData?.page || 1
@ -31,6 +31,10 @@ const Profession = () => {
return return
} }
try {
if (!data.has(categoryId)) {
Taro.showLoading()
}
const res = await HomeApi.skillList(categoryId!, page, 10) const res = await HomeApi.skillList(categoryId!, page, 10)
const dataList = res.data.reduce((pre, cur) => { const dataList = res.data.reduce((pre, cur) => {
const index = pre.findIndex(d => d.id === cur.id) const index = pre.findIndex(d => d.id === cur.id)
@ -42,14 +46,15 @@ const Profession = () => {
return pre return pre
}, categoryData?.data || []) }, categoryData?.data || [])
oldData.delete(categoryId) oldData.delete(categoryId)
oldData.set(categoryId, { oldData.set(categoryId, {
data: dataList, data: dataList,
total: res.total, total: res.total,
page: page page: page
}) })
setData(oldData) setData(oldData)
} catch (e) {
} }
Taro.hideLoading()
} }
useEffect(() => { useEffect(() => {

Loading…
Cancel
Save