替换微信加载状态 && 替换网络图片加载公共组件

1 year ago · bcbf3b8e41
parent 20564f42fb
commit bcbf3b8e41
18 changed files with 112 additions and 118 deletions
--- a/src/components/empty/empty.tsx
+++ b/src/components/empty/empty.tsx
@ -10,7 +10,7 @@ interface Props {
 const Empty: FC<Props> = ({name}) => {
  return (
    <View className={styles.empty}>
-      <Image src={emptyImg} mode='widthFix' className={styles.image}/>
+      <Image src={emptyImg} mode='widthFix' className={styles.image} fadeIn lazyLoad/>
      <View className={styles.name}>{name}</View>
    </View>
  )
--- a/src/components/popPut/popPut.tsx
+++ b/src/components/popPut/popPut.tsx
@ -1,7 +1,8 @@
 import {FC, ReactNode, useEffect, useState} from "react";
-import {View, Image} from "@tarojs/components";
+import {View} from "@tarojs/components";
 import Icon from "@/components/icon";
 import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
+import Img from "@/components/image/image";

 interface Props {
  height?: number | string
@ -46,13 +47,13 @@ const PopPut: FC<Props> = ({title, chevron, content, image, isProp, children, sh
    <>
      <View className='card' onClick={click} style={style()}>
        <View className='flex align-center'>
-          {opt.leftImage != null && <Image src={opt.leftImage} className='mr-3 image' mode='aspectFit'/>}
+          {opt.leftImage != null && <Img width={68} height={68} src={opt.leftImage} className='mr-3' mode='aspectFit'/>}
          <View>{title}</View>
        </View>
        <View className='card-content'>
          <View>{content}</View>
          {!chevron && <Icon name='chevron-right'/>}
-          {image && <Image src={image} mode='scaleToFill' className='image'/>}
+          {image && <Img src={image} mode='scaleToFill' className='image' width={68} height={68}/>}
        </View>
      </View>
      {
--- a/src/pages/business/videoInfo/videoInfo.tsx
+++ b/src/pages/business/videoInfo/videoInfo.tsx
@ -9,7 +9,6 @@ import eventsIndex from "@/hooks/eventsIndex";
 import {formatMinute} from "@/utils/time";
 import videoEvents from "@/hooks/videoEvents";
 import unique_ident from "@/hooks/unique_ident";
-import Spin from "@/components/spinner";
 import Img from "@/components/image/image";

 const VideoInfo: FC = () => {
@ -18,7 +17,6 @@ const VideoInfo: FC = () => {
  const [playId, setPlayId] = useState<number | null>(null)
  const [preview, setPreview] = useState(false)  // 预览
  const [playing, setPlaying] = useState(false)  // 学习中
-  const [enable, setEnable] = useState(true)

  const getData = useCallback(async (playing: boolean) => {
    try {
@ -27,7 +25,6 @@ const VideoInfo: FC = () => {
      playId != null && currentVideo(res, playing) //  用于自动播放 判断当前课程是否完成
    } catch (e) {
    }
-    setEnable(false)
  }, [playing, playId])

  const curEnd = (test?: boolean) => {
@ -106,31 +103,28 @@ const VideoInfo: FC = () => {
    videoEvents.videoOff()
  })
  return (
-    <>
-      <Spin enable={enable} overlay/>
-      <View className='content'>
-        <View className='content-video'>
-          {
-            playId
-              ? <Course id={playId} courseId={id} curEnd={curEnd} preview={preview}/>
-              : <Img width={750} height={500} src={data?.course.thumb || ''} mode='aspectFill'/>
-          }
-        </View>
+    <View className='content'>
+      <View className='content-video'>
+        {
+          playId
+            ? <Course id={playId} courseId={id} curEnd={curEnd} preview={preview}/>
+            : <Img width={750} height={500} src={data?.course.thumb || ''} mode='aspectFill'/>
+        }
+      </View>

-        <View className='header'>
-          <View className='flex justify-between text-muted'>
-            <Text className='font-34 text-warning'>{data?.is_required ? '必修' : '选修'}</Text>
-            <Text className='font-24'>{data?.course.class_hour}课时</Text>
-          </View>
-          <View className='font-weight font-36 my-2'>{data?.course.title}</View>
-          <View className='text-muted font-26 mt-3'>
-            <Text className='mr-2'>时长：{formatMinute(data?.duration || 0)}</Text>
-            <Text>学习进度{((data?.learn_hour_records.length || 0) / (data?.course.class_hour || 1) * 100).toFixed(0)}%</Text>
-          </View>
+      <View className='header'>
+        <View className='flex justify-between text-muted'>
+          <Text className='font-34 text-warning'>{data?.is_required ? '必修' : '选修'}</Text>
+          <Text className='font-24'>{data?.course.class_hour}课时</Text>
+        </View>
+        <View className='font-weight font-36 my-2'>{data?.course.title}</View>
+        <View className='text-muted font-26 mt-3'>
+          <Text className='mr-2'>时长：{formatMinute(data?.duration || 0)}</Text>
+          <Text>学习进度{((data?.learn_hour_records.length || 0) / (data?.course.class_hour || 1) * 100).toFixed(0)}%</Text>
        </View>
-        <Catalogue data={data} setHors={setHors} id={id} playId={playId}/>
      </View>
-    </>
+      <Catalogue data={data} setHors={setHors} id={id} playId={playId}/>
+    </View>
  )
 }

--- a/src/pages/home/home.tsx
+++ b/src/pages/home/home.tsx
@ -40,7 +40,7 @@ const Home: FC = () => {
      {data && <CurRecommended/>}
      {
        !token && <View className={styles.tipsLogin} onClick={unLogin}>
-          <View>登录后享受更多学习服务~</View>
+          <View>登录后享受更多服务~</View>
          <MyButton fillet size='mini'>立即登录</MyButton>
        </View>
      }
--- a/src/pages/index/index.config.ts
+++ b/src/pages/index/index.config.ts
@ -1,5 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: '医学道',
+  navigationBarTitleText: '学习课程',
  navigationBarBackgroundColor: '#92ecc5',
  navigationBarTextStyle: 'white',
 })
--- a/src/pages/manage/courseAdmin/courseAdmin.tsx
+++ b/src/pages/manage/courseAdmin/courseAdmin.tsx
@ -6,12 +6,14 @@ import styles from './courseAdmin.module.scss'
 import Taro, {useReachBottom} from "@tarojs/taro";
 import MyButton from "@/components/button/MyButton";
 import storageDep from "@/hooks/storageDep";
+import Spin from "@/components/spinner";

 const CourseAdmin: FC = () => {
  const [total, setTotal] = useState(0)
  const [data, setData] = useState<Curriculum[]>([])
  const [batch, setBatch] = useState(false)
  const [curs, setCurs] = useState<number[]>([])
+  const [enable, setEnable] = useState(true)
  const [param, setParam] = useState<CourseAllParam>({
    page: 1,
    page_size: 10,
@ -34,6 +36,7 @@ const CourseAdmin: FC = () => {
        ])
      }
    })
+    setEnable(false)
  }

  useEffect(() => {
@ -149,6 +152,7 @@ const CourseAdmin: FC = () => {

  return (
    <View>
+      <Spin enable={enable} overlay/>
      <Search param={param} setParam={setParam}/>

      <View className={styles.curList}>
--- a/src/pages/manage/depAdmin/depAdmin.tsx
+++ b/src/pages/manage/depAdmin/depAdmin.tsx
@ -8,6 +8,7 @@ import folder from '@/static/img/folder.png'
 import ShowModel from "@/components/showModel/showModel";
 import Empty from "@/components/empty/empty";
 import {Profile} from '@/store'
+import Spin from "@/components/spinner";

 const DepAdmin: FC = () => {
  const router = useRouter()
@ -17,6 +18,7 @@ const DepAdmin: FC = () => {
  const [isPut, setIsPut] = useState(false)
  const [depName, setDepName] = useState('')
  const [reset, setReset] = useState(false)
+  const [enable, setEnable] = useState(true)
  const {company} = Profile.useContainer()


@ -31,6 +33,7 @@ const DepAdmin: FC = () => {
      }
    } catch (e) {
    }
+    setEnable(false)
  }

  function showPop(name: string | undefined) {
@ -137,6 +140,7 @@ const DepAdmin: FC = () => {

  return (
    <>
+      <Spin overlay enable={enable}/>
      <View>
        {manages.map(d => <PopPut
          key={d.id}
--- a/src/pages/manage/selectDep/selectDep.tsx
+++ b/src/pages/manage/selectDep/selectDep.tsx
@ -6,6 +6,7 @@ import PopPut from "@/components/popPut/popPut";
 import folder from "@/static/img/folder.png";
 import MyButton from "@/components/button/MyButton";
 import storageDep from "@/hooks/storageDep";
+import Spin from "@/components/spinner";

 /**
 * 选择部门 depIds 是 JSON = number[]
@ -16,11 +17,13 @@ const SelectDep: FC = () => {
  const [ids, setIds] = useState<number[]>([])
  const [deps, setDeps] = useState<Manage[]>([])
  const [required, setRequired] = useState<number[]>([])
+  const [enable, setEnable] = useState(true)

  useEffect(() => {
    curriculum.department().then(res => {
      setDeps(res.data)
    })
+    setEnable(false)
    setIds(JSON.parse(params.depIds))
    setRequired(JSON.parse(params.required || "[]"))
  }, [])
@ -79,6 +82,7 @@ const SelectDep: FC = () => {

  return (
    <View className='px-2 bg-white'>
+      <Spin overlay enable={enable}/>
      {deps.map((d) => <View className='flex align-center' key={d.id} onClick={() => onChange(d.id)}>
        <Checkbox value={d.id + ''} checked={ids.includes(d.id)} color='#45d4a8'/>
        <View style={{flex: 1}}>
--- a/src/pages/manage/userInfo/components/info.tsx
+++ b/src/pages/manage/userInfo/components/info.tsx
@ -1,6 +1,7 @@
 import {FC} from "react";
-import {Image, Text, View} from "@tarojs/components";
+import { Text, View} from "@tarojs/components";
 import styles from '../userInfo.module.scss'
+import Img from "@/components/image/image";

 interface Props {
  data: User | null
@ -12,7 +13,7 @@ const Info: FC<Props> = ({data}) => {
  return (
    <>
      <View className={styles.box}>
-        <Image src={data?.avatar || ''} className={styles.image}/>
+        <Img width={120} height={120} src={data?.avatar || ''} className={styles.image}/>
        <View className='ml-2'>
          <View>
            <Text className='font-weight'>{data?.name}</Text>
--- a/src/pages/manage/userInfo/userInfo.module.scss
+++ b/src/pages/manage/userInfo/userInfo.module.scss
@ -15,7 +15,6 @@
 .image {
  width: 120rpx;
  height: 120rpx;
-  background: #ddd;
  border-radius: 10rpx;
  overflow: hidden;
 }
--- a/src/pages/preview/brand/info/info.tsx
+++ b/src/pages/preview/brand/info/info.tsx
@ -7,6 +7,7 @@ import LineEllipsis from "@/components/textCollapse/collapse";
 import Empty from "@/components/empty/empty";
 import Img from "@/components/image/image";
 import {rfc33392time} from "@/utils/day";
+import Spin from "@/components/spinner";

 type Params = {
  id: number
@ -15,18 +16,12 @@ const BrandInfo: FC = () => {
  const {id} = useRouter().params as unknown as Params
  const [brandInfo, setBrandInfo] = useState<BrandRecord>()
  const [articleList, setArticleList] = useState<ArticleRecord[]>([])
-  const [curIndex,setCurIndex] = useState<number>(1)
+  const [curIndex, setCurIndex] = useState<number>(1)
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
+  const [enable, setEnable] = useState(true)

  useEffect(() => {
-    Taro.showLoading({
-      title: '加载中',
-      mask: true
-    })
-    setTimeout(function () {
-      Taro.hideLoading()
-    }, 1000)
    getData()
  }, [id])

@ -35,7 +30,7 @@ const BrandInfo: FC = () => {
      const data = await brandApi.info(id)
      Taro.setNavigationBarTitle({title: data.name})
      setBrandInfo(data)
-      const data1 = await brandApi.articleList(id,page)
+      const data1 = await brandApi.articleList(id, page)
      setTotal(data1.total)
      setArticleList([
        ...(articleList || []),
@ -44,6 +39,7 @@ const BrandInfo: FC = () => {
    } catch (e) {
      // setBrandInfo({disabled: 0, graphic_introduction: "", id: 0, introductory_video: "", name: "", brand_album:['1','2','3']})
    }
+    setEnable(false)
  }

  useReachBottom(useCallback(() => {
@ -53,7 +49,7 @@ const BrandInfo: FC = () => {
  }, [total, articleList]))

  useEffect(() => {
-    brandApi.articleList(id,page).then(res => {
+    brandApi.articleList(id, page).then(res => {
      setTotal(res.total)
      setArticleList([
        ...(articleList || []),
@ -63,46 +59,46 @@ const BrandInfo: FC = () => {

  }, [page])

-  function onChange(e){
-    console.log(e)
-    setCurIndex(+e.detail.current+1)
+  function onChange(e) {
+    setCurIndex(+e.detail.current + 1)
  }

  return (
-    <View className='flex flex-column' style={{display:brandInfo?'flex':'none'}}>
-        <Swiper
-          className={styles['swiper']}
-          indicatorColor='#999'
-          indicatorActiveColor='#333'
-          indicatorDots={false}
-          onChange={onChange}
+    <View className='flex flex-column' style={{display: 'flex'}}>
+      <Spin enable={enable} overlay/>
+      <Swiper
+        className={styles['swiper']}
+        indicatorColor='#999'
+        indicatorActiveColor='#333'
+        indicatorDots={false}
+        onChange={onChange}

-        >
-          { brandInfo?.introductory_video_resource?.url && <SwiperItem>
-            <Video
-              style={{width: '750rpx', height: '600rpx'}}
-              playBtnPosition={"center"}
-              id='video'
-              src={brandInfo?.introductory_video_resource?.url}
-              initialTime={0}
-              controls={true}
-              enableProgressGesture={false}
-              showFullscreenBtn={false}
-              autoplay={false}
-              loop={false}
-              muted={false}
-            />
-          </SwiperItem>}
-          {brandInfo?.brand_album?.length
-            && brandInfo?.brand_album?.split(',').map((d) =>
-              <SwiperItem>
-                <Image mode={'aspectFill'} style={{width:'750rpx',height:'600rpx'}} src={d}></Image>
-              </SwiperItem>)
-          }
-        </Swiper>
-        <View className={styles.curIndexBox}>
-          <Text>{curIndex} / {(brandInfo?.brand_album?.split(',').length || 0)  + ((brandInfo && brandInfo.introductory_video_resource) ? 1:0)}</Text>
-        </View>
+      >
+        {brandInfo?.introductory_video_resource?.url && <SwiperItem>
+          <Video
+            style={{width: '750rpx', height: '600rpx'}}
+            playBtnPosition={"center"}
+            id='video'
+            src={brandInfo?.introductory_video_resource?.url}
+            initialTime={0}
+            controls={true}
+            enableProgressGesture={false}
+            showFullscreenBtn={false}
+            autoplay={false}
+            loop={false}
+            muted={false}
+          />
+        </SwiperItem>}
+        {brandInfo?.brand_album?.length
+          && brandInfo?.brand_album?.split(',').map((d) =>
+            <SwiperItem>
+              <Image mode={'aspectFill'} style={{width: '750rpx', height: '600rpx'}} src={d}></Image>
+            </SwiperItem>)
+        }
+      </Swiper>
+      <View className={styles.curIndexBox}>
+        <Text>{curIndex} / {(brandInfo?.brand_album?.split(',').length || 0) + ((brandInfo && brandInfo.introductory_video_resource) ? 1 : 0)}</Text>
+      </View>
      <View className={styles['body']}>
        <View className={styles['top']}>
          <Text className={styles['title']}>{brandInfo?.name}</Text>
--- a/src/pages/preview/brand/list/list.tsx
+++ b/src/pages/preview/brand/list/list.tsx
@ -1,10 +1,11 @@
 import {FC, useCallback, useEffect, useState} from "react";
-import {Image, View} from "@tarojs/components";
+import {View} from "@tarojs/components";
 import {brandApi, BrandRecord} from "@/api";
 import styles from './list.module.scss'
 import Taro, {useReachBottom} from "@tarojs/taro";
 import Empty from "@/components/empty/empty";
 import Spinner from "@/components/spinner";
+import Img from "@/components/image/image";

 const BrandList: FC = () => {
  const [page, setPage] = useState(1)
@ -52,13 +53,13 @@ const BrandList: FC = () => {


  return (
-    <View className='p-2' style={{display: text ? 'block' : 'none'}}>
+    <View className='p-2'>
      <Spinner enable={loading} overlay/>
      {
        brands.length ?
          <>
            {brands.map((d) => <View onClick={() => jumpInfo(d.id)} className={styles.box} key={d.id}>
-              <Image src={d.logo} mode='aspectFill' className={styles.image}/>
+              <Img width={128} height={128} src={d.logo} mode='aspectFill' className={styles.image}/>
              <View className={styles.rightBox}>
                <View className='font-weight mb-2 font-28'>{d.name}</View>
                <View className={styles.desc}>{d.graphic_introduction}</View>
--- a/src/pages/preview/health/health.module.scss
+++ b/src/pages/preview/health/health.module.scss
@ -13,13 +13,6 @@
  overflow: hidden;
  margin-bottom: 20rpx;
  position: relative;
-
-  image,
-  Image {
-    background: #eee;
-    width: 100%;
-    min-height: 345rpx;
-  }
 }

 .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 play from '@/static/img/play.png'
 import Empty from "@/components/empty/empty";
 import Spin from "@/components/spinner";
+import Img from "@/components/image/image";

 const Health: FC = () => {
  const [page, setPage] = useState(1)
@ -43,7 +44,7 @@ const Health: FC = () => {
        {
          data.length > 0
            ? data.map(d => <View key={d.id} className={styles.health} onClick={() => jump(d)}>
-              <Image src={d.url_path} mode='widthFix' lazyLoad fadeIn/>
+              <Img width={370} height={345} src={d.url_path} mode='widthFix'/>
              <Image src={play} className={styles.play} mode='aspectFit'/>
              <View className='text-ellipsis-2 m-2 text-dark'>{d.title}</View>
              <View className='font-26  text-muted mx-2 mb-2'>{d.video_view}观看</View>
--- a/src/pages/preview/illness/list/list.tsx
+++ b/src/pages/preview/illness/list/list.tsx
@ -4,29 +4,31 @@ import styles from './list.module.scss'
 import Taro, {useReachBottom, useRouter} from "@tarojs/taro";
 import {illnessApi} from "@/api/illness";
 import Empty from "@/components/empty/empty";
+import Spin from "@/components/spinner";

 const BrandList: FC = () => {
  const params = useRouter().params as unknown as { id: number }
  const [page, setPage] = useState(1)
  const [articles, setArticles] = useState<any[]>([])
-  const [illness,setIllness] = useState<{name:string;description:string;resource:any;album:string[]}>()
+  // const [illness, setIllness] = useState<{ name: string; description: string; resource: any; album: string[] }>()
  const [total, setTotal] = useState(0)
  const [fetchDone, setFetchDone] = useState(false)
+  const [enable, setEnable] = useState(true)

  useEffect(() => {
-    Taro.showLoading({title: '加载中', mask: true})
    getData().then()
  }, [page])

  const getData = useCallback(async () => {
    try {
      const data = await illnessApi.articleInfo(params.id, page, 20)
-      Taro.setNavigationBarTitle({title:data.illness.name})
-      setIllness(data.illness)
+      Taro.setNavigationBarTitle({title: data?.illness?.name || '暂无文章'})
+      // setIllness(data.illness)
      setTotal(data.list.total)
      setArticles([...articles, ...data.list.list])
    } catch (e) {
    }
+    setEnable(false)
    setFetchDone(true)
    Taro.hideLoading()
  }, [page])
@ -44,12 +46,17 @@ const BrandList: FC = () => {


  return (
-    <View style={{display: fetchDone ? 'block' : 'none'}} className='px-2 mt-2 bg-white'>
+    <View style={{display: fetchDone ? 'block' : 'none'}} className='px-2 mt-2'>
+      <Spin enable={enable} overlay/>
      {
        articles.length > 0 ?
-          articles.map((d, index) => <View key={d.id} className={styles.articles} onClick={() => jump(d.id)}>
-            {index + 1} . {d.title}
-          </View>)
+          <View className='bg-white'>
+            {
+              articles.map((d, index) => <View key={d.id} className={styles.articles} onClick={() => jump(d.id)}>
+                {index + 1} . {d.title}
+              </View>)
+            }
+          </View>
          : <Empty name='暂无文章'/>
      }
    </View>
--- a/src/pages/preview/profession/profession.module.scss
+++ b/src/pages/preview/profession/profession.module.scss
@ -10,13 +10,10 @@
  box-sizing: border-box;
  display: flex;
  margin-bottom: 20rpx;
+}
+

-  Image,
-  image {
-    width: 320rpx;
-    max-height: 180rpx;
-    margin-right: 20rpx;
-    border-radius: 10rpx;
-    background: #eee;
-  }
+.image {
+  margin-right: 20rpx;
+  border-radius: 10rpx;
 }
--- a/src/pages/preview/profession/profession.tsx
+++ b/src/pages/preview/profession/profession.tsx
@ -1,4 +1,4 @@
-import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
+import {ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
 import {HomeApi} from "@/api";
 import {useEffect, useState} from "react";
 import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
@ -6,6 +6,7 @@ import Empty from "@/components/empty/empty";
 import Taro from "@tarojs/taro";
 import styles from './profession.module.scss'
 import Spin from "@/components/spinner";
+import Img from "@/components/image/image";

 interface KillData {
  data: Kill[]
@ -18,7 +19,6 @@ const Profession = () => {
  const [categoryId, setCategoryId] = useState<number | null>(null)
  const [data, setData] = useState<Map<number, KillData>>(new Map)
  const [enable, setEnable] = useState(true)
-  const [loading, setLoading] = useState(false)

  /**
   * more 开启加载更多
@ -35,7 +35,6 @@ const Profession = () => {
    }

    try {
-      setLoading(true)
      const res = await HomeApi.skillList(categoryId!, page, 10)
      const dataList = res.data.reduce((pre, cur) => {
        const index = pre.findIndex(d => d.id === cur.id)
@ -55,7 +54,6 @@ const Profession = () => {
      setData(oldData)
    } catch (e) {
    }
-    setLoading(false)
  }

  useEffect(() => {
@ -101,12 +99,11 @@ const Profession = () => {
        {
          data.data.map(d =>
            <View className={styles.killBox} onClick={() => jump(d)}>
-              <Image src={d.url_path} mode='widthFix'/>
+              <Img width={320} height={180} src={d.url_path} mode='widthFix' className={styles.image}/>
              <View className='text-ellipsis flex-1'>{d?.resource?.name}</View>
            </View>
          )
        }
-        <Spin enable={loading}/>
      </ScrollView>
    )
  }
--- a/src/static/css/module.scss
+++ b/src/static/css/module.scss
@ -59,11 +59,6 @@ taro-button-core::after {
    align-items: center;
    justify-content: center;
  }
-
-  .image {
-    width: 68px;
-    height: 68px;
-  }
 }

 .Textarea {