npm package: @retailwe/ui-goods-card
Description: ## 引入
Latest version: 0.0.20

# GoodsCard 商品卡片

## 引入

在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)

```json
"usingComponents": {
  "wr-goods-card": "@retailwe/ui-goods-card/index"
}
```

## 代码演示

### 基础用法
```js
Page({
  data: {
    /** @type { GoodBase } */
    good: {
      thumb: '123123',
      num: 3,
      title: '当季新裤',
      desc: '欧美网红款',
      specs: ['比利时进口', 'L - 180', '长袖', '天蓝'],
      tags: ['双十一', '裤子'],
      price: 20.1 * 100,
      originPrice: 45.2 * 100,

      /** 指定某个key不展示 */
      hideKey: {
        thumbTag: true
      }
    }
  }
})
```

```xml
<wr-goods-card data="{{good}}" />
```

### 高级用法

#### 通过插槽添加定制内容

```xml
<wr-goods-card data="{{good}}">
  <view slot="footer">
    <button size="mini">按钮</button>
    <button size="mini">按钮</button>
  </view>
</wr-goods-card>
```

## API

### Types
#### GoodBase
```ts
/** 商品类型，包含基础的数据结构 */
interface GoodBase {
  /** 预览图 */
  thumb?: string;
  /** 商品数量 */
  num?: number;
  /** 商品标题 */
  title?: string;
  /**
   * 标题多行溢出数量
   *
   * @default 1 当 tag 数量大于0时，取值为1
   * @default 2 当 tag 数量等于0时，取值为2
   */
  lineClamp?: number;
  /** 商品描述 */
  desc?: string;
  /** 商品规格,字符串，超过5个字就溢出 */
  specs?: string[];
  /**
   * 商品标签，位于desc区域
   */
  tags?: string[];
  /**
   * 商品标签，位于 title 前
   */
  titlePrefixTags?: {
    textColor?: string;
    color?: string;
    text: string;
  }[];
  /** 商品价格，单位分，整数 */
  price?: number;
  /** 商品划线价格，单位分，整数 */
  originPrice?: number;

  /** 传入哪个key，哪个key对应的内容就则不显示 */
  hideKey?: Record<keyof GoodBase, boolean>;
}
```
#### Good
```ts
/** 泛定义的商品数据类型，在基础类型上可以扩展数据用于业务需求 */
interface Good extends GoodBase {
  /** 是否展示购物车 */
  showCart?: boolean

  [key: string]: any
}
```

### Props

| 参数 | 说明 | 类型 | 默认值 | 说明 |
|-----------|-----------|-----------|-------------|-------------|
| data | 商品数据 | *Good* | - | 必填 |
| id | 组件ID，不填时自动生成形如`goods-card-88888888`的随机ID，方便做加购动画等时选取元素 | *string* | - | 选填 |
| layout | 预设布局 | *string* | `horizontal` | 横向-`horizontal`、横向&价格与标题不同行-`horizontal-wrap`、纵向-`vertical` |
| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序`image`组件`mode`属性值 | *string* | `aspectFit` | 选填 |
| price-fill | 价格是否保持两位小数 | *boolean* | `true` | 选填 |
| currency | 货币符号 | *string* | `¥` | 选填 |
| lazy-load | 是否开启图片懒加载 | *boolean* | `false` | 选填 |
| centered | 是否开启居中模式 | *boolean* | `false` | 选填 |
| price-prefix | 价格前缀文案 | *string* | - | 选填 |
| show-cart | 是否展示购物车 | *boolean* | - | 选填 |
| cart-size | 购物车大小，透传给add-cart组件size | *number* | 48 | 选填 |
| cart-color | 购物车颜色，透传给add-cart组件color | *string* | #FA550F | 选填 |
| thresholds | 元素可见监控阈值 | *number[]* | [] | 选填，不填或填为空数组时不进行监控，进行监控后每达到一个阈值就触发一次事件：ob |

#### Good
| 参数 | 说明 | 类型 | 默认值 | 说明 |
|-----------|-----------|-----------|-------------|-------------|
| thumb | 预览图 | *string* | - | 选填 |
| num | 商品数量 | *number* | - | 选填 |
| title | 商品标题 | *string* | - | 选填 |
| lineClamp | 标题多行溢出数量 | *number* | 1|2 | 默认值规则：当 tags 数量大于0 且 显示 时，默认值为1；当 tags 数量等于0 或 不显示 时，默认值为2 |
| desc | 商品描述 | *string* | - | 选填 |
| specs | 商品规格,字符串，单个规则超过5个字就... | *string[]* | - | 选填 |
| tags | 商品标签，位于desc区域 | *string[]* | - | 选填 |
| titlePrefixTags | 商品标签，位于 title 前 | *string[]* | - | 选填 |
| price | 商品价格，单位分，整数 | *number* | - | 选填 |
| originPrice | 商品划线价格，单位分，整数 | *number* | - | 选填 |
| hideKey | 传入哪个key，哪个key对应的内容就则不显示 | *Record<keyof Good, boolean>* | - | 选填 |
| [string] | 其他任意键值, 扩展结构用于其他业务目的 | *any* | - | 选填 |

