@retailwe/ui-coupon-popup

优惠券弹出框

引入

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

入参

参数	说明	类型	默认值	是否必要
list	优惠券数据	CouponListItem[]	[]	否
show	显示隐藏	Boolean	false	否
title	弹窗标题	String	优惠券	否
isSlotCoupon	是否开启组件插槽， 开启后不需要传入 list	Boolean	false	否

Events

事件	是否必要	说明
closeCouponPopup	是	关闭弹窗
couponTap	否	默认模式下，点击优惠券操作按钮，回调当前点击优惠券的索引 index

外部样式类

类名	说明
wr-class	根节点样式类

slot

name	说明
coupon-list	自定义优惠券组件插槽
coupon-bottom	弹出窗底部插槽