针对个人主页与照片显示做了修改
This commit is contained in:
+95
-92
@@ -5,6 +5,7 @@ import './index.scss'
|
||||
import { getOrderList, type OrderItem } from '../../utils/store'
|
||||
import ThemeToggle from '../../components/ThemeToggle'
|
||||
import { useThemeContext } from '../../context/ThemeContext'
|
||||
import LoginGuard from '../../components/LoginGuard'
|
||||
|
||||
const STATUS_TABS = [
|
||||
{ code: 'all', label: '全部' },
|
||||
@@ -70,110 +71,112 @@ export default function OrdersPage() {
|
||||
|
||||
return (
|
||||
<View className={`theme-${theme}`}>
|
||||
<View className='orders-page'>
|
||||
<ThemeToggle />
|
||||
<LoginGuard>
|
||||
<View className='orders-page'>
|
||||
<ThemeToggle />
|
||||
|
||||
<View className='page-header dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<Text className='page-title'>我的订单</Text>
|
||||
</View>
|
||||
<View className='page-header dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<Text className='page-title'>我的订单</Text>
|
||||
</View>
|
||||
|
||||
{/* 状态筛选Tab */}
|
||||
<View className='status-tabs'>
|
||||
<ScrollView className='tabs-scroll' scrollX>
|
||||
{STATUS_TABS.map((tab) => (
|
||||
<View
|
||||
key={tab.code}
|
||||
className={`tab-item ${activeTab === tab.code ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab(tab.code)}
|
||||
>
|
||||
<Text className='tab-label'>{tab.label}</Text>
|
||||
{activeTab === tab.code && <View className='tab-underline' />}
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* 订单列表 */}
|
||||
<ScrollView className='orders-list' scrollY>
|
||||
{filteredOrders.map((order) => {
|
||||
const status = STATUS_MAP[order.statusCode] || STATUS_MAP.pending
|
||||
return (
|
||||
<View key={order.id} className='order-card dashed-card' onClick={() => goDetail(order)}>
|
||||
<View className='star-badge' />
|
||||
<View className='order-header'>
|
||||
<Text className='order-date'>{order.date}</Text>
|
||||
<Text className={`badge ${status.badge}`}>{status.label}</Text>
|
||||
{/* 状态筛选Tab */}
|
||||
<View className='status-tabs'>
|
||||
<ScrollView className='tabs-scroll' scrollX>
|
||||
{STATUS_TABS.map((tab) => (
|
||||
<View
|
||||
key={tab.code}
|
||||
className={`tab-item ${activeTab === tab.code ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab(tab.code)}
|
||||
>
|
||||
<Text className='tab-label'>{tab.label}</Text>
|
||||
{activeTab === tab.code && <View className='tab-underline' />}
|
||||
</View>
|
||||
<View className='order-body'>
|
||||
<View className='order-icon-wrapper'>
|
||||
<Text className='order-icon'>{order.productIcon}</Text>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* 订单列表 */}
|
||||
<ScrollView className='orders-list' scrollY>
|
||||
{filteredOrders.map((order) => {
|
||||
const status = STATUS_MAP[order.statusCode] || STATUS_MAP.pending
|
||||
return (
|
||||
<View key={order.id} className='order-card dashed-card' onClick={() => goDetail(order)}>
|
||||
<View className='star-badge' />
|
||||
<View className='order-header'>
|
||||
<Text className='order-date'>{order.date}</Text>
|
||||
<Text className={`badge ${status.badge}`}>{status.label}</Text>
|
||||
</View>
|
||||
<View className='order-info'>
|
||||
<Text className='order-product'>{order.productName}</Text>
|
||||
<Text className='order-sku'>{order.sku}</Text>
|
||||
<Text className='order-meta'>数量: {order.count} 件 | {order.id}</Text>
|
||||
<View className='order-body'>
|
||||
<View className='order-icon-wrapper'>
|
||||
<Text className='order-icon'>{order.productIcon}</Text>
|
||||
</View>
|
||||
<View className='order-info'>
|
||||
<Text className='order-product'>{order.productName}</Text>
|
||||
<Text className='order-sku'>{order.sku}</Text>
|
||||
<Text className='order-meta'>数量: {order.count} 件 | {order.id}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className='order-footer'>
|
||||
<View className='order-price-bar'>
|
||||
<Text className='price-label'>实付款</Text>
|
||||
<Text className='price-value'>{order.price}</Text>
|
||||
</View>
|
||||
<View className='order-actions'>
|
||||
{order.statusCode === 'pending' && (
|
||||
<View className='btn-gradient order-btn'>
|
||||
<Text>立即付款</Text>
|
||||
<View className='order-footer'>
|
||||
<View className='order-price-bar'>
|
||||
<Text className='price-label'>实付款</Text>
|
||||
<Text className='price-value'>{order.price}</Text>
|
||||
</View>
|
||||
<View className='order-actions'>
|
||||
{order.statusCode === 'pending' && (
|
||||
<View className='btn-gradient order-btn'>
|
||||
<Text>立即付款</Text>
|
||||
</View>
|
||||
)}
|
||||
{order.statusCode === 'paid' && (
|
||||
<View className='btn-outline order-btn'>
|
||||
<Text>催发货</Text>
|
||||
</View>
|
||||
)}
|
||||
{order.statusCode === 'shipping' && (
|
||||
<>
|
||||
<View className='btn-outline order-btn' onClick={(e) => { e.stopPropagation(); Taro.showToast({ title: '查看物流', icon: 'none' }) }}>
|
||||
<Text>查看物流</Text>
|
||||
</View>
|
||||
<View className='btn-gradient order-btn' onClick={(e) => { e.stopPropagation(); Taro.showToast({ title: '确认收货', icon: 'none' }) }}>
|
||||
<Text>确认收货</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
{order.statusCode === 'done' && (
|
||||
<>
|
||||
<View className='btn-outline order-btn' onClick={(e) => { e.stopPropagation(); Taro.showToast({ title: '申请售后', icon: 'none' }) }}>
|
||||
<Text>申请售后</Text>
|
||||
</View>
|
||||
<View className='btn-gradient order-btn' onClick={(e) => { e.stopPropagation(); Taro.showToast({ title: '再来一单', icon: 'none' }) }}>
|
||||
<Text>再来一单</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
<View className='btn-outline order-btn' onClick={(e) => { e.stopPropagation(); goDetail(order) }}>
|
||||
<Text>详情</Text>
|
||||
</View>
|
||||
)}
|
||||
{order.statusCode === 'paid' && (
|
||||
<View className='btn-outline order-btn'>
|
||||
<Text>催发货</Text>
|
||||
</View>
|
||||
)}
|
||||
{order.statusCode === 'shipping' && (
|
||||
<>
|
||||
<View className='btn-outline order-btn' onClick={(e) => { e.stopPropagation(); Taro.showToast({ title: '查看物流', icon: 'none' }) }}>
|
||||
<Text>查看物流</Text>
|
||||
</View>
|
||||
<View className='btn-gradient order-btn' onClick={(e) => { e.stopPropagation(); Taro.showToast({ title: '确认收货', icon: 'none' }) }}>
|
||||
<Text>确认收货</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
{order.statusCode === 'done' && (
|
||||
<>
|
||||
<View className='btn-outline order-btn' onClick={(e) => { e.stopPropagation(); Taro.showToast({ title: '申请售后', icon: 'none' }) }}>
|
||||
<Text>申请售后</Text>
|
||||
</View>
|
||||
<View className='btn-gradient order-btn' onClick={(e) => { e.stopPropagation(); Taro.showToast({ title: '再来一单', icon: 'none' }) }}>
|
||||
<Text>再来一单</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
<View className='btn-outline order-btn' onClick={(e) => { e.stopPropagation(); goDetail(order) }}>
|
||||
<Text>详情</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
)
|
||||
})}
|
||||
|
||||
{filteredOrders.length === 0 && (
|
||||
<View className='empty-state'>
|
||||
<Text className='empty-icon'>📦</Text>
|
||||
<Text className='empty-text'>暂无订单</Text>
|
||||
<Text className='empty-sub'>去首页开始定制吧</Text>
|
||||
<View className='btn-gradient' onClick={() => Taro.switchTab({ url: '/pages/index/index' })}>
|
||||
<Text>去定制</Text>
|
||||
{filteredOrders.length === 0 && (
|
||||
<View className='empty-state'>
|
||||
<Text className='empty-icon'>📦</Text>
|
||||
<Text className='empty-text'>暂无订单</Text>
|
||||
<Text className='empty-sub'>去首页开始定制吧</Text>
|
||||
<View className='btn-gradient' onClick={() => Taro.switchTab({ url: '/pages/index/index' })}>
|
||||
<Text>去定制</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
<View style={{ height: '40px' }} />
|
||||
</View>
|
||||
<View style={{ height: '40px' }} />
|
||||
</View>
|
||||
</LoginGuard>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user