Coupon
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
{
"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
<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
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
.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 |
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 |
moreHide | Boolean | No | An indicator of whether to display the rules on how use the coupon in detail. The default value is |
used | Boolean | No | An indicator of whether the coupon is valid. The default value is |
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. |