企微聊天接收、发送图片消息 聊天界面最小化最大化

.env.development

@@ -7,7 +7,7 @@ VUE_APP_ICP_RECORD = 陕ICP备2024048690号-2
 # ICP网站访问地址
 VUE_APP_ICP_URL =https://beian.miit.gov.cn
 # 网站LOG
-VUE_APP_LOG_URL =@/assets/logo/logo.png
+VUE_APP_LOG_URL =@/assets/logo/fby_logo.png
 
 # 开发环境配置
 ENV = 'development'
@@ -17,3 +17,5 @@ VUE_APP_BASE_API = '/dev-api'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
+# IM webSocket地址
+VUE_APP_IM_WS_URL = ws://127.0.0.1:8667/qwImSocket

src/api/common.js

@@ -7,4 +7,12 @@ export function sendSmsCode(data) {
     data: data
   })
 }
- 
+
+// 上传文件
+export function uploadOss(data) {
+  return request({
+    url: '/common/uploadOSS',
+    method: 'post',
+    data: data
+  })
+}

src/components/LemonUI/components/editor.vue

@@ -296,11 +296,11 @@ export default {
       this._checkSubmitDisabled();
     },
     async selectFile(accept) {
-        if(accept=="*"){
-            this.accept = accept;
-            await this.$nextTick();
-            this.$refs.fileInput.click();
-        }else{
+        this.accept = accept;
+        await this.$nextTick();
+        this.$refs.fileInput.click();
+
+        if(accept === "image/*") {
             this.$emit("pickImg", this.clipboardBlob);
         }
     },

src/components/LemonUI/components/message/image.vue

@@ -20,13 +20,12 @@ export default {
 +b(lemon-message-image)
   +b(lemon-message)
     +e(content)
-      padding 0
+      background-color #FFF !important
       cursor pointer
       overflow hidden
-      max-width 20%
-      min-width 100px
+      min-width 38px
       img
-        width: 100%
+        max-width: 150px
         height: auto
         display block
 </style>

src/layout/index.vue

@@ -50,9 +50,23 @@
       </div>
     </div>
 
-    <el-dialog append-to-body width="auto" custom-class="im-dialog" :visible.sync="qw.open" :title="qw.title" :show-close="false">
+    <el-dialog append-to-body
+               :width="qw.isMaximized ? '100vw' : 'auto'"
+               custom-class="im-dialog"
+               :fullscreen="qw.isMaximized"
+               :visible.sync="qw.open"
+               :title="qw.title">
+      <template #title>
+        <span>{{ qw.title }}</span>
+        <span style="float:right;">
+          <i class="el-icon-full-screen"
+            @click.stop="toggleMaximize"
+            style="margin-right: 50px;cursor: pointer;color: #93969b"
+          />
+        </span>
+      </template>
       <div class="qw-im-content">
-        <QwIM :showQw="qw.open"/>
+        <QwIM :showQw="qw.open" :isMaximized="qw.isMaximized"/>
       </div>
     </el-dialog>
   </div>
@@ -107,7 +121,8 @@ export default {
       },
       qw: {
         open: false,
-        title: ''
+        title: '',
+        isMaximized: false
       }
     }
   },
@@ -146,6 +161,9 @@ export default {
       this.callOff()
       this.$store.dispatch('CallOff')
     },
+    toggleMaximize() {
+      this.qw.isMaximized = !this.qw.isMaximized;
+    },
     // initSocket(userId) {
     //     let that=this;
     //     if(!!this.qwIm.aSoket){
@@ -331,11 +349,10 @@ export default {
 }
 
 ::v-deep .im-dialog {
-  div.el-dialog__header {
-    display: none;
-  }
+  max-width: 100vw;
+  max-height: 100vh;
   .el-dialog__body {
-    padding: 0px !important;
+    padding: 0 !important;
   }
 }
 

src/utils/request.js

