coupon-list 优惠券列表

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
{
  "usingComponents": {
    "wr-coupon-list": "@retailwe/ui-coupon-list/index"
  }
}

代码演示

普通

<wr-coupon-list data="{{[]}}" />

滚动

<wr-coupon-list data="{{[]}}" maxHeight="{{100}}" />

自定义优惠券组件

基础库版本: 1.9.6

对coupon-card有 slot 设定需求或数据有自定义时，可以本地建立一个 biz(业务)相关的修改版组件，自定义组件接受到所有CouponCard的值以及它在数组内的 index

<!-- ./custom-coupon-card/index.wxml -->
<view class="{{class}}">
  <wr-coupon-card status="{{status}}" type="{{type}}" tag="{{tag}}" value="{{value}}" desc="{{desc}}" title="{{title}}" time-limit="{{timeLimit}}" currency="{{currency}}">
    <view slot="operator">
      <view
        data-key="{{key}}"
        data-index="{{index}}"
        data-list="{{list}}"
        data-item="{{item}}"
      >渲染时会额外传入这里数据，方便扩展数据结构，做进一步状态自定义</view>
    </view>
  </wr-coupon-card>
</view>

{
  "usingComponents": {
    "custom-coupon-card": "./custom-coupon-card/index"
  }
}

<wr-coupon-list data="{{[]}}" generic:coupon-card="custom-coupon-card" />

API

Types

export enum CouponCardStatus {
  /** 普通 */
  default = "default",
  /** 不可用 */
  useless = "useless",
  /** 禁用 */
  disabled = "disabled",
}
export enum CouponCardType {
  /** 折扣 */
  discount = "discount",
  /** 满减（其他） */
  price = "price",
}
export interface CouponCard {
  /** key */
  key: string;
  /** 优惠券状态 */
  status: CouponCardStatus;
  /** 优惠券类型 */
  type: CouponCardType;
  /** 折扣或者满减值 */
  value: string;
  /** 标签 */
  tag: string;
  /** 描述 */
  desc: string;
  /** 标题 */
  title: string;
  /** 有效时间限制 */
  timeLimit: string;
  /** 货币符号 */
  currency: string;
}

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ---------- | ------------------------------------------------------------- | -------------- | ------ | ---- | | data | 列表数据 | CouponCard[] | [] | - | | max-height | 列表最大高度, rpx, 向下取整;优先级低于i-style(如有冲突) | number | -1 | - | | i-class | 自定义 class | string | '' | - | | i-style | 自定义 style | string | '' | - |

外部样式类

| 类名 | 说明 | | ------------ | ------------------ | | wr-class | 根节点外部样式类 | | coupon-class | 优惠券根节点样式类 |

slot

| name | 说明 | | -------- | ------------- | | list-top | 附加在列表顶部 | | list-end | 附加在列表尾部 |