59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { View } from '@tarojs/components'
|
|
import { Image } from '@nutui/nutui-react-taro'
|
|
import { Share } from '@nutui/icons-react-taro'
|
|
import Taro from '@tarojs/taro'
|
|
import { ShopGoods } from '@/api/shop/shopGoods/model'
|
|
import './GoodsItem.scss'
|
|
|
|
interface GoodsItemProps {
|
|
goods: ShopGoods
|
|
}
|
|
|
|
const GoodsItem = ({ goods }: GoodsItemProps) => {
|
|
// 跳转到商品详情
|
|
const goToDetail = () => {
|
|
Taro.navigateTo({
|
|
url: `/shop/goodsDetail/index?id=${goods.goodsId}`
|
|
})
|
|
}
|
|
|
|
return (
|
|
<View className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
|
|
<Image
|
|
src={goods.image || ''}
|
|
mode={'aspectFit'}
|
|
lazyLoad={false}
|
|
radius="10px 10px 0 0"
|
|
height="180"
|
|
onClick={goToDetail}
|
|
/>
|
|
<View className={'flex flex-col p-2 rounded-lg'}>
|
|
<View>
|
|
<View className={'car-no text-sm'}>{goods.name || goods.goodsName}</View>
|
|
<View className={'flex justify-between text-xs py-1'}>
|
|
<span className={'text-orange-500'}>{goods.comments || ''}</span>
|
|
<span className={'text-gray-400'}>已售 {goods.sales || 0}</span>
|
|
</View>
|
|
<View className={'flex justify-between items-center py-2'}>
|
|
<View className={'flex text-red-500 text-xl items-baseline'}>
|
|
<span className={'text-xs'}>￥</span>
|
|
<span className={'font-bold text-2xl'}>{goods.price || '0.00'}</span>
|
|
</View>
|
|
<View className={'buy-btn'}>
|
|
<View className={'cart-icon'}>
|
|
<Share size={20} className={'mx-4 mt-2'}
|
|
onClick={goToDetail}/>
|
|
</View>
|
|
<View className={'text-white pl-4 pr-5'}
|
|
onClick={goToDetail}>购买
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default GoodsItem
|