# GiftCard 礼品卡组件

一个功能丰富、设计精美的礼品卡组件，支持多种类型的礼品卡展示和交互。

## 功能特性

### 🎨 视觉设计
- **多主题支持**：金色、银色、铜色、蓝色、绿色、紫色六种主题
- **响应式设计**：适配不同屏幕尺寸
- **状态指示**：清晰的可用、已使用、已过期状态展示
- **折扣标识**：自动计算并显示折扣百分比

### 🖼️ 图片展示
- **单图模式**：支持单张商品图片展示
- **轮播模式**：支持多张图片轮播展示
- **自适应尺寸**：图片自动适配容器大小

### 💰 价格信息
- **面值显示**：突出显示礼品卡面值
- **原价对比**：显示原价和折扣信息
- **优惠活动**：展示当前优惠活动信息

### ⭐ 商品详情
- **品牌分类**：显示商品品牌和分类信息
- **评分评价**：展示用户评分和评价数量
- **规格库存**：显示商品规格和库存状态
- **商品标签**：支持多个商品特色标签

### 📋 使用指南
- **使用说明**：详细的使用步骤说明
- **注意事项**：重要的使用注意事项
- **适用门店**：显示可使用的门店列表

### 🔧 交互功能
- **兑换码展示**：支持兑换码的显示和隐藏
- **操作按钮**：使用、详情等操作按钮
- **点击事件**：支持整卡点击事件

## 使用方法

### 基础用法

```tsx
import GiftCard from '@/components/GiftCard'

const MyComponent = () => {
  return (
    <GiftCard
      id={1}
      name="星巴克咖啡礼品卡"
      description="享受醇香咖啡时光"
      goodsImage="https://example.com/starbucks.jpg"
      faceValue="100"
      type={20}
      useStatus={0}
      theme="green"
      showUseBtn={true}
      onUse={() => console.log('使用礼品卡')}
    />
  )
}
```

### 完整功能展示

```tsx
import GiftCard from '@/components/GiftCard'

const FullFeatureCard = () => {
  const cardData = {
    id: 1,
    name: '星巴克咖啡礼品卡',
    description: '享受醇香咖啡时光，适用于全国星巴克门店',
    code: 'SB2024001234567890',
    goodsImages: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg'
    ],
    faceValue: '100',
    originalPrice: '120',
    type: 20,
    useStatus: 0,
    expireTime: '2024-12-31 23:59:59',
    goodsInfo: {
      brand: '星巴克',
      category: '餐饮美食',
      rating: 4.8,
      reviewCount: 1256,
      tags: ['热门', '全国通用'],
      instructions: [
        '出示兑换码至门店收银台即可使用',
        '可用于购买任意饮品和食品'
      ],
      notices: [
        '礼品卡一经售出，不可退换',
        '请妥善保管兑换码'
      ],
      applicableStores: ['全国星巴克门店', '机场店']
    },
    promotionInfo: {
      type: 'discount',
      description: '限时优惠：满100减20',
      validUntil: '2024-09-30 23:59:59'
    },
    showCode: true,
    showUseBtn: true,
    showGoodsDetail: true,
    theme: 'green'
  }

  return (
    <GiftCard
      {...cardData}
      onUse={() => console.log('使用')}
      onDetail={() => console.log('详情')}
      onClick={() => console.log('点击')}
    />
  )
}
```

## 属性说明

### 基础属性
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| id | number | - | 礼品卡ID |
| name | string | - | 礼品卡名称 |
| description | string | - | 礼品卡描述 |
| faceValue | string | - | 礼品卡面值 |
| type | number | 10 | 类型：10-实物 20-虚拟 30-服务 |
| useStatus | number | 0 | 状态：0-可用 1-已使用 2-已过期 |
| theme | string | 'gold' | 主题色 |

### 商品信息
| 属性 | 类型 | 说明 |
|------|------|------|
| goodsInfo.brand | string | 商品品牌 |
| goodsInfo.category | string | 商品分类 |
| goodsInfo.rating | number | 商品评分 |
| goodsInfo.reviewCount | number | 评价数量 |
| goodsInfo.tags | string[] | 商品标签 |
| goodsInfo.instructions | string[] | 使用说明 |
| goodsInfo.notices | string[] | 注意事项 |

### 事件回调
| 事件 | 类型 | 说明 |
|------|------|------|
| onUse | () => void | 使用按钮点击 |
| onDetail | () => void | 详情按钮点击 |
| onClick | () => void | 卡片点击 |

## 主题配置

组件支持6种预设主题：

- `gold` - 金色主题（默认）
- `silver` - 银色主题
- `bronze` - 铜色主题
- `blue` - 蓝色主题
- `green` - 绿色主题
- `purple` - 紫色主题

## 样式定制

可以通过覆盖CSS类名来自定义样式：

```scss
.gift-card {
  // 自定义卡片样式
}

.gift-card-gold {
  // 自定义金色主题
}
```

## 注意事项

1. 确保传入的图片URL有效且可访问
2. 价格相关字段建议使用字符串类型，避免精度问题
3. 时间字段请使用标准的日期时间格式
4. 商品标签数量建议控制在5个以内，避免布局混乱
5. 使用说明和注意事项条目建议简洁明了