0.0.20 • Published 3 years ago
Share package 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 verticalhorizontal横向-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>