Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@retailwe/ui-promotion-detail

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

readme

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>

自定义 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>