优化首页加载速度

src/api/request.ts

@@ -44,6 +44,8 @@ export const ERROR_STATUS: Record<number | string, string> = {
   'OVERSTEP': '请求越界~'
 }
 
+let notLoging = false
+
 export function request<T = unknown>(
   url: string,
   method: keyof Method,
@@ -82,15 +84,19 @@ export function request<T = unknown>(
           const data = res?.data as any
           if (data?.code === 0 && res?.statusCode === 200) {
             resolve(data?.data)
+            notLoging = false
           } else if (res.statusCode === 401) {
-            // Taro.showModal({
-            //   title: "登录过期,需重新登陆",
-            //   showCancel: false,
-            //   success() {
+            if (notLoging) return
+            notLoging = true
+            Taro.showModal({
+              title: "请登录",
+              content: token ? '登录过期' : "完成登录开启功能",
+              showCancel: false,
+              success() {
                 Taro.clearStorageSync()
                 Taro.redirectTo({url: '/pages/login/login'})
-            // }
-            // })
+              }
+            })
           } else {
             reject(null)
             Taro.showToast({

src/components/image/image.tsx

@@ -9,7 +9,7 @@ interface Props extends ImageProps {
   fallback?: string
 }
 
-const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = shard}) => {
+const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = shard, ...props}) => {
   const [isError, setIsError] = useState(false)
   const [loading, setLoading] = useState(true)
 
@@ -35,23 +35,22 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
   }
 
   return (
-    <View style={{width: `${width}rpx`, height: `${height}rpx`, backgroundColor: 'eee'}}>
+    <View style={{width: `${width}rpx`, height: `${height}rpx`, backgroundColor: '#eee'}}>
       {!isError &&
         <Image
+          {...props}
           src={src}
           mode={mode}
+          lazyLoad
           style={{width: `${width}rpx`, height: `${height}rpx`}}
           onError={onErrorHandler}
           onLoad={onLoadHandler}>
         </Image>
       }
-      {
-        loading &&
-        <AtActivityIndicator mode={"center"} content='加载中...'/>
-      }
+      {loading && <AtActivityIndicator mode="center"/>}
       {
         isError && !loading &&
-        <Image mode={'aspectFill'} src={fallback} style={{width: `${width}rpx`, height: `${height}rpx`}}></Image>
+        <Image mode={'aspectFill'} src={fallback} style={{width: `${width}rpx`, height: `${height}rpx`}}/>
       }
     </View>
   )

src/pages/home/components/adware.tsx

@@ -1,8 +1,9 @@
-import {Image, Swiper, SwiperItem, View} from "@tarojs/components";
+import {Swiper, SwiperItem, View} from "@tarojs/components";
 import {FC, useEffect, useState} from "react";
 import {AdwareType} from "@/api";
 import Taro from "@tarojs/taro";
 import styles from '../home.module.scss'
+import Img from "@/components/image/image";
 
 interface Props {
   data: any[]
@@ -30,16 +31,16 @@ const Adware: FC<Props> = ({data, only_flag, width}) => {
   }
 
   return (
-    <View>
+    <View className={styles.adware}>
       {
-        adverts.length === 1 && <Image
+        adverts.length === 1 && <Img
           src={adverts[0].image_url}
           mode='scaleToFill'
           lazyLoad
           fadeIn
-          style={{width: width + "rpx", height: (space.height / space.width) * width + "rpx"}}
           onClick={() => jumpAdware(adverts[0].image_path)}
-          className={styles.adware}/>
+          width={width}
+          height={(space.height / space.width) * width}/>
       }
       {
         adverts.length > 1 && <Swiper
@@ -47,15 +48,15 @@ const Adware: FC<Props> = ({data, only_flag, width}) => {
           autoplay
           circular
           style={{width: width + "rpx", height: (space.height / space.width) * width + "rpx", overflow: 'hidden'}}
-          indicatorActiveColor='rgba(255,255,255,0.5)'
-          className={styles.adware}>
+          indicatorActiveColor='rgba(255,255,255,0.5)'>
           {adverts.map(d => <SwiperItem key={d.id}>
-            <Image
+            <Img
               src={d.image_url}
               lazyLoad
               fadeIn
-              onClick={() => jumpAdware(d.image_path)}
-              style={{width: width + "rpx", height: '100%'}}/>
+              width={width}
+              height={(space.height / space.width) * width}
+              onClick={() => jumpAdware(d.image_path)}/>
           </SwiperItem>)}
         </Swiper>
       }

src/pages/home/components/feature_recommended.tsx

@@ -76,7 +76,8 @@ const FeatureRecommended: FC<Props> = (props) => {
         description: d.graphic_introduction,
         path: `?id=${d.id}`,
       }))
-    } catch (e) {}
+    } catch (e) {
+    }
     return []
   }
 
@@ -149,8 +150,8 @@ const FeatureRecommended: FC<Props> = (props) => {
   }
 
   return (
-    <View className={styles.feature}>
-      <Swiper nextMargin='30px' style={{height: '263px'}}>
+    <View className={styles.feature} style={{height: '263px'}}>
+      {data.every(d => d.data.length) && <Swiper nextMargin='30px' style={{height: '263px'}}>
         {
           data.map(d => <SwiperItem key={d.url}>
             <Image
@@ -162,8 +163,8 @@ const FeatureRecommended: FC<Props> = (props) => {
                 className='flex mb-3'
                 key={c.id}
                 onClick={() => jump(d.detailsUrl + c.path, c.id, d.type)}>
-                <View style={{position:'relative'}}>
-                  <View className={styles.featureImage} >
+                <View style={{position: 'relative'}}>
+                  <View className={styles.featureImage}>
                     <Img src={c.imageUrl} height={100} width={140}/>
                   </View>
                   <Image src={[first, second, third][index]} className={styles.ranking} mode='aspectFill'/>
@@ -176,7 +177,7 @@ const FeatureRecommended: FC<Props> = (props) => {
             }
           </SwiperItem>)
         }
-      </Swiper>
+      </Swiper>}
     </View>
   )
 }

src/pages/home/home.module.scss

@@ -72,6 +72,7 @@
 
 .courseTag {
   width: 162px;
+  height: 46rpx;
   margin: 0 auto 30rpx;
   display: block;
 }
@@ -85,6 +86,7 @@
 }
 
 .featureTitle {
+  max-width: 212px;
   height: 42rpx;
   padding-bottom: 30rpx;
 }
@@ -117,7 +119,7 @@
 }
 
 .ranking {
-  top:0;
+  top: 0;
   position: absolute;
   left: 24rpx;
   width: 30px;