mini-starter/mini/src/components/tdesign/order-group/index.tsx

import { View, Text } from '@tarojs/components'
import TDesignCellGroup from '../cell-group'
import TDesignCell from '../cell'
import TDesignIcon from '../icon'
import TDesignBadge from '../badge'
import './index.css'

interface OrderTagInfo {
  title: string
  iconName: string
  orderNum?: number
  status?: string
}

interface OrderGroupProps {
  orderTagInfos?: OrderTagInfo[]
  title?: string
  desc?: string
  isTop?: boolean
  onItemClick?: (item: OrderTagInfo) => void
  onTopClick?: () => void
  className?: string
}

export default function TDesignOrderGroup({
  orderTagInfos = [
    { title: '待付款', iconName: 'clock', orderNum: 0 },
    { title: '待发货', iconName: 'package', orderNum: 0 },
    { title: '待收货', iconName: 'truck', orderNum: 0 },
    { title: '待评价', iconName: 'star', orderNum: 0 }
  ],
  title = '我的订单',
  desc = '全部订单',
  isTop = true,
  onItemClick,
  onTopClick,
  className = ''
}: OrderGroupProps) {
  const handleItemClick = (item: OrderTagInfo) => {
    onItemClick?.(item)
  }

  const handleTopClick = () => {
    onTopClick?.()
  }

  return (
    <View className={`tdesign-order-group ${className}`}>
      {/* 顶部单元格 */}
      {isTop && (
        <TDesignCellGroup>
          <TDesignCell
            title={title}
            note={desc}
            bordered={false}
            arrow
            onClick={handleTopClick}
            className="tdesign-order-group__top"
          />
        </TDesignCellGroup>
      )}

      {/* 订单状态内容 */}
      <View className="tdesign-order-group__content">
        {orderTagInfos.map((item, index) => (
          <View
            key={index}
            className="tdesign-order-group__item"
            onClick={() => handleItemClick(item)}
          >
            {/* 图标和徽章 */}
            <View className="tdesign-order-group__item__icon">
              <TDesignBadge
                count={item.orderNum}
                maxCount={99}
                color="#FF4646"
                offset={[8, -8]}
              />

              <TDesignIcon
                name={item.iconName}
                size="56rpx"
                color="#6a6a6a"
                className="tdesign-order-group__item__icon-image"
              />
            </View>

            {/* 标题 */}
            <Text className="tdesign-order-group__item__title">
              {item.title}
            </Text>
          </View>
        ))}
      </View>
    </View>
  )
}