225 lines
8.0 KiB
JavaScript
225 lines
8.0 KiB
JavaScript
/* ................... 防抖函数 ................... */
|
|
function debounce(func, delay) {
|
|
let timeout
|
|
return function () {
|
|
clearTimeout(timeout) // 如果持续触发，那么就清除定时器，定时器的回调就不会执行。
|
|
timeout = setTimeout(() => {
|
|
func.apply(this, arguments)
|
|
}, delay)
|
|
}
|
|
}
|
|
var vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
readManPer: "57%",
|
|
tel: "",
|
|
allNavList: {
|
|
callcenter: [
|
|
{ name: "首页", url: "/" },
|
|
{ name: "呼叫中心", url: "/callcenter/" },
|
|
{ name: "功能及价格", url: "/callcenterprice/" },
|
|
{ name: "客户案例", url: "/wincase/" },
|
|
{ name: "行业知识", url: "/innews/callcenter/" },
|
|
{ name: "关于我们", url: "/aboutus/company/" }
|
|
],
|
|
cloudcalcenter: [
|
|
{ name: "首页", url: "/" },
|
|
{ name: "云呼叫中心", url: "/callcenter/" },
|
|
{ name: "功能及价格", url: "/callcenterprice/" },
|
|
{ name: "客户案例", url: "/wincase/" },
|
|
{ name: "行业知识", url: "/innews/cloudcalcenter/" },
|
|
{ name: "关于我们", url: "/aboutus/company/" }
|
|
],
|
|
call: [
|
|
{ name: "首页", url: "/" },
|
|
{ name: "电话呼叫中心", url: "/phone/" },
|
|
{ name: "功能及价格", url: "/callcenterprice/" },
|
|
{ name: "客户案例", url: "/wincase/" },
|
|
{ name: "行业知识", url: "/innews/call/" },
|
|
{ name: "关于我们", url: "/aboutus/company/" }
|
|
],
|
|
customercall: [
|
|
{ name: "首页", url: "/" },
|
|
{ name: "客服呼叫中心", url: "/callcenter/" },
|
|
{ name: "功能及价格", url: "/callcenterprice/" },
|
|
{ name: "客户案例", url: "/wincase/" },
|
|
{ name: "行业知识", url: "/innews/customercall/" },
|
|
{ name: "关于我们", url: "/aboutus/company/" }
|
|
],
|
|
outbound: [
|
|
{ name: "首页", url: "/" },
|
|
{ name: "外呼系统", url: "/phone/" },
|
|
{ name: "功能及价格", url: "/callcenterprice/" },
|
|
{ name: "客户案例", url: "/wincase/" },
|
|
{ name: "行业知识", url: "/innews/outbound/" },
|
|
{ name: "关于我们", url: "/aboutus/company/" }
|
|
],
|
|
webchat: [
|
|
{ name: "首页", url: "/" },
|
|
{ name: "客服系统", url: "/webchat/" },
|
|
{ name: "客服机器人", url: "/robot/" },
|
|
{ name: "视频客服", url: "/ivvr/" },
|
|
{ name: "行业知识", url: "/innews/webchat/" },
|
|
{ name: "关于我们", url: "/aboutus/company/" }
|
|
],
|
|
order: [
|
|
{ name: "首页", url: "/" },
|
|
{ name: "工单系统", url: "/order/" },
|
|
{ name: "客户案例", url: "/wincase/" },
|
|
{ name: "行业知识", url: "/innews/order/" },
|
|
{ name: "关于我们", url: "/aboutus/company/" }
|
|
],
|
|
scrm: [
|
|
{ name: "首页", url: "/" },
|
|
{ name: "SCRM系统", url: "/scrm/" },
|
|
{ name: "客户案例", url: "/wincase/" },
|
|
{ name: "行业知识", url: "/innews/scrm/" },
|
|
{ name: "关于我们", url: "/aboutus/company/" }
|
|
],
|
|
sale: [
|
|
{ name: "首页", url: "/" },
|
|
{ name: "销售跟进系统", url: "/salesplat/" },
|
|
{ name: "客户案例", url: "/wincase/" },
|
|
{ name: "行业知识", url: "/innews/sale/" },
|
|
{ name: "关于我们", url: "/aboutus/company/" }
|
|
],
|
|
ai: [
|
|
{ name: "首页", url: "/" },
|
|
{ name: "客服机器人", url: "/robot/" },
|
|
{ name: "语音机器人", url: "/AIcall/" },
|
|
{ name: "客户案例", url: "/wincase/" },
|
|
{ name: "行业知识", url: "/innews/ai/" },
|
|
{ name: "关于我们", url: "/aboutus/company/" }
|
|
]
|
|
},
|
|
navList: []
|
|
},
|
|
mixins: [mixins],
|
|
created() {
|
|
this.navListShow()
|
|
this.autoMenu()
|
|
|
|
},
|
|
mounted() {
|
|
this.showTopIcon()
|
|
window.addEventListener("scroll", this.showTopIcon)
|
|
this.showReadManPer(50, 100)
|
|
if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) {
|
|
new WOW().init();
|
|
};
|
|
},
|
|
methods: {
|
|
showTopIcon() {//顶部导航css
|
|
const self = this;
|
|
if (/Mobile|Android|webOS|iPhone|iPad|Phone/i.test(navigator.userAgent) || screen.width <= 768) {
|
|
if (!!document.documentElement.scrollTop && document.documentElement.scrollTop > 50) {
|
|
self.headerCss = true
|
|
self.mobileLogo = "logo1.png"
|
|
} else {
|
|
self.headerCss = true;
|
|
self.mobileLogo = "logo1.png"
|
|
}
|
|
} else {
|
|
self.headerCss = true;
|
|
self.mobileLogo = "logo1.png"
|
|
}
|
|
},
|
|
showReadManPer(min, max) {//阅读人数百分比
|
|
this.readManPer = Math.floor(Math.random() * (max - min)) + min + "%";
|
|
},
|
|
articleApply() { //文章试用申请
|
|
if (this.tel) {
|
|
sessionStorage.setItem("tel", this.tel)
|
|
tool.setCookie("tel", this.tel, 1)
|
|
}
|
|
location.href = "/apply/"
|
|
},
|
|
autoMenu: debounce(function () {
|
|
var h2Tags = document.querySelectorAll('h2');
|
|
var tocContainer = document.querySelector('.toc');
|
|
|
|
// 生成目录
|
|
var tocList = document.createElement('ul');
|
|
for (var i = 0; i < h2Tags.length; i++) {
|
|
var h2Tag = h2Tags[i];
|
|
var id = 'doc' + i;
|
|
h2Tag.id = id;
|
|
|
|
var tocItem = document.createElement('li');
|
|
var tocLink = document.createElement('a');
|
|
tocLink.href = '#' + id;
|
|
tocLink.textContent = h2Tag.textContent;
|
|
|
|
tocItem.appendChild(tocLink);
|
|
tocList.appendChild(tocItem);
|
|
}
|
|
|
|
tocContainer.appendChild(tocList);
|
|
|
|
// 监听目录节点点击事件
|
|
var tocLinks = tocContainer.querySelectorAll('a');
|
|
for (var i = 0; i < tocLinks.length; i++) {
|
|
tocLinks[i].addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
var targetId = this.getAttribute('href').substring(1);
|
|
var targetElement = document.getElementById(targetId);
|
|
var targetOffset = targetElement.offsetTop - 80; // 距离顶部 80px 的位置
|
|
|
|
// 执行滚动
|
|
scrollTo({ top: targetOffset, behavior: 'smooth' });
|
|
});
|
|
}
|
|
|
|
// 监听滚动事件，实现目录节点的高亮
|
|
window.addEventListener('scroll', function () {
|
|
var currentPosition = window.pageYOffset || document.documentElement.scrollTop;
|
|
var highlightedIndex = -1;
|
|
|
|
for (var i = 0; i < h2Tags.length; i++) {
|
|
var h2Tag = h2Tags[i];
|
|
var rect = h2Tag.getBoundingClientRect();
|
|
if (rect.top <= 100) {
|
|
highlightedIndex = i;
|
|
}
|
|
}
|
|
|
|
// 移除所有目录节点的高亮样式
|
|
for (var i = 0; i < tocLinks.length; i++) {
|
|
tocLinks[i].classList.remove('highlight');
|
|
}
|
|
|
|
// 高亮显示当前区域对应的目录节点
|
|
if (highlightedIndex >= 0) {
|
|
tocLinks[highlightedIndex].classList.add('highlight');
|
|
}
|
|
});
|
|
}, 500),
|
|
navListShow() {
|
|
const self = this;
|
|
const currentUrl = window.location.pathname;
|
|
let navList = [];
|
|
if (currentUrl.includes("/innews/callcenter/")) {
|
|
navList = self.allNavList.callcenter;
|
|
} else if (currentUrl.includes("/innews/cloudcalcenter/")) {
|
|
navList = self.allNavList.cloudcalcenter;
|
|
} else if (currentUrl.includes("/innews/call/")) {
|
|
navList = self.allNavList.call;
|
|
} else if (currentUrl.includes("/innews/customercall/")) {
|
|
navList = self.allNavList.customercall;
|
|
} else if (currentUrl.includes("/innews/outbound/")) {
|
|
navList = self.allNavList.outbound;
|
|
} else if (currentUrl.includes("/innews/webchat/")) {
|
|
navList = self.allNavList.webchat;
|
|
} else if (currentUrl.includes("/innews/order/")) {
|
|
navList = self.allNavList.order;
|
|
} else if (currentUrl.includes("/innews/scrm/")) {
|
|
navList = self.allNavList.scrm;
|
|
} else if (currentUrl.includes("/innews/sale/")) {
|
|
navList = self.allNavList.sale;
|
|
} else if (currentUrl.includes("/innews/ai/")) {
|
|
navList = self.allNavList.ai;
|
|
}
|
|
self.navList = navList;
|
|
}
|
|
}
|
|
}) |