feat(shop): 添加商城列表页浮动购物车按钮
- 在 shop 页面右下角添加固定定位的绿色圆形购物车按钮 - 按钮右上角显示购物车商品数量角标,超过 99 显示为 99+ - 点击按钮跳转到购物车页面,非 tabBar 页面 - 使用 useCartContext 的 totalCount 实时更新商品数量显示 - 注释掉用户页面 “我的钱包” 入口,暂时隐藏该功能
This commit is contained in:
@@ -36,7 +36,7 @@ const SORT_TABS: { key: SortKey; label: string }[] = [
|
||||
]
|
||||
|
||||
const ShopPage: React.FC = () => {
|
||||
const { addItem } = useCartContext()
|
||||
const { addItem, totalCount } = useCartContext()
|
||||
const [categoryList, setCategoryList] = useState<any[]>(PRESET_CATEGORIES)
|
||||
const [activeCategory, setActiveCategory] = useState(0)
|
||||
|
||||
@@ -343,6 +343,47 @@ const ShopPage: React.FC = () => {
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 浮动购物车按钮 */}
|
||||
<View
|
||||
className='flex items-center justify-center'
|
||||
style={{
|
||||
position: 'fixed',
|
||||
right: '16px',
|
||||
bottom: '80px',
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#0e932e',
|
||||
zIndex: 999,
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
onClick={() => Taro.navigateTo({ url: '/pages/shop/cart' })}
|
||||
>
|
||||
<Text className='text-white text-xl'>🛒</Text>
|
||||
{totalCount > 0 && (
|
||||
<View
|
||||
className='flex items-center justify-center'
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '-4px',
|
||||
right: '-4px',
|
||||
minWidth: '18px',
|
||||
height: '18px',
|
||||
borderRadius: '9px',
|
||||
backgroundColor: '#ef4444',
|
||||
borderWidth: '1.5px',
|
||||
borderStyle: 'solid',
|
||||
borderColor: '#ffffff',
|
||||
paddingHorizontal: '4px',
|
||||
}}
|
||||
>
|
||||
<Text className='text-white text-xs font-bold leading-none'>
|
||||
{totalCount > 99 ? '99+' : totalCount}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user