feat: 上传图片组件场景添加、轮播图样式修复

src/pages/detail/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react'
+import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'
 import { View, Text, Image, Map, ScrollView } from '@tarojs/components'
 import {  Avatar, Popover, ImagePreview } from '@nutui/nutui-react-taro'
 import Taro, { useRouter, useShareAppMessage, useShareTimeline, useDidShow } from '@tarojs/taro'
@@ -23,6 +23,106 @@ function insertDotInTags(tags: string[]) {
   return tags.join('-·-').split('-')
 }
 
+function GameTags(props) {
+  const { detail } = props
+  const tags = [{
+    name: '🕙 急招',
+    icon: '',
+  }, {
+    name: '🔥 本周热门',
+    icon: '',
+  }, {
+    name: '🎉 新活动',
+    icon: '',
+  }, {
+    name: '官方组织',
+    icon: '',
+  }]
+  return (
+    <View className='detail-page-content-avatar-tags'>
+      <View className='detail-page-content-avatar-tags-avatar'>
+        {/* network image mock */}
+        <Image className='detail-page-content-avatar-tags-avatar-image' src="https://img.yzcdn.cn/vant/cat.jpeg" />
+      </View>
+      <View className='detail-page-content-avatar-tags-tags'>
+        {tags.map((tag, index) => (
+          <View key={index} className='detail-page-content-avatar-tags-tags-tag'>
+            {tag.icon && <Image src={tag.icon} />}
+            <Text>{tag.name}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+type CourselItemType = {
+  url: string
+  width: number
+  height: number
+}
+function Coursel(props) {
+  const { detail } = props
+  const [list, setList] = useState<CourselItemType[]>([])
+  const [listWidth, setListWidth] = useState(0)
+  const { image_list } = detail
+
+  async function getImagesMsg (imageList) {
+    const latest_list: CourselItemType[] = []
+    const sys_info = await Taro.getSystemInfo()
+    console.log(sys_info, 'info')
+    const max_width = sys_info.screenWidth - 30
+    const max_height = 240
+    const current_aspect_ratio = max_width / max_height
+    let container_width = 0
+    for (const imageUrl of imageList) {
+      const { width, height } = await Taro.getImageInfo({ src: imageUrl })
+      if (width && height) {
+        const aspect_ratio = width / height
+        const latest_w_h = { width, height }
+        if (aspect_ratio < current_aspect_ratio) {
+          latest_w_h.width = max_height * aspect_ratio
+          latest_w_h.height = max_height
+        } else {
+          latest_w_h.width = max_width
+          latest_w_h.height = max_width / aspect_ratio
+        }
+        container_width += latest_w_h.width + 12
+        latest_list.push({
+          url: imageUrl,
+          width: latest_w_h.width,
+          height: latest_w_h.height,
+        })
+      }
+    }
+    setList(latest_list)
+    setListWidth(container_width)
+  }
+
+  useEffect(() => { getImagesMsg(image_list || []) }, [image_list])
+
+  return (
+    <View className="detail-swiper-container">
+      <View className="detail-swiper-scroll-container" style={{ width: listWidth + 'px' }}>
+        {
+          list.map((item, index) => {
+            return (
+              <View className='detail-swiper-item' key={index}>
+                <Image
+                  src={item.url}
+                  mode="aspectFill"
+                  className='detail-swiper-item-image'
+                  style={{ width: item.width + 'px', height: item.height + 'px' }}
+                />
+              </View>
+            )
+          })
+        }
+      </View>
+    </View>
+  )
+}
+
 // 分享弹窗
 const SharePopup = forwardRef(({ id, from }: { id: string, from: string }, ref) => {
   const [visible, setVisible] = useState(false)
@@ -565,20 +665,6 @@ function Index() {
     })
   }
 
-  const tags = [{
-    name: '🕙 急招',
-    icon: '',
-  }, {
-    name: '🔥 本周热门',
-    icon: '',
-  }, {
-    name: '🎉 新活动',
-    icon: '',
-  }, {
-    name: '官方组织',
-    icon: '',
-  }]
-
   function handleBack() {
     const pages = Taro.getCurrentPages()
     if (pages.length <= 1) {
@@ -609,40 +695,11 @@ function Index() {
       </view>
       <View className='detail-page-bg' style={backgroundImage} />
       {/* 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>
+      <Coursel detail={detail} />
       {/* content */}
       <View className='detail-page-content'>
         {/* avatar and tags */}
-        <View className='detail-page-content-avatar-tags'>
-          <View className='detail-page-content-avatar-tags-avatar'>
-            {/* network image mock */}
-            <Image className='detail-page-content-avatar-tags-avatar-image' src="https://img.yzcdn.cn/vant/cat.jpeg" />
-          </View>
-          <View className='detail-page-content-avatar-tags-tags'>
-            {tags.map((tag, index) => (
-              <View key={index} className='detail-page-content-avatar-tags-tags-tag'>
-                {tag.icon && <Image src={tag.icon} />}
-                <Text>{tag.name}</Text>
-              </View>
-            ))}
-          </View>
-        </View>
+        <GameTags detail={detail} />
         {/* title */}
         <View className='detail-page-content-title'>
           <Text className='detail-page-content-title-text'>{detail.title}</Text>