@retailwe/ui-coupon-popup v0.0.21

优惠券弹出框

引入

"usingComponents": {
  "wr-coupon-popup": "@retailwe/ui-coupon-popup/index"
}

代码演示

默认模式
  <wr-coupon-popup show="{{isShowCouponPop}}" wr-class="coupon-popup"  list="{{couponList}}" bind:closeCouponPopup="closeCouponPopup" bind:couponTap="couponChange" />

自定义优惠券组件模式
<wr-coupon-popup show="{{isShowCouponPop}}" wr-class="coupon-popup" isSlotCoupon="{{true}}" bind:closeCouponPopup="closeCouponPopup" bind:couponChange="couponChange">
<view slot="coupon-list">
    <view class="coupon-card" wx:for="{{coupons}}" wx:if="{{index < 10}}" wx:key="index">
    <coupon-card couponDTO="{{item}}" />
    </view>
</view>
<view slot="coupon-bottom" class="to-gain-center" wx:if="{{coupons.length > 10}}" bind:tap="toUserCenter">
    <view>领券中心查看更多</view>
    <wr-icon class="icon" name="arrow" size="24" />
</view>
</wr-coupon-popup>

enum CouponCardStatus {
  /** 普通 */
  default = 'default',
  /** 不可用 */
  useless = 'useless',
  /** 禁用 */
  disabled = 'disabled',
}

enum ButtonType {
  normal = 'normal',
  disabled = 'disabled',
}

interface CouponListItem { 
  /** 优惠券状态 */
  status: CouponCardStatus;
  /** 优惠券类型 */
  type: string;
  /** 折扣或者满减值 */
  value: string;
  /** 标签tag地址 */
  tag: string;
  /** 描述 */
  desc: string;
  /** 标题 */
  title: string;
  /** 有效时间限制 */
  timeLimit: string;
  /** 货币符号 */
  currency: string;
  /** 优惠券状图案 */
  sealImg: string;
  /** 按钮类型，正常或禁用 */
  buttonType: ButtonType;
  /** 操作按钮文案 */
  buttonText: string;
}

入参

Events

外部样式类

slot