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

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