coupon-card 优惠券卡片

引入

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

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

代码演示

满减

<wr-goods-card value="5.5" desc="无门槛使用" title="生鲜满减满折" timeLimit="2019.11.18至2019.12.18" />

满折

Page({
  data: {
    discountTag:
      'https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/miniapp/coupon/coupon-descount.png',
    priceTag:
      'https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/miniapp/coupon/coupon-price.png',
  },
});

<wr-goods-card type="price" value="18" tag="{{priceTag}}" desc="满800元使用" title="生鲜满减满折" timeLimit="2019.11.18至2019.12.18">
  <view slot="operator">
    <radio></radio>
  </view>
</wr-goods-card>

不可操作

<wr-goods-card status="useless" type="price" value="18" tag="{{priceTag}}" desc="满800元使用" title="生鲜满减满折" timeLimit="2019.11.18至2019.12.18">
  <view slot="operator">
    <radio></radio>
  </view>
</wr-goods-card>
<wr-goods-card status="disabled" type="price" value="18" tag="{{priceTag}}" desc="满800元使用" title="生鲜满减满折" timeLimit="2019.11.18至2019.12.18">
  <view slot="operator">
    <radio></radio>
  </view>
</wr-goods-card>

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | status | 优惠券状态 | string | default | default-普通, useless-不可用 | | type | 优惠券类型 | string | discount | discount-折扣, 其他值-满减 | | value | 折扣或者满减值 | string | - | - | | tag | 标签 | string | - | - | | desc | 描述 | string | - | - | | title | 标题 | string | - | - | | timeLimit | 有效时间限制 | string | - | - | | currency | 货币符号 | string | ¥ | - |

coupon-card 外部样式类

| 类名 | 说明 | |-----------|-----------| | coupon-class | 根节点外部样式类 |