支付寶小程序擴展組件 票券·Coupon

票券組件可應用于各種優(yōu)惠券、紅包、票等可兌換利益的虛擬資產。

掃碼體驗

示例代碼

{


  "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"


  }


}

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


<view>


  <coupon title="券標題1"


    onCouponClick="onCouponClick" 


    thumb="{{thumb}}">


  </coupon>


</view>


<view>


  <coupon title="券標題2" 


    subtitle="券副標題" 


    onCouponClick="onCouponClick" 


    thumb="{{thumb}}">


  </coupon>


</view>


<view>


  <coupon title="券標題3" 


    subtitle="券副標題" 


    used="{{true}}"


    onCouponClick="onCouponClick" 


    thumb="{{thumb}}">


    <view slot="date">有效期：2020.02.14-2020.02.29</view>


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


      <text>1、詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明；</text>


      <text>2、詳細規(guī)則說明詳細規(guī)則說明規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明；</text>


    </view>


  </coupon>


</view>


<view>


  <coupon title="券標題4" 


    subtitle="券副標題" 


    onCouponClick="onCouponClick"


    thumb="{{thumb}}">


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


      <text class="price">50</text><text class="unit">元</text><text class="type">滿減券</text>


    </view>


    <button shape="capsule" slot="action" onTap="onButtonTap" type="ghost">立即使用</button>


    <view slot="date">有效期：2020.02.14-2020.02.29</view>


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


      <text>1、詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明；</text>


      <text>2、詳細規(guī)則說明詳細規(guī)則說明規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明；</text>


    </view>


  </coupon>


</view>


<view>


  <coupon title="券標題5" 


    subtitle="券副標題" 


    onCouponClick="onCouponClick"


    extra="{{false}}"


    thumb="{{thumb}}">


    <button shape="capsule" slot="action" onTap="onButtonTap" type="ghost">立即使用</button>


    <view slot="date">有效期：2020.02.14-2020.02.29</view>


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


      <text>1、詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明；</text>


      <text>2、詳細規(guī)則說明詳細規(guī)則說明規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明；</text>


    </view>


  </coupon>


</view>


<view>


  <coupon title="券標題6" 


    subtitle="券副標題" 


    onCouponClick="onCouponClick" 


    thumb="{{thumb}}"


  >


    <button shape="capsule" slot="action" onTap="onButtonTap" type="ghost">立即使用</button>


  </coupon>


</view>


<view>


  <coupon title="券標題7" 


    subtitle="券副標題"


    moreBtn="查看更多"


    moreHide="{{false}}"


    onCouponClick="onCouponClick" 


    thumb="{{thumb}}">


    <button shape="capsule" slot="action" onTap="onButtonTap" type="primary">立即使用</button>


    <view slot="date">有效期：2020.02.14-2020.02.29</view>


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


      <text>1、詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明；</text>


      <text>2、詳細規(guī)則說明詳細規(guī)則說明規(guī)則說明詳細規(guī)則說明詳細規(guī)則說明；</text>


    </view>


  </coupon>


</view>


<view>


  <coupon title="券標題8" 


    subtitle="券副標題" 


    onCouponClick="onCouponClick" 


    thumb="{{thumb}}">


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


  </coupon>


</view>


<view>


  <coupon title="券標題9" 


    subtitle="券副標題" 


    onCouponClick="onCouponClick" 


    thumb="{{thumb}}">


    <stepper


      slot="action"


      step="{{1}}"


      showNumber


      min="{{2}}"


    />


  </coupon>


</view>


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

Page({
  data: {
    thumb: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*b-kqQ4RZgsYAAAAAAAAAAABkARQnAQ',
  },
  onCouponClick(e) {
    if (e.currentTarget.dataset.used) {
      return false;
    } else {
      my.alert({
        content: '可用票券，票券點擊事件',
      });
    }
  },
  onButtonTap() {
    my.alert({
      content: '膠囊按鈕點擊事件',
    });
  },
});

.container {


  padding-bottom: 50px;


}


.coupon_rule text {


  display: block;


  margin-bottom: 8rpx;


}




/* 左側權益內容的樣式 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;


}

屬性

Slot