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(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 = () => { {/* 图片轮播 */} { {images.map((img, idx) => ( { + // 根据第一张图片的实际宽高比动态设置 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 })} />