|
|
|
@ -16,9 +16,23 @@ |
|
|
|
<image class="chat-conversation-image-image" v-else :src="userInfo.avatar || defaultAvatar"></image> |
|
|
|
</view> |
|
|
|
<view class="chat-conversation-text"> |
|
|
|
<view class="chat-conversation-text-time" v-if="item.sendType == 1 && item.fromId != userInfo.userId">{{getUserName(item.fromId, item.fromName)}}</view> |
|
|
|
<view class="chat-conversation-text-time">{{formatTime(item.sendTime)}}</view> |
|
|
|
<view class="chat-conversation-text-text nine-user-select">{{item.content}}</view> |
|
|
|
<view class="conversation-text-time" v-if="item.sendType == 1 && item.fromId != userInfo.userId">{{getUserName(item.fromId, item.toId, item.fromName)}}</view> |
|
|
|
<view class="conversation-text-time">{{formatTime(item.sendTime)}}</view> |
|
|
|
<view v-if="item.messageType==1" class="chat-conversation-text-text chat-conversation-text-image"> |
|
|
|
<image lazy-load="true" class="chat-conversation-text-image-image" :src="item.content" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
<view v-else-if="item.messageType==2" class="chat-conversation-text-text chat-conversation-text-emoji"> |
|
|
|
<template v-for="(image, index) in getEmojiList(item.content)" :key="'image-' + key"> |
|
|
|
<image lazy-load="true" class="chat-conversation-text-emoji-image" :src="getEmoji(image)"></image> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
<view v-else-if="item.messageType==3" class="chat-conversation-text-text chat-conversation-text-voice"> |
|
|
|
<image class="chat-conversation-text-voice-image" src="/uni_modules/vrapile-im/static/image/chat/voice-right.png" mode="widthFix"></image> |
|
|
|
<span class="chat-conversation-text-voice-number" :style="{'width': (40 + item.content*10) + 'rpx'}">{{item.content}}" </span> |
|
|
|
</view> |
|
|
|
<view v-else class="chat-conversation-text-text nine-user-select"> |
|
|
|
{{item.content}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -30,7 +44,11 @@ |
|
|
|
<view @click="handleVoice" class="chat-footer-send-voice"> |
|
|
|
<image class="chat-footer-send-image" :src="iconVoice"></image> |
|
|
|
</view> |
|
|
|
<view v-if="isVoice" @longpress="handleSay" class="chat-footer-send-say"> |
|
|
|
<view v-if="isVoice" class="chat-footer-send-say" |
|
|
|
@touchstart="handleTouchStart" |
|
|
|
@touchend="handleTouchEnd" |
|
|
|
@longpress="startRecord" |
|
|
|
@contextmenu.prevent="() => {}"> |
|
|
|
<span>按住 说话</span> |
|
|
|
</view> |
|
|
|
<view v-else class="chat-footer-send-input"> |
|
|
|
@ -68,6 +86,8 @@ |
|
|
|
isVoice: false, |
|
|
|
inputText: "", |
|
|
|
|
|
|
|
startTime: 0, |
|
|
|
|
|
|
|
// 消息唯一key |
|
|
|
key: null, |
|
|
|
|
|
|
|
@ -168,13 +188,31 @@ |
|
|
|
handleVoice() { |
|
|
|
this.isVoice = !this.isVoice; |
|
|
|
}, |
|
|
|
handleTouchStart(e){ |
|
|
|
this.startTime = Date.now(); |
|
|
|
// 阻止默认行为 |
|
|
|
e.preventDefault(); |
|
|
|
}, |
|
|
|
handleTouchEnd(e) { |
|
|
|
this.handleSay(); |
|
|
|
// 阻止默认行为 |
|
|
|
e.preventDefault(); |
|
|
|
}, |
|
|
|
startRecord(e) { |
|
|
|
// 阻止默认行为 |
|
|
|
e.preventDefault(); |
|
|
|
}, |
|
|
|
// 语音消息处理， 暂时先发送个提示 |
|
|
|
handleSay() { |
|
|
|
const duration = Date.now() - this.startTime |
|
|
|
if (duration < 500) { |
|
|
|
return |
|
|
|
} |
|
|
|
let sendInfo = { |
|
|
|
code: 2, |
|
|
|
message: { |
|
|
|
//消息文件类型 0-文本|1-图片|2-附件|3-语言|4-撤回 |
|
|
|
messageType: 0, |
|
|
|
//消息文件类型 0-文本|1-图片|2-表情|3-语音|4-视频|5-附件|9-混合|99-撤回 |
|
|
|
messageType: 3, |
|
|
|
//聊天室id |
|
|
|
toId: this.chatObject.id, |
|
|
|
//消息发送人 |
|
|
|
@ -182,7 +220,7 @@ |
|
|
|
//消息发送人账号 |
|
|
|
fromName: this.userInfo.userName, |
|
|
|
//消息内容 |
|
|
|
content: "您发送了一条语音消息", |
|
|
|
content: Math.ceil(duration/1000), |
|
|
|
//消息类型：0-私聊|1-群聊 |
|
|
|
sendType: this.chatObject.type, |
|
|
|
//扩展消息 |
|
|
|
@ -195,11 +233,24 @@ |
|
|
|
}, |
|
|
|
// 表情消息处理， 暂时先发送个提示 |
|
|
|
handleEmoji() { |
|
|
|
let emojiList = [ |
|
|
|
'daxiao.png', |
|
|
|
'danao.png', |
|
|
|
'shengqi.png', |
|
|
|
'sile.png', |
|
|
|
'xianwen.png' |
|
|
|
] |
|
|
|
let randomIndex |
|
|
|
let content = [] |
|
|
|
do{ |
|
|
|
randomIndex = Math.floor(Math.random() * emojiList.length) |
|
|
|
content.push(emojiList[randomIndex]) |
|
|
|
}while(randomIndex % 3 != 0); |
|
|
|
let sendInfo = { |
|
|
|
code: 2, |
|
|
|
message: { |
|
|
|
//消息文件类型 0-文本|1-图片|2-附件|3-语言|4-撤回 |
|
|
|
messageType: 0, |
|
|
|
//消息文件类型 0-文本|1-图片|2-表情|3-语音|4-视频|5-附件|9-混合|99-撤回 |
|
|
|
messageType: 2, |
|
|
|
//聊天室id |
|
|
|
toId: this.chatObject.id, |
|
|
|
//消息发送人 |
|
|
|
@ -207,7 +258,7 @@ |
|
|
|
//消息发送人账号 |
|
|
|
fromName: this.userInfo.userName, |
|
|
|
//消息内容 |
|
|
|
content: "您发送了一个表情消息", |
|
|
|
content: content, |
|
|
|
//消息类型：0-私聊|1-群聊 |
|
|
|
sendType: this.chatObject.type, |
|
|
|
//扩展消息 |
|
|
|
@ -224,7 +275,7 @@ |
|
|
|
code: 2, |
|
|
|
message: { |
|
|
|
//消息文件类型 0-文本|1-图片|2-附件|3-语言|4-撤回 |
|
|
|
messageType: 0, |
|
|
|
messageType: 1, |
|
|
|
//聊天室id |
|
|
|
toId: this.chatObject.id, |
|
|
|
//消息发送人 |
|
|
|
@ -232,7 +283,7 @@ |
|
|
|
//消息发送人账号 |
|
|
|
fromName: this.userInfo.userName, |
|
|
|
//消息内容 |
|
|
|
content: "您发送了一个更多的消息", |
|
|
|
content: this.userInfo.avatar || "https://www.ninecloud.top/unine/static/image/app/nine-app-all.png", |
|
|
|
//消息类型：0-私聊|1-群聊 |
|
|
|
sendType: this.chatObject.type, |
|
|
|
//扩展消息 |
|
|
|
@ -305,10 +356,18 @@ |
|
|
|
this.chatObject["messageList"] = this.messageList; |
|
|
|
let lastMessage = res.data[res.data.length-1]; |
|
|
|
this.chatObject["messageLast"] = lastMessage; |
|
|
|
let content = lastMessage["content"] |
|
|
|
if(lastMessage["messageType"] == 3){ |
|
|
|
content = "[语音]" |
|
|
|
}else if(lastMessage["messageType"] == 2){ |
|
|
|
content = "[表情]" |
|
|
|
}else if(lastMessage["messageType"] == 1){ |
|
|
|
content = "[图片]" |
|
|
|
} |
|
|
|
if(lastMessage["sendType"] == 0){ |
|
|
|
this.chatObject["messageShow"] = lastMessage["content"]; |
|
|
|
this.chatObject["messageShow"] = content; |
|
|
|
}else{ |
|
|
|
this.chatObject["messageShow"] = store.getters.getUserName(lastMessage["fromId"], lastMessage["fromName"]) + ": " + lastMessage["content"] |
|
|
|
this.chatObject["messageShow"] = store.getters.getUserName(lastMessage["fromId"], lastMessage["fromName"]) + ": " + content |
|
|
|
} |
|
|
|
this.chatObject["messageTime"] = this.formatDate(lastMessage["sendTime"]); |
|
|
|
} |
|
|
|
@ -326,6 +385,19 @@ |
|
|
|
this.scrollToBottom(); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
getEmojiList(content){ |
|
|
|
if(typeof content === 'object'){ |
|
|
|
return content; |
|
|
|
} |
|
|
|
try{ |
|
|
|
return JSON.parse(content.replace(/(\w+\.png)/g, '"$1"')); |
|
|
|
}catch(e){ |
|
|
|
return new Array; |
|
|
|
} |
|
|
|
}, |
|
|
|
getEmoji(image){ |
|
|
|
return '/uni_modules/vrapile-im/static/image/emoji/'+image |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
