@ax-components/coupon-modal

翱象小程序优惠券爆屏组件

组件 props

注意组件仅接收一个 outerProps 作为唯一的入参，其接口定义为

interface IOuterProps {
  /**
   * 同翱象聚客宝侧定义的用户 id
   */
  mixUserId: string;
  /**
   * 处理爆屏组件状态改变的回调：loading - 开始加载数据，none - 疲劳度中或者请求失败，close - 手动关闭，display - 有数据，展示出来
   */
  onStatusChange?: (status: 'loading' | 'none' | 'close' | 'display') => void;
  /**
   * 处理点击券事件的回调，参数为对应优惠券信息
   */
  handleClickCoupon?: (coupon: ICoupon) => void;
  /**
   * 处理点击立即领取事件的回调，参数为优惠券列表
   */
  handleClickUseImmediately?: (coupons: ICoupon[]) => void;
  /**
   * 处理关闭爆屏的回调，返回值如果为 true 则不会自动关闭以及触发状态改变回调
   */
  handleClose?: () => boolean;
}

interface ICoupon {
  /**
   * 券模板 id
   */
  couponId: number;
  /**
   * 券 logo
   */
  logo: string;
  /**
   * 券标题
   */
  couponTitle: string;
  /**
   * 券描述
   */
  desc: string;
  /**
   * 券金额，单位是分
   */
  amount: number;
  /**
   * 券门槛，单位是分
   */
  startFee: number;
  /**
   * 是否为需要手动领的券
   */
  picked: boolean;
  /**
   * 券类型
   */
  type: null | string;
  /**
   * 券类型名称
   */
  typeName: null | string;
  /**
   * 使用开始时间
   */
  startTime: string;
  /**
   * 使用结束时间
   */
  endTime: string;
  /**
   * 使用渠道文案
   */
  useChannel: string | null;
  /**
   * 折扣率（类型为折扣券）
   */
  discountRate: string | null;
}

埋点相关

组件内部会处理一些埋点事件的上报，会尝试调用 getApp() 获取 app.globalData.trace 实例，具体可参考 翱象前端埋点 SDK

微信小程序使用

安装

如当前小程序项目中暂无 package.json 则需要手动创建或执行

npm init

来初始化 package.json

然后在小程序项目中执行

npm i -S @ax-components/coupon-modal

来进行安装

声明组件

在需要应用的页面的 index.json 中添加配置项

{
  "usingComponents": {
    "coupon-modal": "@ax-components/coupon-modal"
  }
}

构建 npm

点击 微信开发者工具 → 工具 → 构建 npm 来进行构建，详细信息可参考 微信 npm 支持

引入

在对应页面的 index.wxml 中按以下方式引入即可

<!--index.wxml-->
<coupon-modal outer-props="{{modalProps}}" />

支付宝小程序

待补充