# 礼品卡商品信息显示使用说明

## 概述

已成功优化礼品卡组件，现在可以正确显示商品名称和图片。主要改进包括：

1. **优先显示商品名称**：`goodsName` 优先于 `name` 显示
2. **显示商品图片**：使用 `goodsImage` 字段显示商品图片
3. **丰富的商品信息**：包括规格、分类、标签、使用说明等
4. **更好的用户体验**：清晰的信息层次和视觉效果

## 数据结构

### ShopGift 模型中的关键字段

```typescript
interface ShopGift {
  id?: number;
  name?: string;           // 礼品卡名称
  goodsName?: string;      // 商品名称（优先显示）
  goodsImage?: string;     // 商品图片
  goodsId?: number;        // 关联商品ID
  description?: string;    // 礼品卡描述
  faceValue?: string;      // 面值
  type?: number;           // 类型（10实物 20虚拟 30服务）
  useStatus?: number;      // 状态（0可用 1已使用 2已过期）
  // ... 其他字段
}
```

## 代码实现

### 1. 数据转换函数

在 `src/user/gift/index.tsx` 中的 `transformGiftData` 函数已经优化：

```typescript
const transformGiftData = (gift: ShopGift): GiftCardProps => {
  return {
    id: gift.id || 0,
    name: gift.goodsName || gift.name || '礼品卡', // 优先显示商品名称
    description: gift.description || gift.instructions,
    code: gift.code,
    goodsImage: gift.goodsImage, // 商品图片
    faceValue: gift.faceValue,
    type: gift.type,
    useStatus: gift.useStatus,
    expireTime: gift.expireTime,
    useTime: gift.useTime,
    useLocation: gift.useLocation,
    contactInfo: gift.contactInfo,
    // 添加商品信息
    goodsInfo: {
      ...(gift.goodsId && {
        specification: `礼品卡面值：¥${gift.faceValue}`,
        category: getTypeText(gift.type),
        tags: [
          getTypeText(gift.type),
          gift.useStatus === 0 ? '可使用' : gift.useStatus === 1 ? '已使用' : '已过期'
        ].filter(Boolean),
        instructions: gift.instructions ? [gift.instructions] : [
          '请在有效期内使用',
          '出示兑换码即可使用',
          '不可兑换现金'
        ],
        notices: [
          '礼品卡一经使用不可退换',
          '请妥善保管兑换码',
          '如有疑问请联系客服'
        ]
      })
    },
    showCode: gift.useStatus === 0,
    showUseBtn: gift.useStatus === 0,
    showDetailBtn: true,
    showGoodsDetail: true, // 显示商品详情
    theme: getThemeByType(gift.type),
    onUse: () => handleUseGift(gift),
    onDetail: () => handleGiftDetail(gift)
  }
}
```

### 2. 类型文本获取函数

```typescript
const getTypeText = (type?: number): string => {
  switch (type) {
    case 10: return '实物礼品卡'
    case 20: return '虚拟礼品卡'
    case 30: return '服务礼品卡'
    default: return '礼品卡'
  }
}
```

## 显示效果

### 商品信息展示包括：

1. **基础信息**
   - 商品名称（优先显示）
   - 商品图片
   - 礼品卡面值
   - 商品分类

2. **详细信息**
   - 商品规格
   - 商品标签
   - 使用说明
   - 注意事项

3. **状态信息**
   - 使用状态标识
   - 过期时间提醒
   - 兑换码显示

## 测试验证

可以使用测试页面验证显示效果：

```bash
# 访问测试页面
/user/gift/test
```

测试页面包含了不同类型和状态的礼品卡示例，可以验证：
- 商品名称正确显示
- 商品图片正常加载
- 商品信息完整展示
- 不同状态的样式效果

## 注意事项

1. **图片加载**：确保 `goodsImage` 字段包含有效的图片URL
2. **数据完整性**：建议在后端确保 `goodsName` 和 `goodsImage` 字段有值
3. **兼容性**：保持对旧数据的兼容，当 `goodsName` 为空时使用 `name` 字段
4. **性能优化**：大量礼品卡列表时注意图片懒加载

## 后续优化建议

1. **图片优化**：添加图片懒加载和占位符
2. **缓存机制**：对商品信息进行本地缓存
3. **错误处理**：添加图片加载失败的降级处理
4. **用户体验**：添加骨架屏和加载状态