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

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

Package detail

@retailwe/ui-promotion-detail

readme

promotion-detail 促销详情页

引入

API

Props

Good

StatusTag(Enum)

Slot

Events

外部样式类

代码演示

基础用法

展示倒计时及规则描述

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