修改课程样式

2.修改图片的默认图片
3.新增图片组件最小高度加载图片后高度适配

src/components/collect/collect.module.scss

@@ -1,4 +1,5 @@
 .collect {
+  width: 130rpx;
   display: flex;
   align-items: center;
   color: #909795;

src/components/image/image.tsx

@@ -6,12 +6,14 @@ import avatar from '@/static/img/avatar.png'
 import healthShard from '@/static/img/healthShard.png'
 import professionShard from '@/static/img/professionShard.png'
 import brandSecond from '@/static/img/brandSecond.png'
+import courseShard from '@/static/img/courseShard.png'
 
 interface Props extends ImageProps {
   width?: number | string
   height?: number | string
   fallback?: string
   errorType?: ImgErrType
+  fit?: boolean // 当网络图片加载完成后高度自动
 }
 
 const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...props}) => {
@@ -24,7 +26,7 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...p
 
 
   useEffect(() => {
-    if (!height && !isError && mode !== 'heightFix') {
+    if (!isError && props.fit) {
       Taro.getImageInfo({
         src,
         success() {
@@ -54,6 +56,9 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...p
       case 'brand':
         setErrorUrl(brandSecond)
         break
+      case 'course':
+        setErrorUrl(courseShard)
+        break
     }
   }, [props.errorType])
 
@@ -71,16 +76,15 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...p
   }
 
   return (
-    <View
+    <View className={props?.className}
           style={{
             overflow: 'hidden',
             width: width ? `${width}rpx` : "100%",
             height: height ? `${height}rpx` : "100%",
             backgroundColor: (isError || !loading) ? 'transparent' : '#F8F8F8'
-      }}
+          }}>
-      className={`${props?.className}`}>
       {!isError &&
-        <View animation={animationData}>
+        <View animation={animationData} style={{height: '100%', width: '100%'}}>
           <Image
             {...props}
             src={src}
@@ -100,13 +104,11 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...p
       {
         isError && !loading &&
         <Image
-          mode='widthFix'
+          mode='aspectFill'
           src={errorUrl}
           lazyLoad
           fadeIn
-          style={{
+          style={{width: "100%", height: '100%'}}/>
-            width: "100%",
-          }}/>
       }
     </View>
   )

src/components/videoList/videoList.tsx

@@ -19,7 +19,7 @@ const VideoList: FC<Props> = ({data, errorType}) => {
 
   return (
     <View key={data.id} className={styles.health} onClick={jump}>
-      <Img src={data.url_path} mode='widthFix' errorType={errorType} height={346}/>
+      <Img src={data.url_path} mode='widthFix' errorType={errorType} height={346} fit/>
       <Image src={play} className={styles.play} mode='aspectFit'/>
       <View className='p-1'>
         <View className='text-ellipsis-2  text-dark'>{data.title}</View>

src/pages/business/videoInfo/components/catalogue.tsx

@@ -196,9 +196,9 @@ const Catalogue: FC<Props> = ({data, setHors, id, playId}) => {
             owner_id={id}
             owner_type={3}
             select={data?.course.collect}
-            styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}}
+            styles={{flexDirection: 'column', justifyContent: 'center'}}
             stylesImage={{margin: '0 0 8rpx 0'}}/>
-          <View className='px-2' onClick={() => setShow(true)}>
+          <View className='px-2 text-center' onClick={() => setShow(true)}>
             <Image src={omit} style={{width: '32rpx', height: '32rpx'}} mode='widthFix'/>
             <View>更多</View>
           </View>

src/pages/home/components/search.tsx

@@ -14,7 +14,6 @@ export const Search: FC = () => {
   return (
     <View className={styles.search} onClick={jump}>
       <Image src={search} mode='widthFix' style={{width: 16, height: 16, verticalAlign: 'middle',padding:'0 20rpx'}}/>
-      {/*<Icon name='search' size={18} color='#808080'/>*/}
       <View>点击搜索</View>
     </View>
   )

src/pages/home/home.module.scss

@@ -61,7 +61,7 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  //justify-content: center;
+  justify-content: center;
   height: 68rpx;
   margin-bottom: 40rpx;
   font-size: 28rpx;

src/pages/index/components/videoList.tsx

@@ -128,7 +128,7 @@ export const VideoList: FC<Props> = ({categoryKey, setCategoryKey}) => {
                           />)
                       }
                     </View>
-                    <View className='text-center text-muted'>暂无更多</View>
+                    <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
                   </>
                   : <Empty name='暂无课程'/>
             }

src/pages/manage/courseAdmin/courseAdmin.tsx

@@ -163,7 +163,7 @@ const CourseAdmin: FC = () => {
                 checked={curs.includes(d.id)}
                 style={{marginTop: '30px'}}
                 onClick={() => addCurs(d.id)}/>}
-              <Img src={d.thumb} className={styles.curImage} width={280} height={164}/>
+              <Img src={d.thumb} className={styles.curImage} width={280} height={164} errorType='course'/>
               <View>{d.title}</View>
             </View>
             <View className={styles.Operation}>

src/pages/my/components/header/time.tsx

@@ -39,7 +39,7 @@ const Time: FC = () => {
       // oldList[3].time = res.not_finished_count
       setList(oldList)
     })
-  })
+  }, [])
 
   function jump(type?: number) {
     if (!token) {

src/pages/preview/brand/article/article.tsx

@@ -87,7 +87,8 @@ const article: FC = () => {
   function helloWorld() {
     return (
       <>
-        <View className={styles.botmBox}>
+        {
+          headings.length > 0 && <View className={styles.botmBox}>
             <View>
               <Collect
                 select={articleInfo?.collect}
@@ -98,15 +99,12 @@ const article: FC = () => {
                 onUpdate={onCollect}
               />
             </View>
-          {
-            headings.length > 0 && (
             <View className='flex flex-column justify-center align-center' onClick={() => setShow(true)}>
               <Image src={catalogue} mode='widthFix' style={{width: '40rpx', height: '40rpx'}}/>
               <View>目录</View>
             </View>
-            )
-          }
           </View>
+        }
 
         <Spin overlay enable={enable}/>
         <View
@@ -118,7 +116,7 @@ const article: FC = () => {
           <View id="childrenNode">
             <View className={styles.articleTitle}>{articleInfo?.title}</View>
             {
-              articleInfo?.brands.map(d => (
+              articleInfo?.brands?.map(d => (
                 <View className='flex align-center mb-4'>
                   <View className={`${styles.article} flex-1`}>
                     <Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType='avatar'/>
@@ -175,7 +173,8 @@ const article: FC = () => {
         >
           <View>
             <View className='text-center text-black relative clip'>
-              <View className='absolute left top bottom flex flex-column justify-center align-center' style={{width: '58px'}} onClick={() => setShow(false)}>
+              <View className='absolute left top bottom flex flex-column justify-center align-center'
+                    style={{width: '58px'}} onClick={() => setShow(false)}>
                 <Icon name='close' color="#000" bold/>
               </View>
               <View className='py-3 bold'>目录</View>

src/pages/preview/brand/info/info.module.scss

@@ -57,6 +57,7 @@ page{
         height:128rpx;
         background-color: #eee;
         border-radius: 8rpx;
+        overflow: hidden;
       }
       .leftBox{
         padding-right: 24rpx;

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

@@ -126,7 +126,7 @@ const BrandInfo: FC = () => {
                       <View className={styles.desc}>{rfc33392time(i.created_at)} {i.page_view}阅读</View>
                     </View>
                     <View className={styles.image}>
-                      <Img width={172} height={128} src={i.cover}/>
+                      <Img width={172} height={128} src={i.cover} errorType='brand'/>
                     </View>
                   </View>
                 </View>)}

src/pages/preview/search/search/components/list.tsx

@@ -7,7 +7,7 @@ import Img from "@/components/image/image";
 import {SearchApi} from "@/api/search";
 import {AtLoadMore} from 'taro-ui'
 import {rfc33392time} from "@/utils/day";
-import play from "@/static/img/play.png";
+import play from "@/static/img/play-back.png";
 
 type Props = {
   name: string
@@ -107,7 +107,8 @@ const SearchList: FC<Props> = ({name,clear}) => {
               {
                 d.data.table === 'brand' &&
                 <>
-                    <Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
+                  <Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}
+                       errorType='brand'/>
                   <View className={styles.rightBox}>
                     <View className='font-weight mb-2 font-28'>{d.data.title}</View>
                     <View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View>
@@ -119,15 +120,18 @@ const SearchList: FC<Props> = ({name,clear}) => {
                 <>
                   <View className={styles.articleLeftBox}>
                     <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
-                      <View className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
+                    <View
+                      className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
                   </View>
-                    <Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
+                  <Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}
+                       errorType='course'/>
                 </>
               }
               {
                 d.data.table === 'video_records' &&
                 <>
-                    <Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill' className={styles.image}/>
+                  <Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill' errorType='health'
+                       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.data['@data'].title}</View>
@@ -139,18 +143,20 @@ const SearchList: FC<Props> = ({name,clear}) => {
               {
                 d.data.table === 'courses' &&
                 <>
-                    <Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
+                  <Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}
+                       errorType='course'/>
                   <View className={styles.courseRightBox}>
                     <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
-                      <View className={styles.desc}>课时:{d.data['@data'].class_hour}节   销量：{d.data['@data'].charge}</View>
+                    <View className={styles.desc}>课时:{d.data['@data'].class_hour}节
+                      销量：{d.data['@data'].charge}</View>
                   </View>
                 </>
               }
-
             </View>
           )
           }
-            <View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3 mb-3">{text}</View>
+          <View style={{width: '750rpx', textAlign: 'center', color: '#999'}}
+                className="font-28 mt-3 mb-3">{text}</View>
         </>
       }
       {!loading && brands.length === 0 && <Empty name='空空如也'/>}

src/pages/preview/search/search/index.tsx

@@ -142,7 +142,7 @@ const Search: FC = () => {
         round
         overlay
         overlayStyle={'background:rgba(0,0,0,0)'}>
-        <SearchList name={value} clear={show}/>
+        {show && <SearchList name={value} clear={show}/>}
       </PageContainer>
     </View>
   )

types/user.d.ts

@@ -114,5 +114,6 @@ type ImgErrType = "acquiesce" // 默认
   | 'health' // 健康
   | 'profession' // 技能
   | 'brand' // 品牌
+  | 'course' // 课程