feat(shop): 添加商城列表页浮动购物车按钮

- 在 shop 页面右下角添加固定定位的绿色圆形购物车按钮
- 按钮右上角显示购物车商品数量角标,超过 99 显示为 99+
- 点击按钮跳转到购物车页面,非 tabBar 页面
- 使用 useCartContext 的 totalCount 实时更新商品数量显示
- 注释掉用户页面 “我的钱包” 入口,暂时隐藏该功能
This commit is contained in:
2026-07-14 02:31:49 +08:00
parent b8d2325ff9
commit 70af5426e8
3 changed files with 56 additions and 2 deletions

View File

@@ -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>
)
}