|
|
@@ -19,6 +19,7 @@
|
|
|
@change-contact="handleChangeContact"
|
|
|
@message-click="handleMessageClick"
|
|
|
@menu-avatar-click="handleMenuAvatarClick"
|
|
|
+ @pick-image="handleImageClick"
|
|
|
@send="handleSend">
|
|
|
<template #cover>
|
|
|
<div class="cover">
|
|
|
@@ -99,6 +100,8 @@
|
|
|
<img width="100%" :src="dialogImageUrl" alt="">
|
|
|
</el-dialog>
|
|
|
|
|
|
+ <Material ref="material" @pickImageData="handlePickImageDone" v-model="imageArr" type="image" :num="1" :width="150" :height="150" />
|
|
|
+
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -109,16 +112,20 @@ 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 { getContactsByUser,getConversations,getMessageList,getConversation,sendTextMsg,sendImageMsg} 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';
|
|
|
+import Material from '@/components/Material/index'
|
|
|
+
|
|
|
let pages = {};
|
|
|
export default {
|
|
|
name: "qqChat",
|
|
|
- components: { },
|
|
|
+ components: {
|
|
|
+ Material,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
theme: "default",
|
|
|
@@ -261,6 +268,8 @@ export default {
|
|
|
isFromLogin:false,
|
|
|
dialogImageUrl: '',
|
|
|
dialogVisible: false,
|
|
|
+ imageArr:[],
|
|
|
+ pickUploadImgData:null,
|
|
|
windowWidth: document.documentElement.clientWidth*0.65, //实时屏幕宽度
|
|
|
windowHeight: document.documentElement.clientHeight*0.7, //实时屏幕高度
|
|
|
queryParams: {
|
|
|
@@ -290,6 +299,7 @@ export default {
|
|
|
if(!this.qwIm.hasLogin){
|
|
|
this.initSocket(this.qwUser.deviceId);
|
|
|
}
|
|
|
+ this.deviceId=this.qwUser.deviceId;
|
|
|
this.UserData.id=this.qwUser.userId;
|
|
|
this.UserData.displayName=this.qwUser.nickName;
|
|
|
this.UserData.avatar=this.qwUser.avatar;
|
|
|
@@ -554,9 +564,10 @@ export default {
|
|
|
//instance.updateContact(contact);
|
|
|
instance.closeDrawer();
|
|
|
},
|
|
|
-
|
|
|
- appendMessageAction(msgData){
|
|
|
- if(msgData.type=="text"){ //文本 text image video voice
|
|
|
+
|
|
|
+ //收到消息后添加消息显示
|
|
|
+ appendMessageAction(msgData){
|
|
|
+ if(msgData.type=="text"){ //文本 text image video voice
|
|
|
const message = {
|
|
|
id: msgData.id,
|
|
|
status: msgData.status,
|
|
|
@@ -577,8 +588,18 @@ export default {
|
|
|
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=="voice"){ //音频
|
|
|
+ const message = {
|
|
|
+ id: msgData.id,
|
|
|
+ status: msgData.status,
|
|
|
+ type: msgData.type,
|
|
|
+ sendTime: msgData.sendTime,
|
|
|
+ url: msgData.content,
|
|
|
toContactId: msgData.toContactId,
|
|
|
fromUser: msgData.fromUser,
|
|
|
};
|
|
|
@@ -598,9 +619,20 @@ export default {
|
|
|
var conversation=IMUI.findConversations(message.toContactId);
|
|
|
conversation.lastSendTime=message.sendTime;
|
|
|
conversation.lastContent=message.content;
|
|
|
+ IMUI.topPopConversations(conversation);
|
|
|
next();
|
|
|
- console.log("qxj conversation:"+JSON.stringify(conversation));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if(message.type=="image"){
|
|
|
+ params={"conversationId":message.toContactId,"deviceId":this.qwUser.deviceId,"userId":this.qwUser.userId,"materialId":this.pickUploadImgData.id};
|
|
|
+ sendImageMsg(params).then(response => {
|
|
|
+ if(response.code==200){
|
|
|
+ var conversation=IMUI.findConversations(message.toContactId);
|
|
|
+ conversation.lastSendTime=message.sendTime;
|
|
|
+ conversation.lastContent="[图片]";
|
|
|
IMUI.topPopConversations(conversation);
|
|
|
+ next();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
@@ -612,7 +644,19 @@ export default {
|
|
|
handleMenuAvatarClick() {
|
|
|
console.log("Event:menu-avatar-click");
|
|
|
},
|
|
|
+ //聊天工具栏点击图片
|
|
|
+ handleImageClick() {
|
|
|
+ this.$refs.material.openMaterial(this.qwUser.deviceId);
|
|
|
+ console.log("Event:handleImageClick");
|
|
|
+ },
|
|
|
+ //选择图片框确定按钮回调
|
|
|
+ handlePickImageDone(data){
|
|
|
+ console.log("handlePickImageDone:"+JSON.stringify(data));
|
|
|
+ this.pickUploadImgData=data;
|
|
|
+ const IMUI = this.$refs.IMUI;
|
|
|
+ IMUI._handleRemoteImage(data.url);
|
|
|
|
|
|
+ },
|
|
|
handleMessageClick(e, key, message, instance) {
|
|
|
console.log("点击了消息", e, key, message);
|
|
|
console.log("qxj message:"+JSON.stringify(message));
|
wansfa