promotion-detail 促销详情页

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

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.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 | 倒计时 组件根节点样式类 |

代码演示

基础用法

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

展示倒计时及规则描述

<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

<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>