# ProductCard 组件

这个目录包含了商品卡片的不同主题变体组件，用于在商品列表页面展示不同的布局样式。

## 组件结构

### 1. ProductCardDefault.vue
**默认瀑布流布局**
- 使用绝对定位实现瀑布流效果
- 双列交替排列
- 带有数量加减控制器
- 适用于默认 theme 或 theme='3'

### 2. ProductCardGrid.vue
**网格布局 (Theme 2)**
- CSS Grid 双列布局
- 固定网格排列
- 带有数量加减控制器
- 卡片高度自动适应内容

### 3. ProductCardSingle.vue
**单列布局 (Theme 4)**
- 单列垂直排列，一行一个商品
- 每个商品下方直接显示兑换按钮
- 不显示数量控制器
- 类似列表式展示

### 4. index.vue
**动态组件选择器**
- 根据 `theme` 属性自动选择对应的组件
- 统一的 Props 和 Events 接口
- 简化父组件的使用

## 使用方法

```vue
<template>
  <ProductCard
    :goods="goodsItem"
    :theme="goodsConfig.theme"
    @click="handleClick"
    @add="handleAdd"
    @exchange="handleExchange"
    @image-load="handleImageLoad"
    @image-error="handleImageError"
  />
</template>

<script setup>
import ProductCard from '@/components/ProductCard/index.vue';

// goods 对象结构
const goodsItem = {
  image: '/path/to/image.jpg',
  imageUrl: '/path/to/image.jpg',
  title: '商品名称',
  tag: 'Hot',
  point: '12000 PUNTOS',
  point2: 12000,
  onlyPoints: null,
  price: 'S/ 299.00',
  price2: 299,
  count: 0,
  topName: 'Popularity List',
  top: 'TOP1'
};
</script>
```

## Props

| 属性 | 类型 | 说明 |
|------|------|------|
| goods | Object | 商品数据对象（必需） |
| theme | String | 主题类型：'2'=网格, '4'=单列, 其他=瀑布流 |

## Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| click | - | 点击商品卡片时触发（theme 4 除外） |
| add | count: number | 点击加减按钮时触发，参数为 +1 或 -1 |
| exchange | - | 点击兑换按钮时触发（仅 theme 4） |
| image-load | - | 图片加载完成时触发 |
| image-error | - | 图片加载失败时触发 |

## 主题对应关系

- **无 theme 或 theme='3'**: ProductCardDefault - 瀑布流布局
- **theme='2'**: ProductCardGrid - 网格布局
- **theme='4'**: ProductCardSingle - 单列布局

## 样式说明

每个组件都使用 scoped 样式，遵循 BEM 命名规范：
- `.product-card` - 默认卡片
- `.product-card-grid` - 网格卡片
- `.product-card-single` - 单列卡片

## 维护建议

1. 新增主题时，在此目录创建新的组件文件
2. 在 `index.vue` 中添加对应的 case 分支
3. 保持统一的 Props 和 Events 接口
4. 样式使用 scoped 避免冲突
5. 组件内部使用 BEM 命名约定
