获取图片更新

src/pages/item/espier-detail.js

@@ -103,7 +103,8 @@ const initialState = {
   recommendList: [],
   isParameter: false,
   imgHeightList: [], // 用于存储banner高度
-  navigateMantle: false
+  navigateMantle: false,
+  defaultImageHeight: 520 // 默认图片高度，避免空白
 }
 
 function EspierDetail(props) {
@@ -141,7 +142,8 @@ function EspierDetail(props) {
     recommendList,
     isParameter,
     imgHeightList,
-    navigateMantle
+    navigateMantle,
+    defaultImageHeight
   } = state
 
   useEffect(() => {
@@ -303,15 +305,24 @@ function EspierDetail(props) {
         }
       })
     }
-    const banner = await getMultipleImageInfo(data.imgs)
     setState((draft) => {
       draft.info = {
         ...data,
         subscribe
       }
       draft.play = data.video ? true : false // 辉绮需求
-      draft.imgHeightList = banner
       draft.promotionActivity = data.promotionActivity
+      // 初始化图片高度数组，使用默认高度
+      draft.imgHeightList = new Array(data.imgs.length).fill(draft.defaultImageHeight)
+    })
+
+    // 异步计算图片真实高度，不阻塞页面渲染
+    getMultipleImageInfo(data.imgs).then(heights => {
+      setState((draft) => {
+        draft.imgHeightList = heights
+      })
+    }).catch(error => {
+      console.log('计算图片高度失败，使用默认高度:', error)
     })
 
     if (isAPP() && userInfo) {
@@ -337,7 +348,7 @@ function EspierDetail(props) {
     }
   }
   const getMultipleImageInfo = async (imageUrls = []) => {
-    let windowWidth = 375
+    let windowWidth = defaultImageHeight
     try {
       const sys = Taro.getSystemInfoSync()
       if (sys && sys.windowWidth) windowWidth = sys.windowWidth
@@ -347,9 +358,9 @@ function EspierDetail(props) {
 
     const promises = imageUrls.map(async (url) => {
       try {
-        const info = await Taro.getImageInfo({ src: url })
-        const imgWidth = Number(info?.width) || 0
-        const imgHeight = Number(info?.height) || 0
+        const imageInfo = await Taro.getImageInfo({ src: url })
+        const imgWidth = Number(imageInfo?.width) || 0
+        const imgHeight = Number(imageInfo?.height) || 0
         if (imgWidth > 0 && imgHeight > 0) {
           return Math.round((windowWidth * imgHeight) / imgWidth)
         }
@@ -501,7 +512,7 @@ function EspierDetail(props) {
                 className='goods-swiper'
                 // current={curImgIdx}
                 onChange={onChangeSwiper}
-                style={{ height: imgHeightList[curImgIdx] + 'px' }}
+                style={{ height: (imgHeightList[curImgIdx] || defaultImageHeight) + 'px' }}
               >
                 {info.imgs.map((img, idx) => (
                   <SwiperItem key={`swiperitem__${idx}`}>
@@ -845,7 +856,7 @@ function EspierDetail(props) {
           <View className='product-parameter-all'>
             {info?.itemParams?.map((item, index) => {
               return (
-                <View className='product-parameter-item'>
+                <View className='product-parameter-item' key={`product-parameter-item__${index}`}>
                   <Text className='title'>{item.attribute_name}</Text>
                   <Text className='content'>{item.attribute_value_name}</Text>
                 </View>

src/subpages/guide/item/espier-detail.js

@@ -87,6 +87,7 @@ const initialState = {
   // 多规格商品选中的规格
   curItem: null,
   imgHeightList: [], // 用于存储banner高度
+  defaultImageHeight: 520, // 默认图片高度，避免空白
 }
 
 function EspierDetail(props) {
@@ -122,6 +123,7 @@ function EspierDetail(props) {
     subtaskId,
     curItem,
     imgHeightList, // 用于存储banner高度
+    defaultImageHeight,
   } = state
 
   useEffect(() => {
@@ -254,30 +256,51 @@ function EspierDetail(props) {
         }
       })
     }
-    const banner = await getMultipleImageInfo(data.imgs)
-
     setState((draft) => {
       draft.info = {
         ...data,
         subscribe
       }
-      draft.imgHeightList = banner
       draft.promotionActivity = data.promotionActivity
+      // 初始化图片高度数组，使用默认高度
+      draft.imgHeightList = new Array(data.imgs.length).fill(draft.defaultImageHeight)
+    })
+
+    // 异步计算图片真实高度，不阻塞页面渲染
+    getMultipleImageInfo(data.imgs).then(heights => {
+      setState((draft) => {
+        draft.imgHeightList = heights
+      })
+    }).catch(error => {
+      console.log('计算图片高度失败，使用默认高度:', error)
     })
   }
 
-  const getMultipleImageInfo = async (imageUrls) => {
-    const promises = imageUrls.map(url =>
-      Taro.getImageInfo({ src: url })
-        .then(info => info)
-        .catch(error => {
-          console.log('获取图片信息失败:', url, error)
-          // 返回一个默认高度或 null
-          return { width: 0, height: 650 }
-        })
-    )
-    const results = await Promise.all(promises)
-    return results.map(info => (info.height) / 2 > 650 ? 650 : info.height / 2)
+  const getMultipleImageInfo = async (imageUrls = []) => {
+    let windowWidth = defaultImageHeight
+    try {
+      const sys = Taro.getSystemInfoSync()
+      if (sys && sys.windowWidth) windowWidth = sys.windowWidth
+    } catch (e) {
+      console.log('获取系统信息失败，使用默认宽度:', e)
+    }
+
+    const promises = imageUrls.map(async (url) => {
+      try {
+        const imageInfo = await Taro.getImageInfo({ src: url })
+        const imgWidth = Number(imageInfo?.width) || 0
+        const imgHeight = Number(imageInfo?.height) || 0
+        if (imgWidth > 0 && imgHeight > 0) {
+          return Math.round((windowWidth * imgHeight) / imgWidth)
+        }
+        return Math.round(windowWidth)
+      } catch (error) {
+        console.log('获取图片信息失败:', url, error)
+        return Math.round(windowWidth)
+      }
+    })
+
+    return Promise.all(promises)
   }
 
   // 获取包裹
@@ -387,7 +410,7 @@ function EspierDetail(props) {
               className='goods-swiper'
               // current={curImgIdx}
               onChange={onChangeSwiper}
-              style={{ height: (imgHeightList[curImgIdx]) + 'px' }}
+              style={{ height: (imgHeightList[curImgIdx] || defaultImageHeight) + 'px' }}
             >
               {info.imgs.map((img, idx) => (
                 <SwiperItem key={`swiperitem__${idx}`}>