feat: 详情页轮播图

src/pages/detail/index.tsx

@@ -96,7 +96,7 @@ function Index() {
   // const { incrementRequestCount, resetUserStats } = useUserActions()
 
   const [current, setCurrent] = useState(0)
-  const [colors, setColors] = useState<string []>([])
+  // const [textColor, setTextColor] = useState<string []>([])
   const [detail, setDetail] = useState<any>(null)
   const { params } = useRouter()
   const { id, autoShare, from } = params
@@ -113,10 +113,10 @@ function Index() {
   //   calcBgMainColors()
   // }, [])
 
-  useDidShow(() => {
-    fetchDetail()
-    calcBgMainColors()
-    updateLocation()
+  useDidShow(async () => {
+    await updateLocation()
+    await fetchDetail()
+    // calcBgMainColors()
   })
 
   const updateLocation = async () => {
@@ -137,14 +137,18 @@ function Index() {
     }
   }
 
-  const calcBgMainColors = async () => {
-    const textcolors: string[] = []
-    for (const index in images) {
-      const { textColor } = await getTextColorOnImage(images[index])
-      textcolors[index] = textColor
-    }
-    setColors(textcolors)
-  }
+  // const calcBgMainColors = async () => {
+  //   const textcolors: string[] = []
+  //   // for (const index in images) {
+  //   //   const { textColor } = await getTextColorOnImage(images[index])
+  //   //   textcolors[index] = textColor
+  //   // }
+  //   if (detail?.image_list?.length > 0) {
+  //     const { textColor } = await getTextColorOnImage(detail.image_list[0])
+  //     textcolors[0] = textColor
+  //   }
+  //   setColors(textcolors)
+  // }
 
   function handleShare() {
     sharePopupRef.current.show()
@@ -254,10 +258,27 @@ function Index() {
           </View>
         </View>
       </view>
-      <View className='detail-page-bg' style={{ backgroundImage: `url(${images[current]})` }} />
+      <View className='detail-page-bg' style={{ backgroundImage: `url(${images[0]})` }} />
       <View className='detail-page-bg-text' />
       {/* swiper */}
-      <Swiper
+      <View className="detail-swiper-container">
+        <View className="detail-swiper-scroll-container">
+          {
+            detail?.image_list?.length > 0 && detail?.image_list.map((item, index) => {
+              return (
+                <View className='detail-swiper-item' key={index}>
+                  <Image
+                    src={item}
+                    mode="aspectFill"
+                    className='detail-swiper-item-image'
+                  />
+                </View>
+              )
+            })
+          }
+        </View>
+      </View>
+      {/* <Swiper
         className='detail-swiper'
         indicatorDots={false}
         circular
@@ -279,7 +300,7 @@ function Index() {
             />
           </SwiperItem>
         ))}
-      </Swiper>
+      </Swiper> */}
       {/* content */}
       <View className='detail-page-content'>
         {/* avatar and tags */}