@@ -19,6 +19,10 @@ service.interceptors.request.use(config => {
   if (getToken() && !isToken) {
     config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   }
+  if (config.data instanceof FormData && config.headers['Content-Type']) {
+    delete config.headers['Content-Type']
+    delete config.headers['Authorization']
+  }
   return config
 }, error => {
     console.log(error)
@@ -42,13 +46,13 @@ service.interceptors.response.use(res => {
             location.href = '/index';
           })
         })
-    } 
+    }
     else if (code === 500) {
         Notification.error({
           title: msg
         })
         return Promise.reject(new Error(msg))
-    } 
+    }
     else if (code == 5001) {
       return res.data;
     }
@@ -58,7 +62,7 @@ service.interceptors.response.use(res => {
         })
         return Promise.reject('error')
     }
-  
+
     else {
          return res.data
     }

src/views/qw/qwChat/qq.vue

@@ -11,8 +11,8 @@
 
     <div class="imui-center qq-lemon-imui" v-show="showQW">
       <lemon-imui  class="lemon-slot"
-                   :width="windowWidth"
-                   :height="windowHeight"
+                   :width="isMaximized ? '100vw' : windowWidth"
+                   :height="isMaximized ? '90vh' : windowHeight"
                    :user="userData"
                    ref="IMUI"
                    :contact-contextmenu="contactContextmenu"
@@ -93,6 +93,7 @@ import VideoPlayer from '@/components/VideoPlayer/VueAliplayer.vue'
 import UserDetail from "@/views/qw/qwChat/userDetail/index.vue";
 import {ImSocket} from "@/utils/ImSocket";
 import {getToken} from '@/utils/auth'
+import {uploadOss} from "@/api/common";
 
 let pages = {};
 export default {
@@ -102,7 +103,8 @@ export default {
     UserDetail
   },
   props: {
-    showQw: Boolean
+    showQw: Boolean,
+    isMaximized: Boolean
   },
   data() {
     return {
@@ -155,6 +157,7 @@ export default {
         open: false
       },
       imSocket: null,
+      imUrl: process.env.VUE_APP_IM_WS_URL
     };
   },
   created(){
@@ -196,6 +199,10 @@ export default {
       }
     ]);
     IMUI.initEmoji(EmojiData);
+    IMUI.initEditorTools([
+      { name: "emoji" },
+      { name: "uploadImage" }
+    ])
   },
   beforeDestroy() {
     if (this.imSocket) {
@@ -204,7 +211,7 @@ export default {
   },
   methods: {
     initImSocket(companyId) {
-      this.imSocket = new ImSocket(`ws://127.0.0.1:8667/qwImSocket/${companyId}?token=${getToken()}`);
+      this.imSocket = new ImSocket(`${this.imUrl}/${companyId}?token=${getToken()}`);
       this.imSocket.onMessage(data => {
         const { IMUI } = this.$refs;
         let message = JSON.parse(data);
@@ -338,7 +345,7 @@ export default {
       const IMUI = this.$refs.IMUI;
       let params = {};
       if(message.type === "text"){  //text   image   voice   video
-        params = {"sessionId":message.toContactId,"appKey":this.qwUser.appKey,"content":message.content};
+        params = {"sessionId":message.toContactId,"appKey":this.qwUser.appKey,"content":message.content, "msgType": 1};
         sendMsg(params).then(response => {
           const {code, data} = response
           if(code === 200){
@@ -354,6 +361,24 @@ export default {
       // image
       else if(message.type === "image"){
         console.log("Event:image-click", message, next, file)
+        const formData = new FormData();
+        formData.append("file", file);
+        uploadOss(formData).then(response => {
+          const {code, url} = response
+          if (code === 200) {
+            params = {"sessionId":message.toContactId,"appKey":this.qwUser.appKey,"content":url, "msgType": 2};
+            sendMsg(params).then(response => {
+              const {code} = response
+              if(code === 200){
+                let conversation = IMUI.findConversation(message.toContactId);
+                conversation.lastSendTime = message.sendTime;
+                conversation.lastContent = message.content;
+                IMUI.topPopConversations(conversation);
+                next();
+              }
+            });
+          }
+        })
       }
       // file
       else if(message.type === "file"){