1.封装暂无更多组件

2.修改瀑布流布局
v2
king 1 year ago
parent 5e6375cd4f
commit ee5741a752
  1. 18
      src/components/pageScript/pageScript.tsx
  2. 5
      src/components/videoList/videoList.tsx
  3. 3
      src/pages/business/courType/courType.tsx
  4. 3
      src/pages/business/curHistory/curHistory.tsx
  5. 3
      src/pages/business/history/history.tsx
  6. 2
      src/pages/home/components/adware.tsx
  7. 13
      src/pages/home/components/curRecommended.tsx
  8. 4
      src/pages/home/home.module.scss
  9. 3
      src/pages/index/components/videoList.tsx
  10. 3
      src/pages/index/index.tsx
  11. 3
      src/pages/manage/courseAdmin/courseAdmin.tsx
  12. 3
      src/pages/manage/student/student.tsx
  13. 3
      src/pages/preview/brand/info/info.tsx
  14. 3
      src/pages/preview/brand/list/list.tsx
  15. 8
      src/pages/preview/collect/collect.tsx
  16. 11
      src/pages/preview/health/health.module.scss
  17. 3
      src/pages/preview/health/health.tsx
  18. 2
      src/pages/preview/illness/list/list.tsx
  19. 7
      src/pages/preview/jumpArticles/jumpArticles.tsx
  20. 2
      src/pages/preview/profession/profession.module.scss
  21. 4
      src/pages/preview/profession/profession.tsx

@ -0,0 +1,18 @@
import {CSSProperties, FC} from "react";
import {View} from "@tarojs/components";
interface Props {
text?: string
styles?: CSSProperties
className?: string
}
const PageScript: FC<Props> = (props) => {
return <View
className={'text-center font-24 text-dark py-3 ' + props.className}
style={props.styles}>
{props.text || "暂无更多"}
</View>
}
export default PageScript

@ -39,7 +39,9 @@ const VideoList: FC<Props> = (props) => {
} }
return ( return (
<View key={data.id} className={styles.health} onClick={jump}> <View className={styles.health}>
<View key={data.id} onClick={jump} className="bg-white">
<Img src={data.url_path} mode='widthFix' errorType={props.errorType} height={346}/> <Img src={data.url_path} mode='widthFix' errorType={props.errorType} height={346}/>
<View className='p-2 relative'> <View className='p-2 relative'>
<View className='text-ellipsis-1 font-28 text-dark'>{data.title}</View> <View className='text-ellipsis-1 font-28 text-dark'>{data.title}</View>
@ -61,6 +63,7 @@ const VideoList: FC<Props> = (props) => {
<View>{formatMinute(data.duration || 0)}</View> <View>{formatMinute(data.duration || 0)}</View>
</View> </View>
</View> </View>
</View>
</View>) </View>)
} }

@ -5,6 +5,7 @@ import {courseApi} from "@/api";
import VideoCover from "@/components/videoCover/videoCover"; import VideoCover from "@/components/videoCover/videoCover";
import {formatMinute} from "@/utils/time"; import {formatMinute} from "@/utils/time";
import Empty from "@/components/empty/empty"; import Empty from "@/components/empty/empty";
import PageScript from "@/components/pageScript/pageScript";
const CourType: FC = () => { const CourType: FC = () => {
const params = useRouter().params const params = useRouter().params
@ -73,7 +74,7 @@ const CourType: FC = () => {
/>) />)
} }
</View> </View>
<View className='text-center font-24 text-dark'></View> <PageScript/>
</> </>
: <Empty name='暂无数据'/> : <Empty name='暂无数据'/>
} }

@ -6,6 +6,7 @@ import {userApi} from "@/api";
import {formatDateTime, formatMinute} from "@/utils/time"; import {formatDateTime, formatMinute} from "@/utils/time";
import CustomPageContainer from "@/components/custom-page-container/custom-page-container"; import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
import Empty from "@/components/empty/empty"; import Empty from "@/components/empty/empty";
import PageScript from "@/components/pageScript/pageScript";
const CurHistory = () => { const CurHistory = () => {
const [show, setShow] = useState(false) const [show, setShow] = useState(false)
@ -106,7 +107,7 @@ const CurHistory = () => {
/> />
</View>) </View>)
} }
<View className='text-center font-24 text-dark mt-3'></View> <PageScript/>
</View> </View>
: <Empty name='暂无学习记录'/> : <Empty name='暂无学习记录'/>
} }

