template-10584/src/user/gift/usage-example.md

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

概述

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

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

数据结构

ShopGift 模型中的关键字段

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 函数已经优化：

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. 类型文本获取函数

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

显示效果

商品信息展示包括：

1. 基础信息

   • 商品名称（优先显示）
   • 商品图片
   • 礼品卡面值
   • 商品分类

2. 详细信息

   • 商品规格
   • 商品标签
   • 使用说明
   • 注意事项

3. 状态信息

   • 使用状态标识
   • 过期时间提醒
   • 兑换码显示

测试验证

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

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

测试页面包含了不同类型和状态的礼品卡示例，可以验证：

• 商品名称正确显示
• 商品图片正常加载
• 商品信息完整展示
• 不同状态的样式效果

注意事项

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

后续优化建议

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