549 lines
19 KiB
JavaScript
549 lines
19 KiB
JavaScript
// 节流函数
|
||
function throttle(handle, wait) {
|
||
let lastTime = 0
|
||
return function (e) {
|
||
let nowTime = new Date().getTime()
|
||
if (nowTime - lastTime > wait) {
|
||
handle()
|
||
lastTime = nowTime
|
||
}
|
||
}
|
||
}
|
||
/* ................... 防抖函数 ................... */
|
||
function debounce(func, delay) {
|
||
let timeout
|
||
return function () {
|
||
clearTimeout(timeout) // 如果持续触发，那么就清除定时器，定时器的回调就不会执行。
|
||
timeout = setTimeout(() => {
|
||
func.apply(this, arguments)
|
||
}, delay)
|
||
}
|
||
}
|
||
var currentUrlParam = getUrlData() // 获取当前链接参数
|
||
var channel = "PC端"
|
||
if (window.navigator && /Mobile|Android|webOS|iPhone|iPad|Phone/i.test(navigator.userAgent)) {
|
||
channel = "移动端"
|
||
}
|
||
var zhArticleName = ""; // 知乎文章名
|
||
var zhArticleType = ""; // 知乎类型
|
||
var buy = currentUrlParam.buy || ""
|
||
// 按钮位置和当前链接
|
||
var btnPosition = sessionStorage.getItem("btn") || tool.getCookie("btn")
|
||
var curLink = sessionStorage.getItem("currentLink") || tool.getCookie("currentLink") || link
|
||
var vm = new Vue({
|
||
el: "#app",
|
||
data: {
|
||
headerCss: false, //导航样阴影css
|
||
mobileLogo: "logo.png", //移动端logo
|
||
mobileMenu: "menu_white.png", //移动端menu图片
|
||
mobileFixshow: true, //移动端咨询悬浮显示
|
||
show: false,
|
||
holiShow: false,
|
||
toastImg: "",
|
||
applyTitle: "7天免费注册体验",
|
||
applyText: "留下联系方式，体验更便捷的智能客服服务",
|
||
placeComTitle: "针对性提供产品方案",
|
||
placeCityTitle: "为您提供上门/远程演示服务",
|
||
submitText: "完成注册",
|
||
buttonAble: false,
|
||
codeText: "获取验证码",
|
||
sliderShow: false,
|
||
success: false,
|
||
count: 30,
|
||
timer: null,
|
||
tel: "",
|
||
com: "",
|
||
city: "",
|
||
codeStatus: false,
|
||
telTips: "",
|
||
codeTips: "",
|
||
comTips: "",
|
||
cityTips: "",
|
||
tips: "",
|
||
code: "",
|
||
state: "0",
|
||
typec: "呼叫中心",
|
||
right: ""
|
||
},
|
||
created() {
|
||
this.holiApi()
|
||
this.linkType() // 根据链接判断产品类型改文案
|
||
},
|
||
mounted() {
|
||
window.addEventListener("scroll", this.showIcon)
|
||
this.sliderInit()
|
||
this.getTel()
|
||
new Swiper(".apply-swiper", {
|
||
loop: true,
|
||
initialSlide: 0,
|
||
slidesPerView: 1,
|
||
centeredSlides: true,
|
||
slideToClickedSlide: true,
|
||
observer: true,
|
||
observerParents: true,
|
||
autoplay: {
|
||
delay: 3000,
|
||
disableOnInteraction: false
|
||
},
|
||
pagination: {
|
||
el: ".apply-swiper-pagination",
|
||
clickable: true
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
sliderInit() {
|
||
let _this = this
|
||
// 获取 dom
|
||
const after = this.$refs.after
|
||
const slider = this.$refs.slider
|
||
const wrap = this.$refs.wrap
|
||
after.childNodes[0].style.width = wrap.offsetWidth + "px" // 设置after-inner的固定宽度
|
||
const limit = wrap.offsetWidth - slider.offsetWidth // 滑块移动最大位置
|
||
let offsetX // 实时计算滑块的偏移量
|
||
let initX // 点击滑块时的鼠标X位置
|
||
if (/Mobile|Android|webOS|iPhone|iPad|Phone/i.test(navigator.userAgent) || screen.width <= 768) {
|
||
const docMousemoveHandler = e => {
|
||
// 页面鼠标移动事件
|
||
// 获取移动后鼠标实时位置
|
||
const moveX = e.targetTouches[0].pageX
|
||
// 计算滑块应该移动的偏移量
|
||
offsetX = moveX - initX
|
||
// 限制上下限
|
||
if (offsetX < 0) {
|
||
e.style.transition = ".5s linear"
|
||
after.style.transition = ".5s linear"
|
||
offsetX = 0
|
||
} else if (offsetX > limit) {
|
||
offsetX = limit
|
||
}
|
||
slider.style.left = offsetX + "px" // 移动滑块
|
||
after.style.width = offsetX + "px" // 修改高亮背景宽度
|
||
slider.style.transition = "0s all"
|
||
after.style.transition = "0s all"
|
||
if (offsetX >= limit) {
|
||
_this.success = true
|
||
_this.getCode()
|
||
document.removeEventListener("touchmove", docMousemoveHandler)
|
||
slider.removeEventListener("touchend", sliderMousedownHandler)
|
||
}
|
||
}
|
||
const docMouseupHandler = e => {
|
||
// 页面鼠标松开事件
|
||
document.removeEventListener("touchcancel", docMousemoveHandler) // 解绑事件
|
||
if (offsetX < limit) {
|
||
// 重置滑块
|
||
slider.style.transition = ".3s ease-in-out"
|
||
slider.style.left = 0
|
||
after.style.transition = ".3s ease-in-out"
|
||
after.style.width = 0
|
||
}
|
||
}
|
||
const sliderMousedownHandler = e => {
|
||
// 滑块点击事件
|
||
initX = e.targetTouches[0].pageX // 获取鼠标位置
|
||
document.addEventListener("touchmove", docMousemoveHandler) // 绑定页面的鼠标移动事件
|
||
}
|
||
slider.addEventListener("touchstart", sliderMousedownHandler) // 绑定滑块点击事件
|
||
document.addEventListener("touchend", docMouseupHandler) // 页面鼠标松开事件
|
||
this.sliderClear = async () => {
|
||
// 定义清理方法
|
||
slider.style.left = "0px"
|
||
after.style.width = "0px"
|
||
slider.style.transition = ".3s ease-in-out"
|
||
after.style.transition = ".3s ease-in-out"
|
||
_this.success = false
|
||
document.removeEventListener("touchmove", docMousemoveHandler)
|
||
slider.removeEventListener("touchstart", sliderMousedownHandler)
|
||
document.removeEventListener("touchend", docMouseupHandler)
|
||
}
|
||
} else {
|
||
const docMousemoveHandler = e => {
|
||
// 页面鼠标移动事件
|
||
// 获取移动后鼠标实时位置
|
||
const moveX = e.clientX
|
||
// 计算滑块应该移动的偏移量
|
||
offsetX = moveX - initX
|
||
// 限制上下限
|
||
if (offsetX < 0) {
|
||
e.style.transition = ".5s linear"
|
||
after.style.transition = ".5s linear"
|
||
offsetX = 0
|
||
} else if (offsetX > limit) {
|
||
offsetX = limit
|
||
}
|
||
slider.style.left = offsetX + "px" // 移动滑块
|
||
after.style.width = offsetX + "px" // 修改高亮背景宽度
|
||
slider.style.transition = "0s all"
|
||
after.style.transition = "0s all"
|
||
if (offsetX >= limit) {
|
||
_this.success = true
|
||
_this.getCode()
|
||
document.removeEventListener("mousemove", docMousemoveHandler)
|
||
slider.removeEventListener("mousedown", sliderMousedownHandler)
|
||
}
|
||
}
|
||
const docMouseupHandler = e => {
|
||
// 页面鼠标松开事件
|
||
document.removeEventListener("mousemove", docMousemoveHandler) // 解绑事件
|
||
if (offsetX < limit) {
|
||
// 重置滑块
|
||
slider.style.transition = ".3s ease-in-out"
|
||
slider.style.left = 0
|
||
after.style.transition = ".3s ease-in-out"
|
||
after.style.width = 0
|
||
}
|
||
}
|
||
const sliderMousedownHandler = e => {
|
||
// 滑块点击事件
|
||
initX = e.clientX // 获取鼠标位置
|
||
document.addEventListener("mousemove", docMousemoveHandler) // 绑定页面的鼠标移动事件
|
||
}
|
||
slider.addEventListener("mousedown", sliderMousedownHandler) // 绑定滑块点击事件
|
||
document.addEventListener("mouseup", docMouseupHandler) // 页面鼠标松开事件
|
||
_this.sliderClear = async () => {
|
||
// 定义清理方法
|
||
slider.style.left = "0px"
|
||
after.style.width = "0px"
|
||
slider.style.transition = ".3s ease-in-out"
|
||
after.style.transition = ".3s ease-in-out"
|
||
_this.success = false
|
||
document.removeEventListener("mousemove", docMousemoveHandler)
|
||
slider.removeEventListener("mousedown", sliderMousedownHandler)
|
||
document.removeEventListener("mouseup", docMouseupHandler)
|
||
}
|
||
}
|
||
},
|
||
showIcon() {
|
||
//顶部导航css
|
||
if (!!document.documentElement.scrollTop && document.documentElement.scrollTop > 200) {
|
||
this.headerCss = true
|
||
if (screen.width < 768) {
|
||
//如果是移动端
|
||
this.mobileLogo = "logo1.png"
|
||
}
|
||
} else {
|
||
this.headerCss = false
|
||
this.mobileLogo = "logo.png"
|
||
}
|
||
},
|
||
linkType() {
|
||
if (buy) {
|
||
this.applyTitle = "获取报价"
|
||
this.applyText = "免费获取产品功能报价及价格对比"
|
||
this.submitText = "立即提交"
|
||
if (curLink.indexOf("price") > 0) {
|
||
this.applyTitle = "获取报价"
|
||
this.applyText = "免费获取产品功能报价及价格对比"
|
||
this.submitText = "立即提交"
|
||
}
|
||
}
|
||
if (curLink.indexOf("agent") > 0 || btnPosition === "首页代理加盟按钮") {
|
||
this.applyTitle = "欢迎加入合力亿捷"
|
||
this.applyText = "提交您的资料,我们将在1个工作日内与您取得联系"
|
||
this.placeComTitle = "请输入您的企业名称"
|
||
this.placeCityTitle = "方便与您取得联系"
|
||
this.submitText = "立即加入"
|
||
}
|
||
// 根据链接判断产品类型
|
||
if (buy == "base") {
|
||
this.typec = "呼叫中心-购买基础版"
|
||
} else if (buy == "online") {
|
||
this.typec = "呼叫中心-购买在线版"
|
||
} else if (buy == "stand") {
|
||
this.typec = "呼叫中心-购买标准版"
|
||
} else if (buy == "com") {
|
||
this.typec = "呼叫中心-购买企业版"
|
||
} else if (buy == "sale") {
|
||
this.typec = "呼叫中心-购买营销版"
|
||
} else if (buy == "classic") {
|
||
this.typec = "呼叫中心-购买经典版"
|
||
} else if (buy == "plus") {
|
||
this.typec = "呼叫中心-购买旗舰版"
|
||
} else if (sessionStorage.getItem("agent") && sessionStorage.getItem("agent") === "index") {
|
||
this.typec = "首页代理加盟按钮"
|
||
} else if (curLink.indexOf("callcenter") > 0) {
|
||
this.typec = "云呼叫中心系统"
|
||
} else if (curLink.indexOf("webchat") > 0) {
|
||
this.typec = "在线客服系统"
|
||
} else if (curLink.indexOf("order") > 0) {
|
||
this.typec = "工单系统"
|
||
} else if (curLink.indexOf("AIplatform") > 0) {
|
||
this.typec = "AI机器人"
|
||
} else if (curLink.indexOf("robot") > 0) {
|
||
this.typec = "智能客服机器人"
|
||
} else if (curLink.indexOf("project") > 0) {
|
||
this.typec = "项目管理"
|
||
} else if (curLink.indexOf("scrm") > 0) {
|
||
this.typec = "企微管家"
|
||
} else if (curLink.indexOf("5GMessage") > 0) {
|
||
this.typec = "5G消息创新应用"
|
||
} else if (curLink.indexOf("/solution/customer") > 0) {
|
||
this.typec = "全渠道获客"
|
||
} else if (curLink.indexOf("/solution/progress") > 0) {
|
||
this.typec = "全流程智能服务"
|
||
} else if (curLink.indexOf("remote") > 0) {
|
||
this.typec = "远程坐席管理"
|
||
} else if (curLink.indexOf("express") > 0) {
|
||
this.typec = "速递物流"
|
||
} else if (curLink.indexOf("pinzhuan") > 0 || link.indexOf("pinzhuan") > 0 || curLink.indexOf("PINZHUAN") > 0 || link.indexOf("PINZHUAN") > 0) {
|
||
this.typec = "百度品专"
|
||
} else {
|
||
this.typec = "呼叫中心"
|
||
}
|
||
if (currentUrlParam.tel) {
|
||
this.tel = currentUrlParam.tel
|
||
}
|
||
/* --------- 知乎的识别文章来源 -------- */
|
||
if (currentUrlParam.zhihu || urlParam.zhihu) {
|
||
let urlType = currentUrlParam.zhihu || urlParam.zhihu;
|
||
let data = new URLSearchParams();
|
||
data.append("query", "query");
|
||
data.append("type", urlType);
|
||
axios({
|
||
method: "post",
|
||
url: "https://site.hollycrm.com/zh/mana/assets/api/article.php",
|
||
data: data
|
||
}).then(res => { // 返回相应的微信文章原链接
|
||
zhArticleName = res.data.name;
|
||
zhArticleType = res.data.aType;
|
||
}).catch(error => {
|
||
console.log(error);
|
||
})
|
||
|
||
}
|
||
console.log("按钮位置+当前链接+关注产品+来源链接", btnPosition + "--" + curLink + "--" + this.typec + "--" + sourceUrl)
|
||
},
|
||
getTel() {
|
||
if (sessionStorage.getItem("tel") || tool.getCookie("tel")) {
|
||
this.tel = sessionStorage.getItem("tel") || tool.getCookie("tel")
|
||
this.verifyTel()
|
||
}
|
||
},
|
||
verifyTel: debounce(function () {
|
||
var RegExp = /^1[3-9][0-9]{9}$/
|
||
if (vm.tel.trim() == "") {
|
||
vm.telTips = "请输入您的手机号"
|
||
vm.sliderShow = false
|
||
} else if (!RegExp.test(vm.tel.trim())) {
|
||
vm.telTips = "请输入正确的手机号码"
|
||
vm.sliderShow = false
|
||
} else {
|
||
vm.telTips = ""
|
||
vm.sliderShow = true
|
||
}
|
||
}, 500),
|
||
getCode: throttle(function () {
|
||
var RegExp = /^1[3-9][0-9]{9}$/
|
||
if (vm.tel.trim() == "") {
|
||
vm.telTips = "请输入您的手机号"
|
||
} else if (!RegExp.test(vm.tel.trim())) {
|
||
vm.telTips = "请输入正确的手机号码"
|
||
} else {
|
||
vm.tips = "" // 验证通过
|
||
vm.timer = setInterval(() => {
|
||
if (vm.count > 0 && vm.count <= 30) {
|
||
vm.buttonAble = true
|
||
vm.count--
|
||
vm.codeText = vm.count + "秒后重新获取"
|
||
} else {
|
||
vm.buttonAble = false;
|
||
vm.codeText = "获取验证码"
|
||
clearInterval(vm.timer)
|
||
vm.timer = null
|
||
vm.count = 30
|
||
vm.sliderClear()
|
||
vm.sliderInit()
|
||
}
|
||
}, 1000)
|
||
var data = {
|
||
tel: vm.tel,
|
||
btn: btnPosition,
|
||
curLink: curLink,
|
||
protype: vm.typec,
|
||
sourceLink: sourceUrl,
|
||
website_keywords: website_keywords, // 关键词
|
||
channel: channel, // 渠道
|
||
bd_vid: bd_vid // 百度统计
|
||
}
|
||
if (zhArticleName) {
|
||
data.zhArticleName = zhArticleName
|
||
}
|
||
if (zhArticleType) {
|
||
data.zhArticleType = zhArticleType
|
||
}
|
||
$.ajax({
|
||
url: "./apply-code.php",
|
||
type: "post",
|
||
data: data,
|
||
success: function (res) {
|
||
if (res == "toomuch") {
|
||
alert("请匆频繁提交!感谢您的理解和合作，可通过在线客服或电话与我们取得联系。")
|
||
return
|
||
}
|
||
console.log("第一步推送成功!")
|
||
}
|
||
})
|
||
vm.actionId = vm.tel + "-" + Math.floor(Math.random() * 1000000)
|
||
$.ajax({
|
||
url: "/api/sendMsg.php",
|
||
type: "POST",
|
||
data: {
|
||
telNum: vm.tel,
|
||
actionId: vm.actionId,
|
||
info: G.info,
|
||
time: new Date().getTime(),
|
||
actionName: "呼叫中心站试用申请"
|
||
},
|
||
success: function (res) {
|
||
if (res.state == "sent") {//发送验证码成功，并且成功写入数据库，返回sent
|
||
return (vm.codeTips = "验证码已发送，请注意查收")
|
||
} else {//其他不成功的情况
|
||
return (vm.codeTips = "发送失败，请稍后再试")
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}, 1000),
|
||
verifyCode: debounce(function (event) {
|
||
if (vm.tel == "") {
|
||
vm.codeStatus = false
|
||
return (vm.telTips = "请输入手机号码")
|
||
} else if (event.target.value == "") {
|
||
vm.codeStatus = false
|
||
return (vm.codeTips = "请输入验证码")
|
||
} else if (event.target.value.length != 4) {
|
||
vm.codeStatus = false
|
||
return (vm.codeTips = "请输入正确的验证码")
|
||
} else {
|
||
vm.codeTips = ""
|
||
}
|
||
$.ajax({
|
||
url: "/api/verifyMsg.php",
|
||
type: "post",
|
||
data: {
|
||
telNum: vm.tel,
|
||
actionId: vm.actionId,
|
||
actionName: "呼叫中心站试用申请",
|
||
code: vm.code
|
||
},
|
||
success: function (res) {
|
||
if (res.state == "vSucceed") {
|
||
$("#tel").attr({ readonly: "readonly" })
|
||
$("#getCode").attr({ disabled: "true" })
|
||
vm.$data.right = true
|
||
vm.$data.codeTips = "验证码验证成功"
|
||
setTimeout(() => {
|
||
vm.$data.codeTips = ""
|
||
vm.codeStatus = true
|
||
}, 500)
|
||
} else if (res.state == "vFail") {
|
||
event.target.focus()
|
||
vm.$data.right = false
|
||
vm.codeStatus = false
|
||
return (vm.$data.codeTips = "验证码错误，请重试")
|
||
}
|
||
}
|
||
})
|
||
}, 1500),
|
||
verifyCom: debounce(function () {
|
||
if (vm.com.trim() == "") {
|
||
vm.comTips = "请输入您的公司名称"
|
||
} else {
|
||
vm.comTips = ""
|
||
}
|
||
}, 1500),
|
||
verifyCity: debounce(function () {
|
||
if (vm.city.trim() == "") {
|
||
vm.cityTips = "请输入您所在的城市"
|
||
} else {
|
||
vm.cityTips = ""
|
||
}
|
||
}, 1500),
|
||
verify: function () {
|
||
var mobilePattern = /^1[3-9][0-9]{9}$/
|
||
if (vm.tel.trim() == "") {
|
||
vm.telTips = "请输入您的手机号"
|
||
return false
|
||
} else if (!mobilePattern.test(vm.tel.trim())) {
|
||
vm.telTips = "请输入正确的手机号码"
|
||
return false
|
||
} else if (vm.code.trim() == "") {
|
||
vm.codeTips = "请输入验证码"
|
||
return false
|
||
} else if (vm.code.trim().length != 4) {
|
||
vm.codeTips = "请输入正确的验证码"
|
||
return false
|
||
} else if (!vm.right) {
|
||
vm.codeTips = "请输入正确的验证码"
|
||
return false
|
||
} else if (vm.com.trim() == "") {
|
||
vm.comTips = "请输入您的公司名称"
|
||
return false
|
||
} else if (vm.city.trim() == "") {
|
||
vm.cityTips = "请输入您所在的城市"
|
||
return false
|
||
} else {
|
||
vm.tips = ""
|
||
tool.setCookie("applyTel", vm.tel, 1)
|
||
tool.setCookie("applyCom", vm.com, 1)
|
||
tool.setCookie("applyCity", vm.city, 1)
|
||
document.agent.submit()
|
||
}
|
||
},
|
||
holiApi() {
|
||
// 假日表单开关
|
||
var vm = this
|
||
axios({
|
||
method: "get",
|
||
url: "/api/kefu/holicode.php"
|
||
})
|
||
.then(async res => {
|
||
if (res.data) {
|
||
if (website_keywords_string) {
|
||
website_keywords_string += ",节假日表单活码"
|
||
} else {
|
||
website_keywords_string += "节假日表单活码"
|
||
}
|
||
await getCode()
|
||
vm.holiShow = true
|
||
vm.toastImg = qrCode
|
||
} else {
|
||
vm.holiShow = false
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
holiToWeixin() {
|
||
if (website_keywords_string) {
|
||
website_keywords_string += ",节假日表单活码"
|
||
} else {
|
||
website_keywords_string += "节假日表单活码"
|
||
}
|
||
toweixin()
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
this.sliderClear()
|
||
}
|
||
})
|
||
// 点击输入框外框变红
|
||
$(".input-box input").bind("click", function () {
|
||
$(this).parent().css("border", "1px solid #eb305b")
|
||
$(this).prev().css("color", "#333")
|
||
})
|
||
$(".input-box input").bind("blur", function () {
|
||
$(this).parent().css("border", "1px solid #e2e1e5")
|
||
$(this).prev().css("color", "#666")
|
||
})
|
||
$(".code").bind("click", function () {
|
||
$(this).css("border", "1px solid #eb305b")
|
||
$(this).parent().css("border", "none")
|
||
})
|
||
$(".code").bind("blur", function () {
|
||
$(this).css("border", "1px solid #e2e1e5")
|
||
$(this).parent().css("border", "none")
|
||
})
|