### Slot

| 名称 | 说明 |
|-----------|-----------|
| thumb-cover | 覆盖在thumb上方 |
| before-title | 渲染在 title 的view前部分（tags） |
| after-title | 跟随在 title 的view后方 |
| after-desc | 跟随在 desc 的view后方 |
| price-prefix | 渲染在 价格 的view前方 |
| append-body | 渲染在 body 的尾部 |
| footer | 渲染在 body 的后方 |
| append-card | 渲染在 卡片 整个 view 的尾部 |

### Events

| Event  | Description                   | Arguments(detail) |
| ------ | ----------------------------- | --------- |
| thumb | 点击商品预览图触发 | { good: Good } |
| specs | 点击商品规格显示区触发 | { good: Good } |
| tag | 点击商品标签触发 | { good: Good, index: number } |
| add-cart | 加入购物车 | { ...addCart.detail, good: Good, cardID: string, id: string } |
| click | 点击卡片 | { good: Good } |
| tap | 同click，用于兼容 | { good: Good } |
| ob | 设置了thresholds且商品卡片的可见比例达到阈值 | { good: Good, context: WechatMiniprogram.IntersectionObserver, ob: WechatMiniprogram.ObserveCallbackResult, } |

### 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| card-class | 根节点样式类 |
| title-class | title 节点样式类 |
| desc-class | desc 节点样式类 |
| num-class | num 节点样式类 |
| thumb-class | 预览图 样式类 |
| specs-class | 规格节点样式类 |
| price-class | price 节点样式类 |
| origin-price-class | 原价 price 节点样式类 |
| price-prefix-class | 价格前附加字符 样式类 |


