添加聊天功能

src/layout/components/components/class-list.vue

@@ -3,7 +3,7 @@
     <van-list
       v-model="loading"
       :finished="finished"
-      finished-text="没有更多了"
+      finished-text=" "
       :immediate-check="false"
       @load="onLoad"
     >
@@ -21,7 +21,7 @@
           <template #icon>
             <el-image
               fit="cover"
-              :src="item.img || groupLogo"
+              :src="item.img || getImage(item)"
               @error="
                 () => {
                   // 图片加载失败，显示默认头像
@@ -80,13 +80,21 @@ export default {
       } catch {}
     },
     selectHandler(item) {
-      this.$emit("select", item);
+      this.$emit("select", {
+        targetId: item.id,
+        conversationType: 3,
+        channelId: ""
+      });
     },
     getImage(item) {
       if (item.type === "TRAINING") {
-        return require("../images/teacher_logo.png");
+        return require("../imkit/images/icon_training.png");
       } else if (item.type === "REPERTOIRE_PLAY") {
-        return require("../images/group_logo.png");
+        return require("../imkit/images/icon_repertoire_play.png");
+      } else if (item.type === "VIP" || item.type === "COMM") {
+        return require("../imkit/images/ic_group_list_vip.png");
+      } else {
+        return require("../imkit/images/ic_group_list_mussic_team_stu.png");
       }
     }
   }

src/layout/components/components/contacts-list.vue

@@ -80,7 +80,11 @@ export default {
       } catch {}
     },
     selectHandler(item) {
-      this.$emit("select", item);
+      this.$emit("select", {
+        targetId: item.userId,
+        conversationType: 1,
+        channelId: ""
+      });
     }
   }
 };

src/layout/components/components/contextmenu.vue

@@ -16,6 +16,7 @@
             aria-disabled="false"
             tabindex="-1"
             :key="k"
+            v-show="!v.hid"
             @click="onCurrentContextmenuClick(v.contextMenuClickId)"
           >
             <span>{{ v.txt }}</span>

src/layout/components/components/conversation-list.vue

@@ -43,7 +43,7 @@
             </div>
             <div class="username">
               <div class="desc">
-                {{ getLatestMessage(item.conversation) }}
+                {{ getLatestMessage(item.conversation) }} &nbsp;
               </div>
               <div v-if="item.conversation.notificationLevel === -1">
                 <img
