renkang_companyui/src/views/qw/qwChat/qq.vue

<template>
  <div class="app-container">
      <div class="imui-center qq-lemon-imui" v-show="showQW">
        <lemon-imui  class="lemon-slot"
          :width="windowWidth"
          :height="windowHeight"
          :user="UserData"
           ref="IMUI"  
          :contextmenu="contextmenu"
          :contact-contextmenu="contactContextmenu"
          :theme="theme"
          :hide-menu="hideMenu"
          :hide-menu-avatar="hideMenuAvatar"
          :hide-message-name="hideMessageName"
          :hide-message-time="hideMessageTime"
          :messageTimeFormat="messageTimeFormat"
          @change-menu="handleChangeMenu"
          @pull-messages="handlePullMessages"
          @change-contact="handleChangeContact"
          @message-click="handleMessageClick"
          @menu-avatar-click="handleMenuAvatarClick"
          @send="handleSend">
          <template #cover>
                <div class="cover">
                    <!-- <i class="lemon-icon-message"></i>
                    <p>
                        <b>自定义封面 Lemon</b>IMUI
                    </p> -->
                </div>
          </template>
          <template #message-title="contact">
            <div>
                <div style="display:flex;justify-content:space-between">
                    <span>{{contact.displayName}}</span>
                    <span style="font-size:12px;">
                      <span>打开抽屉：</span>
                      <span style="cursor:pointer;"  @click="openDrawer('right')">
                        右侧  | 
                      </span>
                      <span style="cursor:pointer;" @click="openDrawer('rightInside')">
                        右侧内部  | 
                      </span>
                      <span style="cursor:pointer;" @click="openDrawer('center')">
                        居中
                      </span>
                    </span>
                 </div>
                  <div v-if="contact.isGroup" class="slot-group-menu">
                      <span>聊天</span>
                      <span>公告</span>
                      <span>相册</span>
                      <span>文件</span>
                      <span>活动</span>
                      <span>设置(左键弹出菜单)</span> 
                </div>
            </div>
          </template>

          <template #sidebar-contact-fixedtop="contact">
                <div class="slot-contact-fixedtop">
                  <input class="slot-search" placeholder="搜索通讯录" />
                </div>
          </template>

         <template #message-side="contact">
              <div v-if="contact.isGroup" class="slot-group">
                    <div class="slot-group-title">群通知</div>
                    <div class="slot-group-notice">
                      进群请改备注，格式，工作地点-姓名，请大家配合谢谢
                    </div>
                    <div class="slot-group-title">群成员</div>
                    <div class="slot-group-panel">
                      <input class="slot-search" placeholder="搜索群成员" />
                      <div class="slot-group-member">
                        <div class="avatar"><img src="https://p.qqan.com/up/2020-2/2020022821001845128.jpg"></div>
                        <div class="name">像梦一样自由</div> 
                      </div>
                      <div class="slot-group-member">
                        <div class="avatar"><img src="https://p.qqan.com/up/2018-4/15244505348390471.jpg"></div>
                        <div class="name">野火</div> 
                      </div>
                      <div class="slot-group-member">
                        <div class="avatar"><img src="https://p.qqan.com/up/2021-1/20211411391666.jpg"></div>
                        <div class="name">霸王花</div> 
                      </div>
                       <div class="slot-group-member">
                        <div class="avatar"><img src="https://p.qqan.com/up/2021-1/2021113104111220.jpg"></div>
                        <div class="name">森系Style</div> 
                      </div>
                      
                    </div>
               </div>
          </template>
        </lemon-imui>
      </div>
   

       <el-dialog :visible.sync="dialogVisible">
         <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>


  </div>
</template>

<script>

