.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;
|
||||
}
|
||||
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();
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// -----------------------
|
||||
|
|
|
|||
Loading…
Reference in New Issue