From a4177a0b2f1f36a976cee42d29b645c7b5e5dd86 Mon Sep 17 00:00:00 2001
From: sunlizhou <296190577@qq.com>
Date: Mon, 28 Aug 2023 17:00:32 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=9B=BE=E7=89=87=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/image/image.tsx                | 60 +++++++++++++++++++
 .../home/components/feature_recommended.tsx   |  9 ++-
 src/pages/home/home.module.scss               |  1 +
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 src/components/image/image.tsx

diff --git a/src/components/image/image.tsx b/src/components/image/image.tsx
new file mode 100644
index 0000000..d3591b8
--- /dev/null
+++ b/src/components/image/image.tsx
@@ -0,0 +1,60 @@
+import {FC, useEffect, useState} from "react";
+import {Image, View} from "@tarojs/components";
+import emptyImg from '@/static/img/empty.png'
+import {AtActivityIndicator} from "taro-ui";
+
+interface Props {
+  src: string
+  mode?: "scaleToFill" | "aspectFit" | "aspectFill" | "widthFix" | "heightFix" | "top" | "bottom" | "center" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right" | undefined
+  width:number
+  height:number
+  fallback?: string
+}
+
+const Img: FC<Props> = ({src,mode = 'aspectFill',width,height,fallback = emptyImg}) => {
+  const [isError,setIsError] = useState(false)
+  const [loading,setLoading] = useState(true)
+
+  useEffect(()=>{
+    console.log(src, !src)
+    if(!src){
+        setIsError(true)
+        setLoading(false)
+      } else {
+        setIsError(false)
+        setLoading(false)
+      }
+  },[src])
+  // 图片加载失败
+  function onErrorHandler() {
+    setLoading(false)
+    setIsError(true)
+  }
+   function onLoadHandler() {
+     setLoading(false)
+     setIsError(false)
+   }
+
+  return (
+    <View style={{width:`${width}rpx`,height:`${height}rpx`,backgroundColor:'eee'}}>
+      { !isError &&
+        <Image
+          src={src}
+          mode={mode}
+          style={{width:`${width}rpx`,height:`${height}rpx`}}
+          onError={onErrorHandler}
+          onLoad={onLoadHandler}>
+        </Image>
+      }
+      { loading &&
+        <AtActivityIndicator mode={"center"} content='加载中...'></AtActivityIndicator>
+      }
+      { isError && !loading &&
+        <Image mode={'aspectFill'} src={fallback} style={{width:`${width}rpx`,height:`${height}rpx`}}></Image>
+      }
+
+    </View>
+  )
+}
+
+export default Img
diff --git a/src/pages/home/components/feature_recommended.tsx b/src/pages/home/components/feature_recommended.tsx
index 936de39..3a16227 100644
--- a/src/pages/home/components/feature_recommended.tsx
+++ b/src/pages/home/components/feature_recommended.tsx
@@ -10,6 +10,7 @@ import brandTop from '@/static/img/brandTop.png'
 import illnessTop from '@/static/img/illnessTop.png'
 import healthTop from '@/static/img/healthTop.png'
 import professionTop from '@/static/img/professionTop.png'
+import Img from "@/components/image/image";
 
 
 interface DataContent {
@@ -163,8 +164,12 @@ const FeatureRecommended: FC<Props> = (props) => {
                 className='flex mb-3'
                 key={c.id}
                 onClick={() => jump(d.detailsUrl + c.path, c.id, d.type)}>
-                <View>
-                  <Image src={c.imageUrl} className={styles.featureImage} mode='aspectFill'/>
+                <View style={{position:'relative'}}>
+                  <View className={styles.featureImage} >
+                    <Img src={c.imageUrl}  height={100} width={140}></Img>
+                  </View>
+                  {/*<Image src={c.imageUrl} className={styles.featureImage} mode='aspectFill'/>*/}
+
                   <Image src={[first, second, third][index]} className={styles.ranking} mode='aspectFill'/>
                 </View>
                 <View className={styles.featureText}>
diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss
index 8820c50..1e406a9 100644
--- a/src/pages/home/home.module.scss
+++ b/src/pages/home/home.module.scss
@@ -117,6 +117,7 @@
 }
 
 .ranking {
+  top:0;
   position: absolute;
   left: 24rpx;
   width: 30px;