From dc0909d37da0de01b0a8cbd6d8756de390795cad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Sat, 27 Jun 2026 10:02:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(shop):=20=E4=BF=AE=E5=A4=8D=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E8=AF=A6=E6=83=85=E9=A1=B5=E8=BD=AE=E6=92=AD=E5=9B=BE?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=8D=E5=AE=8C=E6=95=B4=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将图片裁剪模式从 aspectFill 改为 widthFix，确保图片宽度撑满屏幕
- 新增 swiperHeight 状态，根据首张图片实际宽高比动态计算轮播图高度
- 通过图片 onLoad 事件设置动态高度，避免图片被裁剪不完整
- 优化图片组件布局，移除高度限制，防止图片变形
---
 .workbuddy/memory/2026-06-27.md   |  5 +++++
 src/pages/shop/product-detail.tsx | 18 +++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/.workbuddy/memory/2026-06-27.md b/.workbuddy/memory/2026-06-27.md
index 6288326..93a149c 100644
--- a/.workbuddy/memory/2026-06-27.md
+++ b/.workbuddy/memory/2026-06-27.md
@@ -25,3 +25,8 @@
   1. `redirectTo` → `switchTab`
   2. 购物车数据清理移到 payType 分支前，确保货到付款也清理购物车
   3. 货到付款(payType=0)和微信支付(payType=1)统一走同一跳转逻辑，toast 文案区分"下单成功"/"支付成功"
+
+## 商品详情页轮播图显示完整
+- **文件**: `src/pages/shop/product-detail.tsx`
+- **问题**: `mode='aspectFill'` 裁剪图片，看不完整
+- **修复**: 改为 `mode='widthFix'`，图片宽度铺满屏幕、高度自适应；新增 `swiperHeight` 状态，通过第一张图片 `onLoad` 回调按实际宽高比动态计算 Swiper 高度
diff --git a/src/pages/shop/product-detail.tsx b/src/pages/shop/product-detail.tsx
index df9f7eb..a1ff8c4 100644
--- a/src/pages/shop/product-detail.tsx
+++ b/src/pages/shop/product-detail.tsx
@@ -25,6 +25,7 @@ const ProductDetailPage: React.FC = () => {
   const router = useRouter()
   const id = Number(router.params.id || router.params.goodsId)
   const [product, setProduct] = useState<ShopGoods | null>(null)
+  const [swiperHeight, setSwiperHeight] = useState(375)
   const [skuVisible, setSkuVisible] = useState(false)
   const [skuMode, setSkuMode] = useState<'cart' | 'buy'>('cart')
   const [isFavorite, setIsFavorite] = useState(false)
@@ -230,7 +231,7 @@ const ProductDetailPage: React.FC = () => {
         {/* 图片轮播 */}
         <Swiper
           className='w-full'
-          style={{ height: '375px' }}
+          style={{ height: `${swiperHeight}px` }}
           indicatorDots
           indicatorColor='#e5e7eb'
           indicatorActiveColor='#0e932e'
@@ -240,9 +241,20 @@ const ProductDetailPage: React.FC = () => {
           {images.map((img, idx) => (
             <SwiperItem key={idx}>
               <Image
-                className='w-full h-full'
+                className='w-full'
+                style={{ display: 'block' }}
                 src={img}
-                mode='aspectFill'
+                mode='widthFix'
+                onLoad={(e: any) => {
+                  // 根据第一张图片的实际宽高比动态设置 Swiper 高度
+                  if (idx === 0) {
+                    const { width, height } = e.detail
+                    if (width > 0) {
+                      const screenWidth = Taro.getSystemInfoSync().windowWidth
+                      setSwiperHeight(Math.round((height / width) * screenWidth))
+                    }
+                  }
+                }}
                 onClick={() => Taro.previewImage({ current: img, urls: images })}
               />
             </SwiperItem>