let chatUrl = "http://192.168.1.175:2800/#/cus_customer";
// 客户端消息弹窗UI相关
// 图片
const base64ImageObject = {
// pc端客服图片
pcIcon: "data:image/png;base64,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",
// 关闭客服服务，向下按钮
putItAway:
"data:image/png;base64,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",
};
let customerServer = null;
//事件添加和执行
window.$chat = {
event: {},
on(name, fun) {
if (this.event[name] === undefined) {
this.event[name] = [];
}
this.event[name].push(fun);
},
emit(name, attr) {
if (this.event[name] && this.event[name].length) {
this.event[name].map((item) => {
if (typeof item === "function") {
item(...attr);
}
});
}
},
};
//放入默认事件
window.$chat.on("postMessage", function (type, data) {
if (!this.iframe_contanier) {
return;
}
this.iframe_contanier.contentWindow.postMessage(
{ type: type, data: data },
"*"
); // 传送图文数据
});
const settingObj = {};
//悬浮按钮样式
function customerServerStyle() {
//PC端悬浮按钮样式
this.customerServer_container = {
position: "fixed",
bottom: "10px",
right: "2px",
// background: 'linear-gradient(270deg, #1890FF 0%, #3875EA 100%)',
// color: '#fff',
// 'border-radius': '4px',
// width: '230px',
// padding: '8px 10px',
"box-sizing": "border-box",
cursor: "pointer",
"z-index": 99,
};
this.connect_customerServer = {
display: "flex",
"align-items": "center",
"justify-content": "space-between",
};
this.connect_customerServer_img = {
width: "100%",
};
//未读消息演示
this.connent_count = {
position: "absolute",
top: "-12px",
right: 0,
background: "red",
width: "25px",
height: "25px",
"border-radius": "50%",
display: "flex",
"align-items": "center",
"justify-content": "center",
"font-size": "12px",
opacity: ".9",
};
//iframe样式
this.iframe_content = {
position: "fixed",
"z-index": 999,
right: 0,
"border-radius": "4px",
transition: ".3s",
};
}
const customerServerStyleObject = new customerServerStyle();
//初始化函数
function initCustomerServer(option) {
this.outLine = false; // 是否在离线界面
this.openChat = false; //是否需要打开聊天窗口
this.settingObj = settingObj;
this.baseUrl = chatUrl || location.origin;
this.settingObj.openUrl = `${this.baseUrl}`; //服务器地址加路由, 若不传入则自动获取引入应用所在服务器的域名
this.settingObj.domId = "customerServerTip"; //浮动客服dom
this.settingObj.insertDomNode = option.insertDomNode || "body"; // 插入的标签
this.settingObj.token = option.token; // token为必填项
this.settingObj.pcIcon = base64ImageObject.pcIcon; // pcIcon 电脑端客服图片
this.settingObj.isShowTip = option.isShowTip; // false隐藏 true 展示 客服悬浮按钮默认展示
this.settingObj.windowStyle = option.windowStyle || ""; // pc 端打开默认最精简模式，center居中模式
this.settingObj.kefuid = option.kefuid || 0; // 指定客服，默认随机
this.settingObj.sendUserData = option.sendUserData || {}; // 用户信息，默认游客
this.settingObj.productInfo = option.productInfo || {}; // 携带产品信息，默认空
this.settingObj.version = option.version || ""; //版本号
this.appDom = null;
this.initStatus = false; //是否初始化过
// 判断当前环境下的设备是pc端 || 移动端, 将客户信息挂载到iframe的链接上
this.setMatchMedia = () => {
if (!this.settingObj.deviceType) {
const matchMedia = window.matchMedia;
// 自动判断启动端 pc 或是 移动
if (matchMedia("(max-width: 600px)").matches) {
this.settingObj.deviceType = "Mobile";
} else if (matchMedia("(max-width: 992px)").matches) {
this.settingObj.deviceType = "pc";
} else {
this.settingObj.deviceType = "pc";
}
}
// console.log(this.settingObj.deviceType);
// 获取客服客户相关参数
let params = {
token: this.settingObj.token,
deviceType: this.settingObj.deviceType,
windowStyle: this.settingObj.windowStyle,
isShowTip: this.settingObj.isShowTip,
kefuid: this.settingObj.kefuid,
};
this.settingObj.openUrl += `?` + toParams(params) + `&`;
let customerServerData = "";
if (
this.settingObj.sendUserData &&
Object.keys(this.settingObj.sendUserData).length
) {
customerServerData = toParams(this.settingObj.sendUserData);
this.settingObj.openUrl += `${customerServerData}`;
}
this.settingObj.openUrl += "&version=" + this.settingObj.version;
};
// 创建 联系客服小弹窗按钮（点击时打开聊天界面）,创建iframe容器 并将iframe添加至body中
this.createCustomerServerContainer = () => {
let iframeHtml = ``;
const app = document.createElement("div");
this.appDom = app;
app.setAttribute("id", "chat-app");
//电脑端悬浮按钮样式
app.innerHTML = `
`;
this.body = document.querySelector(this.settingObj.insertDomNode);
this.body.appendChild(app);
// 创建完毕后，添加样式，样式可以从外部传入
this.iframeLayout = document.createElement("div");
this.iframeLayout.setAttribute("id", "iframe_content");
this.setStyleOfCustomerServer(
this.iframeLayout,
customerServerStyleObject.iframe_content
);
this.iframeLayout.style["z-index"] = 999;
this.iframeLayout.innerHTML = iframeHtml;
this.body.appendChild(this.iframeLayout);
// 获取联系客服按钮dom对象
this.connentServerDom = document.querySelector(
`#${this.settingObj.domId}`
);
// 判断联系客服按钮是否默认展示
if (this.settingObj.isShowTip === false) {
this.connentServerDom.style.display = "none";
}
// 获取 iframe 弹框dom对象，便于后期数据交互
this.iframe_contanier = document.querySelector(".iframe_contanier");
};
// 设置基本样式样式
this.batchSetStyle = () => {
Object.keys(customerServerStyleObject).forEach((item) => {
if (document.querySelector(`.${item}`)) {
this.setStyleOfCustomerServer(
document.querySelector(`.${item}`),
customerServerStyleObject[item]
);
}
});
};
// 设置初始化样式，包括iframe弹宽初始定位，未读消息等
this.initPositionStyle = () => {
// pc端初始化样式
let pcInitStyle = {
width: "377px",
bottom: "-645px",
height: "645px",
"z-index": 999,
"box-shadow": "1px 1px 15px 0px rgba(0, 0, 0, 0.3)",
};
this.setStyleOfCustomerServer(this.iframeLayout, pcInitStyle);
// 用来展示未读消息数的小圆点
this.connent_count = document.querySelector(".connent_count");
this.connent_count.style.display = "none";
};
//加载聊天框
this.loadwindow = () => {
// 接收来自iframe中的参数
window.addEventListener("message", (e) => {
window.$chat.emit(e.data.type, [e.data]);
// 关闭弹框
if (e.data.type === "closeWindow") {
if (this.settingObj.windowStyle === "center") {
this.setStyleOfCustomerServer(this.iframeLayout, {
display: "none",
});
} else {
this.iframeLayout.style.bottom = "-660px";
this.iframeLayout.style.opacity = "0";
}
if (this.settingObj.isShowTip !== false) {
this.connentServerDom.style.display = "block";
}
}
// 收取未读消息
if (e.data.type === "onMessageNum") {
if (e.data.data.num > 0) {
this.connent_count.style.display = "flex";
this.connent_count.innerHTML = e.data.data.num;
} else {
this.connent_count.style.display = "none";
}
}
// 跳转到离线留言界面
if (e.data.type === "customerOutLine") {
this.outLine = true;
this.setStyleOfCustomerServer(this.iframeLayout, {
width: this.outLine ? "378px" : "730px",
});
}
// 监听，跳转回中间页，重置outline（来自反馈成功界面）
if (e.data.type === "reload") {
this.outLine = false;
}
});
};
this.openChatWin = () => {
//检测是否初始化过
if (this.initStatus === false) {
this.init();
}
if (this.settingObj.windowStyle === "center") {
this.setStyleOfCustomerServer(this.iframeLayout, {
top: 0,
left: 0,
bottom: 0,
right: 0,
margin: "auto",
width: this.outLine ? "378px" : "730px",
display: "block",
transition: "none",
"border-radius": "8px",
overflow: "hidden",
"box-shadow": "1px 1px 15px 0px rgba(0, 0, 0, 0.3)",
});
} else {
this.iframeLayout.style.bottom = 0;
this.iframeLayout.style.opacity = "1";
}
//悬浮按钮隐藏
this.connentServerDom.style.display = "none";
this.iframe_contanier.contentWindow.postMessage(
{
type: "getImgOrText",
productInfo: this.settingObj.productInfo,
},
"*"
); // 传送图文数据
this.iframe_contanier.contentWindow.postMessage(
{ type: "openCustomeServer" },
"*"
); //通知iframe 打开了客服弹框
//打开聊天窗事件
window.$chat.emit("openChatWin");
};
// 打开客服聊天框
this.getCustomeServer = () => {
this.openChat = true;
if (this.initStatus) {
this.openChatWin();
this.openChat = false;
}
};
// 更新传送的图文信息
this.postProductMessage = (productInfo) => {
this.iframe_contanier.contentWindow.postMessage(
{ type: "getImgOrText", productInfo: productInfo },
"*"
); // 传送图文数据
};
}
//销毁事件
initCustomerServer.prototype.destroy = function () {
this.appDom.remove();
this.iframeLayout.remove();
this.initStatus = false;
};
initCustomerServer.prototype.runInit = function () {
this.setMatchMedia();
this.createCustomerServerContainer();
this.batchSetStyle();
this.initPositionStyle();
this.loadwindow();
this.initStatus = true;
this.connentServerDom.removeEventListener("click", this.openChatWin);
// 联系客服小按钮，点击事件
this.connentServerDom.addEventListener("click", this.openChatWin);
//初始化事件
window.$chat.emit("init");
if (this.openChat) {
this.openChatWin();
this.openChat = false;
}
};
//初始化
initCustomerServer.prototype.init = function () {
request(this.baseUrl, "get", null, this.settingObj.token)
.then((res) => {
this.settingObj.pcIcon = res.data.icon;
this.runInit();
})
.catch(() => {
this.runInit();
});
};
//封装全局设置样式方法
initCustomerServer.prototype.setStyleOfCustomerServer = function (
dom,
styleObj
) {
Object.keys(styleObj).forEach((item) => {
dom["style"][item] = styleObj[item];
});
};
//封装全局获取openUle方法
initCustomerServer.prototype.getOpenUrl = function () {
return this.settingObj.openUrl;
};
window.getChatInstance = function () {
return customerServer;
};
function request(url, method, data, token, header) {
return new Promise(function (resolve, reject) {
ajax({
url: url,
method: method,
// data: data,
token: token,
header: header,
success: function (res) {
resolve(res);
},
error: function (error) {
reject(error);
},
});
});
}
function ajax(options) {
let xhr = null;
const params = options.data || "";
options.method = options.method || "get";
//创建对象
xhr = new XMLHttpRequest();
switch (options.method.toUpperCase()) {
case "GET":
xhr.send(params ? toParams(params) : "");
break;
case "POST":
xhr.send(JSON.stringify(params));
break;
default:
break;
}
xhr.onreadystatechange = function () {
try {
if (xhr.readyState === 4) {
const response = xhr.responseText
? JSON.parse(xhr.responseText)
: {};
if (response.status === 200) {
options.success && options.success(response);
} else {
options.error && options.error(response);
}
}
} catch (e) {
options.error && options.error(e);
}
};
}
// 将Object 改装成以 & 符号连接的字符串
function toParams(param) {
var result = "";
for (let name in param) {
if (typeof param[name] != "function") {
result += "&" + name + "=" + encodeURI(param[name]);
}
}
return result.substring(1);
}