# vue-znl-chat

> chat component for vue
>
> 聊天会话通用组件

## Use

```javascript
// 组件安装
npm i vue-znl-chat --save

// 组件引入
import Vue from 'vue'
import ZnlChat from 'vue-znl-chat'
Vue.use(ZnlChat)

// 样式引入
import 'vue-znl-chat/dist/themem-default/index.css'

// template
// 会话
<znl-chat>
</znl-chat>
// 询价
<znl-inquiry>
</znl-inquiry>
```

## znl-chat

### 属性

| name                 | Description         | default | type    |
| -------------------- | ------------------- | ------- | ------- |
| visible.sync         | 是否显示会话组件            | false   | Boolean |
| close-on-click-modal | 是否可以通过点击modal层关闭聊天框 | false   | Boolean |
| contacts             | 联系人                 | {}      | Object  |
| user-info            | 好友详情                | {}      | Object  |
| address-lists        | 会话消息列表              | []      | Array   |
| chat-info            | 聊天详情                | {}      | Object  |
| self-info            | 登陆用户信息              | {}      | Object  |
| is-scroll            | 是否自动滚动到最底层（单次设置）    | true    | Boolean |
| search-paltes        | 搜索好友结果              | []      | Array   |
| system-messages      | 系统消息                | {}      | Object  |
| send-success-msg     | 发送成功后的消息实体          | {}      | Object  |
|                      |                     |         |         |
|                      |                     |         |         |
|                      |                     |         |         |

- userInfo 好友详情

  ```javascript
  {
    AllTags: [],
    AvatarUrl: '',
    CompanyName: '',
    FriendId: '',
    IsMyWork: true,
    Mobile: '',
    Name: '',
    Tags: [],
    Telephone: []
  }
  ```

- addressLists 会话消息列表

  ```javascript
  [
    {
      ConversationID: 10,
      FromUserAvartarUrl: '',
      FromUserId: '',
      FromUserName: '',
      IsOnline: true,
      MsgContent: '合作愉快',
      MsgTime: '2018-01-17T18:30:38.463',
      MsgType: 0, // 0文本 1询价 2报价
      UnreadMsgCount: 0
    }
  ]
  ```

- chatInfo 聊天详情

  ```javascript
  {
    IsFriend: true,
    IsOnline: true,
    NewestMsgList: [
      {
        FromAvatarUrl: '',
        FromCompanyName: '',
        FromMobile: '',
        FromNickName: '',
        FromTelephone: '',
        FromUserId: '',
        ID: 2396,
        IsMymessage: true,
        MsgContent: '12',
        MsgTimePhrase: '一天前',
        MsgType: 0,
        ReplyStatus: 0,
        ToUserId: ''
      }
    ]
  }
  ```

- selfInfo  登陆用户信息

  ```javascript
  {
    AvartarUrl: '',
    Name: ''
  }
  ```

  ​

- systemMessages系统消息

  ```javascript
  {
    FromUserAvartarUrl: '',
    FromUserCompanyName: '',
    FromUserId: '',
    FromUserName: '',
    RequestId: 0,
    RequestStatus: 0,
    RequestTimePhrase: ''
  }
  ```

- sendSuccessMsg

  ```javascript
  {
    FromAvatarUrl:null,
    FromCompanyName:null,
    FromMobile:null,
    FromNickName:null,
    FromTelephone:null,
    FromUserId:null,
    ID: 0,
    IsMymessage: true,
    MsgContent:"1↵",
    MsgTime:"2018-01-26T14:24:32.315777+08:00",
    MsgTimePhrase:null,
    MsgTimestamp:1516947872.3157768,
    MsgType:0,
    ReplyStatus:0,
    ToUserId:null
  }
  ```

- contacts 联系人

  ```javascript
  {
    FriendCount: 10,
    Tags: [
      {
        FriendCount: 2,
        TagName： '我的同事',
        Friends: [
          {
            AvartarUrl: '123456',
            FriendID: '123456',
            Name: '弦动我心'
          }
        ]
      }
    ]
  }
  ```

### Events

## znl-inquiry

### 属性

| name                             | Description       |
| -------------------------------- | ----------------- |
| saveUserName(val, id)            | 保存备注              |
| delete-user(id)                  | 删除好友              |
| search-palte(paltes, e)          | 前端搜索方法            |
| labls-change (type, label, info) | 标签增加add/删除 delete |
| add-blacklist(info)              | 加入黑名单             |
| cancel-blacklist(info)           | 取消黑名单             |
| add-new-plate（id）                | 加好友               |
| check-userinfo（id）               | 获取好友详情            |
| send-message（msg, id）            | 发送消息              |
| load-more（ userInfo, msgs）       | 加载更多              |
| send-message-toggle（info）        | 好友详情切换到聊天框        |
| chat-address-toggle（chatinfo）    | 聊天列表切换            |
| repulse-request(info)            | 拒绝好友申请            |
| confirm-request(info)            | 同意好友申请            |
| delete-conversation（info）        | 删除会话              |