赵忠林
fd6ba02d37
- 将图片裁剪模式从 aspectFill 改为 widthFix，确保图片宽度撑满屏幕 - 新增 swiperHeight 状态，根据首张图片实际宽高比动态计算轮播图高度 - 通过图片 onLoad 事件设置动态高度，避免图片被裁剪不完整 - 优化图片组件布局，移除高度限制，防止图片变形
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import { View, Text, Image } from '@tarojs/components'
|
|
import Taro from '@tarojs/taro'
|
|
import Price from '../Price'
|
|
import { isGuest } from '@/utils/auth'
|
|
import type { ShopGoods } from '@/api/shop/shopGoods/model'
|
|
|
|
interface ProductCardProps {
|
|
product: ShopGoods
|
|
onClick?: () => void
|
|
}
|
|
|
|
const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
|
|
const handleClick = () => {
|
|
if (onClick) {
|
|
onClick()
|
|
return
|
|
}
|
|
Taro.navigateTo({ url: `/pages/shop/product-detail?id=${product.goodsId}` })
|
|
}
|
|
|
|
return (
|
|
<View className='bg-white rounded-lg overflow-hidden shadow-sm' onClick={handleClick}>
|
|
<View className='w-full' style={{ paddingTop: '100%', position: 'relative' }}>
|
|
<Image
|
|
className='absolute top-0 left-0 w-full h-full'
|
|
src={product.image || product.files || ''}
|
|
mode='aspectFit'
|
|
lazyLoad
|
|
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
|
|
/>
|
|
</View>
|
|
<View className='p-2'>
|
|
<Text className='text-sm text-gray-800 line-clamp-2 leading-5'>
|
|
{product.name || product.goodsName}
|
|
</Text>
|
|
<View className='flex items-end justify-between mt-2'>
|
|
<View className='flex-1'>
|
|
<Price price={product.price || '0'} size='small' loginMask />
|
|
{product.salePrice && product.salePrice !== product.price && (
|
|
isGuest() ? null : (
|
|
<Text className='text-xs text-gray-400 line-through ml-1'>
|
|
¥{product.salePrice}
|
|
</Text>
|
|
)
|
|
)}
|
|
</View>
|
|
{product.sales !== undefined && product.sales > 0 && (
|
|
<Text className='text-xs text-gray-400'>
|
|
已售{product.sales}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default ProductCard
|