first commit
This commit is contained in:
@@ -0,0 +1,179 @@
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useState, useEffect } from 'react'
|
||||
import './index.scss'
|
||||
import { getOrderList, type OrderItem } from '../../utils/store'
|
||||
import ThemeToggle from '../../components/ThemeToggle'
|
||||
import { useThemeContext } from '../../context/ThemeContext'
|
||||
|
||||
const STATUS_TABS = [
|
||||
{ code: 'all', label: '全部' },
|
||||
{ code: 'pending', label: '待付款' },
|
||||
{ code: 'paid', label: '待发货' },
|
||||
{ code: 'shipping', label: '待收货' },
|
||||
{ code: 'done', label: '已完成' }
|
||||
]
|
||||
|
||||
const STATUS_MAP: Record<string, { label: string; badge: string }> = {
|
||||
pending: { label: '待付款', badge: 'badge-pink' },
|
||||
paid: { label: '待发货', badge: 'badge-blue' },
|
||||
shipping: { label: '待收货', badge: 'badge-blue' },
|
||||
done: { label: '已完成', badge: 'badge-green' },
|
||||
cancelled: { label: '已取消', badge: 'badge-gray' }
|
||||
}
|
||||
|
||||
export default function OrdersPage() {
|
||||
const { theme } = useThemeContext()
|
||||
const [activeTab, setActiveTab] = useState('all')
|
||||
const [orders, setOrders] = useState<OrderItem[]>([])
|
||||
|
||||
const load = () => setOrders(getOrderList())
|
||||
|
||||
useEffect(load, [])
|
||||
|
||||
// 读取从 profile 跳转过来的筛选状态
|
||||
useEffect(() => {
|
||||
const init = () => {
|
||||
const filter = Taro.getStorageSync('orders:filter')
|
||||
if (filter && STATUS_TABS.some(t => t.code === filter)) {
|
||||
setActiveTab(filter)
|
||||
Taro.removeStorageSync('orders:filter')
|
||||
}
|
||||
load()
|
||||
}
|
||||
init()
|
||||
// 页面每次显示时刷新
|
||||
const page = Taro.getCurrentInstance().page
|
||||
if (page) {
|
||||
const orig = page.onShow
|
||||
page.onShow = function () {
|
||||
init()
|
||||
if (orig) orig.apply(this)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 页面每次显示时刷新（处理下单后同步）
|
||||
useEffect(() => {
|
||||
Taro.eventCenter?.once?.('orders:refresh', load)
|
||||
load()
|
||||
return () => { Taro.eventCenter?.off?.('orders:refresh', load) }
|
||||
}, [])
|
||||
|
||||
const filteredOrders = activeTab === 'all'
|
||||
? orders
|
||||
: orders.filter(o => o.statusCode === activeTab)
|
||||
|
||||
const goDetail = (order: OrderItem) => {
|
||||
Taro.navigateTo({ url: `/pages/orderDetail/index?orderId=${order.id}` })
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={`theme-${theme}`}>
|
||||
<View className='orders-page'>
|
||||
<ThemeToggle />
|
||||
|
||||
<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>
|
||||
</View>
|
||||
<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 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>
|
||||
</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>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
<View style={{ height: '40px' }} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user