@ -6,6 +6,7 @@ import {formatMinute} from "@/utils/time";
import Empty from "@/components/empty/empty"; import Empty from "@/components/empty/empty";
import {userApi} from "@/api"; import {userApi} from "@/api";
import Img from "@/components/image/image"; import Img from "@/components/image/image";
import PageScript from "@/components/pageScript/pageScript";
const History = () => { const History = () => {
const [data, setData] = useState<HourHistory[]>([]) const [data, setData] = useState<HourHistory[]>([])
@ -45,7 +46,7 @@ const History = () => {
</View> </View>
</View>) </View>)
} }
<View className='text-center font-24 text-dark mt-3'></View> <PageScript/>
</> </>
: <Empty name='无观看记录'/> : <Empty name='无观看记录'/>
} }

@ -41,6 +41,7 @@ const Adware: FC<Props> = ({data, only_flag, width}) => {
fadeIn fadeIn
onClick={() => jumpAdware(adverts[0].image_path)} onClick={() => jumpAdware(adverts[0].image_path)}
width={width} width={width}
errorType='profession'
height={(space.height / space.width) * width}/> height={(space.height / space.width) * width}/>
} }
{ {
@ -56,6 +57,7 @@ const Adware: FC<Props> = ({data, only_flag, width}) => {
lazyLoad lazyLoad
fadeIn fadeIn
width={width} width={width}
errorType='profession'
height={(space.height / space.width) * width} height={(space.height / space.width) * width}
onClick={() => jumpAdware(d.image_path)}/> onClick={() => jumpAdware(d.image_path)}/>
</SwiperItem>)} </SwiperItem>)}

