tms-checkin 出行服务签到抽奖活动组件

目录 [TOC]

一、目录结构说明

├── common                     # 签到活动模块公共文件(支付功能，消息订阅，请求发送，数据格式化)
├── components                 # 签到活动模块组件
│   ├── scene-main             # 活动主会场组件
│   ├── scene-codes            # 抽奖码列表组件
│   ├── scene-present          # 到店有礼领取礼物组件
│   ├── scene-shop             # 到店有礼店铺组件
└── vendor.js                  # 签到活动模块外部依赖
├── README.md                  # 签到活动模块说明文档

二、组件外部依赖

类型	名称	依赖包	使用页面
框架	tmsCore	@tmsfe/tms-core	全局
组件	loading	@tmsfe/tms-ui/loading/index	抽奖码列表页面
组件	navbar	@tmsfe/tms-ui/navbar/index	活动首页

三、使用说明

3.1、配置活动信息

• 通过 TMSGO 运营平台 http://tmsgo.woa.com/activities/livelottery/manage

(测试环境：http://tmsgo.testsite.woa.com/activities/livelottery/manage)

• 按需求新建活动（示例如下）：

3.2、目标小程序引入抽奖组件

• 小程序 wxml 文件引入自定义组件:

<tms-checkin-scene-main options="{{options}}" class="checkin"></tms-checkin-scene-main>

参数名称	参数类型	是否必传	说明
code	String	是	活动编号
roomId	String	否	直播活动房间号
from	String	否	渠道来源标识

• 小程序 js 文件可自定义传入的活动 id 和页面分享文案:

Page({
  data: {
    options: {},
  },
  onLoad(options){
    this.setData({ options });
  },
  // 分享逻辑
  onShareAppMessage() {
    const { code, roomId, from } = this.data?.options || {};
    const checkin = this.selectComponent('.checkin');
    return {
      title: '0元抽汽车，每天点一下，梦想能成真',
      path: `/modules/operating/checkin/pages/index/index?from=${from}&roomId=${roomId}&code=${code}`,
      imageUrl: checkin?.data?.promotionCfg?.shareImage,
    };
  },
});

• 页面访问示例

  /modules/operating/checkin/pages/codes/codes?code=xxx

注：抽奖码和到店有礼的组件使用方式雷同

四、消息订阅说明

配置签到活动相关的订阅消息id时，区分几种状态： checkin.all 表示全部消息（每日签到提醒、获得抽奖码通知、直播开奖通知） checkin.remind 表示每日提醒消息（每日签到提醒、获得抽奖码通知） checkin.draw 表示仅订阅直播开奖消息（直播开奖通知）