修改画册调用goods接口

src/pages/brochure/pdf.ts

@@ -0,0 +1,30 @@
+export const DEFAULT_CATALOG_URL = 'https://file.websoft.top/nnlc.pdf'
+
+const safeDecodeUrl = (value: string) => {
+  let nextValue = value
+
+  for (let index = 0; index < 2; index += 1) {
+    try {
+      const decodedValue = decodeURIComponent(nextValue)
+      if (decodedValue === nextValue) {
+        break
+      }
+      nextValue = decodedValue
+    } catch {
+      break
+    }
+  }
+
+  return nextValue
+}
+
+export const normalizePdfUrl = (value?: string) => {
+  const trimmedValue = (value || '').trim()
+  if (!trimmedValue) {
+    return DEFAULT_CATALOG_URL
+  }
+
+  return safeDecodeUrl(trimmedValue)
+}
+
+export const isPdfUrl = (value?: string) => /\.pdf(\?|#|$)/i.test((value || '').trim())

src/pages/brochure/viewer.config.ts

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '品牌画册',
+  navigationBarBackgroundColor: '#ffffff',
+  navigationBarTextStyle: 'black'
+})

src/pages/brochure/viewer.scss

@@ -0,0 +1,19 @@
+.brochure-viewer {
+  min-height: 100vh;
+  padding: 0;
+  box-sizing: border-box;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+
+  &--loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__image {
+    width: 100%;
+    display: block;
+  }
+}

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

src/pages/index/CatalogShowcase.tsx

@@ -2,31 +2,12 @@ import { View, Text } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { ArrowRight } from '@nutui/icons-react-taro'
 import './CatalogShowcase.scss'
-
-const CATALOG_URL = 'https://book.yunzhan365.com/mdfy/tjcs/mobile/index.html'
+const BROCHURE_GOODS_ID = 333
 
 function CatalogShowcase() {
   const handleViewCatalog = () => {
-    Taro.setClipboardData({
-      data: CATALOG_URL,
-      success: () => {
-        Taro.showToast({
-          title: '链接已复制',
-          icon: 'success',
-          duration: 2000
-        })
-        setTimeout(() => {
-          Taro.showModal({
-            title: '提示',
-            content: '链接已复制到剪贴板，请前往浏览器打开查看品牌画册',
-            showCancel: false,
-            confirmText: '知道了'
-          })
-        }, 2100)
-      },
-      fail: () => {
-        Taro.showToast({ title: '复制失败，请重试', icon: 'none' })
-      }
+    Taro.navigateTo({
+      url: `/pages/brochure/viewer?id=${BROCHURE_GOODS_ID}`
     })
   }