@ -7,6 +7,7 @@ import VideoCover from "@/components/videoCover/videoCover";
import courseTag from '@/static/img/courseTag.png' import courseTag from '@/static/img/courseTag.png'
import ArticlesBox from "@/components/articlesBox/articlesBox"; import ArticlesBox from "@/components/articlesBox/articlesBox";
import arrowRight from '@/static/img/arrow-right.png' import arrowRight from '@/static/img/arrow-right.png'
import PageScript from "@/components/pageScript/pageScript";
const CurRecommended: FC = () => { const CurRecommended: FC = () => {
const [page, setPage] = useState(1) const [page, setPage] = useState(1)
@ -45,17 +46,15 @@ const CurRecommended: FC = () => {
let examines: ReactNode | undefined let examines: ReactNode | undefined
if (articles.length > 0) { if (articles.length > 0) {
examines = ( examines = (
<View className='bg-white rounded-20 clip px-3 mb-5'> <View className='bg-white rounded-20 clip px-3'>
<View className='mt-3 mb-3 bold text-dark flex justify-between'> <View className='mt-3 bold text-dark flex justify-between'>
<Text className='font-32'></Text> <Text className='font-32'></Text>
<View className='font-24 text-muted flex align-center' onClick={jumpArticles}> <View className='font-24 text-muted flex align-center' onClick={jumpArticles}>
<Text></Text> <Text></Text>
<Image src={arrowRight} mode='widthFix' style={{width: '20rpx', height: '20rpx'}}/> <Image src={arrowRight} mode='widthFix' style={{width: '20rpx', height: '20rpx'}}/>
</View> </View>
</View> </View>
{ {articles.map(d => <ArticlesBox data={d}/>)}
articles.map(d => <ArticlesBox data={d}/>)
}
</View> </View>
) )
} }
@ -63,7 +62,7 @@ const CurRecommended: FC = () => {
let videos: ReactNode | undefined let videos: ReactNode | undefined
if (data.length > 0) { if (data.length > 0) {
videos = ( videos = (
<View> <View className='mt-3'>
<Image src={courseTag} mode='widthFix' className={styles.courseTag}/> <Image src={courseTag} mode='widthFix' className={styles.courseTag}/>
<View className={'pb-2 flex justify-between flex-wrap ' + styles.videoListBox}> <View className={'pb-2 flex justify-between flex-wrap ' + styles.videoListBox}>
{ {
@ -85,7 +84,7 @@ const CurRecommended: FC = () => {
<> <>
{examines} {examines}
{videos} {videos}
<View className='text-center font-24 text-dark'></View> <PageScript/>
</> </>
) )
} }

@ -1,3 +1,7 @@
page {
padding: 0 !important;
}
.tipsLogin { .tipsLogin {
padding: 20px; padding: 20px;
color: #fff; color: #fff;

@ -8,6 +8,7 @@ import {userApi} from "@/api";
import Empty from "@/components/empty/empty"; import Empty from "@/components/empty/empty";
import {Profile} from "@/store"; import {Profile} from "@/store";
import LoginView from "@/components/loginView"; import LoginView from "@/components/loginView";
import PageScript from "@/components/pageScript/pageScript";
interface Props { interface Props {
categoryKey: CoursesKey categoryKey: CoursesKey
@ -128,7 +129,7 @@ export const VideoList: FC<Props> = ({categoryKey, setCategoryKey}) => {
/>) />)
} }
</View> </View>
<View className='text-center font-24 text-dark mt-2'></View> <PageScript/>
</> </>
: <Empty name='暂无课程'/> : <Empty name='暂无课程'/>
} }

@ -8,6 +8,7 @@ import NavigationBar from "@/components/navigationBar/navigationBar";
import Spin from "@/components/spinner"; import Spin from "@/components/spinner";
import {isBoolean} from "@tarojs/shared"; import {isBoolean} from "@tarojs/shared";
import ArticlesBox from "@/components/articlesBox/articlesBox"; import ArticlesBox from "@/components/articlesBox/articlesBox";
import PageScript from "@/components/pageScript/pageScript";
const category: TabList[] = [ const category: TabList[] = [
{title: "企选课程", value: 'is_required'}, {title: "企选课程", value: 'is_required'},
@ -59,7 +60,7 @@ const AuditMode: FC = () => {
articles.map(d => <ArticlesBox data={d}/>) articles.map(d => <ArticlesBox data={d}/>)
} }
</View> </View>
<View className='text-center font-24 text-dark mt-2'></View> <PageScript/>
</> </>
: <Index/> : <Index/>
} }

@ -8,6 +8,7 @@ import MyButton from "@/components/button/MyButton";
import storageDep from "@/hooks/storageDep"; import storageDep from "@/hooks/storageDep";
import Spin from "@/components/spinner"; import Spin from "@/components/spinner";
import Img from "@/components/image/image"; import Img from "@/components/image/image";
import PageScript from "@/components/pageScript/pageScript";
const CourseAdmin: FC = () => { const CourseAdmin: FC = () => {
const [total, setTotal] = useState(0) const [total, setTotal] = useState(0)
@ -172,7 +173,7 @@ const CourseAdmin: FC = () => {
</View> </View>
</View>) </View>)
} }
<View className='text-center font-24 text-dark mt-3'></View> <PageScript/>
</View> </View>
<View className={styles.add}> <View className={styles.add}>

@ -4,6 +4,7 @@ import {useEffect, useState} from "react";
import {View, Progress, CustomWrapper} from "@tarojs/components"; import {View, Progress, CustomWrapper} from "@tarojs/components";
import './student.scss' import './student.scss'
import Taro from "@tarojs/taro"; import Taro from "@tarojs/taro";
import PageScript from "@/components/pageScript/pageScript";
const Student = () => { const Student = () => {
const {id, name} = getCurrentInstance()?.router?.params as any const {id, name} = getCurrentInstance()?.router?.params as any
@ -32,7 +33,7 @@ const Student = () => {
) )
}) })
} }
<View className='text-center py-1'></View> <PageScript/>
</CustomWrapper> </CustomWrapper>
) )
} }

