fix(user): 修复订单入口tab错位并统一购物车角标样式
- 将订单快捷入口和我的订单tab索引改为tabIndex,修正页面跳转参数使用`?tab=`传递 - 修复因状态值与tab索引不匹配导致的订单状态页错位问题 - 更新`user.tsx`和`index.tsx`中相关订单tab配置,确保键名和逻辑一致 - 购物车入口数量角标由手写样式改为Badge组件,去除白色边框样式 - 购物车角标与用户订单图标角标样式保持一致,使用绝对定位调整位置 - `navigateTo`跳转及未登录重定向均支持传递正确的tab索引参数
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user