1.封装暂无更多组件

2.修改瀑布流布局
2 years ago · ee5741a752
parent 5e6375cd4f
commit ee5741a752
21 changed files with 99 additions and 57 deletions
--- a/src/components/pageScript/pageScript.tsx
+++ b/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
--- a/src/components/videoList/videoList.tsx
+++ b/src/components/videoList/videoList.tsx
@ -39,7 +39,9 @@ const VideoList: FC<Props> = (props) => {
  }

  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}/>
        <View className='p-2 relative'>
          <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>
        </View>
+      </View>
    </View>)
 }

--- a/src/pages/business/courType/courType.tsx
+++ b/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='暂无数据'/>
      }
--- a/src/pages/business/curHistory/curHistory.tsx
+++ b/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='暂无学习记录'/>
      }
--- a/src/pages/business/history/history.tsx
+++ b/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='无观看记录'/>
      }
--- a/src/pages/home/components/adware.tsx
+++ b/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>)}
--- a/src/pages/home/components/curRecommended.tsx
+++ b/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/>
    </>
  )
 }
--- a/src/pages/home/home.module.scss
+++ b/src/pages/home/home.module.scss
@ -1,3 +1,7 @@
+page {
+  padding: 0 !important;
+}
+
 .tipsLogin {
  padding: 20px;
  color: #fff;
--- a/src/pages/index/components/videoList.tsx
+++ b/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='暂无课程'/>
            }
--- a/src/pages/index/index.tsx
+++ b/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/>
      }
--- a/src/pages/manage/courseAdmin/courseAdmin.tsx
+++ b/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}>
--- a/src/pages/manage/student/student.tsx
+++ b/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>
  )
 }
--- a/src/pages/preview/brand/info/info.tsx
+++ b/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='空空如也'/>
          }
--- a/src/pages/preview/brand/list/list.tsx
+++ b/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='暂无品牌入驻'/>
      }
--- a/src/pages/preview/collect/collect.tsx
+++ b/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[]
@ -89,6 +90,7 @@ const Profession = () => {
  function tabsChange(tab: OnChangOpt) {
    setCategoryId(tab.tab?.value as number)
  }
+
  function jumpInfo(info: any) {
    console.log(info, 'info')
    if (info.article) {
@ -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>
@ -163,11 +166,10 @@ const Profession = () => {
                  </View>
                </>
              }
-
            </View>
          )
        }
-        <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
+        <PageScript/>
      </ScrollView>
    )
  }
--- a/src/pages/preview/health/health.module.scss
+++ b/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 {
--- a/src/pages/preview/health/health.tsx
+++ b/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='暂无数据'/>
        }
--- a/src/pages/preview/illness/list/list.tsx
+++ b/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='暂无文章'/>
      }
--- a/src/pages/preview/jumpArticles/jumpArticles.tsx
+++ b/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>
  )
 }
--- a/src/pages/preview/profession/profession.module.scss
+++ b/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;
--- a/src/pages/preview/profession/profession.tsx
+++ b/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>
    )
  }