|
|
@@ -1,119 +0,0 @@
|
|
|
-import { View, Text } from '@tarojs/components'
|
|
|
-import TDesignIcon from '../icon'
|
|
|
-import './index.css'
|
|
|
-
|
|
|
-interface OrderItem {
|
|
|
- /** 订单状态类型 */
|
|
|
- type: 'pending_payment' | 'pending_shipment' | 'pending_receipt' | 'pending_review'
|
|
|
- /** 订单数量 */
|
|
|
- count?: number
|
|
|
- /** 状态名称 */
|
|
|
- label: string
|
|
|
- /** 点击回调 */
|
|
|
- onClick?: () => void
|
|
|
-}
|
|
|
-
|
|
|
-interface OrderGroupProps {
|
|
|
- /** 订单状态数据 */
|
|
|
- orders?: OrderItem[]
|
|
|
- /** 点击全部订单回调 */
|
|
|
- onAllOrdersClick?: () => void
|
|
|
-}
|
|
|
-
|
|
|
-export default function OrderGroup({
|
|
|
- orders = [
|
|
|
- {
|
|
|
- type: 'pending_payment',
|
|
|
- count: 0,
|
|
|
- label: '待付款',
|
|
|
- onClick: () => {}
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'pending_shipment',
|
|
|
- count: 0,
|
|
|
- label: '待发货',
|
|
|
- onClick: () => {}
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'pending_receipt',
|
|
|
- count: 0,
|
|
|
- label: '待收货',
|
|
|
- onClick: () => {}
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'pending_review',
|
|
|
- count: 0,
|
|
|
- label: '待评价',
|
|
|
- onClick: () => {}
|
|
|
- }
|
|
|
- ],
|
|
|
- onAllOrdersClick
|
|
|
-}: OrderGroupProps) {
|
|
|
- // 状态类型到图标的映射
|
|
|
- const iconMap = {
|
|
|
- pending_payment: 'shopping-cart',
|
|
|
- pending_shipment: 'truck',
|
|
|
- pending_receipt: 'package',
|
|
|
- pending_review: 'star'
|
|
|
- }
|
|
|
-
|
|
|
- // 状态类型到颜色的映射
|
|
|
- const colorMap = {
|
|
|
- pending_payment: '#fa550f',
|
|
|
- pending_shipment: '#ff6b35',
|
|
|
- pending_receipt: '#00b96b',
|
|
|
- pending_review: '#1890ff'
|
|
|
- }
|
|
|
-
|
|
|
- return (
|
|
|
- <View className="order-group">
|
|
|
- {/* 标题区域 */}
|
|
|
- <View className="order-group__header">
|
|
|
- <Text className="order-group__title">我的订单</Text>
|
|
|
- <View
|
|
|
- className="order-group__all"
|
|
|
- onClick={onAllOrdersClick}
|
|
|
- >
|
|
|
- <Text className="order-group__all-text">全部订单</Text>
|
|
|
- <TDesignIcon
|
|
|
- name="arrow-right"
|
|
|
- size="24rpx"
|
|
|
- color="#999"
|
|
|
- />
|
|
|
- </View>
|
|
|
- </View>
|
|
|
-
|
|
|
- {/* 订单状态列表 */}
|
|
|
- <View className="order-group__list">
|
|
|
- {orders.map((order) => (
|
|
|
- <View
|
|
|
- key={order.type}
|
|
|
- className="order-group__item"
|
|
|
- onClick={order.onClick}
|
|
|
- >
|
|
|
- {/* 图标和数量 */}
|
|
|
- <View className="order-group__icon-container">
|
|
|
- <TDesignIcon
|
|
|
- name={iconMap[order.type]}
|
|
|
- size="48rpx"
|
|
|
- color={colorMap[order.type]}
|
|
|
- />
|
|
|
- {(order.count || 0) > 0 && (
|
|
|
- <View className="order-group__badge">
|
|
|
- <Text className="order-group__badge-text">
|
|
|
- {(order.count || 0) > 99 ? '99+' : (order.count || 0)}
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- )}
|
|
|
- </View>
|
|
|
-
|
|
|
- {/* 状态标签 */}
|
|
|
- <Text className="order-group__label">
|
|
|
- {order.label}
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- ))}
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- )
|
|
|
-}
|