@ -9,6 +9,7 @@ import Img from "@/components/image/image";
import Spin from "@/components/spinner"; import Spin from "@/components/spinner";
import Collect from "@/components/collect/collect"; import Collect from "@/components/collect/collect";
import ArticlesBox from "@/components/articlesBox/articlesBox"; import ArticlesBox from "@/components/articlesBox/articlesBox";
import PageScript from "@/components/pageScript/pageScript";
type Params = { type Params = {
id: number id: number
@ -120,7 +121,7 @@ const BrandInfo: FC = () => {
{ {
articleList?.length ? <>{ articleList?.length ? <>{
articleList.map(d => <ArticlesBox data={d}/>)} articleList.map(d => <ArticlesBox data={d}/>)}
<View className='text-center font-24 text-dark mt-3'></View> <PageScript/>
</> </>
: <Empty name='空空如也'/> : <Empty name='空空如也'/>
} }

@ -9,6 +9,7 @@ import {beforeTime} from "@/utils/time";
import styles from './list.module.scss' import styles from './list.module.scss'
import articleLine from "@/static/img/articleLine.png" import articleLine from "@/static/img/articleLine.png"
import Collect from "@/components/collect/collect"; import Collect from "@/components/collect/collect";
import PageScript from "@/components/pageScript/pageScript";
const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onClick}) => { const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onClick}) => {
let media: ReactNode let media: ReactNode
@ -130,7 +131,7 @@ const BrandList: FC = () => {
brands.length ? brands.length ?
<> <>
{brands.map(d => <BrandItem data={d} key={d.id} onClick={() => jumpInfo(d.id)}/>)} {brands.map(d => <BrandItem data={d} key={d.id} onClick={() => jumpInfo(d.id)}/>)}
<View className='text-center font-24 text-dark mt-3'>{text}</View> <PageScript text={text}/>
</> </>
: <Empty name='暂无品牌入驻'/> : <Empty name='暂无品牌入驻'/>
} }

