修改画册调用goods接口

src/pages/brochure/viewer.tsx

@@ -0,0 +1,140 @@
+import {useEffect, useState} from 'react'
+import Taro from '@tarojs/taro'
+import {View, Image} from '@tarojs/components'
+import {Loading} from '@nutui/nutui-react-taro'
+import './viewer.scss'
+
+const PREVIEW_TITLE = '品牌画册'
+const BROCHURE_API_BASE = 'https://cms-api.websoft.top/api'
+
+interface BrochureGoods {
+  goodsId?: number;
+  name?: string;
+  goodsName?: string;
+  files?: string;
+}
+
+const parseFiles = (files?: string): string[] => {
+  if (!files) {
+    return []
+  }
+
+  try {
+    const parsed = JSON.parse(files)
+    if (Array.isArray(parsed)) {
+      return parsed.reduce<string[]>((result, item: any) => {
+        if (typeof item === 'string') {
+          result.push(item)
+          return result
+        }
+
+        if (item && typeof item.url === 'string') {
+          result.push(item.url)
+        }
+
+        return result
+      }, [])
+    }
+
+    if (typeof parsed === 'string') {
+      return [parsed]
+    }
+
+    if (parsed && typeof parsed.url === 'string') {
+      return [parsed.url]
+    }
+  } catch (error) {
+    if (/^https?:\/\//.test(files) || files.startsWith('/')) {
+      return [files]
+    }
+
+    console.error('解析画册图片失败:', error)
+    return []
+  }
+
+  return []
+}
+
+function BrochureViewer() {
+  const [loading, setLoading] = useState(true)
+  const [images, setImages] = useState<string[]>([])
+  const [errorMessage, setErrorMessage] = useState('')
+
+  useEffect(() => {
+    const loadBrochure = async () => {
+      try {
+        const response = await Taro.request<BrochureGoods[]>({
+          url: `${BROCHURE_API_BASE}/shop/shop-goods`,
+          method: 'GET',
+          header: {
+            'Content-Type': 'application/json',
+            'Tenantid': '10582'
+          }
+        })
+
+        const responseData: any = response.data
+        const goodsList: BrochureGoods[] = Array.isArray(responseData)
+          ? responseData
+          : (Array.isArray(responseData?.data) ? responseData.data : [])
+
+        if (!goodsList.length) {
+          throw new Error('画册加载失败，请稍后重试')
+        }
+        const nextTitle = goodsList[0]?.goodsName || goodsList[0]?.name || PREVIEW_TITLE
+        const nextImages: string[] = []
+
+        goodsList.forEach((item) => {
+          const parsedImages = parseFiles(item.files)
+          if (parsedImages.length) {
+            nextImages.push(...parsedImages)
+          }
+        })
+
+        if (!nextImages.length) {
+          throw new Error('当前商品未配置画册图片')
+        }
+
+        setImages(nextImages)
+        Taro.setNavigationBarTitle({
+          title: nextTitle
+        })
+      } catch (error: any) {
+        const nextMessage = error?.message || error?.errMsg || '画册加载失败，请稍后重试'
+        setErrorMessage(nextMessage)
+        Taro.showToast({
+          title: nextMessage,
+          icon: 'none'
+        })
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadBrochure()
+  }, [])
+
+  if (loading) {
+    return (
+      <View className="brochure-viewer brochure-viewer--loading">
+        <Loading>加载中</Loading>
+      </View>
+    )
+  }
+
+  return (
+    <View className="brochure-viewer">
+      {errorMessage ? null : images.map((item, index) => (
+        <Image
+          key={`${item}-${index}`}
+          className="brochure-viewer__image"
+          src={item}
+          mode="widthFix"
+          lazyLoad
+          showMenuByLongpress
+        />
+      ))}
+    </View>
+  )
+}
+
+export default BrochureViewer