✨ feat(order): 实现订单状态卡片组件

- 创建 `mini/src/components/tdesign/order-group/index.tsx` 订单状态卡片组件
- 对照 `/mnt/code/186-175-template-6/tcb-shop-demo/pages/usercenter/components/order-group/` 实现订单状态布局
- 实现4个状态：待付款、待发货、待收货、待评价
- 实现订单数量显示和点击跳转功能
- 应用tcb-shop-demo的订单卡片样式

📝 docs(story): 更新用户中心UI重构任务状态

- 将"实现订单状态卡片组件"标记为已完成
- 更新订单状态卡片组件的所有子任务为已完成状态

docs/stories/001.007.user-center-ui-refactor.story.md

@@ -31,12 +31,12 @@ Draft
     - [x] 实现背景图片：`https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/user-center-bg.png`
     - [x] 实现用户头像、昵称、手机号显示
     - [x] 应用tcb-shop-demo的用户中心卡片样式
-  - [ ] 实现订单状态卡片组件
-    - [ ] 创建 `mini/src/components/tdesign/order-group/index.tsx` 订单状态卡片组件
-    - [ ] 对照 `/mnt/code/186-175-template-6/tcb-shop-demo/pages/usercenter/components/order-group/` 实现订单状态布局
-    - [ ] 实现4个状态：待付款、待发货、待收货、待评价
-    - [ ] 实现订单数量显示和点击跳转功能
-    - [ ] 应用tcb-shop-demo的订单卡片样式
+  - [x] 实现订单状态卡片组件
+    - [x] 创建 `mini/src/components/tdesign/order-group/index.tsx` 订单状态卡片组件
+    - [x] 对照 `/mnt/code/186-175-template-6/tcb-shop-demo/pages/usercenter/components/order-group/` 实现订单状态布局
+    - [x] 实现4个状态：待付款、待发货、待收货、待评价
+    - [x] 实现订单数量显示和点击跳转功能
+    - [x] 应用tcb-shop-demo的订单卡片样式
   - [ ] 实现客服弹窗组件
     - [ ] 创建 `mini/src/components/tdesign/popup/index.tsx` 弹窗组件
     - [ ] 对照 `mini/tdesign/popup/` 实现弹窗布局

mini/src/components/tdesign/order-group/index.css

@@ -0,0 +1,94 @@
+/* 订单状态卡片样式 - 严格对照 tcb-shop-demo 实现 */
+.tdesign-order-group {
+  margin-bottom: 24rpx;
+  background-color: #ffffff;
+  border-radius: 16rpx 16rpx 0 0;
+}
+
+/* 顶部单元格样式 */
+.tdesign-order-group__top {
+  padding: 24rpx 18rpx 24rpx 32rpx;
+  border-radius: 16rpx 16rpx 0 0;
+}
+
+.tdesign-order-group__top .tdesign-cell__title {
+  font-size: 32rpx;
+  line-height: 48rpx;
+  font-weight: bold;
+}
+
+.tdesign-order-group__top .tdesign-cell__note {
+  font-size: 28rpx;
+}
+
+/* 订单状态内容 */
+.tdesign-order-group__content {
+  overflow: hidden;
+  width: 100%;
+  height: 164rpx;
+  display: flex;
+  background-color: #fff;
+  border-radius: 0 0 16rpx 16rpx;
+}
+
+/* 订单状态项 */
+.tdesign-order-group__item {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.tdesign-order-group__item:first-child {
+  border-radius: 0 0 0 16rpx;
+}
+
+.tdesign-order-group__item:last-child {
+  border-radius: 0 0 16rpx 0;
+}
+
+/* 标题 */
+.tdesign-order-group__item__title {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 32rpx;
+}
+
+/* 图标区域 */
+.tdesign-order-group__item__icon {
+  margin-bottom: 20rpx;
+  width: 56rpx;
+  height: 56rpx;
+  position: relative;
+}
+
+/* 徽章 */
+.tdesign-order-group__badge {
+  position: absolute;
+  top: -8rpx;
+  right: -8rpx;
+  background-color: #FF4646;
+  border-radius: 20rpx;
+  min-width: 32rpx;
+  height: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.tdesign-order-group__badge-count {
+  color: #fff;
+  font-size: 20rpx;
+  line-height: 1;
+  font-weight: bold;
+}
+
+/* 图标样式 */
+.tdesign-order-group__item__icon-image {
+  background-image: -webkit-linear-gradient(90deg, #6a6a6a 0%, #929292 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

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

@@ -0,0 +1,98 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import TDesignCellGroup from '../cell-group'
+import TDesignCell from '../cell'
+import TDesignIcon from '../icon'
+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">
+              {item.orderNum && item.orderNum > 0 ? (
+                <View className="tdesign-order-group__badge">
+                  <Text className="tdesign-order-group__badge-count">
+                    {item.orderNum > 99 ? '99+' : item.orderNum}
+                  </Text>
+                </View>
+              ) : null}
+
+              <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>
+  )
+}