fix(user): 修复订单入口tab错位并统一购物车角标样式

- 将订单快捷入口和我的订单tab索引改为tabIndex,修正页面跳转参数使用`?tab=`传递
- 修复因状态值与tab索引不匹配导致的订单状态页错位问题
- 更新`user.tsx`和`index.tsx`中相关订单tab配置,确保键名和逻辑一致
- 购物车入口数量角标由手写样式改为Badge组件,去除白色边框样式
- 购物车角标与用户订单图标角标样式保持一致,使用绝对定位调整位置
- `navigateTo`跳转及未登录重定向均支持传递正确的tab索引参数
This commit is contained in:
2026-07-15 23:51:37 +08:00
parent fbaa5c32bc
commit 549e8258b6
4 changed files with 35 additions and 38 deletions

View File

@@ -345,3 +345,19 @@
- passport/register.tsx:88、passport/sms-login.tsx:36
- D. pages/order/list.tsx:127 注释更新(去掉"tabBar 页"描述)
- 遗留未改预先存在pages/user/index.tsx:140 `switchTab(points/index)` 积分页非 tabBar会失败
## product-detail 购物车角标改用 Badge 组件2026-07-15 23:42
- `src/pages/shop/product-detail.tsx` 底部购物车入口的数量角标,原为手写内联 View+Text带白边框、top:-6px/right:-10px 定位),改为 `<Badge count={totalCount} className='absolute -top-1 -right-1' />`
- 用法与 user.tsx "我的订单"图标角标(:284完全一致外层已有 `relative inline-flex` 容器Badge 的 absolute 定位正常
- 新增 import `Badge from '@/components/common/Badge'`
- 去掉了原来的白色边框,与"我的订单"角标样式统一
## 修复订单快捷入口 tab 错位 bug2026-07-15 23:48
- Bug`pages/user/user.tsx` "我的订单"快捷入口(待付款/待发货/待收货/已完成)把"订单状态值"0/1/3/5写入 `order_tab` storagenavigateTo 到 order/list 后,`order/list.tsx:42` 用 `useState(Number(initTab) || 0)` 把传入值直接当 **tabIndex** 用 → 全部错位一个 tab待付款 0→全部, 待发货 1→待付款, 待收货 3 巧合对, 已完成 5 越界→0→全部
- `pages/user/index.tsx` 传 0/1/2/3 也全错位一个 tab
- order/list.tsx `tabList` 顺序index 0=全部 / 1=待付款 / 2=待发货 / 3=待收货 / 4=已完成
- 修复:调用方把字段从 `status`(订单状态)改为 `tabIndex`1/2/3/4navigateTo 加 `?tab=${tabIndex}`order/list 已支持 `router.params.tab` 优先于 storage未登录拦截的 redirect 也带 `?tab=`
- 改动:
- `src/pages/user/user.tsx``handleOrderTabClick` 参数 `status`→`tabIndex` + redirect/navigateTo 带 `?tab=`menuItems 字段 `status(0/1/3/5)`→`tabIndex(1/2/3/4)``key={item.tabIndex}`、`onClick` 传 `item.tabIndex`
- `src/pages/user/index.tsx`:硬编码数组 `status(0/1/2/3)`→`tabIndex(1/2/3/4)``key={item.tabIndex}`、onClick + `?tab=${item.tabIndex}`
- 其他"全部订单"类入口user.tsx:149 handleViewAllOrders、user/index.tsx:22/158/175不传 `?tab=`,进默认"全部" tab合理

View File

@@ -11,6 +11,7 @@ import {
} from '@/api/shop/shopGoodsFavorite'
import type { ShopGoods, ShopGoodsSku } from '@/api/shop/shopGoods/model'
import Price from '@/components/common/Price'
import Badge from '@/components/common/Badge'
import SkuSelector from '@/components/business/SkuSelector'
import { useCartContext } from '@/contexts/CartContext'
import { useUserContext } from '@/contexts/UserContext'
@@ -433,28 +434,8 @@ const ProductDetailPage: React.FC = () => {
<View className='flex-1 flex flex-col items-center' onClick={handleGoCart}>
<View className='relative inline-flex items-center justify-center'>
<Text className='text-lg'>🛒</Text>
{totalCount > 0 && (
<View
className='flex items-center justify-center'
style={{
position: 'absolute',
top: '-6px',
right: '-10px',
minWidth: '16px',
height: '16px',
borderRadius: '8px',
backgroundColor: '#ef4444',
borderWidth: '1.5px',
borderStyle: 'solid',
borderColor: '#ffffff',
paddingHorizontal: '3px',
}}
>
<Text className='text-white text-[10px] font-bold leading-none'>
{totalCount > 99 ? '99+' : totalCount}
</Text>
</View>
)}
{/* 购物车数量角标count 为 0 时组件内部不渲染 */}
<Badge count={totalCount} className='absolute -top-1 -right-1' />
</View>
<Text className='text-xs text-gray-500 mt-1 whitespace-nowrap'></Text>
</View>

View File

@@ -178,16 +178,16 @@ const UserPage: React.FC = () => {
</View>
<View className='grid grid-cols-4 gap-2'>
{[
{ icon: '💳', label: '待付款', status: 0, color: '#f093fb' },
{ icon: '📦', label: '待发货', status: 1, color: '#667eea' },
{ icon: '🚚', label: '待收货', status: 2, color: '#4facfe' },
{ icon: '✅', label: '已完成', status: 3, color: '#52c41a' },
{ icon: '💳', label: '待付款', tabIndex: 1, color: '#f093fb' },
{ icon: '📦', label: '待发货', tabIndex: 2, color: '#667eea' },
{ icon: '🚚', label: '待收货', tabIndex: 3, color: '#4facfe' },
{ icon: '✅', label: '已完成', tabIndex: 4, color: '#52c41a' },
].map(item => (
<View
key={item.status}
key={item.tabIndex}
className='flex flex-col items-center py-2 rounded-lg'
style={{ background: `${item.color}10` }}
onClick={() => { Taro.setStorageSync('order_tab', item.status); Taro.navigateTo({ url: '/pages/order/list' }) }}
onClick={() => { Taro.setStorageSync('order_tab', item.tabIndex); Taro.navigateTo({ url: `/pages/order/list?tab=${item.tabIndex}` }) }}
>
<Text className='text-xl mb-1'>{item.icon}</Text>
<Text className='text-xs text-gray-600'>{item.label}</Text>

View File

@@ -138,10 +138,10 @@ const UserPage: React.FC = () => {
}
// 订单快捷入口点击:需要登录
const handleOrderTabClick = (status: number) => {
if (!requireLogin({ action: 'viewOrder', redirect: '/pages/order/list', content: '登录后才能查看订单,是否前往登录?' })) return
Taro.setStorageSync('order_tab', status)
Taro.navigateTo({ url: '/pages/order/list' })
const handleOrderTabClick = (tabIndex: number) => {
if (!requireLogin({ action: 'viewOrder', redirect: `/pages/order/list?tab=${tabIndex}`, content: '登录后才能查看订单,是否前往登录?' })) return
Taro.setStorageSync('order_tab', tabIndex)
Taro.navigateTo({ url: `/pages/order/list?tab=${tabIndex}` })
}
const handleViewAllOrders = () => {
@@ -268,15 +268,15 @@ const UserPage: React.FC = () => {
<View className='grid grid-cols-4 gap-2'>
{[
// status 与 OrderListStatus 对齐0待付款 1待发货 3待收货 5已完成
{ icon: '💳', label: '待付款', status: 0, count: orderStats?.waitPay },
{ icon: '📦', label: '待发货', status: 1, count: orderStats?.waitDeliver },
{ icon: '🚚', label: '待收货', status: 3, count: orderStats?.waitReceive },
{ icon: '✅', label: '已完成', status: 5, count: orderStats?.completed },
{ icon: '💳', label: '待付款', tabIndex: 1, count: orderStats?.waitPay },
{ icon: '📦', label: '待发货', tabIndex: 2, count: orderStats?.waitDeliver },
{ icon: '🚚', label: '待收货', tabIndex: 3, count: orderStats?.waitReceive },
{ icon: '✅', label: '已完成', tabIndex: 4, count: orderStats?.completed },
].map(item => (
<View
key={item.status}
key={item.tabIndex}
className={`flex flex-col items-center py-2 relative ${!isLoggedIn ? 'opacity-50' : ''}`}
onClick={() => handleOrderTabClick(item.status)}
onClick={() => handleOrderTabClick(item.tabIndex)}
>
<Text className='text-xl mb-1'>{item.icon}</Text>
<Text className='text-xs text-gray-600'>{item.label}</Text>