springboot_vue_xhs/web/src/views/dashboard/index.vue

<template>
  <div class="dashboard-container">

  </div>
</template>

<script>
  export default {
    name: 'Dashboard',
    data() {
      return {
        user:{id:1,displayName:'June',avatar:''}
    }
    },
    mounted(){
      const { IMUI } = this.$refs;
      //初始化表情包。
      //从后端请求联系人数据，包装成下面的样子
      const contacts = [{
        id: 2,
        displayName: '丽安娜',
        avatar:'http://8.146.211.120:8080/upload/notes/note (6).jpg',
        index: 'L',
        unread: 0,
        //最近一条消息的内容，如果值为空，不会出现在“聊天”列表里面。
        //lastContentRender 函数会将 file 消息转换为 '[文件]', image 消息转换为 '[图片]'，对 text 会将文字里的表情标识替换为img标签,
        lastContent: IMUI.lastContentRender({type:'text',content:'你在干嘛呢？'}),
        //最近一条消息的发送时间
        lastSendTime: 1566047865417
      }];
      IMUI.initContacts(contacts);
    },
    methods: {
      handleSend(message, next, file) {
        console.log('发送了信息')
        //执行到next消息会停止转圈，如果接口调用失败，可以修改消息的状态 next({status:'failed'});
        next();
      },
      handlePullMessages(contact, next) {
        console.log('拉取信息')
        //从后端请求消息数据，包装成下面的样子
        const messages = [{
          id: '唯一消息ID',
          status: 'succeed',
          type: 'text',
          sendTime: 1566047865417,
          content: '你什么才能对接完？',
          toContactId: contact.id,
          fromUser:this.user
        }]
        //将第二个参数设为true，表示已到末尾，聊天窗口顶部会显示“暂无更多消息”，不然会一直转圈。
        next(messages,true);
      },
    }

  }
</script>