Coupon

2021-07-21 11:23

You can use the coupon component to display the coupon, red packet, and ticket that can be redeemed by users.

Sample code

See the sample codes in different languages:

.json

copy

{

  "defaultTitle": "Coupon",

  "usingComponents":{

    "coupon":"mini-ali-ui/es/coupon/index",

    "button": "mini-ali-ui/es/button/index",

    "am-checkbox": "mini-ali-ui/es/am-checkbox/index",

    "stepper": "mini-ali-ui/es/stepper/index"

  }

}

.axml

copy

<view style="margin-top: 10px;"></view>

<view>

  <coupon title="coupon title1"

    onCouponClick="onCouponClick" 

    thumb="{{thumb}}">

  </coupon>

</view>

<view>

  <coupon title="coupon title2" 

    subtitle="coupon subtitle" 

    onCouponClick="onCouponClick" 

    thumb="{{thumb}}">

  </coupon>

</view>

<view>

  <coupon title="coupon title3" 

    subtitle="coupon subtitle" 

    used="{{true}}"

    onCouponClick="onCouponClick" 

    thumb="{{thumb}}">

    <view slot="date">Valid period：2020.02.14-2020.02.29</view>

    <view slot="detail" class="coupon_rule">

      <text>1. Rule details；</text>

      <text>2. Rule details；</text>

    </view>

  </coupon>

</view>

<view>

  <coupon title="coupon title4" 

    subtitle="coupon subtitle" 

    onCouponClick="onCouponClick"

    thumb="{{thumb}}">

    <view slot="category" class="categoryDemo">

      <text class="price">50</text><text class="unit">CNY Yuan</text><text class="type">money off coupon</text>

    </view>

    <button shape="capsule" slot="action" onTap="onButtonTap" type="ghost">Use immediately</button>

    <view slot="date">Valid period：2020.02.14-2020.02.29</view>

    <view slot="detail" class="coupon_rule">

      <text>1. Rule details；</text>

      <text>2. Rule details；</text>

    </view>

  </coupon>

</view>

<view>

  <coupon title="coupon title5" 

    subtitle="coupon subtitle" 

    onCouponClick="onCouponClick"

    extra="{{false}}"

    thumb="{{thumb}}">

    <button shape="capsule" slot="action" onTap="onButtonTap" type="ghost">Use immediately</button>

    <view slot="date">Valid period：2020.02.14-2020.02.29</view>

    <view slot="detail" class="coupon_rule">

      <text>1. Rule details；</text>

      <text>2. Rule details；</text>

    </view>

  </coupon>

</view>

<view>

  <coupon title="coupon title6" 

    subtitle="coupon subtitle" 

    onCouponClick="onCouponClick" 

    thumb="{{thumb}}"

  >

    <button shape="capsule" slot="action" onTap="onButtonTap" type="ghost">Use immediately</button>

  </coupon>

</view>

<view>

  <coupon title="coupon title7" 

    subtitle="coupon subtitle"

    moreBtn="see more"

    moreHide="{{false}}"

    onCouponClick="onCouponClick" 

    thumb="{{thumb}}">

    <button shape="capsule" slot="action" onTap="onButtonTap" type="primary">Use immediately</button>

    <view slot="date">vadility：2020.02.14-2020.02.29</view>

    <view slot="detail" class="coupon_rule">

      <text>1. Rule details；</text>

      <text>2. Rule details；</text>

    </view>

  </coupon>

</view>

<view>

  <coupon title="coupon title8" 

    subtitle="coupon subtitle" 

    onCouponClick="onCouponClick" 

    thumb="{{thumb}}">

    <am-checkbox slot="action" onTap="onButtonTap" />

  </coupon>

</view>

<view>

  <coupon title="coupon title9" 

    subtitle="coupon subtitle" 

    onCouponClick="onCouponClick" 

    thumb="{{thumb}}">

    <stepper

      slot="action"

      step="{{1}}"

      showNumber

      min="{{2}}"

    />

  </coupon>

</view>

<view style="margin-top: 50px;"></view>

.js

copy

Page({
  data: {
    thumb: 'https://example.com/mdn/rms_ce4c6f/afts/img/A*b-kqQ4RZgsYAAAAAAAAAAABkARQnAQ',
  },
  onCouponClick(e) {
    if (e.currentTarget.dataset.used) {
      return false;
    } else {
      my.alert({
        content: 'available coupons, The coupon clicks the event',
      });
    }
  },
  onButtonTap() {
    my.alert({
      content: 'The capsule button clicks the event',
    });
  },
});

.acss

copy

.container {

  padding-bottom: 50px;

}

.coupon_rule text {

  display: block;

  margin-bottom: 8rpx;

}


/* the style of rights and interests content on the left slot="category" */

.categoryDemo {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-content: center;

  align-items: baseline;

  align-self: flex-start;

}

.categoryDemo .price {

  font-size: 60rpx;

  color: #FF6010;

}

.categoryDemo .unit {

  padding-left: 4rpx;

  font-weight: bold;

  font-size: 26rpx;

  color: #FF6010;

}

.categoryDemo .type {

  flex: 1 1 100%;

  text-align: center;

  font-size: 22rpx;

  color: #999;

}

Parameters

Property	Type	Required	Description
thumb	String	No	URL of the coupon thumbnail image.
title	String	Yes	Coupon title.
subTitle	String	No	Coupon subtitle.
onCouponClick	Function	No	The event that is triggered when uses tap the coupon.
extra	Boolean	No	An indicator of whether to display the coupon extended information on the left. The default value is `true`.
moreBtn	String	No	The clickable text. After clicking the text, users can view rules on how use the coupon in detail. The default value is `More`.
moreHide	Boolean	No	An indicator of whether to display the rules on how use the coupon in detail. The default value is `true`.
used	Boolean	No	An indicator of whether the coupon is valid. The default value is `false`.

slots

Slot name	Description
action	The slot on the right side of the coupon. After clicking the slot, users can use the coupon.
date	The slot for the expiry time of the coupon.
detail	The slot that is used to display rules on how to use the coupon in detail.
category	The slot on the left of the coupon, which is used to display the coupon type.