import store from "@/store";
import { getQrCode } from '@/api/qw/login';
import { getDeviceId} from '@/api/qw/account';
import LemonMessageVoice from "@/components/LemonUI/components/message/voice";
import { getContactsByUser,getConversations,getMessageList,getConversation,sendTextMsg} from '@/api/qw/im';
import ContactsData from "@/components/LemonUI/database/contacts";
import MessagesData from "@/components/LemonUI/database/messages";
import Conversations from "@/components/LemonUI/database/conversations";
import EmojiData from "@/components/LemonUI/database/emoji";
import '@/components/LemonUI/index.css';
let pages = {};
export default {
  name: "qqChat",
  components: {  },
  data() {
    return {
      theme: "default",
      IMUI:null,
      contactContextmenu: [
        {
          text: "删除该聊天",
          click: (e, instance, hide) => {
            const { IMUI, contact } = instance;
            IMUI.updateContact({
              id: contact.id,
              lastContent: null,
            });
            if (IMUI.currentContactId == contact.id) IMUI.changeContact(null);
            hide();
          },
        },
        {
          text: "设置备注和标签",
        },
        {
          text: "投诉",
        },
        {
          icon: "lemon-icon-message",
          text: "加入黑名单",
          render: (h, instance, hide) => {
            return (
              <div style="display:flex;justify-content:space-between;align-items:center;width:130px">
                <span>加入黑名单</span>
                <span>
                  <input type="checkbox" id="switch" />
                  <label id="switch-label" for="switch">
                    Toggle
                  </label>
                </span>
              </div>
            );
          },
        },
        {
          click(e, instance, hide) {
            const { IMUI, contact } = instance;
            IMUI.removeContact(contact.id);
            if (IMUI.currentContactId == contact.id) IMUI.changeContact(null);
            hide();
          },
          color: "red",
          text: "删除好友",
        },
      ],
      contextmenu: [
        {
          click: (e, instance, hide) => {
            const { IMUI, message } = instance;
            const data = {
              id: generateRandId(),
              type: "event",
              //使用 jsx 时 click必须使用箭头函数（使上下文停留在vue内）
              content: (
                <div>
                  <span>
                    你撤回了一条消息{" "}
                    <span
                      v-show={message.type == "text"}
                      style="color:#333;cursor:pointer"
                      content={message.content}
                      on-click={e => {
                        IMUI.setEditorValue(e.target.getAttribute("content"));
                      }}
                    >
                      重新编辑
                    </span>
                  </span>
                </div>
              ),
              toContactId: message.toContactId,
              sendTime: getTime(),
            };
            IMUI.removeMessage(message.id);
            IMUI.appendMessage(data, true);
            hide();
          },
          visible: instance => {
            return instance.message.fromUser.id == this.user.id;
          },
          text: "撤回消息",
        },
        {
          visible: instance => {
            return instance.message.fromUser.id != this.user.id;
          },
          text: "举报",
        },
        {
          text: "转发",
        },
        {
          visible: instance => {
            return instance.message.type == "text";
          },
          text: "复制文字",
        },
        {
          visible: instance => {
            return instance.message.type == "image";
          },
          text: "下载图片",
        },
        {
          visible: instance => {
            return instance.message.type == "file";
          },
          text: "下载文件",
        },
        {
          click: (e, instance, hide) => {
            const { IMUI, message } = instance;
            IMUI.removeMessage(message.id);
            hide();
          },
          icon: "lemon-icon-folder",
          color: "red",
          text: "删除",
        },
      ],
      hideMenuAvatar: false,
      hideMenu: false,
      hideMessageName: false,
      hideMessageTime: true,
      qwUser:null,
      showQW:false,
      UserData: {
        id: "1000",
        displayName: "June",
        avatar: "https://p.qqan.com/up/2018-4/15244505348390471.jpg",
      },
      contactData:null,
      conversationData:null,
      isFromLogin:false,
      dialogImageUrl: '',
      dialogVisible: false,
      windowWidth: document.documentElement.clientWidth*0.65,  //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight*0.7,   //实时屏幕高度
      queryParams: {
          pageNum: 1,
          pageSize: 10,
          conversationId: null,
        },
    };
  },
  created(){
    
    //  this.$store.dispatch('qwLoginOut').then(() => {
    //  });
  },
  mounted() {
    this.qwUser=store.getters.qwUser;
    if(!this.qwUser){
        this.$message.error('未登录企微账号');
        setTimeout(() => {
          this.$router.go(-1);
        }, 2000);
        return;
    }
    // console.log("qxj qwUserId:"+JSON.stringify(this.qwUser));
    this.isFromLogin=this.$route.query.isFromLogin;
    console.log("qxj isFromLogin:"+this.isFromLogin);
    if(!this.qwIm.hasLogin){
        this.initSocket(this.qwUser.deviceId);
    }
    this.UserData.id=this.qwUser.userId;
    this.UserData.displayName=this.qwUser.nickName;
    this.UserData.avatar=this.qwUser.avatar;
    this.showQW=true;

    const contactData1 = {
            id: "contact-1",
            displayName: "工作协作群",
            avatar: "http://upload.qqbodys.com/img/weixin/20170804/ji5qxg1am5ztm.jpg",
            index: "[1]群组",
            unread: 0,
            lastSendTime: 1566047865417,
            lastContent: "2",
    };
    const contactData2 = {
            id: "contact-2",
            displayName: "自定义内容",
            avatar: "http://upload.qqbodys.com/img/weixin/20170807/jibfvfd00npin.jpg",
            //index: "Z",
            click(next) {
                next();
            },
            renderContainer: () => {
                return <h1 style="text-indent:20px">自定义页面</h1>;
            },
            lastSendTime: 1345209465000,
            lastContent: "12312",
            unread: 2,
    };
    const contactData3 = {
            id: "contact-3",
            displayName: "铁牛",
            avatar: "http://upload.qqbodys.com/img/weixin/20170803/jiq4nzrkrnd0e.jpg",
            index: "T",
            unread: 32,
            lastSendTime: 3,
            lastContent: "你好123",
    };
    const IMUI = this.$refs.IMUI;
    
    var conversationData = Conversations.filter(item => item.conversationId<=1688856679458971);
    conversationData.sort((a1, a2) => {
      return a2.lastSendTime - a1.lastSendTime;
    });

  
    // IMUI.initContacts(ContactsData);
    // IMUI.initConversations(conversationData);
    // setTimeout(() => {
    //     IMUI.changeContact(1688856679458971);
    // }, 500);

    this.getContacts();  //获取联系人信息
    this.getConversation();   //获取会话信息
  
    IMUI.initMenus([
      {
        name: "messages",
      },
      {
        name: "contacts",
      },
      {
        name: "custom1",
        title: "自定义按钮1",
        unread: 0,
        render: menu => {
          return <i class="lemon-icon-attah" />;
        },
        renderContainer: () => {
          return (
            <div class="article">
              <ul>
                <li class="article-item">
                  <h2>人民日报谈网红带货：产品真的值得买吗？</h2>
                </li>
                <li class="article-item">
                  甘肃夏河县发生5.7级地震 暂未接到人员伤亡报告
                </li>
                <li class="article-item">
                  北方多地风力仍强沙尘相伴,东北内蒙古等地迎雨雪
                </li>
                <li class="article-item">
                  英货车案：越南警方采集疑死者家属DNA作比对
                </li>
                <li class="article-item">
                  知名连锁咖啡店的蛋糕吃出活虫 曝光内幕太震惊
                </li>
              </ul>
              <lemon-contact  props={{ contact: contactData1 }} style="margin:20px"/>
              <lemon-contact props={{ contact: contactData3 }} style="margin:20px" />
            </div>
          );
        },
        isBottom: true,
      },
      {
        name: "custom2",
        title: "自定义按钮2",
        unread: 0,
        click: () => {
          alert("拦截导航点击事件");
        },
        render: menu => {
          return <i class="lemon-icon-group" />;
        },
        isBottom: true,
      },
    ]);

    IMUI.initEmoji(EmojiData); 
  
  },

  methods: {
    initSocket(userId) {
               let that=this;
               console.log("qxj socket:"+this.qwIm.socket);
               if(!!this.qwIm.socket){
                  this.qwIm.initSocket(userId,true);
                  // 监听socket连接
                  this.qwIm.socket.onopen = function() {
                          console.log("socket连接成功");
                  };
                  this.qwIm.socket.onerror = function() {
                      console.log("连接错误")
                  };
                  // 监听socket消息
                  const IMUI = this.$refs.IMUI;
                  this.qwIm.socket.onmessage = function(res) {
                       var data=JSON.parse(res.data);
                        console.log("收到服务端内容", JSON.stringify(data));
                        if(data.cmd=="offline"){
                            that.$message.error('企微号已下线');
                            that.$store.dispatch('qwLoginOut').then(() => {

                            });
                            setTimeout(() => {
                               that.$router.push({path:'/qw/qwLogin'});
                            }, 2000);
                        }
                        //接收消息
                        if(data.cmd=="receiveMsg"){
                             var msgData=JSON.parse(data.msg);
                             if(!IMUI.hasConversation(msgData.toContactId)){  //收到新消息时是最新的会话，添加该会话
                                    let queryParams={conversationId:msgData.toContactId,userId:that.qwUser.userId};
                                    getConversation(queryParams).then(response => {
                                          if(response.code==200){
                                              var conversation=response.data;
                                              IMUI.appendConversation(conversation); 
                                              that.appendMessageAction(msgData);
                                          }
                                   });
                             }else{
                                  that.appendMessageAction(msgData);
                                  let queryParams={conversationId:msgData.toContactId,userId:that.qwUser.userId};
                                  getConversation(queryParams).then(response => {
                                          if(response.code==200){
                                              var conversation=response.data;
                                              var unread=conversation.unread;
                                              if(!unread){
                                                 conversation.unread=1;
                                              }else{
                                                conversation.unread+=1;
                                              }
                                              IMUI.topPopConversations(conversation);

                                          }
                                   });
                             }
                        }
                  };
                    // 监听socket消息
                  this.qwIm.socket.onclose = function(res) {
                        console.log("socket已经关闭")
                  };
              }
    },
  
    getContacts(){  
      getContactsByUser(this.qwUser.userId).then(response => {
           this.contactData = response.data;
           this.$refs.IMUI.initContacts(this.contactData);
           //console.log("qxj request contactData:"+JSON.stringify(this.contactData));
      });
    },
    getConversation(){
      let that=this;
      const IMUI = this.$refs.IMUI;
      getConversations(this.qwUser.userId).then(response => {
           this.conversationData = response.data;
           IMUI.initConversations(response.data);
           var fstConversation=this.conversationData[0];
           //console.log("qxj fstConversation:"+JSON.stringify(fstConversation));
           if(fstConversation){
                IMUI.changeContact(fstConversation.conversationId);
                // setTimeout(() => {
                //      IMUI.changeContact(1688856679458971);
                // }, 500);
           }
           //console.log("qxj request conversation:"+JSON.stringify(response.data));
      });
    },
    messageTimeFormat(time) {
      //console.log("qxj messageTimeFormat:"+time);
      return this.friendlyDate(time);
    },
    changeTheme() {
       this.theme = this.theme == "default" ? "blue" : "default";
    },
    scrollToTop() {
      document.body.scrollIntoView();
    },
    openDrawer(position) {
            const IMUI = this.$refs.IMUI;
            const params = {
                position,
                render: contact => {
                return (
                    <div style="padding:15px">
                    <h5>{contact.displayName}</h5>
                    <span style="cursor:pointer;" on-click={IMUI.closeDrawer}>关闭抽屉</span>
                    </div>
                );
                },
      };
      if (position == "center") {
        params.width = "50%";
        params.height = "50%";
      } else if (position == "rightInside") {
        params.height = "90%";
        params.offsetY = "10%";
      }
      this.IMUI.openDrawer(params);
    },
    handlePullMessages(contact, next,instance) {
       const { IMUI } = this.$refs;
      //console.log("qxj instance:"+instance.getMessages(instance.currentContactId));
       let isEnd = false;
       getMessageList(this.queryParams).then(response => {
          if(response.code==200){
               isEnd=response.data.isLastPage;
               next(response.data.list, isEnd);
               if(!isEnd){
                   pages[contact.conversationId]++;
               }
          }
      });
      // setTimeout(() => {
      //       let isEnd = true;
      //       next(MessagesData[contact.conversationId], isEnd);
      // }, 2000);

    },
    handleChangeContact(contact, instance) {
        //console.log("qxj contact:"+JSON.stringify(contact));
        if (!pages[contact.conversationId]){
            pages[contact.conversationId] =1;
        }
       this.queryParams.pageNum=pages[contact.conversationId];
       this.queryParams.conversationId=contact.conversationId;
        //instance.updateContact(contact);
        instance.closeDrawer();
    },

     appendMessageAction(msgData){
          if(msgData.type=="text"){   //文本   text  image  video voice 
              const message = {
                    id: msgData.id,
                    status: msgData.status,
                    type: msgData.type,
                    sendTime: msgData.sendTime,
                    content: msgData.content,
                    params1: "1",
                    params2: "2",
                    toContactId: msgData.toContactId,
                    fromUser: msgData.fromUser,
              };
              this.appendRemoteMessage(message);
           }
           if(msgData.type=="image"){   //图片
              const message = {
                    id: msgData.id,
                    status: msgData.status,
                    type: msgData.type,
                    sendTime: msgData.sendTime,
                    content: msgData.content,
                    params1: "1",
                    params2: "2",
                    toContactId: msgData.toContactId,
                    fromUser: msgData.fromUser,
              };
              this.appendRemoteMessage(message);
           }
    },

    //发送消息
    handleSend(message, next, file) {
      const IMUI = this.$refs.IMUI;
      var params={};
      console.log("qxj message:"+JSON.stringify(message));
      if(message.type=="text"){  //text   image   voice   video
          params={"conversationId":message.toContactId,"deviceId":this.qwUser.deviceId,"userId":this.qwUser.userId,"content":message.content};
          sendTextMsg(params).then(response => {
              if(response.code==200){
                  var conversation=IMUI.findConversations(message.toContactId);
                  next();
                  console.log("qxj conversation:"+JSON.stringify(conversation));
                  IMUI.topPopConversations(conversation,true);
              }
          });
      }

      // setTimeout(() => {
      //   next();
      // }, 1000);
    },
    handleMenuAvatarClick() {
      console.log("Event:menu-avatar-click");
    },

    handleMessageClick(e, key, message, instance) {
      console.log("点击了消息", e, key, message);
      console.log("qxj message:"+JSON.stringify(message));
      if(message.type=="image"){
           this.handlePicturePreview(message.url);
      }
      if (key == "status") {
        instance.updateMessage({
          id: message.id,
          status: "going",
          content: "正在重新发送消息...",
        });
        setTimeout(() => {
          instance.updateMessage({
            id: message.id,
            status: "succeed",
            content: "发送成功",
          });
        }, 2000);
      }
    },

    changeMenuAvatarVisible() {
      this.hideMenuAvatar = !this.hideMenuAvatar;
    },
    changeMenuVisible() {
      this.hideMenu = !this.hideMenu;
    },
    changeMessageNameVisible() {
      this.hideMessageName = !this.hideMessageName;
    },
    changeMessageTimeVisible() {
      this.hideMessageTime = !this.hideMessageTime;
    },
    removeMessage() {
        const { IMUI } = this.$refs;
        const messages = IMUI.getCurrentMessages();
        const id = messages[messages.length - 1].id;
        if (messages.length > 0) {
            IMUI.removeMessage(id);
        }
    },
    updateMessage() {
        const { IMUI } = this.$refs;
        const messages = IMUI.getCurrentMessages();
        const message = messages[messages.length - 1];
        if (messages.length > 0) {
            const update = {
            id: message.id,
            status: "succeed",
            type: "file",
            fileName: "被修改成文件了.txt",
            fileSize: "4200000",
            };
            if (message.type == "event") {
            update.fromUser = this.user;
            }
            IMUI.updateMessage(update);
            IMUI.messageViewToBottom();
      }
    },
    appendCustomMessage() {
        const { IMUI } = this.$refs;
        const message = {
            id: generateRandId(),
            status: "succeed",
            type: "voice",
            sendTime: getTime(),
            content: "语音消息",
            params1: "1",
            params2: "2",
            toContactId: "contact-1",
            fromUser: this.user,
        };
        IMUI.appendMessage(message, true);
    },
    appendMessage() {
        const { IMUI } = this.$refs;
        const contact = IMUI.currentContact;
        const message = generateMessage("contact-3");
        message.fromUser = {
            ...message.fromUser,
            ...this.user,
        };
        IMUI.appendMessage(message, true);
        console.log("🚀 ~ file: App.vue ~ line 1508 ~ appendMessage ~ message", message)
    },
    appendEventMessage() {
      const { IMUI } = this.$refs;
      const message = {
        id: generateRandId(),
        type: "event",
        content: (
          <span>
            邀请你加入群聊{" "}
            <span
              style="color:#333;cursor:pointer"
              on-click={() => alert("OK")}
            >
              接受
            </span>
          </span>
        ),
        toContactId: "contact-3",
        sendTime: getTime(),
      };
      IMUI.appendMessage(message, true);
    },
    appendRemoteMessage(message) {  //从服务端返回的消息
        const { IMUI } = this.$refs;
        IMUI.appendMessage(message, true);
    },

    updateContact() {
      this.$refs.IMUI.updateContact({
        id: "contact-3",
        unread: 10,
        displayName: generateRandWord(),
        lastSendTime: getTime(),
        lastContent: "修改昵称为随机字母",
      });
    },
    handleChangeMenu() {
      console.log("Event:change-menu");
    },
    openCustomContainer() {

    },
    handlePicturePreview(url) {
        this.dialogImageUrl = url;
        this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
    .imui-center{
        margin-bottom:"60px"; 
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80vh;
    }
    .lemon-wrapper{
        border:"1px solid #ddd";
        height: "60%" !important;
    }
    .lemon-drawer{
        border:"1px solid #ddd";
        border-left:"0";
    }
    .more {
        font-size: 12px;
        line-height: 24px;
        height: 24px;
        position: absolute;
        top: 14px;
        right: 14px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #f1f1f1;
        display: inline-block;
        border-radius: 4px;
        background: #111;
        padding: 0 8px;
    }
    
</style>


<style lang="stylus">
   .lemon-container__title
     padding-bottom:10px;
   .slot-group
      width:200px;
      .slot-group-title
        padding:0 0 10px 0;
        .slot-group-notice
           padding: 10px 10px;
     
      .slot-search
           width:calc(100% - 20px) ;
           margin:5px 10px;
           padding:3px 0px;

      .slot-group-member
          display: flex;
          padding: 5px 0;
          flex:1;
          font-size: 14px;
          align-items: center;
          .avatar
              width: 30px;
              height: 30px;
              line-height: 30px;
              margin-right:5px;
              img 
                vertical-align: middle;
                border-style: none;
                width: 100%;
                height: 100%;
                line-height: 30px;
                border-radius: 50%;

      

</style>