fix(user): 优化我的订单角标样式和0值显示
- 角标位置从 top-0 right-2 调整为 -top-1 -right-1,使小红点更贴近右上角边缘 - 角标尺寸改为 min-w-[16px] h-4 并固定字体大小,保证单数字圆形,多数字椭圆形 - 0 的判断改用 Number(item.count) > 0,防止后端字符串形式的 "0" 被误判显示 - 0 数量时角标不再渲染,避免显示多余的“0”数字
This commit is contained in:
@@ -278,3 +278,11 @@
|
||||
3. user.tsx 订单快捷入口 count 改用 `waitPay/waitDeliver/waitReceive/completed`,status 改为 `0/1/3/5` 与 `OrderListStatus` 对齐
|
||||
4. localStorage 缓存 key 从 `user_order_stats_v2` 升级到 `v3`,让旧格式缓存自动失效,避免冷启动先渲染旧格式导致仍是 0
|
||||
- 关键约定:`OrderListStatus` 是前端订单 Tab 筛选状态的唯一真相源(-1全部/0待付款/1待发货/2待核销/3待收货/4待评价/5已完成/6退款/7已删除),所有跳订单列表的入口传 status 都要对齐它
|
||||
|
||||
## 优化「我的订单」角标样式(2026-07-15 22:55)
|
||||
- 文件:`src/pages/user/user.tsx`
|
||||
- 用户反馈:截图中「已完成」下方出现了一个"0"字(hot reload 之前旧版代码里 `<View>{item.count}</View>` 直接渲染了 count,0 也会显示)。同时希望统计数字更"右上角"
|
||||
- 修改:
|
||||
1. 角标位置 `top-0 right-2` → `-top-1 -right-1`:让小红点紧贴 cell 右上角外缘,更像标准徽标
|
||||
2. 角标尺寸 `text-xs` + 自由拉伸 → `min-w-[16px] h-4` + 10px/12px 字体:单数字也保持圆形,多位数字自动变椭圆
|
||||
3. 0 判断 `item.count && item.count > 0` → `item.count && Number(item.count) > 0`:用 `Number()` 包一层,防止后端返回字符串 "0" 时 `> 0` 误判
|
||||
|
||||
@@ -277,10 +277,10 @@ const UserPage: React.FC = () => {
|
||||
>
|
||||
<Text className='text-xl mb-1'>{item.icon}</Text>
|
||||
<Text className='text-xs text-gray-600'>{item.label}</Text>
|
||||
{/* 数量角标 */}
|
||||
{item.count && item.count > 0 && (
|
||||
<View className='absolute top-0 right-2 bg-red-500 text-white text-xs rounded-full min-w-4 h-4 flex items-center justify-center px-1'>
|
||||
{item.count > 99 ? '99+' : item.count}
|
||||
{/* 数量角标:紧贴图标右上角;为 0 时不渲染 */}
|
||||
{item.count && Number(item.count) > 0 && (
|
||||
<View className='absolute -top-1 -right-1 bg-red-500 text-white rounded-full min-w-[16px] h-4 px-1 flex items-center justify-center' style={{ fontSize: '10px', lineHeight: '12px' }}>
|
||||
{Number(item.count) > 99 ? '99+' : item.count}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user