feat(shop): 添加商城列表页浮动购物车按钮
- 在 shop 页面右下角添加固定定位的绿色圆形购物车按钮 - 按钮右上角显示购物车商品数量角标,超过 99 显示为 99+ - 点击按钮跳转到购物车页面,非 tabBar 页面 - 使用 useCartContext 的 totalCount 实时更新商品数量显示 - 注释掉用户页面 “我的钱包” 入口,暂时隐藏该功能
This commit is contained in:
@@ -147,6 +147,19 @@ adapter `/list` 接口忽略分页,一次返回全部收藏;前端 `listShop
|
|||||||
3. `useEffect` 中增加 `if (!user?.userId) return` 判断,已登录但 userId 还没拿到时等待下次渲染
|
3. `useEffect` 中增加 `if (!user?.userId) return` 判断,已登录但 userId 还没拿到时等待下次渲染
|
||||||
4. `useEffect` 依赖数组加 `user?.userId`,userId 变化时重新触发加载
|
4. `useEffect` 依赖数组加 `user?.userId`,userId 变化时重新触发加载
|
||||||
|
|
||||||
|
## 商城列表页浮动购物车按钮(2026-07-14)
|
||||||
|
|
||||||
|
### 需求
|
||||||
|
`pages/shop/index` 页面右下角添加浮动购物车按钮,显示购物车商品数量角标。
|
||||||
|
|
||||||
|
### 实现
|
||||||
|
- **`src/pages/shop/index.tsx`**:
|
||||||
|
1. 从 `useCartContext()` 额外解构 `totalCount`
|
||||||
|
2. 页面末尾添加 fixed 定位浮动按钮:绿色圆形(48px),`bottom:80px right:16px`(避开 tabBar)
|
||||||
|
3. `totalCount > 0` 时右上角显示红色角标,超过 99 显示 `99+`
|
||||||
|
4. 点击 `Taro.navigateTo` 跳转购物车页(cart 非 tabBar 页)
|
||||||
|
5. 数量实时更新:`addItem` 内部调 `refresh()` → `totalCount` 派生值自动重渲染
|
||||||
|
|
||||||
## 购物车页面进入不刷新 Bug 修复(2026-07-14)
|
## 购物车页面进入不刷新 Bug 修复(2026-07-14)
|
||||||
|
|
||||||
### 问题
|
### 问题
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ const SORT_TABS: { key: SortKey; label: string }[] = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
const ShopPage: React.FC = () => {
|
const ShopPage: React.FC = () => {
|
||||||
const { addItem } = useCartContext()
|
const { addItem, totalCount } = useCartContext()
|
||||||
const [categoryList, setCategoryList] = useState<any[]>(PRESET_CATEGORIES)
|
const [categoryList, setCategoryList] = useState<any[]>(PRESET_CATEGORIES)
|
||||||
const [activeCategory, setActiveCategory] = useState(0)
|
const [activeCategory, setActiveCategory] = useState(0)
|
||||||
|
|
||||||
@@ -343,6 +343,47 @@ const ShopPage: React.FC = () => {
|
|||||||
</ScrollView>
|
</ScrollView>
|
||||||
</View>
|
</View>
|
||||||
</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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const UserPage: React.FC = () => {
|
|||||||
{ icon: '📅', label: '预约订单', url: '/pages/booking/list' },
|
{ icon: '📅', label: '预约订单', url: '/pages/booking/list' },
|
||||||
{ icon: '🏆', label: '赛事活动', url: '/pages/event/my/index' },
|
{ icon: '🏆', label: '赛事活动', url: '/pages/event/my/index' },
|
||||||
{ icon: '🎫', label: '优惠券', url: '/pages/user/coupon-list' },
|
{ 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/address-list' },
|
||||||
{ icon: '⭐', label: '积分明细', url: '/pages/user/points-record' },
|
{ icon: '⭐', label: '积分明细', url: '/pages/user/points-record' },
|
||||||
{ icon: '🔔', label: '消息通知', url: '/pages/index/notification' },
|
{ icon: '🔔', label: '消息通知', url: '/pages/index/notification' },
|
||||||
|
|||||||
Reference in New Issue
Block a user