Skip to content

T
tokcos-socket-web-ts-user
提交 368a7b31 作者: Hao
操作

供应商分页的问题

父级 49e463f3
正在显示 包含 141 行增加 和 193 行删除
.env.development
NODE_ENV=development NODE_ENV=development
VITE_USER_APP_API_URL=http://im.wei-it.com/api VITE_USER_APP_API_URL=https://im.wei-it.com/api
VITE_USER_APP_WS_API_URL=ws://im.wei-it.com/ws/ VITE_USER_APP_WS_API_URL=wss://im.wei-it.com/ws/
.env.production
NODE_ENV=production NODE_ENV=production
VITE_USER_APP_API_URL=http://im.wei-it.com/api VITE_USER_APP_API_URL=https://im.wei-it.com/api
VITE_USER_APP_WS_API_URL=ws://im.wei-it.com/ws/ VITE_USER_APP_WS_API_URL=wss://im.wei-it.com/ws/
\ No newline at end of file \ No newline at end of file
src/axios/model/user.ts
import http from "../index"; import http from "../index";
//登录
const Login = (query: any) => {
return http({
url: `/kf/auth/login`,
method: "post",
data: query,
});
};
//新增询价单
const InquiryAdd = (query: any) => {
return http({
url: `/inquiryAdd`,
method: "get",
data: query,
});
};
//快捷回复 //快捷回复
const Kjiehuifu = (query: any) => { // const Kjiehuifu = (query: any) => {
return http({ // return http({
url: "/Kjiehuifu", // url: "/Kjiehuifu",
method: "get", // method: "get",
data: query, // data: query,
}); // });
}; // };
//获取用户列表 //获取用户列表
const getUserList = (query: any) => { const getUserList = (query: any) => {
return http({ return http({
url: "/kf/chat/getChatList", url: "/common/getChatList",
method: "get", method: "get",
data: query, data: query,
}); });
...@@ -35,13 +19,22 @@ const getUserList = (query: any) => { ...@@ -35,13 +19,22 @@ const getUserList = (query: any) => {
//查看未读消息 //查看未读消息
const checkMesssages = (query: any) => { const checkMesssages = (query: any) => {
return http({ return http({
url: "/kf/chat/getChatHisList", url: "/common/getChatHisList",
method: "get", method: "get",
params: query, params: query,
}); });
}; };
//上传接口 //优先找在线客服,注意是商品对应供应商的账号(客服iD)
const getKfCode = (query: any) => {
return http({
url: "/common/getKfCode",
method: "get",
params: query,
});
};
//上传接口
const getUploadConfigInfo = (query: any) => { const getUploadConfigInfo = (query: any) => {
return http({ return http({
url: "/upload/getUploadConfigInfo", url: "/upload/getUploadConfigInfo",
...@@ -52,17 +45,15 @@ const getUploadConfigInfo = (query: any) => { ...@@ -52,17 +45,15 @@ const getUploadConfigInfo = (query: any) => {
//系统上传 //系统上传
const upload = (query: any) => { const upload = (query: any) => {
return http({ return http({
url: "/upload/uploadFile", url: "/common/uploadFile",
method: "post", method: "post",
data: query, data: query,
}); });
}; };
export { export {
Login,
InquiryAdd,
Kjiehuifu,
getUserList, getUserList,
checkMesssages, checkMesssages,
upload, upload,
getUploadConfigInfo, getUploadConfigInfo,
getKfCode
}; };
src/store/modules/user.ts
...@@ -4,59 +4,19 @@ export const useUserStore = defineStore("user", { ...@@ -4,59 +4,19 @@ export const useUserStore = defineStore("user", {
state: () => { state: () => {
return { return {
isConnected: false, //连接状态 isConnected: false, //连接状态
messages: [], chatInfo: {
customerInfo: { clientId: "",
username: "1489785944", serviceId: "1805880457362661377",
messages: [],
}, },
count: 0, count: 0,
userInfo: {
password: "",
token: "",
username:""
},
}; };
}, },
actions: { actions: {
setCount(num: number) { setCount(num: number) {
this.count = num; this.count = num;
}, },
setCustomerInfo(res: any) { setChatInfo(res: any) {
this.customerInfo = res; this.chatInfo = res;
},
setUserInfo(res: any) {
this.userInfo = res;
},
setUserListMessages(res: any) {
const messages: any = this.customerInfo.messages || [];
const obj = {
isSent: false,
msgType: res.msgType,
content: res.content,
cmd: res.cmd,
to: res.to,
id: res.id,
form: res.from,
userImg:"https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png",
time: moment(res.createTime).format("HH:mm:ss"),
};
messages.push(obj);
this.customerInfo.messages = messages;
},
setusernameMessage(res: any) {
const friends = res.friends;
for (const key in friends) {
const chatDatas = friends[key];
chatDatas.forEach((item: any) => {
item.userImg =
"https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png";
item.time = moment(res.createTime).format("HH:mm:ss");
});
for (const index in chatDatas) {
const userId = chatDatas[index].from;
this.customerInfo.messages = chatDatas;
}
}
}, },
connect() { connect() {
// 连接成功后，将 isConnected 状态设置为 true // 连接成功后，将 isConnected 状态设置为 true
......
src/utils/websocket.ts
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useUserStore } from "../store/modules/user"; import { useUserStore } from "../store/modules/user";
import {
useRoute
} from 'vue-router';
const route = useRoute() || {}
const routeParams = route.query || {}
let HeartbeatTime: any = null; let HeartbeatTime: any = null;
let websocket: WebSocket | null = null; // 用于存储实例化后websocket let websocket: WebSocket | null = null; // 用于存储实例化后websocket
let rec: any; // 断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码 let rec: any; // 断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
// 创建websocket // 创建websocket
let callBack: any = null; let callBack: any = null;
const connectMsg = (fun: Function) => {
const connectMsg = (fun) => { callBack = fun;
callBack = fun const useUser = useUserStore();
console.log(callBack) const wsUrl = `${import.meta.env.VITE_USER_APP_WS_API_URL}?type=yk&code=${
const useUser = useUserStore() useUser.chatInfo.clientId
useUser.setUserInfo({ }&kf=${useUser.chatInfo.serviceId}`;
username: routeParams.loginId || '1721217621001', console.log(wsUrl);
}) initWebSocket(wsUrl);
const wsUrl = `${import.meta.env.VITE_USER_APP_WS_API_URL}?type=yk&code=${useUser.userInfo.username };
}&kf=${useUser.customerInfo.username}`
console.log(wsUrl)
initWebSocket(wsUrl)
}
function creatWebSocket(wsUrl: string) { function creatWebSocket(wsUrl: string) {
// 判断当前浏览器是否支持WebSocket // 判断当前浏览器是否支持WebSocket
if ("WebSocket" in window) { if ("WebSocket" in window) {
console.log("当前浏览器支持 WebSocket"); console.log("当前浏览器支持 WebSocket");
} else if ("MozWebSocket" in window) { } else if ("MozWebSocket" in window) {
console.log("当前浏览器支持 MozWebSocket"); console.log("当前浏览器支持 MozWebSocket");
} else { } else {
console.log("当前浏览器不支持 WebSocket"); console.log("当前浏览器不支持 WebSocket");
} }
try { try {
initWebSocket(wsUrl); // 初始化websocket连接 initWebSocket(wsUrl); // 初始化websocket连接
} catch (e) { } catch (e) {
console.log("尝试创建连接失败"); console.log("尝试创建连接失败");
reConnect(wsUrl); // 如果无法连接上 webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接 reConnect(wsUrl); // 如果无法连接上 webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
} }
} }
// 初始化websocket // 初始化websocket
function initWebSocket(wsUrl: string) { function initWebSocket(wsUrl: string) {
if (!websocket) websocket = new WebSocket(wsUrl); if (!websocket) websocket = new WebSocket(wsUrl);
websocket.onopen = function(eee) { websocket.onopen = function (eee) {
websocketOpen(); websocketOpen();
}; };
// // 接收 // // 接收
websocket.onmessage = function(e: MessageEvent<any>) { websocket.onmessage = function (e: MessageEvent<any>) {
websocketonmessage(e); websocketonmessage(e);
}; };
// 连接发生错误 // 连接发生错误
websocket.onerror = function() { websocket.onerror = function () {
// isConnect = false; // 连接断开修改标识 // isConnect = false; // 连接断开修改标识
reConnect(wsUrl); // 连接错误 需要重连 reConnect(wsUrl); // 连接错误 需要重连
}; };
websocket.onclose = function(e) { websocket.onclose = function (e) {
websocketclose(e); websocketclose(e);
}; };
} }
//调取心跳 //调取心跳
function websocketHeartbeat() { function websocketHeartbeat() {
clearInterval(HeartbeatTime) clearInterval(HeartbeatTime);
HeartbeatTime = setInterval(() => { HeartbeatTime = setInterval(() => {
console.log('调取心跳') console.log("调取心跳");
websocketsend({ websocketsend({
cmd: 13 cmd: 13,
}); });
}, 10000) }, 10000);
} }
// 定义重连函数 // 定义重连函数
const reConnect = (wsUrl: string) => { const reConnect = (wsUrl: string) => {
if (useUserStore().isConnected) return; // 如果已经连上就不在重连了 if (useUserStore().isConnected) return; // 如果已经连上就不在重连了
rec && clearTimeout(rec); rec && clearTimeout(rec);
rec = setTimeout(function() { rec = setTimeout(function () {
// 延迟5秒重连 避免过多次过频繁请求重连 // 延迟5秒重连 避免过多次过频繁请求重连
creatWebSocket(wsUrl); creatWebSocket(wsUrl);
}, 5000); }, 5000);
}; };
// 创建连接 // 创建连接
function websocketOpen() { function websocketOpen() {
useUserStore().connect(); useUserStore().connect();
websocketHeartbeat() websocketHeartbeat();
} }
// 数据接收 // 数据接收
function websocketonmessage(e: MessageEvent<any>) { function websocketonmessage(e: MessageEvent<any>) {
const res = JSON.parse(e.data); // 解析JSON格式的数据 const res = JSON.parse(e.data); // 解析JSON格式的数据
console.log(res,'res') console.log(res, "res");
if (res.command == 11) { if (res.command == 11) {
console.log('收到') console.log("收到");
//将数据放在store中 //将数据放在store中
// 下面的判断则是后台返回的接收到的数据 如何处理自己决定 // 下面的判断则是后台返回的接收到的数据 如何处理自己决定
setTimeout(() => { setTimeout(() => {
console.log(callBack,'callBack') console.log(callBack, "callBack");
callBack() callBack();
// useUserStore().setUserListMessages(res.data).then(); // useUserStore().setUserListMessages(res.data).then();
}, 10); }, 10);
} }
} }
// 关闭 // 关闭
function websocketclose(e: any) { function websocketclose(e: any) {
console.log('关闭') console.log("关闭");
clearInterval(HeartbeatTime) clearInterval(HeartbeatTime);
useUserStore().disconnect(); // 修改连接状态 useUserStore().disconnect(); // 修改连接状态
} }
// 数据发送 // 数据发送
function websocketsend(res: any) { function websocketsend(res: any) {
if (websocket && useUserStore().isConnected) { if (websocket && useUserStore().isConnected) {
// 检查连接状态 // 检查连接状态
websocket.send(JSON.stringify(res)); websocket.send(JSON.stringify(res));
} else { } else {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: "请选择设备连接", message: "请选择设备连接",
type: "error", type: "error",
}); });
} }
} }
// 实际调用的方法============== // 实际调用的方法==============
// 发送 // 发送
function sendWebSocket(data: any) { function sendWebSocket(data: any) {
// 如果未保持连接状态 不允许直接发送消息 提示请选择连接设备 // 如果未保持连接状态 不允许直接发送消息 提示请选择连接设备
if (!useUserStore().isConnected) { if (!useUserStore().isConnected) {
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: "请选择设备连接", message: "请选择设备连接",
type: "error", type: "error",
}); });
// websocketsend(data); // websocketsend(data);
} else { } else {
websocketsend(data); websocketsend(data);
console.log("------------------"); console.log("------------------");
} }
} }
// 关闭 // 关闭
const closeWebSocket = () => { const closeWebSocket = () => {
if (websocket) { if (websocket) {
websocket.close(); websocket.close();
ElMessage({ ElMessage({
showClose: true, showClose: true,
message: "设备已关闭", message: "设备已关闭",
type: "success", type: "success",
}); });
} }
}; };
export { connectMsg, initWebSocket, sendWebSocket, creatWebSocket, closeWebSocket }; export {
connectMsg,
initWebSocket,
sendWebSocket,
creatWebSocket,
closeWebSocket,
};
yonghu.zip
No preview for this file type
yonghu/assets/homeView.eb1e7277.css → yonghu/assets/homeView.157a0cfd.css
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/assets/homeView.5ea54932.js → yonghu/assets/homeView.f74d468a.js
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/assets/index.5aee5cd9.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/assets/index.9bcc9311.css deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/index.html
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
this.resizeTo(800,600); this.resizeTo(800,600);
this.focus(); this.focus();
</script> --> </script> -->
<script type="module" crossorigin src="/assets/index.aa30d5b2.js"></script> <script type="module" crossorigin src="/assets/index.23cf875b.js"></script>
<link rel="modulepreload" crossorigin href="/assets/vendor.d471d1e7.js"> <link rel="modulepreload" crossorigin href="/assets/vendor.d471d1e7.js">
<link rel="stylesheet" href="/assets/index.9bcc9311.css"> <link rel="stylesheet" href="/assets/index.5aee5cd9.css">
</head> </head>
<body> <body>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论