@szbbt/custom

bbt-custom

宝贝团定制化插件，可预置组件、专题页实现活动快速上线。 这是基于 Vue2.x 实现的插件

一、安装

需要Node.js（>= 8.x）

$ npm install @szbbt/custom

1、导入插件

import custom from '@szbbt/custom'

2、组件点击事件注册

# @param  {Number} actionRadio  1-新窗口打开链接 2-当前页跳转 3-打开充值/订购弹窗+
# @param  {String} link  链接
# @param  {String} popupType  'recharge'-充值 'order'-订购
# @param  {String} traceText  埋点文案
custom.on('handle',function(config){
    const { actionRadio, link, popupType, traceText } = config
})

3、专题页翻牌正面去使用点击事件注册

# @param  {String} type  奖品类型，由后台配置
custom.on('toUse',function(type){
    
})

4、埋点事件传入

# @param  {String} content  埋点文案
custom.on('trace',function(content){
    
})

5、初始化userCode(CMS后台-使用说明获取Code)及当前用户标识customerSign，安装插件

const initCustom = async (Vue) =>{
    ......
    custom.userCode = '你的code'
    custom.customerSign = await getCustomSign()   //getCustomSign返回业务系统的用户标识，比如nick或者userId，用于判断对应用户展现的物料
    Vue.use(custom.install())
}

二、插件使用

main.js导入初始化插件方法initCustom，注意使用async await在vue实例化之前调用initCustom()

1、组件使用

# @param  {Number} bId  展位id，根据后台配置选择对应展位(必填)
# @param  {Number} expirateDay  到期天数(选填)
<bbt-component :bId="1"/> 
# 或者插入自定义内容：
<bbt-component :bid="2">
    <!-- 自定义插入内容 -->
</bbt-component>

2、专题页使用

 /** 
 # @method  pokerCBK  翻牌任务回调
 #          @param  {String} taskName  任务类型
 #          @param  {Function}  update  更新抽奖机会及任务完成状态的回调函数
 # @method  milepostCBK  消耗返任务回调
 */

<bbt-actpage @pokerCBK="handle" @milepostCBK="updateAmount"/>
handle(taskName,update){
    switch(taskName)
    update()
}
updateAmount(){
    # 更新账户余额、消耗量
}

 /** 
 # 专题页还提供了各模块的插槽:
 # 翻牌模块：poker；消耗返模块：milepost；任务列表：task；翻牌记录：history；
 # 获奖名单：winners；充值：recharge；自定义物料：custom；
 # 使用示例如下：
 */
<bbt-actpage @doTask="handle">
    <template #recharge>
        <!-- 自定义插入内容 -->
    </template>
</bbt-actpage>

三、活动管理后台

前往后台注册登录，配置物料、展位、人群、专题页模板，开始活动投放吧~