@ -9,6 +9,7 @@ import Spin from "@/components/spinner";
import Img from "@/components/image/image"; import Img from "@/components/image/image";
import {rfc33392time} from "@/utils/day"; import {rfc33392time} from "@/utils/day";
import play from "@/static/img/play.png"; import play from "@/static/img/play.png";
import PageScript from "@/components/pageScript/pageScript";
interface KillData { interface KillData {
data: any[] data: any[]
@ -89,6 +90,7 @@ const Profession = () => {
function tabsChange(tab: OnChangOpt) { function tabsChange(tab: OnChangOpt) {
setCategoryId(tab.tab?.value as number) setCategoryId(tab.tab?.value as number)
} }
function jumpInfo(info: any) { function jumpInfo(info: any) {
console.log(info, 'info') console.log(info, 'info')
if (info.article) { if (info.article) {
@ -144,7 +146,8 @@ const Profession = () => {
{ {
d.video_records && d.video_records &&
<> <>
<Img width={192} height={192} src={d.video_records.url_path} mode='aspectFill' className={styles.image}/> <Img width={192} height={192} src={d.video_records.url_path} mode='aspectFill'
className={styles.image}/>
<Image src={play} className={styles.play} mode='aspectFit'/> <Image src={play} className={styles.play} mode='aspectFit'/>
<View className={styles.videoRightBox}> <View className={styles.videoRightBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.video_records.title}</View> <View className='font-weight mb-2 font-28 lh-40'>{d.video_records.title}</View>
@ -163,11 +166,10 @@ const Profession = () => {
</View> </View>
</> </>
} }
</View> </View>
) )
} }
<View className='text-center font-24 text-dark mt-2'></View> <PageScript/>
</ScrollView> </ScrollView>
) )
} }

@ -1,18 +1,17 @@
.container { .container {
width: 100%; width: 100%;
padding: 20rpx; padding: 0 20rpx;
box-sizing: border-box; box-sizing: border-box;
columns: 2; column-count: 2;
column-gap: 20rpx; column-gap: 20rpx;
} }
.health { .health {
break-inside: avoid;
background: #fff;
border-radius: 10px; border-radius: 10px;
overflow: hidden; padding-top: 20rpx;
margin-bottom: 20rpx;
position: relative; position: relative;
break-inside: avoid;
overflow: hidden;
} }
.play { .play {

@ -6,6 +6,7 @@ import styles from './health.module.scss'
import Empty from "@/components/empty/empty"; import Empty from "@/components/empty/empty";
import Spin from "@/components/spinner"; import Spin from "@/components/spinner";
import VideoList from "@/components/videoList/videoList"; import VideoList from "@/components/videoList/videoList";
import PageScript from "@/components/pageScript/pageScript";
const Health: FC = () => { const Health: FC = () => {
const [page, setPage] = useState(1) const [page, setPage] = useState(1)
@ -44,7 +45,7 @@ const Health: FC = () => {
<View className={styles.container}> <View className={styles.container}>
{data.map(d => <VideoList data={d} errorType='health'/>)} {data.map(d => <VideoList data={d} errorType='health'/>)}
</View> </View>
<View className='text-center font-24 text-dark mt-2'></View> <PageScript/>
</> </>
: <Empty name='暂无数据'/> : <Empty name='暂无数据'/>
} }

@ -49,7 +49,7 @@ const BrandList: FC = () => {
articles.map(d => <ArticlesBox data={d}/>) articles.map(d => <ArticlesBox data={d}/>)
} }
</View> </View>
<View className='text-center font-24 text-dark mt-3'></View>
</> </>
: <Empty name='暂无文章'/> : <Empty name='暂无文章'/>
} }

@ -4,6 +4,8 @@ import {publicApi} from "@/api";
import Spin from "@/components/spinner"; import Spin from "@/components/spinner";
import ArticlesBox from "@/components/articlesBox/articlesBox"; import ArticlesBox from "@/components/articlesBox/articlesBox";
import {useReachBottom} from "@tarojs/taro"; import {useReachBottom} from "@tarojs/taro";
import PageScript from "@/components/pageScript/pageScript";
import Empty from "@/components/empty/empty";
const JumpArticlesConfig: FC = () => { const JumpArticlesConfig: FC = () => {
const [page, setPage] = useState(1) const [page, setPage] = useState(1)
@ -41,9 +43,12 @@ const JumpArticlesConfig: FC = () => {
<Spin enable={enable} overlay/> <Spin enable={enable} overlay/>
<View className='bg-white rounded-20 clip m-3 px-3'> <View className='bg-white rounded-20 clip m-3 px-3'>
{ {
data.map(d => <ArticlesBox data={d}/>) data.length > 0
?data.map(d => <ArticlesBox data={d}/>)
:<Empty name='暂无更多文章'/>
} }
</View> </View>
<PageScript/>
</View> </View>
) )
} }

@ -1,6 +1,6 @@
.container { .container {
width: 100%; width: 100%;
padding: 20rpx; padding: 0 20rpx;
box-sizing: border-box; box-sizing: border-box;
columns: 2; columns: 2;
column-gap: 20rpx; column-gap: 20rpx;

@ -7,6 +7,7 @@ import Taro from "@tarojs/taro";
import styles from './profession.module.scss' import styles from './profession.module.scss'
import Spin from "@/components/spinner"; import Spin from "@/components/spinner";
import VideoList from "@/components/videoList/videoList"; import VideoList from "@/components/videoList/videoList";
import PageScript from "@/components/pageScript/pageScript";
interface KillData { interface KillData {
data: VideList[] data: VideList[]
@ -98,12 +99,11 @@ const Profession = () => {
onScrollToLower={() => getData(true)} onScrollToLower={() => getData(true)}
className={styles.height}> className={styles.height}>
<View className={styles.container}> <View className={styles.container}>
{ {
data.data.map(d => <VideoList data={d} errorType='profession'/>) data.data.map(d => <VideoList data={d} errorType='profession'/>)
} }
</View> </View>
<View className='text-center font-24 text-dark mt-2'></View> <PageScript/>
</ScrollView> </ScrollView>
) )
} }

Loading…
Cancel
Save