live-welcome 直播间用户行为提示组件

用户行为提示组件，组件已内置队列处理逻辑，每2.2s执行一次动画，可以有效防止消息堆积问题。同时可以自定义配置信息，修改动画文案和背景。

引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-live-welcome": "@retailwe/ui-live-welcome/index"
}

代码演示

基础用法

  <!-- 默认配置信息 -->
  <wr-live-welcome id="wr-live-welcome"></wr-live-welcome>
  <!-- 自定义配置信息 -->
  <wr-live-welcome id="wr-live-welcome" typeMap="{{customSetting}}"></wr-live-welcome>

  Page({
  welcomeContext: null,
  intervalTimer: null,
  index: 0,
  data: {
    customSetting: CUSTOM_SETTING, // 自定义配置信息
  },
  // 组件数据
  defaultData: DEFAULT_DATA,
  onReady() {
    if (!this.intervalTimer) {
      // 模拟消息提示，每2s将新消息放入队列
      (this.intervalTimer as any) = setInterval(() => {
        // 获取live-welcome组件示例，调用`pushWelcome`方法将消息放入队列。
        (this.getWelcomeContext() as any).pushWelcome(
          this.defaultData[this.index % 6],
        );
        this.index++;
      }, 2000);
    }
  },
  onUnload() {
    if (this.intervalTimer) {
      clearInterval(this.intervalTimer as any);
      this.intervalTimer = null;
    }
  },
  // 获取welcome组件实例
  getWelcomeContext() {
    if (!this.welcomeContext) {
      (this.welcomeContext as any) = this.selectComponent('#wr-live-welcome');
    }
    return this.welcomeContext;
  },
});

示例配置信息

本组件默认配置方案如下，以数组形式展示。

• 其中数组的索引与type值相对应，1 - 有人来了； 2 - 用户关注了号主；3 - 分享了直播；4 - 商品感兴趣；5 - 购买； 6 - 购买了某种商品；
• 对每个item来说，可以设置bgColor,text,iconIndex三个属性。
  • bgColor：表示本动画的背景颜色。
  • text：表示本动画的文本信息，比如 “***进入直播间” ，“已购买”等等。
  • iconIndex：表示内置图标的索引号，取值范围为1-5，其中，1-订阅，2-分享，3-感兴趣，4-抢购，5-购买。

具体效果可参考:

const CLIENT_ACTION_TYPES_MAP = [
  {},
  {
    bgColor: 'rgba(90, 102, 255, 0.9)',
    text: '来了',
  },
  {
    bgColor: 'rgba(25, 207, 201, 0.7)',
    text: '关注了号主',
    iconIndex: 1,
  },
  {
    bgColor: 'rgba(39, 191, 71, 0.7)',
    text: '分享了直播',
    iconIndex: 2,
  },
  {
    bgColor: 'rgba(255, 142, 27, 0.7)',
    text: '对商品感兴趣',
    iconIndex: 3,
  },
  {
    bgColor: 'rgba(255, 84, 46, 0.7)',
    text: '正在抢购',
    iconIndex: 4,
  },
  {
    bgColor: 'rgba(255, 48, 86, 0.7)',
    text: '已购买',
    iconIndex: 5,
  },
];

示例数据

示例数据需与示例配置信息相对应，有nick、type、ext三个属性。

• nick: 用户昵称。 比如“春风里 来了”，“春风里”就是nick值，“来了”是示例配置信息中的text值所设置的。
• type：表示类型，与示例配置信息数组的索引相对应，比如取值为1，表示取CLIENT_ACTION_TYPES_MAP[1]中的配置。
• ext： 拓展信息，常用于补充，比如“春风里 购买了 红色连衣裙”，“春风里”就是nick值，“购买了”是示例配置信息中的text值所设置的，而“红色连衣裙”就是ext属性值。

注意: nick和type是必填项，ext是可选项，更多配置可以参考下面示例自行理解。

// 示例数据
// type类型： 1 - 有人来了； 2 - 用户关注了号主；3 - 分享了直播；4 - 商品感兴趣；5 - 购买； 6 - 购买了某种商品
export const DEFAULT_DATA = [
  {
    nick: '今天天气真晴朗',
    type: 1,
  },
  {
    nick: '开大奔上故宫',
    type: 2,
  },
  {
    nick: '春风里',
    type: 3,
  },
  {
    nick: 'Canvas才是最佳技术实践方案',
    type: 4,
  },
  {
    nick: '月兔捣年糕',
    type: 5,
  },
  {
    nick: '猪***猪',
    type: 6,
    ext: '气质连衣裙',
  },
];

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | typeMap | 自定义配置信息，定义动画的类型文本、背景颜色。系统已经内置一套默认值 | Array | - | - | | id | 用于父组件获取本组件实例，调用本组件的pushWelcome方法将消息加入队列 | String | - | - |