通过简单开关及 banner 指定可快速做好一个促销详情页;同时拥有可观的扩展性
引入
全局引入,在 miniprogram 根目录下的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 |
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 |
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>