npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ax-components/coupon-modal

v0.1.1

Published

翱象小程序爆屏组件

Downloads

38

Readme

@ax-components/coupon-modal

npm

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

组件 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}}" />

支付宝小程序

待补充