From a326f62f814ee9394f3a8021ebb30f60c7a10de6 Mon Sep 17 00:00:00 2001
From: yaoqin <497681109@qq.com>
Date: Fri, 16 May 2025 14:01:38 +0800
Subject: [PATCH] =?UTF-8?q?.m2pool=20=E5=AE=A2=E6=9C=8D=E7=B3=BB=E7=BB=9F?=
=?UTF-8?q?=E5=AF=B9=E6=8E=A5=201.=E8=AE=A2=E9=98=85=E6=8E=A5=E5=8F=A3?=
=?UTF-8?q?=E5=8C=BA=E5=88=86=E7=94=A8=E6=88=B7=E5=92=8C=E5=AE=A2=E6=9C=8D?=
=?UTF-8?q?=20=E9=81=BF=E5=85=8D=E6=B6=88=E6=81=AF=E6=B7=B7=E4=B9=B1=20?=
=?UTF-8?q?=E5=B7=B2=E5=A4=84=E7=90=86=202.=E5=8E=86=E5=8F=B2=E6=B6=88?=
=?UTF-8?q?=E6=81=AF=E6=B8=B2=E6=9F=93isSelf=E8=BF=94=E5=9B=9E=E5=80=BC?=
=?UTF-8?q?=E6=9C=89=E9=97=AE=E9=A2=98=20=E5=B7=B2=E5=A4=84=E7=90=86=203.?=
=?UTF-8?q?=E5=9B=BE=E7=89=87=E5=8F=91=E9=80=81=E6=96=B9=E5=BC=8F=E4=BF=AE?=
=?UTF-8?q?=E6=94=B9=E4=B8=BA=E7=94=A8base64Image=E5=8F=91=E9=80=81?=
=?UTF-8?q?=E5=90=8Esoket=E8=87=AA=E5=8A=A8=E6=96=AD=E5=BC=80=20=20?=
=?UTF-8?q?=E5=B7=B2=E5=A4=84=E7=90=86=204.=E4=BC=98=E5=8C=96=E5=BF=83?=
=?UTF-8?q?=E8=B7=B3=E6=9C=BA=E5=88=B6=20=E6=96=AD=E7=BA=BF=E9=87=8D?=
=?UTF-8?q?=E8=BF=9E=20=E6=9C=80=E5=A4=9A=E8=87=AA=E5=8A=A8=E9=87=8D?=
=?UTF-8?q?=E8=BF=9E5=E6=AC=A1=20=E5=B7=B2=E5=A4=84=E7=90=86=205.=E6=B8=B8?=
=?UTF-8?q?=E5=AE=A2=E5=8A=9F=E8=83=BD=E6=B7=BB=E5=8A=A0=E3=80=81=E5=88=A0?=
=?UTF-8?q?=E9=99=A4=E5=88=97=E8=A1=A8=E7=A6=BB=E7=BA=BF=E6=B8=B8=E5=AE=A2?=
=?UTF-8?q?=20=E5=A4=84=E7=90=86=E4=B8=AD=206.=E5=AE=A2=E6=9C=8D=E7=BB=99?=
=?UTF-8?q?=E6=B8=B8=E5=AE=A2=E5=8F=91=E9=80=81=E6=B6=88=E6=81=AF=20?=
=?UTF-8?q?=E6=B8=B8=E5=AE=A2=E6=94=B6=E4=B8=8D=E5=88=B0=E6=8E=A8=E9=80=81?=
=?UTF-8?q?=E6=B6=88=E6=81=AF=20=E5=B7=B2=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
mining-pool/.env.development | 4 +-
mining-pool/src/api/customerService.js | 6 +-
mining-pool/src/components/ChatWidget.vue | 761 +++++++++------
.../src/views/customerService/index.vue | 909 ++++++++++--------
mining-pool/src/views/home/index.js | 209 ++--
mining-pool/src/views/home/index.vue | 83 +-
6 files changed, 1203 insertions(+), 769 deletions(-)
diff --git a/mining-pool/.env.development b/mining-pool/.env.development
index 9f360fd..40adac6 100644
--- a/mining-pool/.env.development
+++ b/mining-pool/.env.development
@@ -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
diff --git a/mining-pool/src/api/customerService.js b/mining-pool/src/api/customerService.js
index 9ff785d..6558277 100644
--- a/mining-pool/src/api/customerService.js
+++ b/mining-pool/src/api/customerService.js
@@ -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
})
}
diff --git a/mining-pool/src/components/ChatWidget.vue b/mining-pool/src/components/ChatWidget.vue
index 3f7d644..e2f8517 100644
--- a/mining-pool/src/components/ChatWidget.vue
+++ b/mining-pool/src/components/ChatWidget.vue
@@ -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;
}
- this.userEmail = email;
+
} catch (parseError) {
console.error("解析用户信息失败:", parseError);
// 解析失败时默认为游客
@@ -317,68 +325,124 @@ export default {
},
// 添加订阅消息的方法
- subscribeToPersonalMessages() {
- if (!this.stompClient || !this.isWebSocketConnected) return;
+ subscribeToPersonalMessages() {
+ if (!this.stompClient || !this.isWebSocketConnected) return;
- try {
- // 订阅个人消息频道
- this.stompClient.subscribe(
- `/user/queue/${this.userEmail}`,
- this.onMessageReceived,
- {
- id: `chat_${this.userEmail}`,
- }
- );
-
- console.log("成功订阅消息频道:", `/user/queue/${this.userEmail}`);
- } catch (error) {
- console.error("订阅消息失败:", error);
- this.$message.error("消息订阅失败，可能无法接收新消息");
- }
- },
+ try {
+ // 订阅个人消息频道
+ this.stompClient.subscribe(
+ `/sub/queue/user/${this.userEmail}`,
+ this.onMessageReceived,
+ // {
+ // id: `chat_${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";
- try {
- const wsUrl = `${process.env.VUE_APP_BASE_API}chat/ws`;
- this.stompClient = Stomp.client(wsUrl);
+ this.connectionStatus = "connecting";
+ this.isReconnecting = true;
- const headers = {
- email: this.userEmail,
- type: this.userType,
- };
+ 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();
+ // }
+ // };
- this.stompClient.connect(
- headers,
- (frame) => {
- console.log("WebSocket Connected:", frame);
- this.isWebSocketConnected = true;
- this.connectionStatus = "connected";
-
- // 连接成功后立即订阅消息
- this.subscribeToPersonalMessages();
- },
- (error) => {
- console.error("WebSocket Error:", error);
- this.isWebSocketConnected = false;
- this.connectionStatus = "error";
- // 添加重连逻辑
- setTimeout(() => this.connectWebSocket(), 5000);
- }
- );
+ const headers = {
+ email: this.userEmail,
+ type: this.userType,
+ };
- // 配置心跳
- this.stompClient.heartbeat.outgoing = 20000;
- this.stompClient.heartbeat.incoming = 20000;
- } catch (error) {
- console.error("初始化 WebSocket 失败:", error);
+ // 添加连接状态监听
+ 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.handleDisconnect();
+ }
+ );
+
+ // 配置心跳
+ this.stompClient.heartbeat.outgoing = 20000;
+ 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("连接失败，请刷新页面重试");
+ }
+ },
// 新增：页面卸载时的处理
handleBeforeUnload() {
@@ -387,73 +451,93 @@ export default {
// 发送消息
sendMessage() {
- if (!this.inputMessage.trim() || this.connectionStatus !== "connected")
- return;
+ 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();
- // 添加用户消息到界面
- this.messages.push({
- type: "user",
- text: messageText,
- time: new Date(),
- email: this.receivingEmail,
- receiveUserType: 2, //接收消息用户类型
- roomId: this.roomId,
- isRead: false, // 新发送的消息默认未读
- });
- const message = {
- content: messageText,
- type: 1, // 1 表示文字消息
- email: this.receivingEmail,
- receiveUserType: 2,
- roomId: this.roomId,
- };
- // 发送消息
- this.stompClient.send("/point/send/message", {}, JSON.stringify(message));
- // 通过 WebSocket 发送消息
- // if (this.stompClient && this.stompClient.connected) {
- // this.stompClient.send({
- // destination: "/point/send/message",
- // body: JSON.stringify({
- // content: messageText,
- // type: 1,
- // email: this.receivingEmail,
- // receiveUserType:2,//当前用户类型
- // roomId: this.roomId,
- // }),
- // });
- // } else {
- // this.handleAutoResponse(messageText);
- // }
+ try {
+ // 添加用户消息到界面
+ this.messages.push({
+ type: "user",
+ text: messageText,
+ time: new Date(),
+ email: this.receivingEmail,
+ receiveUserType: 2, //接收消息用户类型
+ roomId: this.roomId,
+ isRead: false, // 新发送的消息默认未读
+ });
+ const message = {
+ content: messageText,
+ type: 1, // 1 表示文字消息
+ email: this.receivingEmail,
+ receiveUserType: 2,
+ roomId: this.roomId,
+ };
+ // 发送消息
+ this.stompClient.send(
+ "/point/send/message/to/customer",
+ {},
+ JSON.stringify(message)
+ );
- this.inputMessage = "";
+ // 通过 WebSocket 发送消息
+ // if (this.stompClient && this.stompClient.connected) {
+ // this.stompClient.send({
+ // destination: "/point/send/message",
+ // body: JSON.stringify({
+ // content: messageText,
+ // type: 1,
+ // email: this.receivingEmail,
+ // receiveUserType:2,//当前用户类型
+ // roomId: this.roomId,
+ // }),
+ // });
+ // } else {
+ // this.handleAutoResponse(messageText);
+ // }
- this.$nextTick(() => {
- this.scrollToBottom();
- });
+ this.inputMessage = "";
+
+ this.$nextTick(() => {
+ this.scrollToBottom();
+ });
+ } catch (error) {
+ console.error("发送消息失败:", error);
+ this.$message.error("发送消息失败，请重试");
+ this.handleDisconnect();
+ }
},
// 断开 WebSocket 连接
disconnectWebSocket() {
- if (this.stompClient) {
- try {
- // 取消所有订阅
- if (this.stompClient.subscriptions) {
- Object.keys(this.stompClient.subscriptions).forEach(id => {
- this.stompClient.unsubscribe(id);
- });
+ 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";
+ this.reconnectAttempts = 0;
+ this.isReconnecting = false;
+ } catch (error) {
+ console.error("断开 WebSocket 连接失败:", error);
}
-
- // 断开连接
- this.stompClient.deactivate();
- this.isWebSocketConnected = false;
- this.connectionStatus = "disconnected";
- } catch (error) {
- console.error("断开 WebSocket 连接失败:", error);
}
- }
- },
+ },
// 处理页面可见性变化
handleVisibilityChange() {
// 当页面变为可见且聊天窗口已打开时，标记消息为已读
@@ -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 = [{
- type: "system",
- text: "暂无历史消息",
- isSystemHint: true,
- time: new Date()
- }];
+ this.messages = [
+ {
+ type: "system",
+ text: "暂无历史消息",
+ isSystemHint: true,
+ time: new Date(),
+ },
+ ];
}
} catch (error) {
console.error("加载历史消息失败:", error);
this.$message.error("加载历史消息失败");
- // 显示错误提示
- this.messages = [{
- type: "system",
- text: "加载历史消息失败，请重试",
- isSystemHint: true,
- time: new Date(),
- isError: true
- }];
+ this.messages = [
+ {
+ type: "system",
+ text: "加载历史消息失败，请重试",
+ isSystemHint: true,
+ time: new Date(),
+ isError: true,
+ },
+ ];
} finally {
this.isLoadingHistory = false;
}
@@ -550,105 +642,118 @@ export default {
// 加载更多历史消息（超过7天的）
async loadMoreHistory() {
- if (this.isLoadingHistory || !this.roomId) return;
+ if (this.isLoadingHistory || !this.roomId) return;
- this.isLoadingHistory = true;
+ this.isLoadingHistory = true;
- try {
- // 显示加载中提示
- const loadingMsg = {
- type: "system",
- text: "正在加载更多历史消息...",
- isLoading: true,
- time: new Date(),
- };
- this.messages.unshift(loadingMsg);
+ try {
+ // 获取当前消息列表中最旧消息的 ID
+ const oldestMessage = this.messages.find(msg => !msg.isSystemHint && !msg.isLoading);
+ if (!oldestMessage || !oldestMessage.id) {
+ console.warn('没有找到有效的消息ID');
+ this.hasMoreHistory = false;
+ return;
+ }
- // 获取更早的聊天记录
- const response = await getHistory({ roomId: this.roomId });
+ // 显示加载中提示
+ const loadingMsg = {
+ type: "system",
+ text: "正在加载更多历史消息...",
+ isLoading: true,
+ time: new Date(),
+ };
+ this.messages.unshift(loadingMsg);
- // 移除加载中提示
- this.messages = this.messages.filter((msg) => !msg.isLoading);
+ // 获取更早的聊天记录，添加 id 参数
+ const response = await getHistory7({
+ roomId: this.roomId,
+ userType: this.userType,
+ email: this.userEmail,
+ id: oldestMessage.id // 添加最旧消息的 ID
+ });
- if (
- response &&
- response.code === 200 &&
- response.data &&
- response.data.length > 0
- ) {
- // 处理并添加历史消息
- const historyMessages = this.formatHistoryMessages(response.data);
+ // 移除加载中提示
+ this.messages = this.messages.filter((msg) => !msg.isLoading);
- // 将历史消息添加到消息列表的前面
- this.messages = [...historyMessages, ...this.messages];
+ if (
+ response &&
+ response.code === 200 &&
+ response.data &&
+ response.data.length > 0
+ ) {
+ // 处理并添加历史消息
+ const historyMessages = this.formatHistoryMessages(response.data);
- // 如果没有数据返回，表示没有更多历史记录
- this.hasMoreHistory = historyMessages.length > 0;
+ // 将历史消息添加到消息列表的前面
+ this.messages = [...historyMessages, ...this.messages];
- if (historyMessages.length === 0) {
- this.messages.unshift({
- type: "system",
- text: "没有更多历史消息了",
- isSystemHint: true,
- time: new Date(),
- });
- }
- } else {
- this.hasMoreHistory = false;
- this.messages.unshift({
- type: "system",
- text: "没有更多历史消息了",
- isSystemHint: true,
- time: new Date(),
- });
- }
- } catch (error) {
- console.error("加载更多历史消息失败:", error);
+ // 如果没有数据返回，表示没有更多历史记录
+ this.hasMoreHistory = historyMessages.length > 0;
+
+ if (historyMessages.length === 0) {
this.messages.unshift({
type: "system",
- text: "加载更多历史消息失败",
- isError: true,
+ text: "没有更多历史消息了",
+ isSystemHint: true,
time: new Date(),
});
- } finally {
- this.isLoadingHistory = false;
}
- },
+ } else {
+ this.hasMoreHistory = false;
+ this.messages.unshift({
+ type: "system",
+ text: "没有更多历史消息了",
+ isSystemHint: true,
+ time: new Date(),
+ });
+ }
+ } catch (error) {
+ console.error("加载更多历史消息失败:", error);
+ this.messages.unshift({
+ type: "system",
+ text: "加载更多历史消息失败",
+ isError: true,
+ time: new Date(),
+ });
+ } finally {
+ this.isLoadingHistory = false;
+ }
+},
// 格式化历史消息数据
formatHistoryMessages(messagesData) {
- if (!messagesData || !Array.isArray(messagesData)) return [];
+ if (!messagesData || !Array.isArray(messagesData)) return [];
- return messagesData
- .map((msg) => ({
- type: msg.isSelf === 1 ? "user" : "system", // 根据 isSelf 判断消息类型
- text: msg.content || "",
- isImage: msg.type === 2,
- imageUrl: msg.type === 2 ? msg.content : null,
- time: new Date(msg.createTime),
- id: msg.id,
- roomId: msg.roomId,
- sender: msg.sendEmail,
- isHistory: true,
- isRead: true
- }))
- .sort((a, b) => new Date(a.time) - new Date(b.time));
-},
+ return messagesData
+ .map((msg) => ({
+ type: msg.isSelf === 1 ? "user" : "system", // 根据 isSelf 判断消息类型
+ text: msg.content || "",
+ isImage: msg.type === 2,
+ imageUrl: msg.type === 2 ? msg.content : null,
+ time: new Date(msg.createTime),
+ id: msg.id,
+ roomId: msg.roomId,
+ sender: msg.sendEmail,
+ isHistory: 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;
@@ -685,50 +790,49 @@ export default {
// 接收消息处理
onMessageReceived(message) {
- try {
- const data = JSON.parse(message.body);
- console.log("收到新消息:", data);
-
- // 构造消息对象
- const messageObj = {
- type: data.sendUserType === this.userType ? "user" : "system", // 用户类型判断
- text: data.content,
- isImage: data.type === 2,
- imageUrl: data.type === 2 ? data.content : null,
- time: new Date(data.sendTime),
- id: data.id,
- roomId: data.roomId,
- sender: data.sendEmail,
- isRead: false
- };
+ try {
+ const data = JSON.parse(message.body);
+ console.log("收到新消息:", data);
- // 直接添加到消息列表
- this.messages.push(messageObj);
+ // 构造消息对象
+ const messageObj = {
+ type: data.sendUserType === this.userType ? "user" : "system", // 用户类型判断
+ text: data.content,
+ isImage: data.type === 2,
+ imageUrl: data.type === 2 ? data.content : null,
+ time: new Date(data.sendTime),
+ id: data.id,
+ roomId: data.roomId,
+ sender: data.sendEmail,
+ isRead: false,
+ };
- // 如果聊天窗口未打开，增加未读消息数
- if (!this.isChatOpen) {
- // 使用服务器返回的未读数，如果没有则增加1
- if (data.clientReadNum !== undefined) {
- this.unreadMessages = data.clientReadNum;
- } else {
- this.unreadMessages++;
+ // 直接添加到消息列表
+ this.messages.push(messageObj);
+
+ // 如果聊天窗口未打开，增加未读消息数
+ if (!this.isChatOpen) {
+ // 使用服务器返回的未读数，如果没有则增加1
+ if (data.clientReadNum !== undefined) {
+ this.unreadMessages = data.clientReadNum;
+ } else {
+ this.unreadMessages++;
+ }
+ // 显示消息通知
+ this.showNotification(messageObj);
+ } else {
+ // 如果聊天窗口已打开，立即标记为已读
+ this.markMessagesAsRead();
+ }
+
+ // 滚动到底部
+ this.$nextTick(() => {
+ this.scrollToBottom();
+ });
+ } catch (error) {
+ console.error("处理消息失败:", error);
}
- // 显示消息通知
- this.showNotification(messageObj);
- } else {
- // 如果聊天窗口已打开，立即标记为已读
- this.markMessagesAsRead();
- }
-
- // 滚动到底部
- this.$nextTick(() => {
- this.scrollToBottom();
- });
-
- } catch (error) {
- console.error("处理消息失败:", error);
- }
-},
+ },
// 显示消息通知
showNotification(message) {
@@ -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,22 +994,22 @@ 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",
- };
+ const scrollOptions = {
+ top: this.$refs.chatBody.scrollHeight,
+ behavior: force ? 'auto' : 'smooth' // 强制滚动时使用 'auto'
+ };
- try {
- this.$refs.chatBody.scrollTo(scrollOptions);
- } catch (error) {
- // 如果平滑滚动不支持，则直接设置
- this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
- }
- }
- },
+ try {
+ this.$refs.chatBody.scrollTo(scrollOptions);
+ } catch (error) {
+ // 如果平滑滚动不支持，则直接设置
+ this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
+ }
+},
formatTime(date) {
if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
@@ -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,
});
- // 通过WebSocket发送图片消息
- if (this.stompClient && this.stompClient.connected) {
+
+ try {
+ // 通过 WebSocket 发送图片消息
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 || "未知错误"));
- }
+ this.$nextTick(() => {
+ this.scrollToBottom();
+ });
+ } 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();
},
diff --git a/mining-pool/src/views/customerService/index.vue b/mining-pool/src/views/customerService/index.vue
index 2558b64..73424f6 100644
--- a/mining-pool/src/views/customerService/index.vue
+++ b/mining-pool/src/views/customerService/index.vue
@@ -202,7 +202,7 @@
v-model="inputMessage"
:rows="3"
:disabled="!currentContact"
- placeholder="请输入消息，按Enter键发送，按Ctrl+Enter键换行"
+ placeholder="请输入消息，按Enter键发送，按Ctrl+Enter键换行"
@keydown.enter.native="handleKeyDown"
></el-input>
</div>
@@ -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>
@@ -270,18 +269,22 @@ export default {
userScrolled: false, // 新增：用户是否手动滚动过
history7Params: {
//7天历史消息参数
- id: "", //最后一条消息id
+ id: "", //最后一条消息id
roomId: "", //聊天室id
userType: 2, //用户类型
+ email: "497681109@qq.com", //客服邮箱
},
historyAllParams: {
//7天以前的历史消息
- id: "", //最后一条消息id
+ id: "", //最后一条消息id
roomId: "", //聊天室id
userType: 2, //用户类型
},
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);
+ // 获取聊天室列表
+ await this.fetchRoomList();
+ // 默认选择第一个联系人
+ if (this.contacts.length > 0) {
+ this.selectContact(this.contacts[0].roomId);
+ }
+ // 在组件创建时加载手动创建的聊天室
+ this.loadManualCreatedRooms();
+ // 初始化 WebSocket 连接
+ this.initWebSocket();
+ } catch (error) {
+ console.error("初始化失败:", error);
}
- // 在组件创建时加载手动创建的聊天室
- this.loadManualCreatedRooms();
},
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();
@@ -356,7 +361,7 @@ export default {
methods: {
handleKeyDown(e) {
console.log("e:hhhhshshsshshshhh好的好的和", e);
- // 如果按住了 Ctrl 键，则不发送消息（换行）
+ // 如果按住了 Ctrl 键，则不发送消息（换行）
if (e.ctrlKey) {
return;
}
@@ -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;
- this.stompClient = Stomp.client(wsUrl);
+ try {
+ const wsUrl = `${process.env.VUE_APP_BASE_API}chat/ws`;
+ this.stompClient = Stomp.client(wsUrl);
- // 配置连接参数
- const headers = {
- email: this.userEmail,
- type: 2,
- };
- // 连接并传入参数
- this.stompClient.connect(
- headers, // 连接参数
- (frame) => {
- // 连接成功回调
- console.log("WebSocket Connected:", frame);
- this.wsConnected = true;
- this.subscribeToPersonalMessages();
- },
- (error) => {
- // 连接错误回调
- console.error("WebSocket Error:", error);
- this.wsConnected = false;
- this.$message.error("连接失败，正在重试...");
+ // 配置 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: this.userType,
+ };
+
+ this.stompClient.connect(
+ headers,
+ (frame) => {
+ console.log("[客服系统] WebSocket 连接成功", frame);
+ this.isWebSocketConnected = true;
+ this.connectionStatus = "connected";
+ this.subscribeToMessages();
+ },
+ (error) => {
+ console.error("[客服系统] WebSocket 错误:", error);
+ this.handleDisconnect();
+ }
+ );
+
+ // 配置心跳
+ this.stompClient.heartbeat.outgoing = 20000;
+ this.stompClient.heartbeat.incoming = 20000;
+ } catch (error) {
+ console.error("初始化 CustomerService WebSocket 失败:", error);
+ this.handleDisconnect();
+ }
+ },
+
+ // // 订阅消息
+ 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);
}
- );
+ }
+ },
- // 可选：配置心跳
- this.stompClient.heartbeat.outgoing = 20000; // 20秒
- this.stompClient.heartbeat.incoming = 20000;
+ // 处理断开连接
+ handleDisconnect() {
+ this.isWebSocketConnected = false;
+ this.connectionStatus = "error";
- // 可选：开启调试日志
- this.stompClient.debug = function (str) {
- console.log("STOMP: " + str);
- };
+ // 尝试重新连接
+ setTimeout(() => {
+ if (!this.isWebSocketConnected) {
+ this.initWebSocket();
+ }
+ }, 5000);
},
// 获取当前的 UTC 时间
@@ -489,12 +521,12 @@ export default {
// 发送消息
this.stompClient.send(
- "/point/send/message",
+ "/point/send/message/to/user",
{},
JSON.stringify(message)
);
- // 添加到本地消息列表
+ // 添加到本地消息列表
this.addMessageToChat({
sender: "我",
content: messageContent,
@@ -502,7 +534,7 @@ export default {
isSelf: true,
isImage: false,
roomId: this.currentContactId,
- type: 1
+ type: 1,
});
// 重置当前聊天室的未读消息数
@@ -530,39 +562,92 @@ 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);
+ // 更新或创建聊天室
+ 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,
+ };
+
+ this.contacts.push(newContact);
+ this.$set(this.messages, messageData.roomId, []);
+ } else {
+ // 如果聊天室已存在，更新最后一条消息
+ existingContact.lastMessage = messageData.isImage ? "[图片]" : messageData.content;
+ existingContact.lastTime = messageData.time;
}
- this.updateChatRoomList(messageData);
+ // 添加消息到聊天记录
+ 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.addMessageToChat(messageData);
this.markMessagesAsRead(messageData.roomId);
} else {
- this.incrementUnreadCount(messageData.roomId, messageData.clientReadNum);
+ // 更新未读消息数
+ 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) {
@@ -570,24 +655,21 @@ export default {
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,
+ // 修改这里：使用实际收到的消息内容作为最后一条消息
lastMessage: messageData.isImage ? "[图片]" : messageData.content,
lastTime: messageData.time,
unread: 1,
important: false,
isGuest: messageData.sendUserType === 0,
sendUserType: messageData.sendUserType,
- isManualCreated: true, // 新增：标记为手动创建
- clientReadNum: messageData.clientReadNum, //未读条数
+ 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);
}
},
// 修改标记为已读方法，添加参数支持
@@ -683,7 +796,7 @@ export default {
try {
const data = {
roomId: roomId,
- userType:2,
+ userType: 2,
};
const response = await getReadMessage(data);
@@ -717,69 +830,63 @@ export default {
// 获取聊天室列表
async fetchRoomList() {
- try {
- 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
- );
+ try {
+ this.loadingRooms = true;
+ const response = await getRoomList();
+ if (response?.code === 200) {
+ const newContacts = response.rows.map((room) => {
+ const existingContact = this.contacts.find(
+ (c) => c.roomId === room.id
+ );
- const isImportant =
- room.flag === 1
- ? true
- : room.flag === 0
- ? false
- : room.important === 1
- ? true
- : existingContact
- ? existingContact.important
- : false;
+ const manualRoom = this.manualCreatedRooms.find(
+ (c) => c.roomId === room.id
+ );
- return {
- roomId: room.id,
- name: room.userEmail || "未命名聊天室",
- avatar: this.getDefaultAvatar(room.roomName || "未命名聊天室"),
- lastMessage: room.lastMessage || "暂无消息",
- lastTime: room.lastUserSendTime
- ? new Date(room.lastUserSendTime)
- : new Date(),
- unread: existingContact?.unread ?? room.unreadCount ?? 0,
- important: isImportant,
- isManualCreated: existingContact?.isManualCreated || false, // 保持手动创建标记
- };
- });
+ const isImportant =
+ room.flag === 1
+ ? true
+ : room.flag === 0
+ ? false
+ : room.important === 1
+ ? true
+ : existingContact
+ ? existingContact.important
+ : false;
- // 合并手动创建的聊天室
- this.manualCreatedRooms.forEach((room) => {
- const exists = newContacts.find((c) => c.roomId === room.roomId);
- if (!exists) {
- newContacts.push({
- ...room,
- lastTime: new Date(room.lastTime),
- });
- }
- });
+ return {
+ roomId: room.id,
+ name: room.userEmail || "未命名聊天室",
+ avatar: this.getDefaultAvatar(room.roomName || "未命名聊天室"),
+ // 修改这里：优先使用服务器返回的消息，其次是现有联系人的消息
+ lastMessage: room.lastMessage || (existingContact ? existingContact.lastMessage : "暂无消息"),
+ lastTime: room.lastUserSendTime
+ ? new Date(room.lastUserSendTime)
+ : new Date(),
+ unread: existingContact?.unread ?? room.unreadCount ?? 0,
+ important: isImportant,
+ isManualCreated: manualRoom ? true : false,
+ sendUserType: room.sendUserType,
+ isGuest: room.sendUserType === 0,
+ };
+ });
- // 更新联系人列表
- this.contacts = newContacts;
- this.sortContacts();
- }
- } catch (error) {
- console.error("获取聊天室列表异常:", error);
- this.$message.error("获取聊天室列表异常");
- } finally {
- this.loadingRooms = false;
- }
- },
+ // 更新联系人列表
+ this.contacts = newContacts;
+ this.sortContacts();
+ }
+ } catch (error) {
+ console.error("获取聊天室列表异常:", error);
+ this.$message.error("获取聊天室列表异常");
+ } finally {
+ this.loadingRooms = false;
+ }
+},
// 加载更多历史消息
async loadMoreHistory() {
if (!this.currentContactId) return;
-
+
// 获取当前已加载的消息列表
const currentMsgs = this.messages[this.currentContactId] || [];
@@ -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;
@@ -830,38 +937,37 @@ export default {
// 选择联系人
async selectContact(roomId) {
- if (this.currentContactId === roomId) return;
-
- try {
- this.messagesLoading = true; // 显示加载状态
- this.currentContactId = roomId;
- this.userViewHistory = false;
-
- // 重置分页参数
- this.history7Params = {
- id: "", // 首次加载为空
- // pageNum: 1, // 首次页码为1
- roomId: roomId,
- userType:2,
- };
+ if (this.currentContactId === roomId) return;
- // 加载历史消息
- await this.loadMessages(roomId);
-
- // 标记消息为已读
- await this.markMessagesAsRead(roomId);
+ try {
+ this.messagesLoading = true; // 显示加载状态
+ this.currentContactId = roomId;
+ this.userViewHistory = false;
- } catch (error) {
- console.error("选择联系人失败:", error);
- this.$message.error("加载聊天记录失败");
- } finally {
- this.messagesLoading = false;
- // 滚动到底部
- this.$nextTick(() => {
- this.scrollToBottom();
- });
- }
-},
+ // 重置分页参数
+ this.history7Params = {
+ id: "", // 首次加载为空
+ // pageNum: 1, // 首次页码为1
+ roomId: roomId,
+ userType: 2,
+ };
+
+ // 加载历史消息
+ await this.loadMessages(roomId);
+
+ // 标记消息为已读
+ await this.markMessagesAsRead(roomId);
+ } catch (error) {
+ console.error("选择联系人失败:", error);
+ this.$message.error("加载聊天记录失败");
+ } finally {
+ this.messagesLoading = false;
+ // 滚动到底部
+ this.$nextTick(() => {
+ this.scrollToBottom();
+ });
+ }
+ },
//判断是否在聊天框底部
isAtBottom() {
const container = this.$refs.messageContainer;
@@ -875,175 +981,192 @@ export default {
// 加载聊天消息
async loadMessages(roomId) {
- if (!roomId) return;
+ 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) => ({
+ id: msg.id,
+ sender: msg.isSelf === 1 ? "我" : msg.sendEmail || "未知发送者",
+ avatar:
+ msg.sendUserType == 2
+ ? "iconfont icon-icon28"
+ : "iconfont icon-user",
+ content: msg.content,
+ time: new Date(msg.createTime),
+ isSelf: msg.isSelf === 1,
+ isImage: msg.type === 2,
+ isRead: msg.isRead === 1,
+ type: msg.type,
+ roomId: msg.roomId,
+ sendUserType: msg.sendUserType,
+ }));
+
+ // 按时间排序
+ roomMessages = roomMessages.sort((a, b) => a.time - b.time);
+
+ // 更新消息列表
+ this.$set(this.messages, roomId, roomMessages);
+
+ // 更新联系人的未读状态
+ const contact = this.contacts.find((c) => c.roomId === roomId);
+ if (contact) {
+ contact.unread = 0;
+ }
+ } else {
+ // 如果没有消息数据，初始化为空数组
+ this.$set(this.messages, roomId, []);
+ if (response?.code !== 200) {
+ this.$message.warning("获取聊天记录失败");
+ }
+ }
+ } catch (error) {
+ console.error("加载消息异常:", error);
+ this.$message.error("加载消息异常");
+ this.$set(this.messages, roomId, []);
+ }
+ },
+
+ // 添加消息到聊天记录
+ addMessageToChat(messageData) {
+ const roomId = messageData.roomId || this.currentContactId;
+
+ // 如果该聊天室的消息数组不存在，则初始化
+ if (!this.messages[roomId]) {
+ this.$set(this.messages, roomId, []);
+ }
+
+ // 构造消息对象
+ const message = {
+ id: messageData.id || Date.now(), // 如果没有id则使用时间戳
+ sender: messageData.sender,
+ avatar: messageData.avatar || (messageData.isSelf ? "iconfont icon-icon28" : "iconfont icon-user"),
+ content: messageData.content,
+ time: messageData.time || new Date(),
+ isSelf: messageData.isSelf,
+ isImage: messageData.isImage || false,
+ type: messageData.type || 1,
+ roomId: roomId,
+ isRead: messageData.isRead || false,
+ };
+
+ // 添加消息到数组
+ this.messages[roomId].push(message);
+
+ // 更新最后一条消息
+ this.updateContactLastMessage({
+ roomId: roomId,
+ content: message.isImage ? "[图片]" : message.content,
+ isImage: message.isImage,
+ });
+
+ // 如果是当前聊天室且用户在底部，滚动到底部
+ if (roomId === this.currentContactId && !this.userViewHistory) {
+ this.$nextTick(() => {
+ this.scrollToBottom();
+ });
+ }
+},
+ // 处理图片上传
+ async handleImageUpload(event) {
+ // 检查是否有选中的联系人和 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;
+
+ // 检查是否为图片
+ if (!file.type.startsWith("image/")) {
+ this.$message.warning("只能上传图片文件!");
+ return;
+ }
+
+ // 检查文件大小 (限制为5MB)
+ const maxSize = 5 * 1024 * 1024;
+ if (file.size > maxSize) {
+ this.$message.warning("图片大小不能超过5MB!");
+ return;
+ }
+
+ this.sending = true;
try {
- const response = await getHistory7(this.history7Params);
-
- if (response?.code === 200 && response.data) {
- // 处理消息数据
- let roomMessages = response.data
- .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",
- content: msg.content,
- time: new Date(msg.createTime),
- isSelf: msg.isSelf === 1,
- isImage: msg.type === 2,
- isRead: msg.isRead === 1,
- type: msg.type,
- roomId: msg.roomId,
- sendUserType: msg.sendUserType
- }));
+ // 将图片转换为 base64
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const base64Image = e.target.result;
+
+ // 构建WebSocket消息对象
+ const message = {
+ content: base64Image,
+ type: 2, // 类型2表示图片消息
+ email: this.currentContact.name,
+ receiveUserType: this.currentContact.sendUserType || 1, // 使用联系人的用户类型
+ roomId: this.currentContactId,
+ };
- // 按时间排序
- roomMessages = roomMessages.sort((a, b) => a.time - b.time);
+ // 发送WebSocket消息
+ this.stompClient.send(
+ "/point/send/message/to/user",
+ {},
+ JSON.stringify(message)
+ );
- // 更新消息列表
- this.$set(this.messages, roomId, roomMessages);
+ // 添加到本地消息列表
+ this.addMessageToChat({
+ sender: "我",
+ content: base64Image,
+ time: new Date(),
+ isSelf: true,
+ isImage: true,
+ type: 2,
+ roomId: this.currentContactId,
+ });
- // 更新联系人的未读状态
- const contact = this.contacts.find(c => c.roomId === roomId);
- if (contact) {
- contact.unread = 0;
- }
+ // 更新联系人最后一条消息
+ this.updateContactLastMessage({
+ roomId: this.currentContactId,
+ content: "[图片]",
+ isImage: true
+ });
+
+ this.$message.success("图片已发送");
+ };
+
+ reader.onerror = () => {
+ this.$message.error("图片读取失败");
+ this.sending = false;
+ };
+
+ // 开始读取文件
+ reader.readAsDataURL(file);
- } else {
- // 如果没有消息数据，初始化为空数组
- this.$set(this.messages, roomId, []);
- if (response?.code !== 200) {
- this.$message.warning("获取聊天记录失败");
- }
- }
} catch (error) {
- console.error("加载消息异常:", error);
- this.$message.error("加载消息异常");
- this.$set(this.messages, roomId, []);
+ console.error("上传图片异常:", error);
+ this.$message.error("上传图片失败，请重试");
+ } finally {
+ this.sending = false;
+ // 清空文件选择器
+ this.$refs.imageInput.value = "";
}
},
- // 添加消息到聊天记录
- addMessageToChat(messageData) {
- const roomId = messageData.roomId || this.currentContactId;
-
- // 如果该聊天室的消息数组不存在，则初始化
- if (!this.messages[roomId]) {
- this.$set(this.messages, roomId, []);
- }
-
- // 构造消息对象
- const message = {
- id: messageData.id,
- sender: messageData.sender,
- avatar: messageData.avatar || (messageData.isSelf ? "iconfont icon-icon28" : "iconfont icon-user"),
- content: messageData.content,
- time: messageData.time || new Date(),
- isSelf: messageData.isSelf,
- isImage: messageData.isImage || false,
- type: messageData.type || 1,
- roomId: roomId,
- isRead: messageData.isRead || false
- };
-
- // 添加消息到数组
- this.messages[roomId].push(message);
-
- // 更新最后一条消息
- this.updateContactLastMessage({
- roomId: roomId,
- content: message.content,
- isImage: message.isImage
- });
-
- // 如果是当前聊天室且用户在底部，滚动到底部
- if (roomId === this.currentContactId && !this.userViewHistory) {
- this.$nextTick(() => {
- this.scrollToBottom();
- });
- }
- },
-
- // 处理图片上传
- async handleImageUpload(event) {
- if (!this.currentContact || !this.wsConnected) return;
-
- const file = event.target.files[0];
- if (!file) return;
-
- // 检查是否为图片
- if (!file.type.startsWith("image/")) {
- this.$message.warning("只能上传图片文件!");
- return;
- }
-
- // 检查文件大小 (限制为5MB)
- const maxSize = 5 * 1024 * 1024;
- if (file.size > maxSize) {
- this.$message.warning("图片大小不能超过5MB!");
- return;
- }
-
- 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);
-
- // 构建WebSocket消息对象
- const message = {
- content: imageUrl, // 使用后端返回的URL作为内容
- type: 2, // 类型2表示图片消息
- email: this.currentContact.name,
- receiveUserType: this.userType,
- roomId: this.currentContactId,
- };
-
- // 发送WebSocket消息
- this.stompClient.send(
- "/point/send/message",
- {},
- JSON.stringify(message)
- );
-
- // 添加到本地消息列表以在UI中显示
- this.addMessageToChat({
- sender: "我",
- avatar: "iconfont icon-icon28",
- content: imageUrl,
- time: new Date(),
- isSelf: true,
- isImage: true, // 标记为图片消息
- });
-
- this.$message.success("图片已发送");
- } else {
- this.$message.error("图片上传失败: " + (response?.msg || "未知错误"));
- }
- } catch (error) {
- console.error("上传图片异常:", error);
- this.$message.error("上传图片失败，请重试");
- } finally {
- this.sending = false;
- // 清空文件选择器，以便于用户可以再次选择同一个文件
- this.$refs.imageInput.value = "";
- }
- },
+
// 更新联系人最后一条消息
updateContactLastMessage(message) {
@@ -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);
// }
diff --git a/mining-pool/src/views/home/index.js b/mining-pool/src/views/home/index.js
index 348c381..3f53e5b 100644
--- a/mining-pool/src/views/home/index.js
+++ b/mining-pool/src/views/home/index.js
@@ -76,22 +76,22 @@ export default {
nameTextStyle: {
padding: [0, 0, 0, -40],
- }
+ },
// min: `dataMin`,
// max: `dataMax`,
- // axisLabel: {
- // formatter: function (value) {
- // let data
- // if (value > 10000000) {
- // data = `${(value / 10000000)} KW`
- // } else if (value > 1000000) {
- // data = `${(value / 1000000)} M`
- // } else if (value / 10000) {
- // data = `${(value / 10000)} W`
- // }
- // return data
- // }
- // }
+ axisLabel: {
+ formatter: function (value) {
+ // let data
+ // if (value > 10000000) {
+ // data = `${(value / 10000000)} KW`
+ // } else if (value > 1000000) {
+ // data = `${(value / 1000000)} M`
+ // } else if (value / 10000) {
+ // data = `${(value / 10000)} W`
+ // }
+ return value
+ }
+ }
},
{
@@ -506,7 +506,8 @@ export default {
show: true,
amount: 1,
- }
+ },
+
// { //告知已删除此币种 Radiant
// value: "dgb2_odo",
// label: "dgb-odocrypt-pool2",
@@ -825,8 +826,37 @@ 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)
@@ -1395,52 +1425,111 @@ export default {
handelCalculation() {
this.calculateIncome()
},
-
- // 左滑动逻辑
- 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'
- }
- },
- // 右滑动逻辑
- 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'
- }
- },
-
- // 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()
+ // 获取单个币种项目的完整宽度（包含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 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.transform = `translateX(-${newLeft}px)`;
+ }
+
+ // 增加动画时间到 500ms
+ setTimeout(() => {
+ listEl.classList.remove('scrolling');
+ }, 500);
+ },
+
+ // 右滑动逻辑
+ 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;
diff --git a/mining-pool/src/views/home/index.vue b/mining-pool/src/views/home/index.vue
index 40299be..671711e 100644
--- a/mining-pool/src/views/home/index.vue
+++ b/mining-pool/src/views/home/index.vue
@@ -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>
@@ -405,7 +428,6 @@
>{{ $t(item.label) }}</span
>
</div>
-
<div
id="chart"
@@ -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);
+ }
+ }
+
+
+
}
// -----------------------