npm package: @retailwe/ui-live-welcome
Description: 用户行为提示组件，**组件已内置队列处理逻辑，每2.2s执行一次动画，可以有效防止消息堆积问题**。同时可以自定义配置信息，修改动画文案和背景。
Latest version: 0.1.4

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

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

## 引入

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

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

## 代码演示

### 基础用法

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

```js
  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-购买。

具体效果可参考:
 ![图片](https://cdn.qs.qq.com/mp/live/welcome-example.png)

```js
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`是可选项**，更多配置可以参考下面示例自行理解。

```js
// 示例数据
// 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* | - | - |