.m2pool 客服系统对接 1.订阅接口区分用户和客服 避免消息混乱 已处理 2.历史消息渲染isSelf返回值有问题 已处理 3.图片发送方式修改为用base64Image发送后soket自动断开 已处理 4.优化心跳机制 断线重连 最多自动重连5次 已处理 5.游客功能添加、删除列表离线游客 处理中
6.客服给游客发送消息 游客收不到推送消息 已处理
This commit is contained in:
parent
2e56d71b0c
commit
a326f62f81
|
|
@ -5,8 +5,8 @@ VUE_APP_TITLE = m2pool
|
|||
ENV = 'development'
|
||||
|
||||
#开发环境
|
||||
VUE_APP_BASE_API = 'https://test.m2pool.com/api/'
|
||||
# VUE_APP_BASE_API = 'http://10.168.2.150:8101/'
|
||||
# VUE_APP_BASE_API = 'https://test.m2pool.com/api/'
|
||||
VUE_APP_BASE_API = 'http://10.168.2.150:8101/'
|
||||
VUE_APP_BASE_URL = 'https://test.m2pool.com/'
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
|
|
|||
|
|
@ -58,11 +58,11 @@ export function getUpdateRoom(data) {
|
|||
|
||||
|
||||
//图根据当前用户邮箱查询聊天室id
|
||||
export function getUserid() {
|
||||
export function getUserid(data) {
|
||||
return request({
|
||||
url: `chat/rooms/find/room/by/userid`,
|
||||
method: 'get',
|
||||
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -220,10 +220,16 @@ export default {
|
|||
|
||||
cachedMessages: {}, // 缓存各聊天室的消息
|
||||
isMinimized: false, // 区分最小化和关闭状态
|
||||
|
||||
reconnectAttempts: 0,
|
||||
maxReconnectAttempts: 5,
|
||||
reconnectInterval: 5000, // 5秒
|
||||
isReconnecting: false,
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
this.determineUserType();
|
||||
// 页面加载时立即获取用户信息
|
||||
await this.initChatSystem();
|
||||
},
|
||||
|
|
@ -247,7 +253,7 @@ export default {
|
|||
async initChatSystem() {
|
||||
try {
|
||||
// 获取用户ID和未读消息数
|
||||
const userData = await this.fetchUserid();
|
||||
const userData = await this.fetchUserid({ email: this.userEmail });
|
||||
if (userData) {
|
||||
this.roomId = userData.id;
|
||||
this.receivingEmail = userData.userEmail;
|
||||
|
|
@ -273,7 +279,7 @@ export default {
|
|||
determineUserType() {
|
||||
try {
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
console.log("token", token);
|
||||
if (!token) {
|
||||
// 游客身份
|
||||
this.userType = 0;
|
||||
|
|
@ -293,11 +299,13 @@ export default {
|
|||
if (userInfo.roleKey === "customer_service") {
|
||||
// 客服用户
|
||||
this.userType = 2;
|
||||
this.userEmail = "";
|
||||
} else {
|
||||
// 登录用户
|
||||
this.userType = 1;
|
||||
}
|
||||
this.userEmail = email;
|
||||
}
|
||||
|
||||
} catch (parseError) {
|
||||
console.error("解析用户信息失败:", parseError);
|
||||
// 解析失败时默认为游客
|
||||
|
|
@ -323,51 +331,80 @@ export default {
|
|||
try {
|
||||
// 订阅个人消息频道
|
||||
this.stompClient.subscribe(
|
||||
`/user/queue/${this.userEmail}`,
|
||||
`/sub/queue/user/${this.userEmail}`,
|
||||
this.onMessageReceived,
|
||||
{
|
||||
id: `chat_${this.userEmail}`,
|
||||
}
|
||||
// {
|
||||
// id: `chat_${this.userEmail}`,
|
||||
// }
|
||||
);
|
||||
|
||||
console.log("成功订阅消息频道:", `/user/queue/${this.userEmail}`);
|
||||
console.log("成功订阅消息频道:", `/sub/queue/user/${this.userEmail}`);
|
||||
} catch (error) {
|
||||
console.error("订阅消息失败:", error);
|
||||
this.$message.error("消息订阅失败，可能无法接收新消息");
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 连接 WebSocket
|
||||
connectWebSocket() {
|
||||
if (this.isWebSocketConnected) return;
|
||||
if (this.isWebSocketConnected || this.isReconnecting) return;
|
||||
|
||||
this.connectionStatus = "connecting";
|
||||
this.isReconnecting = true;
|
||||
|
||||
try {
|
||||
const wsUrl = `${process.env.VUE_APP_BASE_API}chat/ws`;
|
||||
this.stompClient = Stomp.client(wsUrl);
|
||||
// 配置 STOMP 客户端参数
|
||||
this.stompClient.splitLargeFrames = true; // 启用大型消息帧分割
|
||||
// 添加详细的调试日志
|
||||
// this.stompClient.debug = (str) => {
|
||||
// console.log("STOMP Debug:", str);
|
||||
// // 记录连接状态变化
|
||||
// if (str.includes("CONNECTED")) {
|
||||
// console.log("WebSocket 连接成功");
|
||||
// this.isWebSocketConnected = true;
|
||||
// this.connectionStatus = "connected";
|
||||
// this.reconnectAttempts = 0;
|
||||
// this.isReconnecting = false;
|
||||
// } else if (
|
||||
// str.includes("DISCONNECTED") ||
|
||||
// str.includes("Connection closed")
|
||||
// ) {
|
||||
// console.log("WebSocket 连接断开");
|
||||
// this.handleDisconnect();
|
||||
// }
|
||||
// };
|
||||
|
||||
const headers = {
|
||||
email: this.userEmail,
|
||||
type: this.userType,
|
||||
};
|
||||
|
||||
// 添加连接状态监听
|
||||
this.stompClient.onStompError = (frame) => {
|
||||
console.error("STOMP 错误:", frame);
|
||||
this.handleDisconnect();
|
||||
};
|
||||
|
||||
this.stompClient.connect(
|
||||
headers,
|
||||
(frame) => {
|
||||
console.log("WebSocket Connected:", frame);
|
||||
this.isWebSocketConnected = true;
|
||||
this.connectionStatus = "connected";
|
||||
this.reconnectAttempts = 0;
|
||||
this.isReconnecting = false;
|
||||
|
||||
// 连接成功后立即订阅消息
|
||||
this.subscribeToPersonalMessages();
|
||||
|
||||
// 显示连接成功提示
|
||||
this.$message.success("连接成功");
|
||||
},
|
||||
(error) => {
|
||||
console.error("WebSocket Error:", error);
|
||||
this.isWebSocketConnected = false;
|
||||
this.connectionStatus = "error";
|
||||
// 添加重连逻辑
|
||||
setTimeout(() => this.connectWebSocket(), 5000);
|
||||
this.handleDisconnect();
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -376,7 +413,34 @@ export default {
|
|||
this.stompClient.heartbeat.incoming = 20000;
|
||||
} catch (error) {
|
||||
console.error("初始化 WebSocket 失败:", error);
|
||||
this.handleDisconnect();
|
||||
}
|
||||
},
|
||||
// 添加新重连最多重连5次
|
||||
handleDisconnect() {
|
||||
this.isWebSocketConnected = false;
|
||||
this.connectionStatus = "error";
|
||||
this.isReconnecting = false;
|
||||
|
||||
// 如果重连次数未超过最大尝试次数，则尝试重连
|
||||
if (this.reconnectAttempts < this.maxReconnectAttempts) {
|
||||
this.reconnectAttempts++;
|
||||
console.log(
|
||||
`尝试重连 (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`
|
||||
);
|
||||
|
||||
this.$message.warning(
|
||||
`连接断开，${this.reconnectInterval / 1000}秒后重试...`
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
if (!this.isWebSocketConnected) {
|
||||
this.connectWebSocket();
|
||||
}
|
||||
}, this.reconnectInterval);
|
||||
} else {
|
||||
console.log("达到最大重连次数，停止重连");
|
||||
this.$message.error("连接失败，请刷新页面重试");
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -387,11 +451,19 @@ export default {
|
|||
|
||||
// 发送消息
|
||||
sendMessage() {
|
||||
if (!this.inputMessage.trim() || this.connectionStatus !== "connected")
|
||||
if (!this.inputMessage.trim()) return;
|
||||
|
||||
// 检查 WebSocket 连接状态
|
||||
if (!this.stompClient || !this.stompClient.connected) {
|
||||
console.log('发送消息时连接已断开，尝试重连...');
|
||||
this.$message.warning('连接已断开，正在重新连接...');
|
||||
this.handleDisconnect();
|
||||
return;
|
||||
}
|
||||
|
||||
const messageText = this.inputMessage.trim();
|
||||
|
||||
try {
|
||||
// 添加用户消息到界面
|
||||
this.messages.push({
|
||||
type: "user",
|
||||
|
|
@ -410,7 +482,12 @@ export default {
|
|||
roomId: this.roomId,
|
||||
};
|
||||
// 发送消息
|
||||
this.stompClient.send("/point/send/message", {}, JSON.stringify(message));
|
||||
this.stompClient.send(
|
||||
"/point/send/message/to/customer",
|
||||
{},
|
||||
JSON.stringify(message)
|
||||
);
|
||||
|
||||
// 通过 WebSocket 发送消息
|
||||
// if (this.stompClient && this.stompClient.connected) {
|
||||
// this.stompClient.send({
|
||||
|
|
@ -432,6 +509,11 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("发送消息失败:", error);
|
||||
this.$message.error("发送消息失败，请重试");
|
||||
this.handleDisconnect();
|
||||
}
|
||||
},
|
||||
|
||||
// 断开 WebSocket 连接
|
||||
|
|
@ -440,7 +522,7 @@ export default {
|
|||
try {
|
||||
// 取消所有订阅
|
||||
if (this.stompClient.subscriptions) {
|
||||
Object.keys(this.stompClient.subscriptions).forEach(id => {
|
||||
Object.keys(this.stompClient.subscriptions).forEach((id) => {
|
||||
this.stompClient.unsubscribe(id);
|
||||
});
|
||||
}
|
||||
|
|
@ -449,6 +531,8 @@ export default {
|
|||
this.stompClient.deactivate();
|
||||
this.isWebSocketConnected = false;
|
||||
this.connectionStatus = "disconnected";
|
||||
this.reconnectAttempts = 0;
|
||||
this.isReconnecting = false;
|
||||
} catch (error) {
|
||||
console.error("断开 WebSocket 连接失败:", error);
|
||||
}
|
||||
|
|
@ -496,53 +580,61 @@ export default {
|
|||
|
||||
this.isLoadingHistory = true;
|
||||
try {
|
||||
const response = await getHistory7({ roomId: this.roomId, userType: this.userType });
|
||||
const response = await getHistory7({
|
||||
roomId: this.roomId,
|
||||
userType: this.userType,
|
||||
email: this.userEmail,
|
||||
});
|
||||
console.log("历史消息数据:", response);
|
||||
|
||||
if (response?.code === 200 && Array.isArray(response.data)) {
|
||||
// 处理历史消息
|
||||
const historyMessages = response.data.map(msg => ({
|
||||
type: msg.isSelf === 1 ? "user" : "system", // 根据 isSelf 判断消息类型
|
||||
const historyMessages = response.data.map((msg) => ({
|
||||
type: msg.isSelf === 1 ? "user" : "system",
|
||||
text: msg.content,
|
||||
isImage: msg.type === 2,
|
||||
imageUrl: msg.type === 2 ? msg.content : null,
|
||||
time: new Date(msg.createTime), // 使用 createTime 字段
|
||||
time: new Date(msg.createTime),
|
||||
id: msg.id,
|
||||
roomId: msg.roomId,
|
||||
sender: msg.sendEmail,
|
||||
isHistory: true,
|
||||
isRead: true // 历史消息默认已读
|
||||
isRead: true,
|
||||
}));
|
||||
|
||||
// 按时间顺序排序
|
||||
this.messages = historyMessages.sort((a, b) =>
|
||||
new Date(a.time) - new Date(b.time)
|
||||
this.messages = historyMessages.sort(
|
||||
(a, b) => new Date(a.time) - new Date(b.time)
|
||||
);
|
||||
|
||||
// 滚动到底部
|
||||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
// 等待 DOM 更新和图片加载完成后再滚动
|
||||
await this.$nextTick();
|
||||
// 添加一个小延时确保所有内容都渲染完成
|
||||
setTimeout(() => {
|
||||
this.scrollToBottom(true); // 传入 true 表示强制滚动
|
||||
}, 100);
|
||||
} else {
|
||||
// 没有历史消息时显示提示
|
||||
this.messages = [{
|
||||
this.messages = [
|
||||
{
|
||||
type: "system",
|
||||
text: "暂无历史消息",
|
||||
isSystemHint: true,
|
||||
time: new Date()
|
||||
}];
|
||||
time: new Date(),
|
||||
},
|
||||
];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载历史消息失败:", error);
|
||||
this.$message.error("加载历史消息失败");
|
||||
// 显示错误提示
|
||||
this.messages = [{
|
||||
this.messages = [
|
||||
{
|
||||
type: "system",
|
||||
text: "加载历史消息失败，请重试",
|
||||
isSystemHint: true,
|
||||
time: new Date(),
|
||||
isError: true
|
||||
}];
|
||||
isError: true,
|
||||
},
|
||||
];
|
||||
} finally {
|
||||
this.isLoadingHistory = false;
|
||||
}
|
||||
|
|
@ -555,6 +647,14 @@ export default {
|
|||
this.isLoadingHistory = true;
|
||||
|
||||
try {
|
||||
// 获取当前消息列表中最旧消息的 ID
|
||||
const oldestMessage = this.messages.find(msg => !msg.isSystemHint && !msg.isLoading);
|
||||
if (!oldestMessage || !oldestMessage.id) {
|
||||
console.warn('没有找到有效的消息ID');
|
||||
this.hasMoreHistory = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示加载中提示
|
||||
const loadingMsg = {
|
||||
type: "system",
|
||||
|
|
@ -564,8 +664,13 @@ export default {
|
|||
};
|
||||
this.messages.unshift(loadingMsg);
|
||||
|
||||
// 获取更早的聊天记录
|
||||
const response = await getHistory({ roomId: this.roomId });
|
||||
// 获取更早的聊天记录，添加 id 参数
|
||||
const response = await getHistory7({
|
||||
roomId: this.roomId,
|
||||
userType: this.userType,
|
||||
email: this.userEmail,
|
||||
id: oldestMessage.id // 添加最旧消息的 ID
|
||||
});
|
||||
|
||||
// 移除加载中提示
|
||||
this.messages = this.messages.filter((msg) => !msg.isLoading);
|
||||
|
|
@ -630,25 +735,25 @@ export default {
|
|||
roomId: msg.roomId,
|
||||
sender: msg.sendEmail,
|
||||
isHistory: true,
|
||||
isRead: true
|
||||
isRead: true,
|
||||
}))
|
||||
.sort((a, b) => new Date(a.time) - new Date(b.time));
|
||||
},
|
||||
|
||||
// 修改 fetchUserid 方法，添加 token 检查
|
||||
async fetchUserid() {
|
||||
async fetchUserid(params) {
|
||||
try {
|
||||
// 先检查是否有 token
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) {
|
||||
console.log("用户未登录，不发起 getUserid 请求");
|
||||
// 对于未登录用户，可以生成一个临时 ID
|
||||
this.roomId = `guest_${Date.now()}`;
|
||||
this.receivingEmail = "customer_service@example.com"; // 或默认客服邮箱
|
||||
return null;
|
||||
}
|
||||
// const token = localStorage.getItem("token");
|
||||
// if (!token) {
|
||||
// console.log("用户未登录，不发起 getUserid 请求");
|
||||
// // 对于未登录用户，可以生成一个临时 ID
|
||||
// this.roomId = `guest_${Date.now()}`;
|
||||
// this.receivingEmail = "customer_service@example.com"; // 或默认客服邮箱
|
||||
// return null;
|
||||
// }
|
||||
|
||||
const res = await getUserid();
|
||||
const res = await getUserid(params);
|
||||
if (res && res.code == 200) {
|
||||
console.log("获取用户ID成功:", res);
|
||||
this.receivingEmail = res.data.userEmail;
|
||||
|
|
@ -699,7 +804,7 @@ export default {
|
|||
id: data.id,
|
||||
roomId: data.roomId,
|
||||
sender: data.sendEmail,
|
||||
isRead: false
|
||||
isRead: false,
|
||||
};
|
||||
|
||||
// 直接添加到消息列表
|
||||
|
|
@ -724,7 +829,6 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("处理消息失败:", error);
|
||||
}
|
||||
|
|
@ -778,35 +882,46 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 切换聊天窗口
|
||||
// 打开聊天框
|
||||
async toggleChat() {
|
||||
this.isChatOpen = !this.isChatOpen;
|
||||
|
||||
// 1. 判别身份
|
||||
this.determineUserType();
|
||||
|
||||
// 2. 如果是客服，跳转到客服页面
|
||||
if (this.userType === 2) {
|
||||
const lang = this.$i18n.locale;
|
||||
this.$router.push(`/${lang}/customerService`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isChatOpen) {
|
||||
// 打开聊天窗口时
|
||||
try {
|
||||
// 确定用户类型
|
||||
this.determineUserType();
|
||||
|
||||
// 如果未连接，则初始化 WebSocket
|
||||
if (this.connectionStatus === "disconnected") {
|
||||
await this.initWebSocket();
|
||||
// 如果未连接或连接断开，则重新初始化 WebSocket
|
||||
if (!this.isWebSocketConnected || this.connectionStatus === "disconnected") {
|
||||
await this.connectWebSocket();
|
||||
}
|
||||
|
||||
// 如果消息列表为空，加载历史消息
|
||||
if (this.messages.length === 0) {
|
||||
await this.loadHistoryMessages();
|
||||
} else {
|
||||
// 如果已有消息，确保滚动到底部
|
||||
await this.$nextTick();
|
||||
setTimeout(() => {
|
||||
this.scrollToBottom(true);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// 标记消息为已读
|
||||
await this.markMessagesAsRead();
|
||||
|
||||
// 滚动到底部
|
||||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("初始化聊天失败:", error);
|
||||
this.$message.error("初始化聊天失败，请重试");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -879,12 +994,13 @@ export default {
|
|||
this.loadMoreHistory();
|
||||
}
|
||||
},
|
||||
//滚动到底部
|
||||
scrollToBottom(force = false) {
|
||||
if (!this.$refs.chatBody) return;
|
||||
|
||||
scrollToBottom() {
|
||||
if (this.$refs.chatBody) {
|
||||
const scrollOptions = {
|
||||
top: this.$refs.chatBody.scrollHeight,
|
||||
behavior: "smooth",
|
||||
behavior: force ? 'auto' : 'smooth' // 强制滚动时使用 'auto'
|
||||
};
|
||||
|
||||
try {
|
||||
|
|
@ -893,7 +1009,6 @@ export default {
|
|||
// 如果平滑滚动不支持，则直接设置
|
||||
this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
formatTime(date) {
|
||||
|
|
@ -950,7 +1065,10 @@ export default {
|
|||
|
||||
// 处理图片上传
|
||||
async handleImageUpload(event) {
|
||||
if (this.connectionStatus !== "connected") return;
|
||||
if (this.connectionStatus !== "connected") {
|
||||
console.log("当前连接状态:", this.connectionStatus);
|
||||
return;
|
||||
}
|
||||
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
|
@ -981,62 +1099,71 @@ export default {
|
|||
type: "info",
|
||||
});
|
||||
|
||||
// 准备FormData
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
// 将文件转换为 base64
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const base64Image = e.target.result;
|
||||
|
||||
// 上传文件到后端
|
||||
const response = await getFileUpdate(formData);
|
||||
console.log("文件上传返回:", response);
|
||||
|
||||
// 检查上传结果
|
||||
if (response && response.code === 200 && response.data) {
|
||||
// 从后端响应中获取图片信息
|
||||
const imageData = response.data;
|
||||
// 使用后端返回的URL
|
||||
const imageUrl = this.formatImageUrl(imageData.url);
|
||||
|
||||
console.log("图片URL:", imageUrl); // 调试用：打印URL
|
||||
// 检查连接状态
|
||||
if (!this.stompClient || !this.stompClient.connected) {
|
||||
console.error("发送图片时连接已断开");
|
||||
this.$message.error("连接已断开，正在重新连接...");
|
||||
this.connectWebSocket();
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加用户图片消息到界面（本地显示）
|
||||
this.messages.push({
|
||||
type: "user",
|
||||
text: "", // 保留空字符串
|
||||
text: "",
|
||||
isImage: true,
|
||||
imageUrl: imageUrl, // 确保URL正确
|
||||
imageUrl: base64Image,
|
||||
time: new Date(),
|
||||
email: this.receivingEmail,
|
||||
sendUserType: this.userType,
|
||||
roomId: this.roomId,
|
||||
isRead: false,
|
||||
});
|
||||
|
||||
try {
|
||||
// 通过 WebSocket 发送图片消息
|
||||
if (this.stompClient && this.stompClient.connected) {
|
||||
const message = {
|
||||
content: imageUrl, // URL作为消息内容
|
||||
type: 2, // 使用数字类型2表示图片消息
|
||||
content: base64Image,
|
||||
type: 2,
|
||||
email: this.receivingEmail,
|
||||
receiveUserType: 2,
|
||||
roomId: this.roomId,
|
||||
};
|
||||
|
||||
// 使用WebSocket发送消息
|
||||
console.log(
|
||||
"准备发送图片消息，当前连接状态:",
|
||||
this.stompClient.connected
|
||||
);
|
||||
this.stompClient.send(
|
||||
"/point/send/message",
|
||||
{},
|
||||
JSON.stringify(message)
|
||||
);
|
||||
}
|
||||
console.log("图片消息发送完成");
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
} else {
|
||||
this.$message.error("图片上传失败: " + (response?.msg || "未知错误"));
|
||||
} catch (sendError) {
|
||||
console.error("发送图片消息失败:", sendError);
|
||||
this.$message.error("发送图片失败，请重试");
|
||||
}
|
||||
};
|
||||
|
||||
reader.onerror = (error) => {
|
||||
console.error("读取文件失败:", error);
|
||||
this.$message.error("读取图片失败，请重试");
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
} catch (error) {
|
||||
console.error("图片上传异常:", error);
|
||||
this.$message.error("图片上传失败，请重试");
|
||||
console.error("图片处理失败:", error);
|
||||
this.$message.error("图片处理失败，请重试");
|
||||
} finally {
|
||||
// 清空input，允许重复选择同一文件
|
||||
this.$refs.imageUpload.value = "";
|
||||
|
|
@ -1070,7 +1197,7 @@ export default {
|
|||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.disconnectWebSocket();
|
||||
|
||||
|
||||
// 移除滚动监听
|
||||
if (this.$refs.chatBody) {
|
||||
|
|
@ -1081,7 +1208,11 @@ export default {
|
|||
"visibilitychange",
|
||||
this.handleVisibilityChange
|
||||
);
|
||||
|
||||
// 确保在销毁时断开连接
|
||||
if (this.stompClient) {
|
||||
this.stompClient.disconnect();
|
||||
this.stompClient = null;
|
||||
}
|
||||
// 断开 WebSocket 连接
|
||||
this.disconnectWebSocket();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -213,7 +213,6 @@
|
|||
type="primary"
|
||||
:disabled="!currentContact || !inputMessage.trim() || sending"
|
||||
@click="sendMessage"
|
||||
|
||||
>
|
||||
<i v-if="sending" class="el-icon-loading"></i>
|
||||
<span v-else>发送</span>
|
||||
|
|
@ -273,6 +272,7 @@ export default {
|
|||
id: "", //最后一条消息id
|
||||
roomId: "", //聊天室id
|
||||
userType: 2, //用户类型
|
||||
email: "497681109@qq.com", //客服邮箱
|
||||
},
|
||||
historyAllParams: {
|
||||
//7天以前的历史消息
|
||||
|
|
@ -282,6 +282,9 @@ export default {
|
|||
},
|
||||
receiveUserType: "", //接收者类型
|
||||
manualCreatedRooms: [], //手动创建的聊天室
|
||||
chatRooms: [], // 初始化聊天室列表数组
|
||||
isWebSocketConnected: false,
|
||||
connectionStatus: "disconnected",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -307,18 +310,23 @@ export default {
|
|||
},
|
||||
|
||||
async created() {
|
||||
// 初始化 WebSocket 连接
|
||||
this.initWebSocket();
|
||||
try {
|
||||
// 初始化用户信息
|
||||
// this.determineUserType();
|
||||
|
||||
// 获取聊天室列表
|
||||
await this.fetchRoomList();
|
||||
|
||||
// 默认选择第一个联系人
|
||||
if (this.contacts.length > 0) {
|
||||
this.selectContact(this.contacts[0].roomId);
|
||||
}
|
||||
// 在组件创建时加载手动创建的聊天室
|
||||
this.loadManualCreatedRooms();
|
||||
// 初始化 WebSocket 连接
|
||||
this.initWebSocket();
|
||||
} catch (error) {
|
||||
console.error("初始化失败:", error);
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
// 获取聊天室列表
|
||||
|
|
@ -328,17 +336,14 @@ export default {
|
|||
if (this.contacts.length > 0) {
|
||||
this.selectContact(this.contacts[0].roomId);
|
||||
}
|
||||
this.confirmUserType(); //确认用户类型
|
||||
// 定时刷新聊天室列表，例如每30秒刷新一次
|
||||
// this.roomListInterval = setInterval(() => {
|
||||
// this.fetchRoomList();
|
||||
|
||||
// // 如果有选中联系人，刷新消息
|
||||
// if (this.currentContactId) {
|
||||
// this.loadMessages(this.currentContactId);
|
||||
// }
|
||||
// }, 30000);
|
||||
let userEmail = localStorage.getItem("userEmail");
|
||||
this.userEmail = JSON.parse(userEmail);
|
||||
window.addEventListener("setItem", () => {
|
||||
let userEmail = localStorage.getItem("userEmail");
|
||||
this.userEmail = JSON.parse(userEmail);
|
||||
|
||||
});
|
||||
// 确保初始加载后滚动到底部
|
||||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
|
|
@ -365,93 +370,120 @@ export default {
|
|||
// 发送消息
|
||||
this.sendMessage();
|
||||
},
|
||||
confirmUserType() {
|
||||
try {
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
if (!token) {
|
||||
// 游客身份
|
||||
this.userType = 0;
|
||||
|
||||
|
||||
this.userEmail = `guest_${Date.now()}_${Math.random()
|
||||
.toString(36)
|
||||
.substr(2, 9)}`;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const userInfo = JSON.parse(
|
||||
localStorage.getItem("jurisdiction") || "{}"
|
||||
);
|
||||
const email = JSON.parse(localStorage.getItem("userEmail") || "{}");
|
||||
|
||||
if (userInfo.roleKey === "customer_service") {
|
||||
// 客服用户
|
||||
this.userType = 2;
|
||||
|
||||
|
||||
} else {
|
||||
// 登录用户
|
||||
this.userType = 1;
|
||||
|
||||
|
||||
}
|
||||
this.userEmail = email;
|
||||
} catch (parseError) {
|
||||
console.error("解析用户信息失败:", parseError);
|
||||
// 解析失败时默认为游客
|
||||
this.userType = 0;
|
||||
this.userEmail = `guest_${Date.now()}_${Math.random()
|
||||
.toString(36)
|
||||
.substr(2, 9)}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取用户信息失败:", error);
|
||||
// 出错时默认为游客
|
||||
this.userType = 0;
|
||||
this.userEmail = `guest_${Date.now()}_${Math.random()
|
||||
.toString(36)
|
||||
.substr(2, 9)}`;
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化 WebSocket 连接
|
||||
initWebSocket() {
|
||||
const wsUrl = `${process.env.VUE_APP_BASE_API}chat/ws`;
|
||||
if (this.isWebSocketConnected) return;
|
||||
|
||||
try {
|
||||
const wsUrl = `${process.env.VUE_APP_BASE_API}chat/ws`;
|
||||
this.stompClient = Stomp.client(wsUrl);
|
||||
|
||||
// 配置连接参数
|
||||
// 配置 STOMP 客户端参数
|
||||
this.stompClient.splitLargeFrames = true; // 启用大型消息帧分割
|
||||
|
||||
// 修改调试日志的方式
|
||||
this.stompClient.debug = (str) => {
|
||||
// 只打印与客服相关的日志
|
||||
if (
|
||||
str.includes("CONNECTED") ||
|
||||
str.includes("DISCONNECTED") ||
|
||||
str.includes("ERROR")
|
||||
) {
|
||||
console.log("[客服系统]", str);
|
||||
}
|
||||
};
|
||||
|
||||
const headers = {
|
||||
email: this.userEmail,
|
||||
type: 2,
|
||||
type: this.userType,
|
||||
};
|
||||
// 连接并传入参数
|
||||
|
||||
this.stompClient.connect(
|
||||
headers, // 连接参数
|
||||
headers,
|
||||
(frame) => {
|
||||
// 连接成功回调
|
||||
console.log("WebSocket Connected:", frame);
|
||||
this.wsConnected = true;
|
||||
this.subscribeToPersonalMessages();
|
||||
console.log("[客服系统] WebSocket 连接成功", frame);
|
||||
this.isWebSocketConnected = true;
|
||||
this.connectionStatus = "connected";
|
||||
this.subscribeToMessages();
|
||||
},
|
||||
(error) => {
|
||||
// 连接错误回调
|
||||
console.error("WebSocket Error:", error);
|
||||
this.wsConnected = false;
|
||||
this.$message.error("连接失败，正在重试...");
|
||||
console.error("[客服系统] WebSocket 错误:", error);
|
||||
this.handleDisconnect();
|
||||
}
|
||||
);
|
||||
|
||||
// 可选：配置心跳
|
||||
this.stompClient.heartbeat.outgoing = 20000; // 20秒
|
||||
// 配置心跳
|
||||
this.stompClient.heartbeat.outgoing = 20000;
|
||||
this.stompClient.heartbeat.incoming = 20000;
|
||||
} catch (error) {
|
||||
console.error("初始化 CustomerService WebSocket 失败:", error);
|
||||
this.handleDisconnect();
|
||||
}
|
||||
},
|
||||
|
||||
// 可选：开启调试日志
|
||||
this.stompClient.debug = function (str) {
|
||||
console.log("STOMP: " + str);
|
||||
};
|
||||
// // 订阅消息
|
||||
subscribeToMessages() {
|
||||
if (!this.stompClient || !this.isWebSocketConnected) return;
|
||||
|
||||
try {
|
||||
// 修改订阅路径，使用客服特定的订阅路径
|
||||
this.stompClient.subscribe(
|
||||
`/sub/queue/customer/${this.userEmail}`,
|
||||
this.handleIncomingMessage,
|
||||
{
|
||||
id: `customer_${this.userEmail}`,
|
||||
}
|
||||
);
|
||||
// this.stompClient.subscribe(
|
||||
// `/user/queue/customer_service`, // 修改为客服专用的订阅路径
|
||||
// this.handleIncomingMessage,
|
||||
// {
|
||||
// id: `customer_service_${this.userEmail}`,
|
||||
// }
|
||||
// );
|
||||
|
||||
console.log(
|
||||
"CustomerService 成功订阅消息频道:",
|
||||
`/sub/queue/customer/${this.userEmail}`
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("CustomerService 订阅消息失败:", error);
|
||||
}
|
||||
},
|
||||
|
||||
// 断开连接
|
||||
disconnectWebSocket() {
|
||||
if (this.stompClient) {
|
||||
try {
|
||||
// 取消所有订阅
|
||||
if (this.stompClient.subscriptions) {
|
||||
Object.keys(this.stompClient.subscriptions).forEach((id) => {
|
||||
this.stompClient.unsubscribe(id);
|
||||
});
|
||||
}
|
||||
|
||||
// 断开连接
|
||||
this.stompClient.deactivate();
|
||||
this.isWebSocketConnected = false;
|
||||
this.connectionStatus = "disconnected";
|
||||
} catch (error) {
|
||||
console.error("断开 CustomerService WebSocket 连接失败:", error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 处理断开连接
|
||||
handleDisconnect() {
|
||||
this.isWebSocketConnected = false;
|
||||
this.connectionStatus = "error";
|
||||
|
||||
// 尝试重新连接
|
||||
setTimeout(() => {
|
||||
if (!this.isWebSocketConnected) {
|
||||
this.initWebSocket();
|
||||
}
|
||||
}, 5000);
|
||||
},
|
||||
|
||||
// 获取当前的 UTC 时间
|
||||
|
|
@ -489,7 +521,7 @@ export default {
|
|||
|
||||
// 发送消息
|
||||
this.stompClient.send(
|
||||
"/point/send/message",
|
||||
"/point/send/message/to/user",
|
||||
{},
|
||||
JSON.stringify(message)
|
||||
);
|
||||
|
|
@ -502,7 +534,7 @@ export default {
|
|||
isSelf: true,
|
||||
isImage: false,
|
||||
roomId: this.currentContactId,
|
||||
type: 1
|
||||
type: 1,
|
||||
});
|
||||
|
||||
// 重置当前聊天室的未读消息数
|
||||
|
|
@ -530,53 +562,38 @@ export default {
|
|||
},
|
||||
|
||||
// 处理接收到的消息
|
||||
handleIncomingMessage(message) {
|
||||
async handleIncomingMessage(message) {
|
||||
try {
|
||||
const msg = JSON.parse(message.body);
|
||||
console.log("客服收到的消息", msg);
|
||||
|
||||
const messageData = {
|
||||
id: msg.id,
|
||||
sender: msg.sendEmail,
|
||||
avatar: msg.sendUserType === 2 ? "iconfont icon-icon28" : "iconfont icon-user",
|
||||
avatar:
|
||||
msg.sendUserType === 2
|
||||
? "iconfont icon-icon28"
|
||||
: "iconfont icon-user",
|
||||
content: msg.content,
|
||||
time: new Date(msg.sendTime),
|
||||
isSelf: msg.sendUserType === this.userType && msg.sendEmail === this.userEmail,
|
||||
isSelf:
|
||||
msg.sendUserType === this.userType &&
|
||||
msg.sendEmail === this.userEmail,
|
||||
isImage: msg.type === 2,
|
||||
type: msg.type,
|
||||
roomId: msg.roomId,
|
||||
sendUserType: msg.sendUserType,
|
||||
isCreate: msg.isCreate,
|
||||
clientReadNum: msg.clientReadNum
|
||||
clientReadNum: msg.clientReadNum,
|
||||
};
|
||||
|
||||
// 新聊天室处理
|
||||
if (messageData.isCreate) {
|
||||
this.handleNewChatRoom(messageData);
|
||||
}
|
||||
|
||||
this.updateChatRoomList(messageData);
|
||||
|
||||
// 当前聊天室消息
|
||||
if (messageData.roomId === this.currentContactId) {
|
||||
this.addMessageToChat(messageData);
|
||||
this.markMessagesAsRead(messageData.roomId);
|
||||
} else {
|
||||
this.incrementUnreadCount(messageData.roomId, messageData.clientReadNum);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理新聊天室创建
|
||||
handleNewChatRoom(messageData) {
|
||||
// 检查是否已存在该聊天室
|
||||
// 更新或创建聊天室
|
||||
const existingContact = this.contacts.find(
|
||||
(c) => c.roomId === messageData.roomId
|
||||
);
|
||||
console.log("messageData:hhhhshshsshshshhh好的好的和", messageData);
|
||||
|
||||
|
||||
|
||||
// && messageData.isCreate && messageData.sender
|
||||
if (!existingContact) {//只需要判断是否在联系人列表中存在 如果不在就创建新的聊天室对象
|
||||
// 创建新的聊天室对象
|
||||
if (!existingContact) {
|
||||
// 如果聊天室不存在，创建新的聊天室
|
||||
const newContact = {
|
||||
roomId: messageData.roomId,
|
||||
name: messageData.sender,
|
||||
|
|
@ -586,8 +603,73 @@ export default {
|
|||
important: false,
|
||||
isGuest: messageData.sendUserType === 0,
|
||||
sendUserType: messageData.sendUserType,
|
||||
isManualCreated: true, // 新增：标记为手动创建
|
||||
clientReadNum: messageData.clientReadNum, //未读条数
|
||||
isManualCreated: true,
|
||||
};
|
||||
|
||||
this.contacts.push(newContact);
|
||||
this.$set(this.messages, messageData.roomId, []);
|
||||
} else {
|
||||
// 如果聊天室已存在，更新最后一条消息
|
||||
existingContact.lastMessage = messageData.isImage ? "[图片]" : messageData.content;
|
||||
existingContact.lastTime = messageData.time;
|
||||
}
|
||||
|
||||
// 添加消息到聊天记录
|
||||
if (!this.messages[messageData.roomId]) {
|
||||
this.$set(this.messages, messageData.roomId, []);
|
||||
}
|
||||
|
||||
this.messages[messageData.roomId].push({
|
||||
id: messageData.id,
|
||||
sender: messageData.sender,
|
||||
avatar: messageData.avatar,
|
||||
content: messageData.content,
|
||||
time: messageData.time,
|
||||
isSelf: messageData.isSelf,
|
||||
isImage: messageData.isImage,
|
||||
type: messageData.type,
|
||||
roomId: messageData.roomId,
|
||||
});
|
||||
|
||||
// 如果是当前选中的聊天室，标记为已读
|
||||
if (messageData.roomId === this.currentContactId) {
|
||||
this.markMessagesAsRead(messageData.roomId);
|
||||
} else {
|
||||
// 更新未读消息数
|
||||
const contact = this.contacts.find((c) => c.roomId === messageData.roomId);
|
||||
if (contact) {
|
||||
contact.unread = (contact.unread || 0) + 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 重新排序联系人列表
|
||||
this.sortContacts();
|
||||
} catch (error) {
|
||||
console.error("处理新消息失败:", error);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理新聊天室创建
|
||||
handleNewChatRoom(messageData) {
|
||||
// 检查是否已存在该聊天室
|
||||
const existingContact = this.contacts.find(
|
||||
(c) => c.roomId === messageData.roomId
|
||||
);
|
||||
|
||||
if (!existingContact) {
|
||||
// 创建新的聊天室对象
|
||||
const newContact = {
|
||||
roomId: messageData.roomId,
|
||||
name: messageData.sender,
|
||||
// 修改这里：使用实际收到的消息内容作为最后一条消息
|
||||
lastMessage: messageData.isImage ? "[图片]" : messageData.content,
|
||||
lastTime: messageData.time,
|
||||
unread: 1,
|
||||
important: false,
|
||||
isGuest: messageData.sendUserType === 0,
|
||||
sendUserType: messageData.sendUserType,
|
||||
isManualCreated: true,
|
||||
clientReadNum: messageData.clientReadNum,
|
||||
};
|
||||
|
||||
// 添加到聊天列表
|
||||
|
|
@ -616,6 +698,7 @@ export default {
|
|||
this.manualCreatedRooms.push(newContact);
|
||||
this.saveManualCreatedRooms();
|
||||
|
||||
// 重新排序联系人列表
|
||||
this.sortContacts();
|
||||
}
|
||||
},
|
||||
|
|
@ -657,23 +740,53 @@ export default {
|
|||
console.error("加载手动创建的聊天室失败:", error);
|
||||
}
|
||||
},
|
||||
|
||||
// 添加新方法：创建新聊天室
|
||||
async createNewChatRoom(messageData) {
|
||||
try {
|
||||
// 调用后端 API 创建新的聊天室
|
||||
const response = await createChatRoom({
|
||||
userEmail: messageData.sender,
|
||||
userType: messageData.sendUserType,
|
||||
});
|
||||
|
||||
if (response && response.code === 200) {
|
||||
const newRoom = {
|
||||
userEmail: messageData.sender,
|
||||
roomId: response.data.roomId,
|
||||
lastMessage: messageData.content,
|
||||
lastMessageTime: messageData.time,
|
||||
unreadCount: messageData.clientReadNum || 0,
|
||||
userType: messageData.sendUserType,
|
||||
};
|
||||
|
||||
this.chatRooms.unshift(newRoom);
|
||||
return newRoom;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("创建新聊天室失败:", error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
// 更新聊天室列表
|
||||
updateChatRoomList(messageData) {
|
||||
// 寻找现有联系人
|
||||
const contactIndex = this.contacts.findIndex(
|
||||
(c) => c.roomId === messageData.roomId
|
||||
const roomIndex = this.chatRooms.findIndex(
|
||||
(room) => room.roomId === messageData.roomId
|
||||
);
|
||||
|
||||
if (contactIndex !== -1) {
|
||||
// 更新现有联系人的最后消息和时间
|
||||
const contact = this.contacts[contactIndex];
|
||||
contact.lastMessage = messageData.isImage
|
||||
? "[图片]"
|
||||
: messageData.content;
|
||||
contact.lastTime = messageData.time;
|
||||
if (roomIndex !== -1) {
|
||||
// 更新现有聊天室信息
|
||||
this.chatRooms[roomIndex] = {
|
||||
...this.chatRooms[roomIndex],
|
||||
lastMessage: messageData.content,
|
||||
lastMessageTime: messageData.time,
|
||||
unreadCount:
|
||||
messageData.clientReadNum || this.chatRooms[roomIndex].unreadCount,
|
||||
};
|
||||
|
||||
// 重新排序联系人列表，将最新消息的联系人移到前面
|
||||
this.sortContacts();
|
||||
// 将更新的聊天室移到列表顶部
|
||||
const updatedRoom = this.chatRooms.splice(roomIndex, 1)[0];
|
||||
this.chatRooms.unshift(updatedRoom);
|
||||
}
|
||||
},
|
||||
// 修改标记为已读方法，添加参数支持
|
||||
|
|
@ -721,13 +834,15 @@ export default {
|
|||
this.loadingRooms = true;
|
||||
const response = await getRoomList();
|
||||
if (response?.code === 200) {
|
||||
// 创建全新的联系人数组
|
||||
const newContacts = response.rows.map((room) => {
|
||||
// 查找旧联系人中是否存在相同roomId
|
||||
const existingContact = this.contacts.find(
|
||||
(c) => c.roomId === room.id
|
||||
);
|
||||
|
||||
const manualRoom = this.manualCreatedRooms.find(
|
||||
(c) => c.roomId === room.id
|
||||
);
|
||||
|
||||
const isImportant =
|
||||
room.flag === 1
|
||||
? true
|
||||
|
|
@ -743,27 +858,19 @@ export default {
|
|||
roomId: room.id,
|
||||
name: room.userEmail || "未命名聊天室",
|
||||
avatar: this.getDefaultAvatar(room.roomName || "未命名聊天室"),
|
||||
lastMessage: room.lastMessage || "暂无消息",
|
||||
// 修改这里：优先使用服务器返回的消息，其次是现有联系人的消息
|
||||
lastMessage: room.lastMessage || (existingContact ? existingContact.lastMessage : "暂无消息"),
|
||||
lastTime: room.lastUserSendTime
|
||||
? new Date(room.lastUserSendTime)
|
||||
: new Date(),
|
||||
unread: existingContact?.unread ?? room.unreadCount ?? 0,
|
||||
important: isImportant,
|
||||
isManualCreated: existingContact?.isManualCreated || false, // 保持手动创建标记
|
||||
isManualCreated: manualRoom ? true : false,
|
||||
sendUserType: room.sendUserType,
|
||||
isGuest: room.sendUserType === 0,
|
||||
};
|
||||
});
|
||||
|
||||
// 合并手动创建的聊天室
|
||||
this.manualCreatedRooms.forEach((room) => {
|
||||
const exists = newContacts.find((c) => c.roomId === room.roomId);
|
||||
if (!exists) {
|
||||
newContacts.push({
|
||||
...room,
|
||||
lastTime: new Date(room.lastTime),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 更新联系人列表
|
||||
this.contacts = newContacts;
|
||||
this.sortContacts();
|
||||
|
|
@ -789,7 +896,7 @@ export default {
|
|||
this.history7Params.id = lastMsg ? lastMsg.id : "";
|
||||
// this.history7Params.pageNum += 1; // 递增页码
|
||||
this.history7Params.roomId = this.currentContactId;
|
||||
|
||||
this.history7Params.email = this.userEmail;
|
||||
|
||||
try {
|
||||
this.messagesLoading = true;
|
||||
|
|
@ -850,7 +957,6 @@ export default {
|
|||
|
||||
// 标记消息为已读
|
||||
await this.markMessagesAsRead(roomId);
|
||||
|
||||
} catch (error) {
|
||||
console.error("选择联系人失败:", error);
|
||||
this.$message.error("加载聊天记录失败");
|
||||
|
|
@ -878,16 +984,21 @@ export default {
|
|||
if (!roomId) return;
|
||||
|
||||
try {
|
||||
this.history7Params.email = this.userEmail;
|
||||
this.history7Params.roomId = roomId;
|
||||
const response = await getHistory7(this.history7Params);
|
||||
|
||||
if (response?.code === 200 && response.data) {
|
||||
// 处理消息数据
|
||||
let roomMessages = response.data
|
||||
.filter(msg => msg.roomId == roomId)
|
||||
.map(msg => ({
|
||||
.filter((msg) => msg.roomId == roomId)
|
||||
.map((msg) => ({
|
||||
id: msg.id,
|
||||
sender: msg.isSelf === 1 ? "我" : msg.sendEmail || "未知发送者",
|
||||
avatar: msg.sendUserType == 2 ? "iconfont icon-icon28" : "iconfont icon-user",
|
||||
avatar:
|
||||
msg.sendUserType == 2
|
||||
? "iconfont icon-icon28"
|
||||
: "iconfont icon-user",
|
||||
content: msg.content,
|
||||
time: new Date(msg.createTime),
|
||||
isSelf: msg.isSelf === 1,
|
||||
|
|
@ -895,7 +1006,7 @@ export default {
|
|||
isRead: msg.isRead === 1,
|
||||
type: msg.type,
|
||||
roomId: msg.roomId,
|
||||
sendUserType: msg.sendUserType
|
||||
sendUserType: msg.sendUserType,
|
||||
}));
|
||||
|
||||
// 按时间排序
|
||||
|
|
@ -905,11 +1016,10 @@ export default {
|
|||
this.$set(this.messages, roomId, roomMessages);
|
||||
|
||||
// 更新联系人的未读状态
|
||||
const contact = this.contacts.find(c => c.roomId === roomId);
|
||||
const contact = this.contacts.find((c) => c.roomId === roomId);
|
||||
if (contact) {
|
||||
contact.unread = 0;
|
||||
}
|
||||
|
||||
} else {
|
||||
// 如果没有消息数据，初始化为空数组
|
||||
this.$set(this.messages, roomId, []);
|
||||
|
|
@ -935,7 +1045,7 @@ export default {
|
|||
|
||||
// 构造消息对象
|
||||
const message = {
|
||||
id: messageData.id,
|
||||
id: messageData.id || Date.now(), // 如果没有id则使用时间戳
|
||||
sender: messageData.sender,
|
||||
avatar: messageData.avatar || (messageData.isSelf ? "iconfont icon-icon28" : "iconfont icon-user"),
|
||||
content: messageData.content,
|
||||
|
|
@ -944,7 +1054,7 @@ export default {
|
|||
isImage: messageData.isImage || false,
|
||||
type: messageData.type || 1,
|
||||
roomId: roomId,
|
||||
isRead: messageData.isRead || false
|
||||
isRead: messageData.isRead || false,
|
||||
};
|
||||
|
||||
// 添加消息到数组
|
||||
|
|
@ -953,8 +1063,8 @@ export default {
|
|||
// 更新最后一条消息
|
||||
this.updateContactLastMessage({
|
||||
roomId: roomId,
|
||||
content: message.content,
|
||||
isImage: message.isImage
|
||||
content: message.isImage ? "[图片]" : message.content,
|
||||
isImage: message.isImage,
|
||||
});
|
||||
|
||||
// 如果是当前聊天室且用户在底部，滚动到底部
|
||||
|
|
@ -964,10 +1074,18 @@ export default {
|
|||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 处理图片上传
|
||||
async handleImageUpload(event) {
|
||||
if (!this.currentContact || !this.wsConnected) return;
|
||||
// 检查是否有选中的联系人和 WebSocket 连接
|
||||
if (!this.currentContact) {
|
||||
this.$message.warning("请先选择联系人");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.stompClient || !this.isWebSocketConnected) {
|
||||
this.$message.warning("聊天连接已断开，请刷新页面重试");
|
||||
return;
|
||||
}
|
||||
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
|
@ -988,63 +1106,68 @@ export default {
|
|||
this.sending = true;
|
||||
|
||||
try {
|
||||
// 准备FormData
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
this.$message.info("正在上传图片...");
|
||||
|
||||
// 调用API上传图片到后端
|
||||
const response = await getFileUpdate(formData);
|
||||
console.log("图片上传响应:", response);
|
||||
|
||||
if (response && response.code === 200 && response.data) {
|
||||
// 获取后端返回的图片信息
|
||||
const imageData = response.data;
|
||||
const imageUrl = imageData.url;
|
||||
|
||||
console.log("后端返回的图片URL:", imageUrl);
|
||||
// 将图片转换为 base64
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const base64Image = e.target.result;
|
||||
|
||||
// 构建WebSocket消息对象
|
||||
const message = {
|
||||
content: imageUrl, // 使用后端返回的URL作为内容
|
||||
content: base64Image,
|
||||
type: 2, // 类型2表示图片消息
|
||||
email: this.currentContact.name,
|
||||
receiveUserType: this.userType,
|
||||
receiveUserType: this.currentContact.sendUserType || 1, // 使用联系人的用户类型
|
||||
roomId: this.currentContactId,
|
||||
};
|
||||
|
||||
// 发送WebSocket消息
|
||||
this.stompClient.send(
|
||||
"/point/send/message",
|
||||
"/point/send/message/to/user",
|
||||
{},
|
||||
JSON.stringify(message)
|
||||
);
|
||||
|
||||
// 添加到本地消息列表以在UI中显示
|
||||
// 添加到本地消息列表
|
||||
this.addMessageToChat({
|
||||
sender: "我",
|
||||
avatar: "iconfont icon-icon28",
|
||||
content: imageUrl,
|
||||
content: base64Image,
|
||||
time: new Date(),
|
||||
isSelf: true,
|
||||
isImage: true, // 标记为图片消息
|
||||
isImage: true,
|
||||
type: 2,
|
||||
roomId: this.currentContactId,
|
||||
});
|
||||
|
||||
// 更新联系人最后一条消息
|
||||
this.updateContactLastMessage({
|
||||
roomId: this.currentContactId,
|
||||
content: "[图片]",
|
||||
isImage: true
|
||||
});
|
||||
|
||||
this.$message.success("图片已发送");
|
||||
} else {
|
||||
this.$message.error("图片上传失败: " + (response?.msg || "未知错误"));
|
||||
}
|
||||
};
|
||||
|
||||
reader.onerror = () => {
|
||||
this.$message.error("图片读取失败");
|
||||
this.sending = false;
|
||||
};
|
||||
|
||||
// 开始读取文件
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
} catch (error) {
|
||||
console.error("上传图片异常:", error);
|
||||
this.$message.error("上传图片失败，请重试");
|
||||
} finally {
|
||||
this.sending = false;
|
||||
// 清空文件选择器，以便于用户可以再次选择同一个文件
|
||||
// 清空文件选择器
|
||||
this.$refs.imageInput.value = "";
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 更新联系人最后一条消息
|
||||
updateContactLastMessage(message) {
|
||||
const contact = this.contacts.find((c) => c.roomId === message.roomId);
|
||||
|
|
@ -1249,7 +1372,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 加载历史消息(7天前)
|
||||
// 小时钟加载历史消息(7天前)
|
||||
async loadHistory() {
|
||||
this.loadingHistory = true;
|
||||
this.userViewHistory = true; // 用户主动查看历史
|
||||
|
|
@ -1258,8 +1381,17 @@ export default {
|
|||
|
||||
try {
|
||||
this.messagesLoading = true;
|
||||
// 获取当前已加载的消息列表
|
||||
const currentMsgs = this.messages[this.currentContactId] || [];
|
||||
|
||||
const response = await getHistory({ roomId: this.currentContactId });
|
||||
// 取最后一条消息的id
|
||||
const lastMsg =
|
||||
currentMsgs.length > 0 ? currentMsgs[currentMsgs.length - 1] : null;
|
||||
this.history7Params.id = lastMsg ? lastMsg.id : "";
|
||||
// this.history7Params.pageNum += 1; // 递增页码
|
||||
this.history7Params.roomId = this.currentContactId;
|
||||
this.history7Params.email = this.userEmail;
|
||||
const response = await getHistory7(this.history7Params);
|
||||
|
||||
if (response && response.code === 200 && response.data) {
|
||||
let historyMessages = response.data
|
||||
|
|
@ -1320,6 +1452,9 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 组件销毁前断开连接
|
||||
this.disconnectWebSocket();
|
||||
|
||||
// if (this.roomListInterval) {
|
||||
// clearInterval(this.roomListInterval);
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -76,11 +76,11 @@ export default {
|
|||
nameTextStyle: {
|
||||
|
||||
padding: [0, 0, 0, -40],
|
||||
}
|
||||
},
|
||||
// min: `dataMin`,
|
||||
// max: `dataMax`,
|
||||
// axisLabel: {
|
||||
// formatter: function (value) {
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
// let data
|
||||
// if (value > 10000000) {
|
||||
// data = `${(value / 10000000)} KW`
|
||||
|
|
@ -89,9 +89,9 @@ export default {
|
|||
// } else if (value / 10000) {
|
||||
// data = `${(value / 10000)} W`
|
||||
// }
|
||||
// return data
|
||||
// }
|
||||
// }
|
||||
return value
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
|
|
@ -506,7 +506,8 @@ export default {
|
|||
show: true,
|
||||
amount: 1,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// { //告知已删除此币种 Radiant
|
||||
// value: "dgb2_odo",
|
||||
// label: "dgb-odocrypt-pool2",
|
||||
|
|
@ -825,9 +826,38 @@ export default {
|
|||
}
|
||||
|
||||
|
||||
}else{ //动态计算图表的grid.left 让左侧的Y轴标签显示完全
|
||||
|
||||
|
||||
const yAxis = this.option.yAxis[0]; // 第一个 Y 轴
|
||||
const maxValue = Math.max(...this.option.series[0].data); // 获取数据最大值
|
||||
const formatter = yAxis.axisLabel.formatter;
|
||||
const formattedValue = formatter(maxValue); // 格式化最大值
|
||||
|
||||
// 创建一个临时 DOM 元素计算宽度
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.style.position = 'absolute';
|
||||
tempDiv.style.visibility = 'hidden';
|
||||
tempDiv.style.fontSize = '12px'; // 与 axisLabel.fontSize 一致
|
||||
tempDiv.innerText = formattedValue;
|
||||
document.body.appendChild(tempDiv);
|
||||
const labelWidth = tempDiv.offsetWidth;
|
||||
document.body.removeChild(tempDiv);
|
||||
|
||||
// 动态设置 grid.left，加上安全边距
|
||||
const safeMargin = 20;
|
||||
this.option.grid.left = labelWidth + safeMargin + 'px';
|
||||
// this.$nextTick(
|
||||
// // 更新图表
|
||||
// this.inCharts()
|
||||
|
||||
// )
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
this.getBlockInfoData(this.BlockInfoParams)
|
||||
this.getCoinInfoData(this.params)
|
||||
this.getPoolPowerData(this.PowerParams)
|
||||
|
|
@ -1395,52 +1425,111 @@ export default {
|
|||
handelCalculation() {
|
||||
this.calculateIncome()
|
||||
},
|
||||
// 获取单个币种项目的完整宽度（包含margin）
|
||||
getItemFullWidth() {
|
||||
const listEl = this.$refs.currencyList;
|
||||
if (!listEl) return 120;
|
||||
|
||||
const firstItem = listEl.querySelector('.list-item');
|
||||
if (!firstItem) return 120;
|
||||
|
||||
const style = window.getComputedStyle(firstItem);
|
||||
const width = firstItem.offsetWidth;
|
||||
const marginLeft = parseInt(style.marginLeft) || 0;
|
||||
const marginRight = parseInt(style.marginRight) || 0;
|
||||
|
||||
return width + marginLeft + marginRight;
|
||||
},
|
||||
|
||||
// 左滑动逻辑
|
||||
scrollLeft() {
|
||||
const allLength = this.currencyList.length * 120
|
||||
const boxLength = document.getElementById('list-box').clientWidth
|
||||
if (allLength < boxLength) return
|
||||
const listEl = document.getElementById('list')
|
||||
const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
|
||||
if (leftMove + boxLength - 360 < boxLength) {
|
||||
// 到最开始的时候
|
||||
listEl.style.left = '0PX'
|
||||
const listEl = this.$refs.currencyList;
|
||||
const listBox = this.$refs.listBox;
|
||||
if (!listEl || !listBox) return;
|
||||
|
||||
const itemFullWidth = this.getItemFullWidth();
|
||||
const step = 2 * itemFullWidth; // 每次滑动2个币种
|
||||
const allLength = this.currencyList.length * itemFullWidth;
|
||||
const boxLength = listBox.clientWidth;
|
||||
|
||||
if (allLength <= boxLength) return;
|
||||
|
||||
let currentLeft = Math.abs(parseInt(listEl.style.transform.replace('translateX(', '').replace('px)', '')) || 0);
|
||||
let newLeft = currentLeft - step;
|
||||
|
||||
listEl.classList.add('scrolling');
|
||||
|
||||
if (newLeft <= 0) {
|
||||
listEl.style.transform = 'translateX(0)';
|
||||
} else {
|
||||
listEl.style.left = '-' + (leftMove - 360) + 'PX'
|
||||
}
|
||||
},
|
||||
// 右滑动逻辑
|
||||
scrollRight() {
|
||||
const allLength = this.currencyList.length * 120
|
||||
const boxLength = document.getElementById('list-box').clientWidth
|
||||
if (allLength < boxLength) return
|
||||
const listEl = document.getElementById('list')
|
||||
const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
|
||||
if (leftMove + boxLength + 360 > allLength) {
|
||||
listEl.style.left = '-' + (allLength - boxLength) + 'PX'
|
||||
} else {
|
||||
listEl.style.left = '-' + (leftMove + 360) + 'PX'
|
||||
listEl.style.transform = `translateX(-${newLeft}px)`;
|
||||
}
|
||||
|
||||
// 增加动画时间到 500ms
|
||||
setTimeout(() => {
|
||||
listEl.classList.remove('scrolling');
|
||||
}, 500);
|
||||
},
|
||||
|
||||
// clickCurrency: throttle(function(item) {
|
||||
// this.currency = item.label
|
||||
// this.currencyPath = item.imgUrl
|
||||
// this.params.coin = item.value
|
||||
// this.BlockInfoParams.coin = item.value
|
||||
// this.itemActive = item.value
|
||||
// this.PowerParams.coin = item.value
|
||||
// this.getCoinInfoData(this.params)
|
||||
// this.getBlockInfoData(this.BlockInfoParams)
|
||||
// // this.getPoolPowerData(this.PowerParams)
|
||||
// // this.getMinerCountData(this.params)
|
||||
// if (this.powerActive) {
|
||||
// this.handelPower()
|
||||
// } else if (!this.powerActive) {
|
||||
// this.handelMiner()
|
||||
// 右滑动逻辑
|
||||
scrollRight() {
|
||||
const listEl = this.$refs.currencyList;
|
||||
const listBox = this.$refs.listBox;
|
||||
if (!listEl || !listBox) return;
|
||||
|
||||
const itemFullWidth = this.getItemFullWidth();
|
||||
const step = 2 * itemFullWidth; // 每次滑动2个币种
|
||||
const allLength = this.currencyList.length * itemFullWidth;
|
||||
const boxLength = listBox.clientWidth;
|
||||
|
||||
if (allLength <= boxLength) return;
|
||||
|
||||
let currentLeft = Math.abs(parseInt(listEl.style.transform.replace('translateX(', '').replace('px)', '')) || 0);
|
||||
let newLeft = currentLeft + step;
|
||||
const maxLeft = allLength - boxLength;
|
||||
|
||||
listEl.classList.add('scrolling');
|
||||
|
||||
if (newLeft >= maxLeft) {
|
||||
listEl.style.transform = `translateX(-${maxLeft}px)`;
|
||||
} else {
|
||||
listEl.style.transform = `translateX(-${newLeft}px)`;
|
||||
}
|
||||
|
||||
// 增加动画时间到 500ms
|
||||
setTimeout(() => {
|
||||
listEl.classList.remove('scrolling');
|
||||
}, 500);
|
||||
},
|
||||
// // 左滑动逻辑
|
||||
// scrollLeft() {
|
||||
// const allLength = this.currencyList.length * 120
|
||||
// const boxLength = document.getElementById('list-box').clientWidth
|
||||
// if (allLength < boxLength) return
|
||||
// const listEl = document.getElementById('list')
|
||||
// const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
|
||||
// if (leftMove + boxLength - 360 < boxLength) {
|
||||
// // 到最开始的时候
|
||||
// listEl.style.left = '0PX'
|
||||
// } else {
|
||||
// listEl.style.left = '-' + (leftMove - 360) + 'PX'
|
||||
// }
|
||||
// }, 1000),
|
||||
// },
|
||||
// // 右滑动逻辑
|
||||
// scrollRight() {
|
||||
// const allLength = this.currencyList.length * 120
|
||||
// const boxLength = document.getElementById('list-box').clientWidth
|
||||
// if (allLength < boxLength) return
|
||||
// const listEl = document.getElementById('list')
|
||||
// const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
|
||||
// if (leftMove + boxLength + 360 > allLength) {
|
||||
// listEl.style.left = '-' + (allLength - boxLength) + 'PX'
|
||||
// } else {
|
||||
// listEl.style.left = '-' + (leftMove + 360) + 'PX'
|
||||
// }
|
||||
// },
|
||||
|
||||
|
||||
handleActiveItemChange(item) {
|
||||
if (!item) return;
|
||||
|
||||
|
|
|
|||
|
|
@ -340,6 +340,29 @@
|
|||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-card>
|
||||
<div class="monitor-list">
|
||||
<div class="btn left" @click="scrollLeft">
|
||||
<i class="iconfont icon-icon-prev" />
|
||||
</div>
|
||||
<div ref="listBox" class="list-box">
|
||||
<div ref="currencyList" class="list">
|
||||
<div
|
||||
v-for="item in currencyList"
|
||||
:key="item.value"
|
||||
@click="clickCurrency(item)"
|
||||
class="list-item"
|
||||
>
|
||||
<img :src="item.img" alt="coin" />
|
||||
<span :class="{ active: itemActive === item.value }">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn right" @click="scrollRight">
|
||||
<i class="iconfont icon-zuoyoujiantou1" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="monitor-list">
|
||||
<div class="btn left" @click="scrollLeft">
|
||||
<i class="iconfont icon-icon-prev" />
|
||||
</div>
|
||||
|
|
@ -361,7 +384,7 @@
|
|||
<div class="btn right" @click="scrollRight">
|
||||
<i class="iconfont icon-zuoyoujiantou1" />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -406,7 +429,6 @@
|
|||
>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
id="chart"
|
||||
v-if="powerActive"
|
||||
|
|
@ -3119,6 +3141,63 @@ export default {
|
|||
transition: left 1s;
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {//加的
|
||||
width: calc(100% - 100px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
will-change: transform;
|
||||
padding-left: 2%;
|
||||
|
||||
&.scrolling {
|
||||
// 增加动画时长到 0.5s，使用更平滑的缓动函数
|
||||
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
flex-shrink: 0;
|
||||
width: 120px;
|
||||
height: 95%;
|
||||
margin-left: 18px;
|
||||
// 增加过渡时间，使悬停效果更平滑
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(110, 62, 219, 0.2);
|
||||
}
|
||||
|
||||
img {
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
span {
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
// 增加按钮过渡时间
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
&:hover {
|
||||
background-color: #6e3edb;
|
||||
color: #fff;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// -----------------------
|
||||
|
|
|
|||
Loading…
Reference in New Issue