npm package: @retailwe/ui-promotion-detail
Description: 通过简单开关及 banner 指定可快速做好一个促销详情页；同时拥有可观的扩展性
Latest version: 0.0.20

# promotion-detail 促销详情页

通过简单开关及 banner 指定可快速做好一个促销详情页；同时拥有可观的扩展性

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
{
  "usingComponents": {
    "wr-promotion-detail": "@retailwe/ui-promotion-detail"
  }
}
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 | 说明 |
| ---------------------- | --------------------------------------- | ----------- | --------------------------- | ------------------------------------------------------------ |
| class | 根节点 class | _string_ | `` | - |
| id | 根节点 id | _string_ | `promotion-detail-88888888` | 默认取`promotion-detail-${~~(Math.random() * 10 ** 8)}` |
| cd-class | 倒计时 组件根节点 class | _string_ | `` | - |
| style | 根节点 style | _string_ | `` | - |
| banner-src | banner 图片链接 | _string_ | - | 必传，务必完整带 https:// |
| banner-width | banner 图片布局宽度，参照 ui-image 组件 | _number_ | 702 | - |
| banner-height | banner 图片布局宽度，参照 ui-image 组件 | _number_ | 160 | - |
| show-banner-desc | 是否展示 banner 下方的规则显示区域 | _boolean_ | `false` | 设为 true 后倒计时将在 desc 节点处展示 |
| status-tag | 活动状态 | _StatusTag_ | `` | 不传或传空则不显示；设置为已结束会显示已结束文案不展示倒计时 |
| banner-desc-icon-color | 规则箭头 icon 颜色 | _string_ | `#fff` | - |
| use-banner-desc-slot | banner-desc 是否由 slot 指定 | _boolean_ | `false` | 设为 true 后将自行控制/负责描述及倒计时渲染 |
| cd-time | 初始倒计时，毫秒 | _number_ | `-1` | 不传或初始值传 -1 则不展示倒计时 |
| gl-goods-list | 商品列表数据源 | _array_ | - | 必传，结构参考下方说明 |
| gl-layout | 卡片布局 | _string_ | `vertical` | `horizontal` | 横向-`horizontal`、横向&价格与标题不同行-`horizontal-wrap`、纵向-`vertical` |
| gl-price-fill | 价格是否保持两位小数 | _boolean_ | `false` | - |
| gl-lazy-load | 是否开启图片懒加载 | _boolean_ | `true` | - |
| use-gl-empty-slot | 是否自定义商品空状态展示 | _boolean_ | `false` | - |

### 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[]* | - | 选填 |
| price | 商品价格，单位分，整数 | *number* | - | 选填 |
| originPrice | 商品划线价格，单位分，整数 | *number* | - | 选填 |
| hideKey | 传入哪个key，哪个key对应的内容就则不显示 | *Record<keyof Good, boolean>* | - | 选填 |
| currency | 货币符号 |  *string* | `¥` | - |
| [string] | 其他任意键值, 扩展结构用于其他业务目的 | *any* | - | 选填 |

### StatusTag(Enum)

| 参数 | 说明 |
| ------- | ------ |
| before | 未开始 |
| running | 进行中 |
| finish | 已结束 |

### Slot

| 名称 | 说明 |
| ------------- | ----------------------------------------------------------- |
| banner-action | 自定义 banner 点击区域 |
| banner-desc | 自定义 banner 描述区域，设置了`use-banner-desc-slot`后生效 |
| gl-empty | 自定义 商品列表空状态 渲染，设置了`use-gl-empty-slot`后生效 |

### Events

| Event | Description | Arguments |
| ----------------- | ---------------------------- | --------- |
| banner-desc-click | 点击 banner 查看规则按钮触发 | - |
| cd-finish | 倒计时结束 | - |
| gl-thumb | 点击商品预览图触发 | { ...goods-list.thumb } |
| gl-specs | 点击商品规格显示区触发 | { ...goods-list.specs } |
| gl-tag | 点击商品标签触发 | { ...goods-list.tag } |
| gl-addcart | 点击商品加购按钮触发 | { ...goods-list.addcart } |
| gl-click | 点击商品卡片触发 | { ...goods-list.click } |

### 外部样式类

| 类名 | 说明 |
| --------------- | ------------------------- |
| wr-class | 根节点样式类 |
| wr-banner-class | banner 节点样式类 |
| wr-gl-class | 商品列表 组件根节点样式类 |
| wr-gl-title-class | 商品列表 title 节点样式类 |
| wr-gl-desc-class | 商品列表 desc 节点样式类 |
| wr-gl-num-class | 商品列表 num 节点样式类 |
| wr-gl-thumb-class | 商品列表 预览图 样式类 |
| wr-gl-specs-class | 商品列表 规格节点样式类 |
| wr-gl-price-class | 商品列表 price 节点样式类 |
| wr-gl-origin-price-class | 商品列表 原价 price 节点样式类 |
| wr-gl-price-prefix-class | 商品列表 价格前附加字符 样式类 |
| wr-cd-class | 倒计时 组件根节点样式类 |

## 代码演示

### 基础用法

```xml
<wr-promotion-detail banner-src="" gl-goods-list="{{[]}}"></wr-promotion-detail>
```

### 展示倒计时及规则描述

```typescript

```

```xml
<wr-promotion-detail show-banner-desc="{{true}}" banner-src="" gl-goods-list="{{[]}}" cd-time="{{1000 * 60 * 60 * 24 * 3}}" bind:banner-desc-click=""></wr-promotion-detail>
```

### 自定义 banner 点击及规则描述区域 slot

```xml
<wr-promotion-detail banner-src="" use-banner-desc-slot="{{true}}" gl-goods-list="{{[]}}">
  <block slot="banner-action"><text>hello, here is banner-action</text></block>
  <block slot="banner-desc"><text>hello, here is banner-desc</text></block>
</wr-promotion-detail>
```