1.封装暂无更多组件

2.修改瀑布流布局

src/components/pageScript/pageScript.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

src/components/videoList/videoList.tsx

@@ -39,26 +39,29 @@ const VideoList: FC<Props> = (props) => {
   }
 
   return (
-    <View key={data.id} className={styles.health} onClick={jump}>
-      <Img src={data.url_path} mode='widthFix' errorType={props.errorType} height={346}/>
-      <View className='p-2 relative'>
-        <View className='text-ellipsis-1 font-28 text-dark'>{data.title}</View>
-        <View className='text-ellipsis-2 mt-2 font-24 text-secondary'>{data.introduction}</View>
+    <View className={styles.health}>
+      <View key={data.id} onClick={jump} className="bg-white">
 
-        <View className={styles.info}>
-          <View className='flex'>
-            <View className='flex align-center mr-3'>
-              <Image src={palyWhite}/>
-              <Text>{(data.video_view || 0)}</Text>
-            </View>
+        <Img src={data.url_path} mode='widthFix' errorType={props.errorType} height={346}/>
+        <View className='p-2 relative'>
+          <View className='text-ellipsis-1 font-28 text-dark'>{data.title}</View>
+          <View className='text-ellipsis-2 mt-2 font-24 text-secondary'>{data.introduction}</View>
+
+          <View className={styles.info}>
+            <View className='flex'>
+              <View className='flex align-center mr-3'>
+                <Image src={palyWhite}/>
+                <Text>{(data.video_view || 0)}</Text>
+              </View>
 
-            <View className='flex align-center'>
-              <Image src={starWhite}/>
-              <Text>{(data.collect_quantity || 0)}</Text>
+              <View className='flex align-center'>
+                <Image src={starWhite}/>
+                <Text>{(data.collect_quantity || 0)}</Text>
+              </View>
             </View>
-          </View>
 
-          <View>{formatMinute(data.duration || 0)}</View>
+            <View>{formatMinute(data.duration || 0)}</View>
+          </View>
         </View>
       </View>
     </View>)

src/pages/business/courType/courType.tsx

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

src/pages/business/curHistory/curHistory.tsx

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

src/pages/business/history/history.tsx

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

src/pages/home/components/adware.tsx

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

src/pages/home/components/curRecommended.tsx

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

src/pages/home/home.module.scss

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

src/pages/index/components/videoList.tsx

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

src/pages/index/index.tsx

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

src/pages/manage/courseAdmin/courseAdmin.tsx

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

src/pages/manage/student/student.tsx

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

src/pages/preview/brand/info/info.tsx

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

src/pages/preview/brand/list/list.tsx

@@ -9,6 +9,7 @@ import {beforeTime} from "@/utils/time";
 import styles from './list.module.scss'
 import articleLine from "@/static/img/articleLine.png"
 import Collect from "@/components/collect/collect";
+import PageScript from "@/components/pageScript/pageScript";
 
 const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onClick}) => {
   let media: ReactNode
@@ -130,7 +131,7 @@ const BrandList: FC = () => {
         brands.length ?
           <>
             {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='暂无品牌入驻'/>
       }

src/pages/preview/collect/collect.tsx

@@ -9,6 +9,7 @@ import Spin from "@/components/spinner";
 import Img from "@/components/image/image";
 import {rfc33392time} from "@/utils/day";
 import play from "@/static/img/play.png";
+import PageScript from "@/components/pageScript/pageScript";
 
 interface KillData {
   data: any[]
@@ -59,9 +60,9 @@ const Profession = () => {
   }
 
   Taro.useDidShow(useCallback(() => {
-    if(categoryId){
+    if (categoryId) {
       let tempMap = new Map()
-        tempMap.set(categoryId, {
+      tempMap.set(categoryId, {
         data: [],
         total: undefined,
         page: 1
@@ -69,7 +70,7 @@ const Profession = () => {
       setData(tempMap)
       getData()
     }
-  },[data]))
+  }, [data]))
 
   useEffect(() => {
     categoryId && getData()
@@ -77,7 +78,7 @@ const Profession = () => {
 
   async function getCategory() {
     try {
-      const res = [{name:'视频',id:2},{name:'文章',id:1},{name:'课程',id:3},{name:'其他',id:4}]
+      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)
@@ -89,15 +90,16 @@ const Profession = () => {
   function tabsChange(tab: OnChangOpt) {
     setCategoryId(tab.tab?.value as number)
   }
+
   function jumpInfo(info: any) {
-    console.log(info,'info')
-    if(info.article){
+    console.log(info, 'info')
+    if (info.article) {
       Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${info.owner_id}`})
-    }else if(info.course){
+    } else if (info.course) {
       Taro.navigateTo({url: `/pages/business/videoInfo/videoInfo?id=${info.owner_id}`})
-    }else if(info.video_records){
+    } else if (info.video_records) {
       Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?id=${info.owner_id}`})
-    }else if(info.brand){
+    } else if (info.brand) {
       Taro.navigateTo({url: `/pages/preview/brand/info/info?id=${info.owner_id}`})
     }
   }
@@ -144,7 +146,8 @@ const Profession = () => {
               {
                 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'/>
                   <View className={styles.videoRightBox}>
                     <View className='font-weight mb-2 font-28 lh-40'>{d.video_records.title}</View>
@@ -159,15 +162,14 @@ const Profession = () => {
                   <Img width={192} height={138} src={d.course.thumb} mode='aspectFill' className={styles.image}/>
                   <View className={styles.courseRightBox}>
                     <View className='font-weight mb-2 font-28 lh-40'>{d.course.title}</View>
-                    <View className={styles.desc}>课时:{d.course.class_hour}节   销量：{d.course.charge}</View>
+                    <View className={styles.desc}>课时:{d.course.class_hour}节 销量：{d.course.charge}</View>
                   </View>
                 </>
               }
-
             </View>
           )
         }
-        <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
+        <PageScript/>
       </ScrollView>
     )
   }

src/pages/preview/health/health.module.scss

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

src/pages/preview/health/health.tsx

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

src/pages/preview/illness/list/list.tsx

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

src/pages/preview/jumpArticles/jumpArticles.tsx

@@ -4,6 +4,8 @@ import {publicApi} from "@/api";
 import Spin from "@/components/spinner";
 import ArticlesBox from "@/components/articlesBox/articlesBox";
 import {useReachBottom} from "@tarojs/taro";
+import PageScript from "@/components/pageScript/pageScript";
+import Empty from "@/components/empty/empty";
 
 const JumpArticlesConfig: FC = () => {
   const [page, setPage] = useState(1)
@@ -41,9 +43,12 @@ const JumpArticlesConfig: FC = () => {
       <Spin enable={enable} overlay/>
       <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>
+      <PageScript/>
     </View>
   )
 }

src/pages/preview/profession/profession.module.scss

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

src/pages/preview/profession/profession.tsx

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