fix(shop): 修复商品详情页轮播图显示不完整问题

- 将图片裁剪模式从 aspectFill 改为 widthFix，确保图片宽度撑满屏幕
- 新增 swiperHeight 状态，根据首张图片实际宽高比动态计算轮播图高度
- 通过图片 onLoad 事件设置动态高度，避免图片被裁剪不完整
- 优化图片组件布局，移除高度限制，防止图片变形

.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 高度

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>