修改首页的画册为swiper

2026-05-14 18:18:11 +08:00
parent c76797b681
commit 20f77ff886
4 changed files with 294 additions and 119 deletions
--- a/src/pages/brochure/shared.ts
+++ b/src/pages/brochure/shared.ts
@@ -0,0 +1,97 @@
+import Taro from '@tarojs/taro'
+
+const PREVIEW_TITLE = '品牌画册'
+const BROCHURE_API_BASE = 'https://cms-api.websoft.top/api'
+
+interface BrochureGoods {
+  goodsId?: number
+  name?: string
+  goodsName?: string
+  files?: string
+}
+
+export interface BrochurePayload {
+  title: string
+  images: 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 []
+}
+
+export const getBrochurePayload = async (): Promise<BrochurePayload> => {
+  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 title = goodsList[0]?.goodsName || goodsList[0]?.name || PREVIEW_TITLE
+  const images: string[] = []
+
+  goodsList.forEach((item) => {
+    const parsedImages = parseFiles(item.files)
+    if (parsedImages.length) {
+      images.push(...parsedImages)
+    }
+  })
+
+  if (!images.length) {
+    throw new Error('当前商品未配置画册图片')
+  }
+
+  return {
+    title,
+    images
+  }
+}
--- a/src/pages/brochure/viewer.tsx
+++ b/src/pages/brochure/viewer.tsx
@@ -1,60 +1,10 @@
-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
 import Taro from '@tarojs/taro'
-import {View, Image} from '@tarojs/components'
-import {Loading} from '@nutui/nutui-react-taro'
+import { View, Image } from '@tarojs/components'
+import { Loading } from '@nutui/nutui-react-taro'
+import { getBrochurePayload } from './shared'
 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[]>([])
@@ -63,40 +13,10 @@ function BrochureViewer() {
  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('当前商品未配置画册图片')
-        }
-
+        const { title, images: nextImages } = await getBrochurePayload()
        setImages(nextImages)
        Taro.setNavigationBarTitle({
-          title: nextTitle
+          title
        })
      } catch (error: any) {
        const nextMessage = error?.message || error?.errMsg || '画册加载失败，请稍后重试'
--- a/src/pages/index/CatalogShowcase.scss
+++ b/src/pages/index/CatalogShowcase.scss
@@ -108,3 +108,96 @@
    &:nth-child(3) { height: 32px; }
  }
 }
