feat: 详情页轮播图

src/components/UploadCover/upload-source-popup.tsx

@@ -63,7 +63,6 @@ export default forwardRef(function UploadImage(props: UploadImageProps, ref) {
 
   function fetchImages(st: SourceType) {
     publishService.getPictures({ type: st }).then(res => {
-      console.log(res, 1122)
       if (res.code === 0) {
         let start = 0
         setImages(res.data.rows.map(item => ({

src/pages/detail/index.scss

@@ -81,6 +81,38 @@
     background-color: rgba(0, 0, 0, 0.3);
   }
 
+  .detail-swiper-container {
+    height: 240px;
+    margin-top: 15px;
+    margin-left: 15px;
+    margin-right: 15px;
+    overflow-x: scroll;
+
+    .detail-swiper-scroll-container {
+      display: flex;
+      height: 240px;
+      width: auto;
+      align-items: center;
+      justify-content: flex-start;
+      flex-wrap: nowrap;
+      gap: 12px;
+
+      .detail-swiper-item {
+        flex: 0 0 auto;
+        max-width: calc(100vw - 30px);
+        max-height: 240px;
+        &-image {
+          max-width: 100%;
+          max-height: 100%;
+          width: 300px;
+          height: 300px;
+          border-radius: 12px;
+          transition: transform 0.5s;
+        }
+      }
+    }
+  }
+
   .detail-swiper {
     height: 240px;
     margin-top: 15px;

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(() => {
+  useDidShow(async () => {
-    fetchDetail()
+    await updateLocation()
-    calcBgMainColors()
+    await fetchDetail()
-    updateLocation()
+    // calcBgMainColors()
   })
 
   const updateLocation = async () => {
@@ -137,14 +137,18 @@ function Index() {
     }
   }
 
-  const calcBgMainColors = async () => {
+  // const calcBgMainColors = async () => {
-    const textcolors: string[] = []
+  //   const textcolors: string[] = []
-    for (const index in images) {
+  //   // for (const index in images) {
-      const { textColor } = await getTextColorOnImage(images[index])
+  //   //   const { textColor } = await getTextColorOnImage(images[index])
-      textcolors[index] = textColor
+  //   //   textcolors[index] = textColor
-    }
+  //   // }
-    setColors(textcolors)
+  //   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 */}