@ax-components/coupon-modal
v0.1.1
Published
翱象小程序爆屏组件
Downloads
38
Readme
@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}}" />
支付宝小程序
待补充