template-10560/src/components/GiftCard.md

GiftCard 礼品卡组件

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

功能特性

🎨 视觉设计

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

🖼️ 图片展示

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

💰 价格信息

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

⭐ 商品详情

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

📋 使用指南

• 使用说明：详细的使用步骤说明
• 注意事项：重要的使用注意事项
• 适用门店：显示可使用的门店列表

🔧 交互功能

• 兑换码展示：支持兑换码的显示和隐藏
• 操作按钮：使用、详情等操作按钮
• 点击事件：支持整卡点击事件

使用方法

基础用法

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('使用礼品卡')}
    />
  )
}

完整功能展示

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类名来自定义样式：

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

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

注意事项

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