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:
2026-07-15 23:02:15 +08:00
parent ad616943c8
commit 909e0fd43f
2 changed files with 12 additions and 4 deletions

View File

@@ -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>` 直接渲染了 count0 也会显示)。同时希望统计数字更"右上角"
- 修改:
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` 误判

View File

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