优惠券弹出框

引入

"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 | 弹出窗底部插槽 |