@@ -127,7 +127,7 @@ export default {
     core.on(CoreEvent.UPDATE_CONVERSATION, this.handleUpdateConversation);
     core.on(CoreEvent.SWITCH_CONVERSATION, this.switchConversation);
     core.on(CoreEvent.CONNECTED, connectStatus => {
-      console.log("connectStatus", connectStatus);
+      // console.log("connectStatus", connectStatus);
       if (connectStatus) {
         this.getConversationList(true);
         return;
@@ -157,7 +157,7 @@ export default {
       return dayjs(val).fromNow();
     },
     selectHandler(item) {
-      console.log(item, "selectHandler");
+      // console.log(item, "selectHandler");
       core.selectConversation({
         conversationType: item.conversation.conversationType,
         targetId: item.conversation.targetId,
@@ -181,7 +181,7 @@ export default {
           }
         });
         this.list = [...tmpList];
-        // console.log(this.list, "data");
+        console.log(this.list, "data");
       });
     },
     switchConversation(conversation) {
@@ -366,6 +366,10 @@ export default {
           let voice = "[" + locale.conversation.audio + "]";
           messageContent = voice;
           break;
+        case MessageType.RECALL:
+          let recall = "[" + locale.conversation.recall + "]";
+          messageContent = recall;
+          break;
         default:
           if (core.isCustomLastMessage(message)) {
             messageContent = core.createCustomLastMessageDom(message)

src/layout/components/components/message-item.vue

@@ -12,7 +12,7 @@
         <div class="recall">{{ reCallName }}{{ locale.message.msgRecall }}</div>
       </template>
       <template v-else>
-        <el-image class="m-user-img" :src="url" />
+        <el-image class="m-user-img" :src="url || teacherLogo" />
         <div class="send-container">
           <div class="send-content">
             <!-- <div v-html="getText(message)"></div> -->
@@ -22,7 +22,7 @@
             </div>
             <!-- 图片 -->
             <div
-              v-if="MessageType.IMAGE === message.messageType"
+              v-else-if="MessageType.IMAGE === message.messageType"
               :data-origin="message.imageUri"
             >
               <el-image
@@ -32,7 +32,7 @@
               />
             </div>
             <!-- GIF -->
-            <div v-if="MessageType.GIF === message.messageType">
+            <div v-else-if="MessageType.GIF === message.messageType">
               <el-image
                 class="m-image"
                 :src="message.remoteUrl"
@@ -40,20 +40,27 @@
               />
             </div>
             <!-- 语音 -->
-            <div v-if="MessageType.VOICE === message.messageType">
-              <audio controls>
+            <div v-else-if="MessageType.VOICE === message.messageType">
+              <!-- <audio controls>
                 <source
                   :src="addBase64head(message.content.content)"
                   type="audio/amr"
                 />
-              </audio>
+              </audio> -->
+              {{ locale.message.nonsupport }}
             </div>
             <!-- 短视频 -->
-            <div v-if="MessageType.SIGHT === message.messageType">
+            <div v-else-if="MessageType.SIGHT === message.messageType">
               <video controls style="max-width: 150px;">
                 <source :src="message.content.sightUrl" type="video/mp4" />
               </video>
             </div>
+            <!-- 文件 -->
+            <!-- <div v-else-if="MessageType.FILE === message.messageType">
+            </div> -->
+            <div v-else>
+              {{ locale.message.nonsupport }}
+            </div>
 
             <div class="popper__arrow"></div>
           </div>
@@ -84,7 +91,7 @@ import {
 import { core, CoreEvent } from "../imkit";
 import { addBase64head } from "../imkit/utils/utils";
 import zhCN from "../imkit/zh_CN";
-
+import teacherLogo from "../images/teacher_logo.png";
 /**
  * 常规的消息类型，用于展示
  */
@@ -136,6 +143,7 @@ export default {
   },
   data() {
     return {
+      teacherLogo,
       direction: this.message.messageDirection,
       conversationType: this.message.conversationType,
       senderUserId: this.message.senderUserId,
@@ -235,9 +243,14 @@ export default {
     addBase64head,
     getReCallName() {
       let name = "";
-      console.log(this.direction, this.conversationType, this.message);
+      // console.log(
+      //   this.direction,
+      //   this.conversationType,
+      //   this.message,
+      //   "getReCallName"
+      // );
       if (this.direction === MessageDirection.SEND) {
-        name = locale.message.you + " ";
+        this.reCallName = this.locale.message.you + " ";
       } else {
         if (this.conversationType === ConversationType.PRIVATE) {
           core

src/layout/components/components/message-list.vue

@@ -9,7 +9,11 @@
       :pulling-text="'下拉加载更多...'"
       :loosing-text="'释放即可加载...'"
     >
-      <div v-for="item in messages" :key="item.sentTime">
+      <div
+        v-for="item in messages"
+        :key="item.sentTime"
+        @contextmenu.prevent="onContextmenu(item, $event)"
+      >
         <message-item
           :message="item"
           :conversation="conversation"
@@ -21,10 +25,18 @@
         />
       </div>
     </van-pull-refresh>
+
+    <Contextmenu
+      :dropdown="dropdown"
+      :dropdownList="dropdownList"
+      ref="contextmenuRef"
+      @currentContextmenuClick="onCurrentContextmenuClick"
+    />
   </div>
 </template>
 
 <script>
+import Contextmenu from "./contextmenu.vue";
 import {
   ConversationType,
   getTextMessageDraft,
@@ -49,10 +61,21 @@ import "@vant/touch-emulator"; // 引入模块后自动生效
 export default {
   name: "message-list",
   components: {
-    MessageItem
+    MessageItem,
+    Contextmenu
   },
   data() {
     return {
+      dropdown: { x: "", y: "" },
+      dropdownList: [
+        { contextMenuClickId: 0, txt: "复制", hid: false },
+        { contextMenuClickId: 1, txt: "撤回", hid: false },
+        {
+          contextMenuClickId: 2,
+          txt: "删除",
+          hid: false
+        }
+      ],
       isConnect: false, // 是否连接
       hasMore: true, // 是否有更多消息
       className: "",
@@ -93,6 +116,97 @@ export default {
     }
   },
   methods: {
+    onContextmenu(item, e) {
+      // contextMenuClickId
+      console.log(item, "item");
+      // 文本类型才有复制
+      if (MessageType.TextMessage === item.messageType) {
+        this.dropdownList[0].hid = false;
+      } else {
+        this.dropdownList[0].hid = true;
+      }
+
+      if (item.messageDirection === MessageDirection.SEND) {
+        this.dropdownList[1].hid = false;
+      } else {
+        this.dropdownList[1].hid = true;
+      }
+
+      const { clientX, clientY } = e;
+      this.dropdown.x = clientX;
+      this.dropdown.y = clientY;
+      this.$refs.contextmenuRef.openContextmenu(item);
+    },
+    handleCopy(obj) {
+      let item;
+      switch (obj.messageType) {
+        case MessageType.TEXT:
+          item = {
+            ["text/plain"]: new Blob([obj.content.content], {
+              type: "text/plain"
+            })
+          };
+          break;
+        default:
+          item = null;
+      }
+      if (!item) {
+        throw new Error("No data copied");
+      }
+      try {
+        if (navigator.clipboard) {
+          const clipboardObj = navigator.clipboard;
+          clipboardObj.write([new ClipboardItem(item)]);
+          return;
+        }
+        let copyInput = document.createElement("input");
+        copyInput.setAttribute("id", "COPY_INPUT");
+        copyInput.style.position = "fixed";
+        copyInput.style.left = "-100%";
+        copyInput.style.top = "0";
+        copyInput.style.zIndex = "-100";
+        copyInput.style.opacity = "0";
+        document.body.appendChild(copyInput);
+        copyInput.value = obj.content.content;
+        copyInput.focus();
+        copyInput.select();
+        // document.execCommand 可能会被废弃
+        if (document.execCommand("copy")) {
+          document.execCommand("copy");
+        }
+      } catch (e) {
+        console.error("Failed to copy: ", e);
+      }
+    },
+    handleRecall(item) {
+      if (!item || item.messageDirection !== MessageDirection.SEND) {
+        return;
+      }
+      core.recallMessage(item);
+    },
+    handleDelete(item) {
+      console.log(item);
+      if (!item) {
+        return;
+      }
+      core.deleteMessage(item);
+    },
+    async onCurrentContextmenuClick(item) {
+      console.log(item, "item");
+      switch (item.contextMenuClickId) {
+        case 0:
+          this.handleCopy(item);
+          break;
+        case 1:
+          // this.handleNotificationStatusChange(item);
+          this.handleRecall(item);
+          break;
+        case 2:
+          // this.handleDelete(item);
+          this.handleDelete(item);
+          break;
+      }
+    },
     getMessageStyleClass(message) {
       const styleMap = {
         [MessageType.IMAGE]: "image-message-item",
@@ -152,11 +266,11 @@ export default {
     },
     handleFail() {
       const conversation = {
-        conversationType: this.message.conversationType,
-        targetId: this.message.targetId,
-        channelId: this.message.channelId
+        conversationType: obj.conversationType,
+        targetId: obj.targetId,
+        channelId: obj.channelId
       };
-      core.resendMessage(conversation, this.message);
+      core.resendMessage(conversation, obj);
     },
     onRefresh() {
       // 清空列表数据
@@ -175,8 +289,8 @@ export default {
         return;
       }
       let lastestTime = Date.now();
-      if (this.messages.length) {
-        lastestTime = this.messages[0].sentTime;
+      if (objs.length) {
+        lastestTime = objs[0].sentTime;
       }
       // 先显示正在加载，然后开始请求数据，保证显示效果
 
@@ -279,7 +393,7 @@ export default {
           this.isLoading = false;
           this.messages = messages.list;
           this.hasMore = messages.hasMore;
-          console.log(this.messages);
+          console.log(this.messages, "getMessages");
           if (this.messages.length) {
             this.scrollToBottom();
             //   if (!this.bscroll) {
@@ -309,7 +423,7 @@ export default {
             }
           }
 
-          console.log(this.messages);
+          // console.log(this.messages);
         });
     },
     scrollToBottom(time = 200, scrollY = 0) {
@@ -317,7 +431,7 @@ export default {
         setTimeout(() => {
           const pullRefresh = this.$refs.pullRefresh;
           const scrollY = scrollY || pullRefresh.offsetHeight;
-          console.log(scrollY, "scrollY");
+          // console.log(scrollY, "scrollY");
           document.querySelector("#el-main").scrollTo(0, scrollY);
         }, time);
       });
@@ -343,7 +457,7 @@ export default {
       const refreshData = () => {
         const messages = [...this.messages, ...newMessages];
         this.messages = messages;
-        console.log(this.messages, "this.messages");
+        // console.log(this.messages, "this.messages");
 
         this.scrollToBottom(100);
         // if (!this.bscroll) {

src/layout/components/imkit/core.js

@@ -609,8 +609,6 @@ class Core extends EventEmitter {
     return this.service.getGroupMembers(conversation);
   }
   selectConversation(conversation) {
-    console.log(conversation, "selectConversation");
-    console.log(this.currentConversation, "this.currentConversation");
     if (
       this.currentConversation &&
       isEqual(this.currentConversation, conversation)

src/layout/components/imkit/images/class.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660637972073" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3853" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M710.6 592.64c-34.76-35.29-75.26-63.01-120.36-82.39-7.6-3.26-15.28-6.26-23.03-9C616.28 463.21 648 403.29 648 336c0-114.69-92.11-208-205.33-208s-205.33 93.31-205.33 208c0 67.29 31.72 127.21 80.8 165.26-7.75 2.74-15.43 5.74-23.03 9-45.11 19.37-85.6 47.09-120.36 82.39-34.73 35.26-61.99 76.32-81.03 122.04C73.99 762 64 812.23 64 864c0 17.67 14.33 32 32 32s32-14.33 32-32c0-176.45 141.16-320 314.67-320 173.51 0 314.67 143.55 314.67 320 0 17.67 14.33 32 32 32s32-14.33 32-32c0-51.77-9.99-102-29.7-149.32-19.05-45.72-46.32-86.77-81.04-122.04zM301.33 336c0-79.4 63.4-144 141.33-144S584 256.6 584 336s-63.4 144-141.33 144-141.34-64.6-141.34-144z" p-id="3854" fill="#000000"></path><path d="M885.37 599.86c-23.5-32.05-51.65-60.1-83.65-83.36a377.22 377.22 0 0 0-58.05-34.72 208.22 208.22 0 0 0 23.19-35.61c15.09-29.39 23.07-62.54 23.07-95.87 0-83.7-49.16-158.9-125.24-191.57-16.24-6.98-35.06 0.54-42.03 16.77-6.97 16.24 0.54 35.06 16.78 42.03 52.54 22.56 86.49 74.68 86.49 132.77 0 45.62-21.49 88.86-57.55 115.96a31.89 31.89 0 0 0-13.01 17.04c-5.4 16.83 3.87 34.85 20.7 40.24C807.61 565.72 896 688.39 896 828.8c0 17.67 14.33 32 32 32s32-14.33 32-32c0-83.2-25.81-162.36-74.63-228.94z" p-id="3855" fill="#000000"></path></svg>

src/layout/components/imkit/zh_CN.js

@@ -1,64 +1,64 @@
 export default {
-  area: 'zh_CN',
-  lang: '中文',
+  area: "zh_CN",
+  lang: "中文",
   // 会话列表
   conversation: {
-    loading: '正在加载列表',
-    forMore: '上拉获取更多',
-    noData: '当前无会话',
-    draft: '草稿',
-    atMe: '有人@我',
-    file: '文件',
-    img: '图片',
-    location: '位置消息',
-    video: '短视频',
-    audio: '语音消息',
-    quote: '引用消息',
-    yesterday: '昨天',
-    before: '前天',
-    top: '取消置顶',
-    noTop: '置顶',
-    inform: '允许消息通知',
-    noInform: '消息免打扰',
-    delete: '删除',
-    read: '已读',
-    unread: '未读',
-    recall: '撤回了一条消息',
-    you: '你'
+    loading: "正在加载列表",
+    forMore: "上拉获取更多",
+    noData: "当前无会话",
+    draft: "草稿",
+    atMe: "有人@我",
+    file: "文件",
+    img: "图片",
+    location: "位置消息",
+    video: "短视频",
+    audio: "语音消息",
+    quote: "引用消息",
+    yesterday: "昨天",
+    before: "前天",
+    top: "取消置顶",
+    noTop: "置顶",
+    inform: "允许消息通知",
+    noInform: "消息免打扰",
+    delete: "删除",
+    read: "已读",
+    unread: "未读",
+    recall: "撤回了一条消息",
+    you: "你"
   },
   //消息列表
   message: {
-    history: '下拉获取历史消息',
-    noHistory: '没有更多历史消息了',
-    loading: '加载中...',
-    completed: '加载完毕',
-    noData: '新的一天，新的开始',
-    year: '年',
-    month: '月',
-    day: '日',
-    hour: '点',
-    minute: '分',
-    copy: '复制',
-    quote: '引用',
-    recall: '撤回',
-    delete: '删除',
-    msgRecall: '撤回了一条消息',
-    you: '你',
-    opposite: '对方',
-    file: '文件',
-    location: '位置',
-    nonsupport: '当前版本不支持查看此消息',
-    forward: '转发'
+    history: "下拉获取历史消息",
+    noHistory: "没有更多历史消息了",
+    loading: "加载中...",
+    completed: "加载完毕",
+    noData: "新的一天，新的开始",
+    year: "年",
+    month: "月",
+    day: "日",
+    hour: "点",
+    minute: "分",
+    copy: "复制",
+    quote: "引用",
+    recall: "撤回",
+    delete: "删除",
+    msgRecall: "撤回了一条消息",
+    you: "你",
+    opposite: "对方",
+    file: "文件",
+    location: "位置",
+    nonsupport: "当前版本不支持查看此消息",
+    forward: "转发"
   },
   //消息编辑器
   messageEdit: {
-    send: '发送',
-    image: '图片',
-    picError: '图片格式有误',
-    file: '文件'
+    send: "发送",
+    image: "图片",
+    picError: "图片格式有误",
+    file: "文件"
   },
   other: {
-    unKnowMessage: '未知消息',
-    all: '所有人'
+    unKnowMessage: "未知消息",
+    all: "所有人"
   }
-}
+};

src/layout/components/modal/chat-model.vue

@@ -36,11 +36,35 @@
           placement="bottom"
           :open-delay="500"
         >
-          <i
+          <!-- <i
             class="el-icon-menu"
             :class="active === 'class' && 'active'"
             @click="active = 'class'"
-          ></i>
+          ></i> -->
+          <!-- <img src="../imkit/images/class.svg" style="width: 30px;" /> -->
+          <svg
+            t="1660637972073"
+            class="icon icon-class"
+            :class="active === 'class' && 'active'"
+            @click="active = 'class'"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="3853"
+            width="30"
+            height="30"
+          >
+            <path
+              d="M710.6 592.64c-34.76-35.29-75.26-63.01-120.36-82.39-7.6-3.26-15.28-6.26-23.03-9C616.28 463.21 648 403.29 648 336c0-114.69-92.11-208-205.33-208s-205.33 93.31-205.33 208c0 67.29 31.72 127.21 80.8 165.26-7.75 2.74-15.43 5.74-23.03 9-45.11 19.37-85.6 47.09-120.36 82.39-34.73 35.26-61.99 76.32-81.03 122.04C73.99 762 64 812.23 64 864c0 17.67 14.33 32 32 32s32-14.33 32-32c0-176.45 141.16-320 314.67-320 173.51 0 314.67 143.55 314.67 320 0 17.67 14.33 32 32 32s32-14.33 32-32c0-51.77-9.99-102-29.7-149.32-19.05-45.72-46.32-86.77-81.04-122.04zM301.33 336c0-79.4 63.4-144 141.33-144S584 256.6 584 336s-63.4 144-141.33 144-141.34-64.6-141.34-144z"
+              p-id="3854"
+              fill="#000000"
+            ></path>
+            <path
+              d="M885.37 599.86c-23.5-32.05-51.65-60.1-83.65-83.36a377.22 377.22 0 0 0-58.05-34.72 208.22 208.22 0 0 0 23.19-35.61c15.09-29.39 23.07-62.54 23.07-95.87 0-83.7-49.16-158.9-125.24-191.57-16.24-6.98-35.06 0.54-42.03 16.77-6.97 16.24 0.54 35.06 16.78 42.03 52.54 22.56 86.49 74.68 86.49 132.77 0 45.62-21.49 88.86-57.55 115.96a31.89 31.89 0 0 0-13.01 17.04c-5.4 16.83 3.87 34.85 20.7 40.24C807.61 565.72 896 688.39 896 828.8c0 17.67 14.33 32 32 32s32-14.33 32-32c0-83.2-25.81-162.36-74.63-228.94z"
+              p-id="3855"
+              fill="#000000"
+            ></path>
+          </svg>
         </el-tooltip>
       </div>
     </div>
@@ -50,8 +74,16 @@
           ref="conversationList"
           v-show="active === 'conversation'"
         />
-        <contacts-list ref="contactsList" v-show="active === 'contacts'" />
-        <class-list ref="classList" v-show="active === 'class'" />
+        <contacts-list
+          ref="contactsList"
+          v-show="active === 'contacts'"
+          @select="onSelect"
+        />
+        <class-list
+          ref="classList"
+          v-show="active === 'class'"
+          @select="onSelect"
+        />
       </el-aside>
       <!-- 判断是否有会话 -->
       <el-container v-show="currentConversation.targetId">
@@ -83,6 +115,7 @@ import ClassList from "../components/class-list.vue";
 import { core, CoreEvent } from "../imkit";
 import * as RongIMLib from "@rongcloud/imlib-next";
 import { custom_service } from "./chat.js";
+import ItemVue from "../Sidebar/Item.vue";
 // 接入时需要将 '请更换您应用的 appkey' 替换为您的应用的 appkey
 let libOption = { appkey: "c9kqb3rdc451j" };
 
@@ -104,7 +137,7 @@ export default {
   data() {
     return {
       emptyImg: require("../imkit/images/no-conversation.svg"),
-      active: "class", // 会话 conversation; 联系人 contacts; 班级 class
+      active: "conversation", // 会话 conversation; 联系人 contacts; 班级 class
       isConnect: false, // 连接中
       currentConversation: {
         channelId: "",
@@ -130,8 +163,17 @@ export default {
     // });
   },
   methods: {
+    onSelect(item) {
+      console.log(item, "item");
+      core.selectConversation({
+        conversationType: item.conversationType,
+        targetId: item.targetId,
+        channelId: item.channelId
+      });
+      this.active = "conversation";
+    },
     switchConversation(conversation) {
-      console.log(conversation, "switchConversation");
+      console.log(conversation, "switchConversation chat-model");
       this.currentConversation = conversation;
     }
   },
@@ -173,11 +215,19 @@ export default {
     text-align: center;
     font-size: 30px;
     color: #333;
-    i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 56px;
+    i,
+    .icon-class {
       margin: 0 8px;
 
       &:hover,
       &.active {
+        path {
+          fill: #00a79d;
+        }
         color: #00a79d;
       }
     }