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

View File

@@ -23,7 +23,7 @@ const UserPage: React.FC = () => {
{ icon: '📅', label: '预约订单', url: '/pages/booking/list' },
{ icon: '🏆', label: '赛事活动', url: '/pages/event/my/index' },
{ icon: '🎫', label: '优惠券', url: '/pages/user/coupon-list' },
{ icon: '💰', label: '我的钱包', url: '/pages/user/wallet' },
// { icon: '💰', label: '我的钱包', url: '/pages/user/wallet' },
{ icon: '📍', label: '收货地址', url: '/pages/user/address-list' },
{ icon: '⭐', label: '积分明细', url: '/pages/user/points-record' },
{ icon: '🔔', label: '消息通知', url: '/pages/index/notification' },