You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1645 lines
49 KiB
1645 lines
49 KiB
<template>
|
|
<div class="chat-box" @click="closeRefBox()" @mousemove="readedMessage()">
|
|
<el-container>
|
|
<el-header height="50px">
|
|
<span>{{ title }}</span>
|
|
<span
|
|
title="群聊信息"
|
|
v-show="isGroup"
|
|
class="btn-side el-icon-more"
|
|
@click="showSide = !showSide"
|
|
></span>
|
|
<span
|
|
title="用户信息"
|
|
v-show="isPrivate"
|
|
class="btn-side el-icon-more"
|
|
@click="showUserSide = !showUserSide"
|
|
></span>
|
|
</el-header>
|
|
<el-main style="padding: 0">
|
|
<el-container>
|
|
<el-container class="content-box">
|
|
<el-main class="im-chat-main" id="chatScrollBox" @scroll="onScroll">
|
|
<div class="im-chat-box">
|
|
<div
|
|
v-for="(msgInfo, idx) in showMessages"
|
|
:key="showMinIdx + idx"
|
|
>
|
|
<chat-message-item
|
|
@call="onCall(msgInfo.type)"
|
|
:mine="msgInfo.sendId == mine.id"
|
|
:headImage="headImage(msgInfo)"
|
|
:showName="showName(msgInfo)"
|
|
:msgInfo="msgInfo"
|
|
:groupMembers="groupMembers"
|
|
@resend="onResendMessage"
|
|
@delete="deleteMessage"
|
|
@recall="recallMessage"
|
|
@translate="translateMessage"
|
|
>
|
|
</chat-message-item>
|
|
</div>
|
|
</div>
|
|
</el-main>
|
|
<div
|
|
v-if="!isInBottom"
|
|
class="scroll-to-bottom"
|
|
@click="scrollToBottom"
|
|
>
|
|
{{
|
|
newMessageSize > 0 ? newMessageSize + "条新消息" : "回到底部"
|
|
}}
|
|
</div>
|
|
<el-footer height="220px" class="im-chat-footer">
|
|
<div class="chat-tool-bar">
|
|
<div
|
|
title="表情"
|
|
class="icon iconfont icon-emoji"
|
|
ref="emotion"
|
|
@click.stop="showEmotionBox()"
|
|
></div>
|
|
<div title="发送图片">
|
|
<file-upload
|
|
:action="'/image/upload'"
|
|
:maxSize="5 * 1024 * 1024"
|
|
:fileTypes="[
|
|
'image/jpeg',
|
|
'image/png',
|
|
'image/jpg',
|
|
'image/webp',
|
|
'image/gif',
|
|
]"
|
|
@before="onImageBefore"
|
|
@success="onImageSuccess"
|
|
@fail="onImageFail"
|
|
>
|
|
<i class="el-icon-picture-outline"></i>
|
|
</file-upload>
|
|
</div>
|
|
<div
|
|
title="快捷回复"
|
|
class="el-icon-s-comment"
|
|
@click.stop="openQuickReplyBox()"
|
|
></div>
|
|
<div
|
|
title="回执消息"
|
|
v-show="isGroup && memberSize <= 500"
|
|
class="icon iconfont icon-receipt"
|
|
:class="isReceipt ? 'chat-tool-active' : ''"
|
|
@click="onSwitchReceipt"
|
|
></div>
|
|
<div
|
|
title="聊天记录"
|
|
class="el-icon-chat-dot-round"
|
|
@click="showHistoryBox()"
|
|
></div>
|
|
<div
|
|
title="转接客服"
|
|
class="el-icon-service"
|
|
@click="showChangeCustomerBox()"
|
|
v-if="isPrivate"
|
|
></div>
|
|
</div>
|
|
<div class="send-content-area">
|
|
<ChatInput
|
|
:ownerId="group.ownerId"
|
|
ref="chatInputEditor"
|
|
:group-members="groupMembers"
|
|
@submit="sendMessage"
|
|
/>
|
|
<div class="send-btn-area">
|
|
<el-select
|
|
v-model="countryCode"
|
|
style="width: 110px; margin-right: 10px"
|
|
size="small"
|
|
>
|
|
<el-option
|
|
v-for="item in countryCodeList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
<el-button
|
|
type="primary"
|
|
@click="translateMessage(countryCode)"
|
|
>翻译</el-button
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-s-promotion"
|
|
@click="notifySend()"
|
|
>发送</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</el-footer>
|
|
</el-container>
|
|
<el-aside class="side-box" width="320px" v-if="showSide">
|
|
<chat-group-side
|
|
:group="group"
|
|
:groupMembers="groupMembers"
|
|
@reload="loadGroup(group.id)"
|
|
>
|
|
</chat-group-side>
|
|
</el-aside>
|
|
<el-aside
|
|
class="side-box user-info-side"
|
|
width="320px"
|
|
v-if="showUserSide"
|
|
>
|
|
<div class="user-info-container">
|
|
<!-- <div class="user-info-header"> -->
|
|
<!-- <img :src="userInfo.headImage || userInfo.headImageThumb" class="user-avatar-large" /> -->
|
|
<!-- <h3 class="user-nickname">{{ userInfo.nickName }}</h3>
|
|
<p class="user-username">@{{ userInfo.userName }}</p> -->
|
|
<!-- </div> -->
|
|
<div class="user-info-content">
|
|
<div class="info-item">
|
|
<div class="info-label">用户IP</div>
|
|
<div class="info-value">
|
|
{{ formatIpDisplay(userInfo.lastLoginIp, ipLocation) }}
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">来源地址</div>
|
|
<div class="info-value">{{ userInfo.platformName }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">标签</div>
|
|
<div class="info-value">
|
|
<el-select
|
|
v-model="selectedLabels"
|
|
size="small"
|
|
multiple
|
|
filterable
|
|
placeholder="请选择标签"
|
|
:loading="labelOptionsLoading"
|
|
@change="handleSelectLabels"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in availableLabelOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="String(item.value)"
|
|
:disabled="selectedLabels.includes(String(item.value))"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">分组</div>
|
|
<div class="info-value">
|
|
<el-select
|
|
v-model="selectedGroup"
|
|
size="small"
|
|
clearable
|
|
style="width: 120px"
|
|
@change="handleSelectUserGroup"
|
|
>
|
|
<el-option
|
|
v-for="item in groupOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-aside>
|
|
</el-container>
|
|
</el-main>
|
|
|
|
<emotion ref="emoBox" @emotion="onEmotion"></emotion>
|
|
<chat-record
|
|
:visible="showRecord"
|
|
@close="closeRecordBox"
|
|
@send="onSendRecord"
|
|
></chat-record>
|
|
<group-member-selector
|
|
ref="rtcSel"
|
|
:group="group"
|
|
@complete="onInviteOk"
|
|
></group-member-selector>
|
|
<rtc-group-join ref="rtcJoin" :groupId="group.id"></rtc-group-join>
|
|
<chat-history
|
|
:visible="showHistory"
|
|
:chat="chat"
|
|
:friend="friend"
|
|
:group="group"
|
|
:groupMembers="groupMembers"
|
|
@close="closeHistoryBox"
|
|
></chat-history>
|
|
<change-customer
|
|
:visible="showChangeCustomer"
|
|
:target-user-id="targetUserId"
|
|
@close="closeChangeCustomerBox"
|
|
@transfer-success="onTransferSuccess"
|
|
></change-customer>
|
|
|
|
<!-- 快捷回复弹窗 -->
|
|
<el-dialog
|
|
title="快捷回复"
|
|
:visible.sync="showQuickReplyBox"
|
|
width="500px"
|
|
append-to-body
|
|
@close="closeQuickReplyBox"
|
|
>
|
|
<el-scrollbar height="300px">
|
|
<div class="quick-reply-list">
|
|
<div
|
|
class="quick-item"
|
|
v-for="item in quickReplyList"
|
|
:key="item.id"
|
|
@click="selectQuickReply(item)"
|
|
>
|
|
{{ item.replyName }}
|
|
</div>
|
|
<div
|
|
class="quick-empty"
|
|
v-if="quickReplyList.length === 0 && !quickLoading"
|
|
>
|
|
暂无快捷回复
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="showQuickReplyBox = false">关闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ChatGroupSide from "./ChatGroupSide.vue";
|
|
import ChatMessageItem from "./ChatMessageItem.vue";
|
|
import FileUpload from "../common/FileUpload.vue";
|
|
import Emotion from "../common/Emotion.vue";
|
|
import ChatRecord from "./ChatRecord.vue";
|
|
import ChatHistory from "./ChatHistory.vue";
|
|
import ChatAtBox from "./ChatAtBox.vue";
|
|
import GroupMemberSelector from "../group/GroupMemberSelector.vue";
|
|
import RtcGroupJoin from "../rtc/RtcGroupJoin.vue";
|
|
import ChatInput from "./ChatInput";
|
|
import ChangeCustomer from "./ChangeCustomer.vue";
|
|
|
|
export default {
|
|
name: "chatPrivate",
|
|
components: {
|
|
ChatInput,
|
|
ChatMessageItem,
|
|
FileUpload,
|
|
ChatGroupSide,
|
|
Emotion,
|
|
ChatRecord,
|
|
ChatHistory,
|
|
ChatAtBox,
|
|
GroupMemberSelector,
|
|
RtcGroupJoin,
|
|
ChangeCustomer,
|
|
},
|
|
props: {
|
|
chat: {
|
|
type: Object,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
group: {},
|
|
groupMembers: [],
|
|
groupOptions: [],
|
|
groupOptionsLoading: false,
|
|
selectedGroup: "",
|
|
labelOptions: [],
|
|
labelOptionsLoading: false,
|
|
selectedLabels: [],
|
|
sendImageUrl: "",
|
|
sendImageFile: "",
|
|
placeholder: "",
|
|
isReceipt: true,
|
|
showRecord: false,
|
|
showSide: false,
|
|
showUserSide: true,
|
|
showHistory: false,
|
|
showChangeCustomer: false,
|
|
showQuickReplyBox: false, // 快捷回复弹窗
|
|
quickReplyList: [], // 快捷回复列表
|
|
quickLoading: false, // 加载状态
|
|
lockMessage: false,
|
|
showMinIdx: 0,
|
|
reqQueue: [],
|
|
isSending: false,
|
|
isInBottom: false,
|
|
newMessageSize: 0,
|
|
ipLocation: "",
|
|
maxTmpId: 0,
|
|
countryCode: "en",
|
|
countryCodeList: [
|
|
{ label: "英语", value: "en" },
|
|
{ label: "日语", value: "jp" },
|
|
{ label: "韩语", value: "kor" },
|
|
{ label: "越南语", value: "vie" },
|
|
{ label: "俄语", value: "ru" },
|
|
{ label: "德语", value: "de" },
|
|
{ label: "法语", value: "fra" },
|
|
{ label: "葡萄牙语", value: "pt" },
|
|
{ label: "阿拉伯语", value: "ara" },
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
moveChatToTop() {
|
|
let chatIdx = this.chatStore.findChatIdx(this.chat);
|
|
this.chatStore.moveTop(chatIdx);
|
|
},
|
|
closeRefBox() {
|
|
this.$refs.emoBox.close();
|
|
},
|
|
onCall(type) {
|
|
if (type == this.$enums.MESSAGE_TYPE.ACT_RT_VOICE) {
|
|
this.showPrivateVideo("voice");
|
|
} else if (type == this.$enums.MESSAGE_TYPE.ACT_RT_VIDEO) {
|
|
this.showPrivateVideo("video");
|
|
}
|
|
},
|
|
onSwitchReceipt() {
|
|
this.isReceipt = !this.isReceipt;
|
|
this.refreshPlaceHolder();
|
|
},
|
|
onImageSuccess(data, file) {
|
|
let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
|
|
msgInfo.content = JSON.stringify(data);
|
|
msgInfo.receipt = this.isReceipt;
|
|
this.sendMessageRequest(msgInfo)
|
|
.then((m) => {
|
|
msgInfo.id = m.id;
|
|
msgInfo.status = m.status;
|
|
this.isReceipt = false;
|
|
this.chatStore.updateMessage(msgInfo, file.chat);
|
|
})
|
|
.catch(() => {
|
|
msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
|
|
this.chatStore.updateMessage(msgInfo, file.chat);
|
|
});
|
|
},
|
|
onImageFail(e, file) {
|
|
let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
|
|
msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
|
|
this.chatStore.updateMessage(msgInfo, file.chat);
|
|
},
|
|
onImageBefore(file) {
|
|
if (this.isBanned) {
|
|
this.showBannedTip();
|
|
return;
|
|
}
|
|
let url = URL.createObjectURL(file);
|
|
let data = {
|
|
originUrl: url,
|
|
thumbUrl: url,
|
|
};
|
|
let msgInfo = {
|
|
tmpId: this.generateId(),
|
|
fileId: file.uid,
|
|
sendId: this.mine.id,
|
|
content: JSON.stringify(data),
|
|
sendTime: new Date().getTime(),
|
|
selfSend: true,
|
|
type: this.$enums.MESSAGE_TYPE.IMAGE,
|
|
readedCount: 0,
|
|
status: this.$enums.MESSAGE_STATUS.SENDING,
|
|
};
|
|
this.fillTargetId(msgInfo, this.chat.targetId);
|
|
this.chatStore.insertMessage(msgInfo, this.chat);
|
|
this.moveChatToTop();
|
|
file.msgInfo = msgInfo;
|
|
file.chat = this.chat;
|
|
let chat = this.chat;
|
|
this.getImageSize(file).then((size) => {
|
|
data.width = size.width;
|
|
data.height = size.height;
|
|
msgInfo.content = JSON.stringify(data);
|
|
this.chatStore.updateMessage(msgInfo, chat);
|
|
this.scrollToBottom();
|
|
});
|
|
},
|
|
onFileSuccess(url, file) {
|
|
let data = {
|
|
name: file.name,
|
|
size: file.size,
|
|
url: url,
|
|
};
|
|
let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
|
|
msgInfo.content = JSON.stringify(data);
|
|
msgInfo.receipt = this.isReceipt;
|
|
this.sendMessageRequest(msgInfo)
|
|
.then((m) => {
|
|
msgInfo.id = m.id;
|
|
msgInfo.status = m.status;
|
|
this.isReceipt = false;
|
|
this.refreshPlaceHolder();
|
|
this.chatStore.updateMessage(msgInfo, file.chat);
|
|
})
|
|
.catch(() => {
|
|
msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
|
|
this.chatStore.updateMessage(msgInfo, file.chat);
|
|
});
|
|
},
|
|
onFileFail(e, file) {
|
|
let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
|
|
msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
|
|
this.chatStore.updateMessage(msgInfo, file.chat);
|
|
},
|
|
onFileBefore(file) {
|
|
if (this.isBanned) {
|
|
this.showBannedTip();
|
|
return;
|
|
}
|
|
let url = URL.createObjectURL(file);
|
|
let data = {
|
|
name: file.name,
|
|
size: file.size,
|
|
url: url,
|
|
};
|
|
let msgInfo = {
|
|
tmpId: this.generateId(),
|
|
sendId: this.mine.id,
|
|
content: JSON.stringify(data),
|
|
sendTime: new Date().getTime(),
|
|
selfSend: true,
|
|
type: this.$enums.MESSAGE_TYPE.FILE,
|
|
readedCount: 0,
|
|
status: this.$enums.MESSAGE_STATUS.SENDING,
|
|
};
|
|
this.fillTargetId(msgInfo, this.chat.targetId);
|
|
this.chatStore.insertMessage(msgInfo, this.chat);
|
|
this.moveChatToTop();
|
|
file.msgInfo = msgInfo;
|
|
file.chat = this.chat;
|
|
},
|
|
onCloseSide() {
|
|
this.showSide = false;
|
|
this.showUserSide = false;
|
|
},
|
|
onScrollToTop() {
|
|
this.showMinIdx = this.showMinIdx > 10 ? this.showMinIdx - 10 : 0;
|
|
},
|
|
onScroll(e) {
|
|
let scrollElement = e.target;
|
|
let scrollTop = scrollElement.scrollTop;
|
|
if (scrollTop < 30) {
|
|
this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0;
|
|
this.isInBottom = false;
|
|
}
|
|
if (
|
|
scrollTop + scrollElement.clientHeight >=
|
|
scrollElement.scrollHeight - 30
|
|
) {
|
|
this.isInBottom = true;
|
|
this.newMessageSize = 0;
|
|
}
|
|
},
|
|
showEmotionBox() {
|
|
let width = this.$refs.emotion.offsetWidth;
|
|
let left = this.$elm.fixLeft(this.$refs.emotion);
|
|
let top = this.$elm.fixTop(this.$refs.emotion);
|
|
this.$refs.emoBox.open({
|
|
x: left + width / 2,
|
|
y: top,
|
|
});
|
|
},
|
|
onEmotion(emoText) {
|
|
this.$refs.chatInputEditor.insertEmoji(emoText);
|
|
},
|
|
showRecordBox() {
|
|
this.showRecord = true;
|
|
},
|
|
closeRecordBox() {
|
|
this.showRecord = false;
|
|
},
|
|
showPrivateVideo(mode) {
|
|
if (this.isBanned) {
|
|
this.showBannedTip();
|
|
return;
|
|
}
|
|
let rtcInfo = {
|
|
mode: mode,
|
|
isHost: true,
|
|
friend: this.friend,
|
|
};
|
|
this.$eventBus.$emit("openPrivateVideo", rtcInfo);
|
|
},
|
|
onGroupVideo() {
|
|
if (this.isBanned) {
|
|
this.showBannedTip();
|
|
return;
|
|
}
|
|
let ids = [this.mine.id];
|
|
let maxChannel = this.configStore.webrtc.maxChannel;
|
|
this.$refs.rtcSel.open(maxChannel, ids, ids, []);
|
|
},
|
|
onInviteOk(members) {
|
|
if (members.length < 2) {
|
|
return;
|
|
}
|
|
let userInfos = [];
|
|
members.forEach((m) => {
|
|
userInfos.push({
|
|
id: m.userId,
|
|
nickName: m.showNickName,
|
|
headImage: m.headImage,
|
|
isCamera: false,
|
|
isMicroPhone: true,
|
|
});
|
|
});
|
|
let rtcInfo = {
|
|
isHost: true,
|
|
groupId: this.group.id,
|
|
inviterId: this.mine.id,
|
|
userInfos: userInfos,
|
|
};
|
|
this.$eventBus.$emit("openGroupVideo", rtcInfo);
|
|
},
|
|
showHistoryBox() {
|
|
this.showHistory = true;
|
|
},
|
|
closeHistoryBox() {
|
|
this.showHistory = false;
|
|
},
|
|
onSendRecord(data) {
|
|
if (this.isBanned) {
|
|
this.showBannedTip();
|
|
return;
|
|
}
|
|
let msgInfo = {
|
|
tmpId: this.generateId(),
|
|
content: JSON.stringify(data),
|
|
type: this.$enums.MESSAGE_TYPE.AUDIO,
|
|
receipt: this.isReceipt,
|
|
};
|
|
this.fillTargetId(msgInfo, this.chat.targetId);
|
|
const chat = this.chat;
|
|
let tmpMessage = this.buildTmpMessage(msgInfo);
|
|
this.chatStore.insertMessage(tmpMessage, chat);
|
|
this.moveChatToTop();
|
|
this.sendMessageRequest(msgInfo)
|
|
.then((m) => {
|
|
tmpMessage.id = m.id;
|
|
tmpMessage.status = m.status;
|
|
this.chatStore.updateMessage(tmpMessage, chat);
|
|
this.moveChatToTop();
|
|
this.$refs.chatInputEditor.focus();
|
|
this.scrollToBottom();
|
|
this.showRecord = false;
|
|
this.isReceipt = false;
|
|
this.refreshPlaceHolder();
|
|
})
|
|
.catch(() => {
|
|
tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
|
|
this.chatStore.updateMessage(tmpMessage, this.chat);
|
|
});
|
|
},
|
|
fillTargetId(msgInfo, targetId) {
|
|
if (this.chat.type == "GROUP") {
|
|
msgInfo.groupId = targetId;
|
|
} else {
|
|
msgInfo.recvId = targetId;
|
|
}
|
|
},
|
|
notifySend() {
|
|
this.$refs.chatInputEditor.submit();
|
|
},
|
|
async sendMessage(fullList) {
|
|
this.resetEditor();
|
|
console.log(fullList);
|
|
this.readedMessage();
|
|
if (this.isBanned) {
|
|
this.showBannedTip();
|
|
return;
|
|
}
|
|
let sendText = this.isReceipt ? "【回执消息】" : "";
|
|
fullList.forEach(async (msg) => {
|
|
switch (msg.type) {
|
|
case "text":
|
|
await this.sendTextMessage(sendText + msg.content, msg.atUserIds);
|
|
break;
|
|
case "image":
|
|
await this.sendImageMessage(msg.content.file);
|
|
break;
|
|
case "file":
|
|
await this.sendFileMessage(msg.content.file);
|
|
break;
|
|
}
|
|
});
|
|
},
|
|
sendImageMessage(file) {
|
|
return new Promise((resolve, reject) => {
|
|
this.onImageBefore(file);
|
|
let formData = new FormData();
|
|
formData.append("file", file);
|
|
this.$http
|
|
.post("/image/upload?isPermanent=false", formData, {
|
|
headers: {
|
|
"Content-Type": "multipart/form-data",
|
|
},
|
|
})
|
|
.then((data) => {
|
|
this.onImageSuccess(data, file);
|
|
resolve();
|
|
})
|
|
.catch((res) => {
|
|
this.onImageFail(res, file);
|
|
reject();
|
|
});
|
|
this.$nextTick(() => this.$refs.chatInputEditor.focus());
|
|
this.scrollToBottom();
|
|
});
|
|
},
|
|
sendTextMessage(sendText, atUserIds) {
|
|
return new Promise((resolve, reject) => {
|
|
if (!sendText.trim()) {
|
|
reject();
|
|
}
|
|
let msgInfo = {
|
|
tmpId: this.generateId(),
|
|
content: sendText,
|
|
type: this.$enums.MESSAGE_TYPE.TEXT,
|
|
};
|
|
this.fillTargetId(msgInfo, this.chat.targetId);
|
|
if (this.chat.type == "GROUP") {
|
|
msgInfo.atUserIds = atUserIds;
|
|
msgInfo.receipt = this.isReceipt;
|
|
}
|
|
this.lockMessage = true;
|
|
const chat = this.chat;
|
|
let tmpMessage = this.buildTmpMessage(msgInfo);
|
|
this.chatStore.insertMessage(tmpMessage, chat);
|
|
this.moveChatToTop();
|
|
this.sendMessageRequest(msgInfo)
|
|
.then((m) => {
|
|
tmpMessage.id = m.id;
|
|
tmpMessage.status = m.status;
|
|
tmpMessage.content = m.content;
|
|
this.chatStore.updateMessage(tmpMessage, chat);
|
|
})
|
|
.catch(() => {
|
|
tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
|
|
this.chatStore.updateMessage(tmpMessage, chat);
|
|
})
|
|
.finally(() => {
|
|
this.isReceipt = false;
|
|
resolve();
|
|
});
|
|
});
|
|
},
|
|
sendFileMessage(file) {
|
|
return new Promise((resolve, reject) => {
|
|
let check = this.$refs.fileUpload.beforeUpload(file);
|
|
if (check) {
|
|
this.$refs.fileUpload.onFileUpload({ file });
|
|
}
|
|
});
|
|
},
|
|
onResendMessage(msgInfo) {
|
|
if (msgInfo.type != this.$enums.MESSAGE_TYPE.TEXT) {
|
|
this.$message.error("该消息不支持自动重新发送，建议手动重新发送");
|
|
return;
|
|
}
|
|
const chat = this.chat;
|
|
this.chatStore.deleteMessage(msgInfo, chat);
|
|
msgInfo.tmpId = this.generateId();
|
|
let tmpMessage = this.buildTmpMessage(msgInfo);
|
|
this.chatStore.insertMessage(tmpMessage, chat);
|
|
this.moveChatToTop();
|
|
this.sendMessageRequest(msgInfo)
|
|
.then((m) => {
|
|
tmpMessage.id = m.id;
|
|
tmpMessage.status = m.status;
|
|
tmpMessage.content = m.content;
|
|
this.chatStore.updateMessage(tmpMessage, chat);
|
|
})
|
|
.catch(() => {
|
|
tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
|
|
this.chatStore.updateMessage(tmpMessage, chat);
|
|
})
|
|
.finally(() => {
|
|
this.scrollToBottom();
|
|
});
|
|
},
|
|
deleteMessage(msgInfo) {
|
|
this.$confirm("确认删除消息?", "删除消息", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}).then(() => {
|
|
this.chatStore.deleteMessage(msgInfo, this.chat);
|
|
});
|
|
},
|
|
recallMessage(msgInfo) {
|
|
this.$confirm("确认撤回消息?", "撤回消息", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}).then(() => {
|
|
let url = `/message/${this.chat.type.toLowerCase()}/recall/${
|
|
msgInfo.id
|
|
}`;
|
|
this.$http({
|
|
url: url,
|
|
method: "delete",
|
|
}).then((m) => {
|
|
this.$message.success("消息已撤回");
|
|
m.selfSend = true;
|
|
this.chatStore.recallMessage(m, this.chat);
|
|
});
|
|
});
|
|
},
|
|
async translateMessage(msgInfo) {
|
|
try {
|
|
// 调用翻译API
|
|
const res = await this.getTranslateText(msgInfo.content);
|
|
if (res) {
|
|
// 找到chatStore中的消息并更新
|
|
let chat = this.chatStore.findChat(this.chat);
|
|
let message = this.chatStore.findMessage(chat, msgInfo);
|
|
if (message) {
|
|
// 直接更新消息对象的content属性
|
|
message.content = res;
|
|
// 标记需要保存
|
|
chat.stored = false;
|
|
this.chatStore.saveToStorage();
|
|
this.$message.success("翻译成功");
|
|
}
|
|
}
|
|
} catch (error) {
|
|
this.$message.error("翻译失败: " + (error.message || "未知错误"));
|
|
}
|
|
},
|
|
readedMessage() {
|
|
if (this.chat.unreadCount > 0) {
|
|
if (this.isGroup) {
|
|
var url = `/message/group/readed?groupId=${this.chat.targetId}`;
|
|
} else {
|
|
url = `/message/private/readed?friendId=${this.chat.targetId}`;
|
|
}
|
|
this.$http({
|
|
url: url,
|
|
method: "put",
|
|
}).then(() => {});
|
|
this.chatStore.resetUnreadCount(this.chat);
|
|
}
|
|
},
|
|
loadReaded(fId) {
|
|
this.$http({
|
|
url: `/message/private/maxReadedId?friendId=${fId}`,
|
|
method: "get",
|
|
}).then((id) => {
|
|
this.chatStore.readedMessage({
|
|
friendId: fId,
|
|
maxId: id,
|
|
});
|
|
});
|
|
},
|
|
loadGroup(groupId) {
|
|
this.$http({
|
|
url: `/group/find/${groupId}`,
|
|
method: "get",
|
|
}).then((group) => {
|
|
this.group = group;
|
|
this.chatStore.updateChatFromGroup(group);
|
|
this.groupStore.updateGroup(group);
|
|
});
|
|
|
|
this.$http({
|
|
url: `/group/members/${groupId}`,
|
|
method: "get",
|
|
}).then((groupMembers) => {
|
|
this.groupMembers = groupMembers;
|
|
});
|
|
},
|
|
updateFriendInfo() {
|
|
if (this.isFriend) {
|
|
let friend = JSON.parse(JSON.stringify(this.friend));
|
|
friend.headImage = this.userInfo.headImageThumb;
|
|
friend.nickName = this.userInfo.nickName;
|
|
friend.showNickName = friend.remarkNickName
|
|
? friend.remarkNickName
|
|
: friend.nickName;
|
|
this.chatStore.updateChatFromFriend(friend);
|
|
this.friendStore.updateFriend(friend);
|
|
} else {
|
|
this.chatStore.updateChatFromUser(this.userInfo);
|
|
}
|
|
},
|
|
async loadFriend(friendId) {
|
|
try {
|
|
this.labelOptionsLoading = true;
|
|
const userInfo = await this.$http({
|
|
url: `/user/find/${friendId}`,
|
|
method: "GET",
|
|
});
|
|
this.userInfo = userInfo;
|
|
if (userInfo.lastLoginIp) {
|
|
const location = await this.getIpLocation(userInfo.lastLoginIp);
|
|
this.ipLocation = location;
|
|
}
|
|
this.updateFriendInfo();
|
|
await this.loadLabelOptions(friendId);
|
|
this.selectedLabels = [];
|
|
if (userInfo.labelIds) {
|
|
this.selectedLabels = userInfo.labelIds
|
|
.split(",")
|
|
.map((id) => String(id.trim()))
|
|
.filter((id) => id);
|
|
}
|
|
await this.loadAllGroupOptions(friendId);
|
|
this.$nextTick(() => {
|
|
if (this.userInfo.groupIds) {
|
|
this.selectedGroup = String(this.userInfo.groupIds);
|
|
} else if (
|
|
this.userInfo.groupNames &&
|
|
this.userInfo.groupNames.length > 0
|
|
) {
|
|
const currentGroupName = this.userInfo.groupNames[0];
|
|
const matchedGroup = this.groupOptions.find(
|
|
(item) => item.label === currentGroupName
|
|
);
|
|
if (matchedGroup) {
|
|
this.selectedGroup = matchedGroup.value;
|
|
}
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error("加载用户信息失败:", error);
|
|
} finally {
|
|
this.labelOptionsLoading = false;
|
|
}
|
|
},
|
|
showName(msgInfo) {
|
|
if (!msgInfo) {
|
|
return "";
|
|
}
|
|
if (this.isGroup) {
|
|
let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
|
|
return member ? member.showNickName : msgInfo.sendNickName || "";
|
|
} else {
|
|
return msgInfo.selfSend ? this.mine.nickName : this.chat.showName;
|
|
}
|
|
},
|
|
headImage(msgInfo) {
|
|
if (this.isGroup) {
|
|
let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
|
|
return member ? member.headImage : "";
|
|
} else {
|
|
return msgInfo.sendId == this.mine.id
|
|
? this.mine.headImageThumb
|
|
: this.chat.headImage;
|
|
}
|
|
},
|
|
resetEditor() {
|
|
this.$nextTick(() => {
|
|
this.$refs.chatInputEditor.clear();
|
|
this.$refs.chatInputEditor.focus();
|
|
});
|
|
},
|
|
scrollToBottom() {
|
|
this.$nextTick(() => {
|
|
let div = document.getElementById("chatScrollBox");
|
|
div.scrollTop = div.scrollHeight;
|
|
});
|
|
},
|
|
refreshPlaceHolder() {
|
|
if (this.isReceipt) {
|
|
this.placeholder = "【回执消息】";
|
|
} else if (this.$refs.editBox && this.$refs.editBox.innerHTML) {
|
|
this.placeholder = "";
|
|
} else {
|
|
this.placeholder = "聊点什么吧~";
|
|
}
|
|
},
|
|
sendMessageRequest(msgInfo) {
|
|
return new Promise((resolve, reject) => {
|
|
this.reqQueue.push({ msgInfo, resolve, reject });
|
|
this.processReqQueue();
|
|
});
|
|
},
|
|
processReqQueue() {
|
|
if (this.reqQueue.length && !this.isSending) {
|
|
this.isSending = true;
|
|
const reqData = this.reqQueue.shift();
|
|
this.$http({
|
|
url: this.messageAction,
|
|
method: "post",
|
|
data: reqData.msgInfo,
|
|
})
|
|
.then((res) => {
|
|
reqData.resolve(res);
|
|
})
|
|
.catch((e) => {
|
|
reqData.reject(e);
|
|
})
|
|
.finally(() => {
|
|
this.isSending = false;
|
|
this.processReqQueue();
|
|
});
|
|
}
|
|
},
|
|
showBannedTip() {
|
|
let msgInfo = {
|
|
tmpId: this.generateId(),
|
|
sendId: this.mine.id,
|
|
sendTime: new Date().getTime(),
|
|
type: this.$enums.MESSAGE_TYPE.TIP_TEXT,
|
|
};
|
|
if (this.chat.type == "PRIVATE") {
|
|
msgInfo.recvId = this.mine.id;
|
|
msgInfo.content = "该用户已被管理员封禁,原因:" + this.userInfo.reason;
|
|
} else {
|
|
msgInfo.groupId = this.group.id;
|
|
msgInfo.content = "本群聊已被管理员封禁,原因:" + this.group.reason;
|
|
}
|
|
this.chatStore.insertMessage(msgInfo, this.chat);
|
|
},
|
|
buildTmpMessage(msgInfo) {
|
|
let message = JSON.parse(JSON.stringify(msgInfo));
|
|
message.sendId = this.mine.id;
|
|
message.sendTime = new Date().getTime();
|
|
message.status = this.$enums.MESSAGE_STATUS.SENDING;
|
|
message.selfSend = true;
|
|
if (this.isGroup) {
|
|
message.readedCount = 0;
|
|
}
|
|
return message;
|
|
},
|
|
getImageSize(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = function (event) {
|
|
const img = new Image();
|
|
img.onload = function () {
|
|
resolve({ width: img.width, height: img.height });
|
|
};
|
|
img.onerror = function () {
|
|
reject(new Error("无法加载图片"));
|
|
};
|
|
img.src = event.target.result;
|
|
};
|
|
reader.onerror = function () {
|
|
reject(new Error("无法读取文件"));
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
},
|
|
generateId() {
|
|
const id =
|
|
String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
|
|
if (this.maxTmpId > id) {
|
|
return this.generateId();
|
|
}
|
|
this.maxTmpId = id;
|
|
return id;
|
|
},
|
|
showChangeCustomerBox() {
|
|
this.showChangeCustomer = true;
|
|
},
|
|
closeChangeCustomerBox() {
|
|
this.showChangeCustomer = false;
|
|
},
|
|
onTransferSuccess() {
|
|
this.$message.success("已成功转接客服");
|
|
},
|
|
async getIpLocation(ip) {
|
|
if (!ip) return "";
|
|
try {
|
|
const response = await fetch(`http://ip-api.com/json/${ip}?lang=zh-CN`);
|
|
const data = await response.json();
|
|
if (data && data.status === "success") {
|
|
let location = [];
|
|
if (data.country) location.push(data.country);
|
|
if (data.regionName) location.push(data.regionName);
|
|
if (data.city) location.push(data.city);
|
|
return location.join(" ");
|
|
}
|
|
return "";
|
|
} catch (error) {
|
|
console.error("获取IP地理位置失败:", error);
|
|
try {
|
|
const backupResponse = await fetch(
|
|
`https://whois.pconline.com.cn/ipJson.jsp?ip=${ip}&json=true`
|
|
);
|
|
const text = await backupResponse.text();
|
|
const data = JSON.parse(text);
|
|
if (data) {
|
|
let location = [];
|
|
if (data.pro) location.push(data.pro);
|
|
if (data.city) location.push(data.city);
|
|
if (data.addr) location.push(data.addr);
|
|
return location.join(" ");
|
|
}
|
|
} catch (backupError) {
|
|
console.error("备用API也失败了:", backupError);
|
|
}
|
|
return "";
|
|
}
|
|
},
|
|
formatIpDisplay(ip, location) {
|
|
if (!ip) return "";
|
|
return location ? `${ip}（${location}）` : ip;
|
|
},
|
|
handleAddUserGroup() {
|
|
this.$prompt("请输入分组名称", "添加分组", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
})
|
|
.then(({ value }) => {
|
|
if (!value || !value.trim()) {
|
|
this.$message.warning("分组名称不能为空");
|
|
return;
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
loadAllGroupOptions(friendId) {
|
|
return this.$http
|
|
.get(`/user/group/${friendId}`)
|
|
.then((res) => {
|
|
console.log("分组数据:", res);
|
|
if (res.groupList && Array.isArray(res.groupList)) {
|
|
this.groupOptions = res.groupList.map((item) => ({
|
|
value: item.id,
|
|
label: item.groupName,
|
|
}));
|
|
} else {
|
|
this.groupOptions = [];
|
|
}
|
|
return res;
|
|
})
|
|
.catch((error) => {
|
|
console.error("加载分组选项失败:", error);
|
|
this.groupOptions = [];
|
|
});
|
|
},
|
|
handleSelectUserGroup(groupId) {
|
|
if (groupId === "__CREATE_NEW__") {
|
|
this.$prompt("请输入新分组名称", "创建分组", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
}).then(({ value }) => {
|
|
if (!value.trim()) return;
|
|
this.createNewGroup(value.trim());
|
|
});
|
|
} else if (groupId === "" || groupId === null || groupId === undefined) {
|
|
// 清空分组
|
|
this.doSaveGroup("");
|
|
} else {
|
|
this.doSaveGroup(groupId);
|
|
}
|
|
},
|
|
doSaveGroup(groupId) {
|
|
// 如果 groupId 为空字符串，表示移除分组
|
|
const saveGroupId = groupId || "";
|
|
this.$http
|
|
.post("/user/group/save", {
|
|
userId: this.userInfo.id,
|
|
groupIds: String(saveGroupId),
|
|
})
|
|
.then(() => {
|
|
console.log("res", saveGroupId);
|
|
this.$message.success(saveGroupId ? "分组设置成功" : "已移除分组");
|
|
this.loadFriend(this.chat.targetId);
|
|
});
|
|
},
|
|
loadLabelOptions(userId) {
|
|
this.labelOptionsLoading = true;
|
|
return this.$http
|
|
.get(`/user/label/${userId}`)
|
|
.then((res) => {
|
|
console.log("标签选项数据:", res);
|
|
if (res && Array.isArray(res.labelList)) {
|
|
this.labelOptions = res.labelList.map((item) => ({
|
|
value: item.id,
|
|
label: item.labelName || item.name,
|
|
}));
|
|
} else {
|
|
this.labelOptions = [];
|
|
}
|
|
return res;
|
|
})
|
|
.catch((error) => {
|
|
console.error("加载标签选项失败:", error);
|
|
this.labelOptions = [];
|
|
})
|
|
.finally(() => {
|
|
this.labelOptionsLoading = false;
|
|
});
|
|
},
|
|
getLabelName(labelId) {
|
|
const label = this.labelOptions.find((item) => item.value == labelId);
|
|
return label ? label.label : "";
|
|
},
|
|
removeLabel(labelId) {
|
|
const index = this.selectedLabels.indexOf(labelId);
|
|
if (index > -1) {
|
|
this.selectedLabels.splice(index, 1);
|
|
this.saveLabels();
|
|
}
|
|
},
|
|
handleSelectLabels(labelIds) {
|
|
const ids = Array.isArray(labelIds) ? labelIds : [labelIds];
|
|
this.selectedLabels = [...new Set(ids.map((id) => String(id)))];
|
|
this.saveLabels();
|
|
},
|
|
saveLabels() {
|
|
const uniqueLabels = [...new Set(this.selectedLabels)];
|
|
this.$http
|
|
.post("/user/label/save", {
|
|
userId: this.userInfo.id,
|
|
labelIds: uniqueLabels.join(","),
|
|
})
|
|
.then(() => {
|
|
this.$message.success("标签设置成功");
|
|
this.loadFriend(this.chat.targetId);
|
|
})
|
|
.catch(() => {
|
|
this.$message.error("标签设置失败");
|
|
});
|
|
},
|
|
// 打开快捷回复并加载列表
|
|
openQuickReplyBox() {
|
|
this.showQuickReplyBox = true;
|
|
this.loadQuickReplyList();
|
|
},
|
|
// 关闭
|
|
closeQuickReplyBox() {
|
|
this.showQuickReplyBox = false;
|
|
},
|
|
loadQuickReplyList() {
|
|
this.quickLoading = true;
|
|
// 传当前登录用户的 ID 给后端
|
|
this.$http
|
|
.get("/quick/reply/list")
|
|
.then((res) => {
|
|
if (res && Array.isArray(res)) {
|
|
console.log("快捷回复数据:", res);
|
|
this.quickReplyList = res;
|
|
} else {
|
|
this.quickReplyList = [];
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.quickReplyList = [];
|
|
})
|
|
.finally(() => {
|
|
this.quickLoading = false;
|
|
});
|
|
},
|
|
// 选择快捷语，插入输入框并发送
|
|
selectQuickReply(item) {
|
|
if (!item || !item.replyContent) return;
|
|
|
|
// 关闭弹窗
|
|
this.showQuickReplyBox = false;
|
|
|
|
this.$nextTick(() => {
|
|
// 根据 replyType 判断消息类型
|
|
if (item.replyType === 0) {
|
|
// 文本消息
|
|
this.sendQuickTextMessage(item.replyContent);
|
|
} else if (item.replyType === 1) {
|
|
// 图片消息（URL格式）
|
|
this.sendQuickImageMessage(item.replyContent);
|
|
} else {
|
|
// 默认当作文本处理
|
|
this.sendQuickTextMessage(item.replyContent);
|
|
}
|
|
});
|
|
},
|
|
|
|
// 发送快捷文本消息
|
|
sendQuickTextMessage(content) {
|
|
let sendText = this.isReceipt ? "【回执消息】" : "";
|
|
let msgInfo = {
|
|
tmpId: this.generateId(),
|
|
content: sendText + content,
|
|
type: this.$enums.MESSAGE_TYPE.TEXT,
|
|
};
|
|
|
|
this.fillTargetId(msgInfo, this.chat.targetId);
|
|
|
|
if (this.chat.type == "GROUP") {
|
|
msgInfo.atUserIds = [];
|
|
msgInfo.receipt = this.isReceipt;
|
|
}
|
|
|
|
const chat = this.chat;
|
|
let tmpMessage = this.buildTmpMessage(msgInfo);
|
|
this.chatStore.insertMessage(tmpMessage, chat);
|
|
this.moveChatToTop();
|
|
|
|
this.sendMessageRequest(msgInfo)
|
|
.then((m) => {
|
|
tmpMessage.id = m.id;
|
|
tmpMessage.status = m.status;
|
|
tmpMessage.content = m.content;
|
|
this.chatStore.updateMessage(tmpMessage, chat);
|
|
this.scrollToBottom();
|
|
this.$refs.chatInputEditor.clear();
|
|
})
|
|
.catch(() => {
|
|
tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
|
|
this.chatStore.updateMessage(tmpMessage, chat);
|
|
})
|
|
.finally(() => {
|
|
this.isReceipt = false;
|
|
this.refreshPlaceHolder();
|
|
});
|
|
},
|
|
|
|
// 发送快捷图片消息（URL格式）
|
|
sendQuickImageMessage(imageUrl) {
|
|
// 构造图片消息数据
|
|
let imageData = {
|
|
originUrl: imageUrl,
|
|
thumbUrl: imageUrl, // 缩略图使用相同URL，或者后端会生成缩略图
|
|
width: 0,
|
|
height: 0,
|
|
};
|
|
|
|
let msgInfo = {
|
|
tmpId: this.generateId(),
|
|
sendId: this.mine.id,
|
|
content: JSON.stringify(imageData),
|
|
sendTime: new Date().getTime(),
|
|
selfSend: true,
|
|
type: this.$enums.MESSAGE_TYPE.IMAGE,
|
|
readedCount: 0,
|
|
status: this.$enums.MESSAGE_STATUS.SENDING,
|
|
receipt: this.isReceipt,
|
|
};
|
|
|
|
this.fillTargetId(msgInfo, this.chat.targetId);
|
|
|
|
const chat = this.chat;
|
|
|
|
// 先插入临时消息显示
|
|
this.chatStore.insertMessage(msgInfo, chat);
|
|
this.moveChatToTop();
|
|
this.scrollToBottom();
|
|
|
|
// 发送消息
|
|
this.sendMessageRequest(msgInfo)
|
|
.then((m) => {
|
|
msgInfo.id = m.id;
|
|
msgInfo.status = m.status;
|
|
this.isReceipt = false;
|
|
this.chatStore.updateMessage(msgInfo, chat);
|
|
this.$refs.chatInputEditor.clear();
|
|
this.refreshPlaceHolder();
|
|
})
|
|
.catch(() => {
|
|
msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
|
|
this.chatStore.updateMessage(msgInfo, chat);
|
|
});
|
|
},
|
|
//获取翻译文本
|
|
async getTranslateText(text) {
|
|
const res = await this.$http({
|
|
url: "/getTranslate",
|
|
method: "post",
|
|
data: { str: text },
|
|
});
|
|
return res;
|
|
},
|
|
//获取为其他国家语言
|
|
async translateTextToOther(text, country) {
|
|
const res = await this.$http({
|
|
url: "/getTranslate",
|
|
method: "post",
|
|
data: { str: text, country: country },
|
|
});
|
|
return res;
|
|
},
|
|
},
|
|
computed: {
|
|
mine() {
|
|
return this.userStore.userInfo;
|
|
},
|
|
isFriend() {
|
|
return this.friendStore.isFriend(this.userInfo.id);
|
|
},
|
|
friend() {
|
|
return this.friendStore.findFriend(this.userInfo.id);
|
|
},
|
|
title() {
|
|
let title = this.chat.showName;
|
|
if (this.chat.type == "GROUP") {
|
|
let size = this.groupMembers.filter((m) => !m.quit).length;
|
|
title += `(${size})`;
|
|
}
|
|
return title;
|
|
},
|
|
messageAction() {
|
|
return `/message/${this.chat.type.toLowerCase()}/send`;
|
|
},
|
|
unreadCount() {
|
|
return this.chat.unreadCount;
|
|
},
|
|
showMessages() {
|
|
return this.chat.messages.slice(this.showMinIdx);
|
|
},
|
|
messageSize() {
|
|
if (!this.chat || !this.chat.messages) {
|
|
return 0;
|
|
}
|
|
return this.chat.messages.length;
|
|
},
|
|
isBanned() {
|
|
return (
|
|
(this.chat.type == "PRIVATE" && this.userInfo.isBanned) ||
|
|
(this.chat.type == "GROUP" && this.group.isBanned)
|
|
);
|
|
},
|
|
memberSize() {
|
|
return this.groupMembers.filter((m) => !m.quit).length;
|
|
},
|
|
isGroup() {
|
|
return this.chat.type == "GROUP";
|
|
},
|
|
isPrivate() {
|
|
return this.chat.type == "PRIVATE";
|
|
},
|
|
loading() {
|
|
return this.chatStore.loading;
|
|
},
|
|
targetUserId() {
|
|
if (this.chat.type === "PRIVATE") {
|
|
return this.chat.targetId;
|
|
} else if (this.chat.type === "GROUP") {
|
|
return this.group.id;
|
|
}
|
|
return 0;
|
|
},
|
|
availableLabelOptions() {
|
|
return this.labelOptions.filter(
|
|
(item) => !this.selectedLabels.includes(String(item.value))
|
|
);
|
|
},
|
|
},
|
|
watch: {
|
|
chat: {
|
|
handler(newChat, oldChat) {
|
|
if (
|
|
newChat.targetId > 0 &&
|
|
(!oldChat ||
|
|
newChat.type != oldChat.type ||
|
|
newChat.targetId != oldChat.targetId)
|
|
) {
|
|
this.userInfo = {};
|
|
this.group = {};
|
|
this.groupMembers = [];
|
|
if (this.chat.type == "GROUP") {
|
|
this.loadGroup(this.chat.targetId);
|
|
} else {
|
|
this.loadFriend(this.chat.targetId);
|
|
this.loadReaded(this.chat.targetId);
|
|
}
|
|
this.scrollToBottom();
|
|
this.showSide = false;
|
|
this.readedMessage();
|
|
let size = this.chat.messages.length;
|
|
this.showMinIdx = size > 30 ? size - 30 : 0;
|
|
this.resetEditor();
|
|
this.isReceipt = false;
|
|
this.maxTmpId = 0;
|
|
this.refreshPlaceHolder();
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
messageSize: {
|
|
handler(newSize, oldSize) {
|
|
if (newSize > oldSize) {
|
|
let lastMessage = this.chat.messages[newSize - 1];
|
|
if (lastMessage && this.$msgType.isNormal(lastMessage.type)) {
|
|
if (this.isInBottom || lastMessage.selfSend) {
|
|
this.scrollToBottom();
|
|
} else {
|
|
this.newMessageSize++;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
loading: {
|
|
handler(newLoading, oldLoading) {
|
|
if (!newLoading && this.isPrivate) {
|
|
this.loadReaded(this.chat.targetId);
|
|
}
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
let div = document.getElementById("chatScrollBox");
|
|
div.addEventListener("scroll", this.onScroll);
|
|
this.getTranslateText("apple");
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chat-box {
|
|
position: relative;
|
|
width: 100%;
|
|
background: #fff;
|
|
|
|
.el-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
line-height: 50px;
|
|
font-size: var(--im-font-size-larger);
|
|
border-bottom: var(--im-border);
|
|
.btn-side {
|
|
position: absolute;
|
|
right: 20px;
|
|
line-height: 50px;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
color: var(--im-text-color-light);
|
|
}
|
|
}
|
|
|
|
.content-box {
|
|
position: relative;
|
|
.im-chat-main {
|
|
padding: 0;
|
|
background-color: #f4f5f6;
|
|
.im-chat-box {
|
|
> ul {
|
|
padding: 0 20px;
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.scroll-to-bottom {
|
|
text-align: right;
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 230px;
|
|
color: var(--im-color-primary);
|
|
font-size: var(--im-font-size);
|
|
font-weight: 600;
|
|
background: #eee;
|
|
padding: 5px 15px;
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
z-index: 99;
|
|
box-shadow: var(--im-box-shadow-light);
|
|
}
|
|
.im-chat-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
.chat-tool-bar {
|
|
display: flex;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 36px;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
border-top: var(--im-border);
|
|
padding: 4px 2px 2px 8px;
|
|
> div {
|
|
font-size: 22px;
|
|
cursor: pointer;
|
|
line-height: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
text-align: center;
|
|
border-radius: 2px;
|
|
margin-right: 8px;
|
|
color: #999;
|
|
transition: 0.3s;
|
|
&.chat-tool-active {
|
|
font-weight: 600;
|
|
color: var(--im-color-primary);
|
|
background-color: #ddd;
|
|
}
|
|
}
|
|
> div:hover {
|
|
color: #333;
|
|
}
|
|
}
|
|
.send-content-area {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: white !important;
|
|
.send-btn-area {
|
|
padding: 10px;
|
|
position: absolute;
|
|
bottom: 4px;
|
|
right: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.side-box {
|
|
border-left: var(--im-border);
|
|
}
|
|
.user-info-side {
|
|
.user-info-container {
|
|
padding: 20px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
.user-info-header {
|
|
text-align: center;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
.user-avatar-large {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
margin-bottom: 15px;
|
|
}
|
|
.user-nickname {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin: 10px 0 5px;
|
|
color: #333;
|
|
}
|
|
.user-username {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.user-info-content {
|
|
padding: 20px 0;
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
.info-label {
|
|
width: 70px;
|
|
font-size: 14px;
|
|
color: #999;
|
|
flex-shrink: 0;
|
|
}
|
|
.info-value {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
color: #333;
|
|
word-break: break-all;
|
|
::v-deep .el-select {
|
|
.el-tag {
|
|
background-color: #bdbaba !important;
|
|
color: #fff !important;
|
|
border-color: #1d1b1b !important;
|
|
.el-tag__close {
|
|
color: #fff !important;
|
|
&:hover {
|
|
background-color: #333 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 快捷回复样式
|
|
.quick-reply-list {
|
|
padding: 10px;
|
|
.quick-item {
|
|
padding: 10px 12px;
|
|
margin-bottom: 8px;
|
|
background: #f7f8fa;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 1px solid transparent;
|
|
&:hover {
|
|
background: #e6f7ff;
|
|
border-color: #91caff;
|
|
}
|
|
}
|
|
.quick-empty {
|
|
text-align: center;
|
|
padding: 30px 0;
|
|
color: #999;
|
|
}
|
|
}
|
|
</style>
|
|
|