@retailwe/ui-coupon-card NPM

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