+
+.catalog-swiper {
+  margin: 24px 16px 8px;
+
+  &__header {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: 0 4px 12px;
+    gap: 12px;
+  }
+
+  &__title-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__eyebrow {
+    font-size: 20px;
+    line-height: 1;
+    letter-spacing: 3px;
+    color: #94a3b8;
+  }
+
+  &__title {
+    font-size: 36px;
+    line-height: 1.2;
+    font-weight: 700;
+    color: #0f172a;
+  }
+
+  &__cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 10px 14px;
+    border-radius: 999px;
+    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
+    flex-shrink: 0;
+  }
+
+  &__cta-text {
+    font-size: 24px;
+    line-height: 1;
+    color: #ffffff;
+    font-weight: 600;
+  }
+
+  &__body {
+    border-radius: 20px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #1e293b 0%, #2563eb 100%);
+    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.18);
+  }
+
+  &__slide {
+    width: 100%;
+    //height: 220px;
+    overflow: hidden;
+  }
+
+  &__image {
+    width: 100%;
+    //height: 220px;
+    display: block;
+  }
+
+  &__placeholder {
+    //height: 220px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+  }
+
+  &__placeholder-text {
+    font-size: 28px;
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .nut-swiper {
+    //height: 220px !important;
+  }
+
+  .nut-swiper-item {
+    //height: 220px !important;
+  }
+
+  .nut-swiper-item__inner {
+    height: 100%;
+  }
+}
--- a/src/pages/index/CatalogShowcase.tsx
+++ b/src/pages/index/CatalogShowcase.tsx
@@ -1,50 +1,115 @@
-import { View, Text } from '@tarojs/components'
+import { useEffect, useState } from 'react'
+import { View, Text, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
+import { Swiper } from '@nutui/nutui-react-taro'
 import { ArrowRight } from '@nutui/icons-react-taro'
+import { getBrochurePayload } from '@/pages/brochure/shared'
 import './CatalogShowcase.scss'
-const BROCHURE_GOODS_ID = 333

 function CatalogShowcase() {
-  const handleViewCatalog = () => {
-    Taro.navigateTo({
-      url: `/pages/brochure/viewer?id=${BROCHURE_GOODS_ID}`
+  const [images, setImages] = useState<string[]>([])
+  const [current, setCurrent] = useState(0)
+
+  useEffect(() => {
+    getBrochurePayload()
+      .then(({ images: nextImages }) => {
+        setImages(nextImages)
+      })
+      .catch(() => undefined)
+  }, [])
+
+  const handlePreviewCurrent = () => {
+    if (!images.length) {
+      Taro.showToast({
+        title: '画册加载中',
+        icon: 'none'
+      })
+      return
+    }
+
+    Taro.previewImage({
+      current: images[current] || images[0],
+      urls: images
    })
  }

  return (
-    <View className="catalog-card" onClick={handleViewCatalog}>
-      {/* 装饰性背景元素 */}
-      <View className="catalog-card__deco catalog-card__deco--1" />
-      <View className="catalog-card__deco catalog-card__deco--2" />
+    <>
+      {/* 旧版品牌画册卡片保留，按需求先注释，不直接删除
+      <View className="catalog-card" onClick={handleViewCatalog}>
+        <View className="catalog-card__deco catalog-card__deco--1" />
+        <View className="catalog-card__deco catalog-card__deco--2" />

-      <View className="catalog-card__content">
-        <View className="catalog-card__left">
-          <Text className="text-xs  text-gray-400 tracking-widest">BRAND CATALOG</Text>
-          <Text className="text-2xl font-bold text-white mb-1">品牌画册</Text>
-          <Text className="text-xs text-gray-300 leading-relaxed" style={{
-            width: '90%'
-          }}>
-            了解南南佐顿门窗的完整产品线与定制方案
-          </Text>
-          <View className="catalog-card__cta">
-            <Text className="text-base font-semibold text-white px-4">点击查看画册</Text>
-            <ArrowRight size={16} color="#ffffff" />
-          </View>
-        </View>
-
-        <View className="catalog-card__right">
-          <View className="catalog-card__book">
-            <View className="catalog-card__book-spine" />
-            <View className="catalog-card__book-pages">
-              <View className="catalog-card__book-page" />
-              <View className="catalog-card__book-page" />
-              <View className="catalog-card__book-page" />
+        <View className="catalog-card__content">
+          <View className="catalog-card__left">
+            <Text className="text-xs  text-gray-400 tracking-widest">BRAND CATALOG</Text>
+            <Text className="text-2xl font-bold text-white mb-1">品牌画册</Text>
+            <Text className="text-xs text-gray-300 leading-relaxed" style={{ width: '90%' }}>
+              了解南南佐顿门窗的完整产品线与定制方案
+            </Text>
+            <View className="catalog-card__cta">
+              <Text className="text-base font-semibold text-white px-4">点击查看画册</Text>
+              <ArrowRight size={16} color="#ffffff" />
+            </View>
+          </View>
+
+          <View className="catalog-card__right">
+            <View className="catalog-card__book">
+              <View className="catalog-card__book-spine" />
+              <View className="catalog-card__book-pages">
+                <View className="catalog-card__book-page" />
+                <View className="catalog-card__book-page" />
+                <View className="catalog-card__book-page" />
+              </View>
+              <Text className="text-lg font-bold text-gray-300 px-1">2026</Text>
            </View>
-            <Text className="text-lg font-bold text-gray-300 px-1">2026</Text>
          </View>
        </View>
      </View>
-    </View>
+      */}
+
+      <View className="catalog-swiper">
+        <View className="catalog-swiper__header">
+          <View className="catalog-swiper__title-wrap">
+            <Text className="catalog-swiper__eyebrow">BRAND CATALOG</Text>
+            <Text className="catalog-swiper__title">品牌画册</Text>
+          </View>
+          {/*<View className="catalog-swiper__cta">*/}
+          {/*  <Text className="catalog-swiper__cta-text">点击预览当前图片</Text>*/}
+          {/*  <ArrowRight size={14} color="#ffffff" />*/}
+          {/*</View>*/}
+        </View>
+
+        <View className="catalog-swiper__body" onClick={handlePreviewCurrent}>
+          {images.length ? (
+            <Swiper
+              defaultValue={0}
+              indicator
+              autoPlay={3000}
+              height="180px"
+              onChange={(event) => setCurrent(event.detail.current)}
+            >
+              {images.map((item, index) => (
+                <Swiper.Item key={`${item}-${index}`}>
+                  <View className="catalog-swiper__slide">
+                    <Image
+                      className="catalog-swiper__image"
+                      src={item}
+                      mode="aspectFill"
+                      lazyLoad
+                    />
+                  </View>
+                </Swiper.Item>
+              ))}
+            </Swiper>
+          ) : (
+            <View className="catalog-swiper__placeholder">
+              <Text className="catalog-swiper__placeholder-text">画册加载中...</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </>
  )
 }