### CSS Var
| 类名 | 属性 | 说明 | 默认值(不同的layout可能会不同) |
| --------------- | -------- | -------- | ------ |
| --ui-goods-card-l-height | line-height | 组件全局行高 | 1 |
| --ui-goods-card-direction | flex-direction | 组件main区块flex方向 | row |
| --ui-goods-card-padding | padding | 组件main区块padding | 0 |
| --ui-goods-card-bg | background | 组件main区块背景 | transparent |
| --ui-goods-card-width | width | 组件main区块宽度 | - |
| --ui-goods-card-height | height | 组件main区块高度 | - |
| --ui-goods-card-radius | border-radius | 组件main区块圆角 | - |
| --ui-goods-card-overflow | overflow | 组件main区块溢出行为 | - |
| --ui-goods-card-thumb-width | width | 组件预览图区块宽度 | 140rpx |
| --ui-goods-card-thumb-height | height | 组件预览图区块宽度 | 140rpx |
| --ui-goods-card-thumb-radius | border-radius | 组件预览图区块圆角 | - |
| --ui-goods-card-body-direction | flex-direction | 组件body图区块flex方向 | row |
| --ui-goods-card-body-margin | margin | 组件body图区块margin | 0 0 0 20rpx |
| --ui-goods-card-body-flex | flex | 组件body图区块flex设置(flex-grow flex-shrink flex-basis) | 1 1 auto |
| --ui-goods-card-long-direction | flex-direction | long区块的flex方向 | column |
| --ui-goods-card-long-height | height | long区块指定高度 | - |
| --ui-goods-card-long-overflow | overflow | long区块溢出行为 | - |
| --ui-goods-card-long-flex | flex | long区块flex设置(flex-grow flex-shrink flex-basis) | 1 1 auto |
| --ui-goods-card-title-size | font-size | 标题字体大小 | 28rpx |
| --ui-goods-card-title-color | color | 标题字体颜色 | #333 |
| --ui-goods-card-title-height | height | 标题区块高度 | - |
| --ui-goods-card-title-l-height | line-height | 标题行高 | 40rpx |
| --ui-goods-card-title-tag-margin | margin | 标题前tag margin | 0 8rpx 0 0 |
| --ui-goods-card-desc-size | font-size | 描述字体大小 | 24rpx |
| --ui-goods-card-desc-color | color | 描述字体颜色 | #F5F5F5 |
| --ui-goods-card-desc-l-height | line-height | 描述行高 | 40rpx |
| --ui-goods-card-specs-size | font-size | 规格值字体大小 | 20rpx |
| --ui-goods-card-specs-color | color | 规格值字体颜色 | #333 |
| --ui-goods-card-specs-bg | background | 规格值字体颜色 | #F5F5F5 |
| --ui-goods-card-specs-icon-size | --ui-icon-size | 规格值icon(右箭头)大小 | 16rpx |
| --ui-goods-card-tags-wrap | flex-wrao | 标签区块flex换行行为 | wrap |
| --ui-goods-card-tags-margin | margin | 标签区块margin | 16rpx 0 0 0 |
| --ui-goods-card-tag-color | color | 标签前景色 | #FA550F |
| --ui-goods-card-tag-bg | background | 标签背景色 | transparent |
| --ui-goods-card-tag-size | font-size | 标签字体大小 | 20rpx |
| --ui-goods-card-tag-border | border | 标签border | 1rpx solid #FA550F |
| --ui-goods-card-tag-padding | padding | 标签border | 0 8rpx |
| --ui-goods-card-tag-height | height | 标签高度 | 30rpx |
| --ui-goods-card-tag-max-width | max-width | 标签最大长度 | - |
| --ui-goods-card-tag-margin | margin | 标签margin | 0 8rpx 0 0 |
| --ui-goods-card-tag-display | display | 标签display | block |
| --ui-goods-card-tag-overflow | overflow | 标签overflow | hidden |
| --ui-goods-card-tag-white-space | white-space | 标签white-space | nowrap |
| --ui-goods-card-tag-word-break | word-break | 标签word-break | keep-all |
| --ui-goods-card-tag-text-overflow | text-overflow | 标签text-overflow | ellipsis |
| --ui-goods-card-short-position | position | short区块position | - |
| --ui-goods-card-short-direction | flex-direction | short区块flex方向 | - |
| --ui-goods-card-short-justify | justify-content | short区块主轴对齐 | flex-start |
| --ui-goods-card-short-align | align-items | short区块副轴对齐 | flex-start |
| --ui-goods-card-short-margin | margin | short区块margin | 0 0 0 46rpx |
| --ui-goods-card-price-pre-order | order | 价格前文案order | 0 |
| --ui-goods-card-price-pre-color | color | 价格前文案颜色 | #666 |
| --ui-goods-card-price-pre-margin | margin | 价格前文案margin | 0 |
| --ui-goods-card-price-weight | font-weight | 价格字重 | 600 |
| --ui-goods-card-price-order | order | 价格order | 1 |
| --ui-goods-card-price-color | color | 价格color | #333|
| --ui-goods-card-price-size | font-size | 价格字体大小 | 28rpx |
| --ui-goods-card-price-margin | margin | 价格margin | 0 |
| --ui-goods-card-price-display | --ui-price-display | - | - |
| --ui-goods-card-price-color | --ui-price-color | - | - |
| --ui-goods-card-price-size | --ui-price-size | - | - |
| --ui-goods-card-price-weight | --ui-price-weight | - | - |
| --ui-goods-card-price-decoration | --ui-price-decoration | - | - |
| --ui-goods-card-price-symbol-color | --ui-price-symbol-color | - | - |
| --ui-goods-card-price-symbol-size | --ui-price-symbol-size | - | 20rpx |
| --ui-goods-card-price-pprice-margin | --ui-price-pprice-margin | - | - |
| --ui-goods-card-price-integer-color | --ui-price-integer-color | - | - |
| --ui-goods-card-price-integer-size | --ui-price-integer-size | - | - |
| --ui-goods-card-price-decimal-color | --ui-price-decimal-color | - | - |
| --ui-goods-card-price-decimal-size | --ui-price-decimal-size | - | 20rpx |
| --ui-goods-card-o-price-weight | font-weight | 划线价字重 | 400 |
| --ui-goods-card-o-price-order | order | 划线价order | 2 |
| --ui-goods-card-o-price-color | color | 划线价color | #AAAAAA |
| --ui-goods-card-o-price-size | font-size | 划线价字体大小 | 24rpx |
| --ui-goods-card-o-price-margin | margin | 划线价margin | 0 |
| --ui-goods-card-o-price-display | --ui-price-display | - | - |
| --ui-goods-card-o-price-color | --ui-price-color | - | - |
| --ui-goods-card-o-price-size | --ui-price-size | - | - |
| --ui-goods-card-o-price-weight | --ui-price-weight | - | - |
| --ui-goods-card-o-price-decoration | --ui-price-decoration | - | - |
| --ui-goods-card-o-price-symbol-color | --ui-price-symbol-color | - | - |
| --ui-goods-card-o-price-symbol-size | --ui-price-symbol-size | - | 20rpx |
| --ui-goods-card-o-price-pprice-margin | --ui-price-pprice-margin | - | - |
| --ui-goods-card-o-price-integer-color | --ui-price-integer-color | - | - |
| --ui-goods-card-o-price-integer-size | --ui-price-integer-size | - | - |
| --ui-goods-card-o-price-decimal-color | --ui-price-decimal-color | - | - |
| --ui-goods-card-o-price-decimal-size | --ui-price-decimal-size | - | 20rpx |
| --ui-goods-card-number-order | order | 数量order | 4 |
| --ui-goods-card-number-size | font-size | 数量字体大小 | 24rpx |
| --ui-goods-card-number-color | color | 数量颜色 | #999 |
| --ui-goods-card-number-margin | margin | 数量margin | 20rpx 0 0 auto |
| --ui-goods-card-cart-order | order | 购物车order | 3 |
| --ui-goods-card-cart-margin | margin | 购物车margin | auto 0 0 auto |
| --ui-goods-card-cart-position | position | 购物车position | - |
| --ui-goods-card-cart-bottom | bottom | 购物车bottom | - |
| --ui-goods-card-cart-right | right | 购物车right | - |