375 lines
12 KiB
JavaScript
375 lines
12 KiB
JavaScript
// 消息弹窗
|
||
function showMessage(type, message, duration) {
|
||
if ($("#alert-container").length <= 0) {
|
||
$("body").append(`
|
||
<div id="alert-container"></div>
|
||
`);
|
||
}
|
||
const alertClass = "alert-" + type;
|
||
const html =
|
||
'<div class="alert ' +
|
||
alertClass +
|
||
' show alert-dismissible" role="alert">' +
|
||
message +
|
||
'<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
|
||
'<span aria-hidden="true">×</span>' +
|
||
"</button>" +
|
||
"</div>";
|
||
const $alert = $(html).appendTo("#alert-container");
|
||
setTimeout(function () {
|
||
$alert.alert("close");
|
||
}, duration);
|
||
// 清空表单
|
||
}
|
||
|
||
$(function () {
|
||
const headBgcList = [
|
||
"#3699FF",
|
||
"#57C3EA",
|
||
"#5CC2D7",
|
||
"#EF8BA2",
|
||
"#C1DB81",
|
||
"#F1978C",
|
||
"#F08968",
|
||
];
|
||
// 获取账户信息和实名认证信息
|
||
const initData = () => {
|
||
if (localStorage.jwt) {
|
||
$.ajax({
|
||
url: " /console/v1/account",
|
||
method: "get",
|
||
headers: {
|
||
Authorization: "Bearer" + " " + localStorage.jwt,
|
||
},
|
||
success: function (res) {
|
||
if (res.status === 200) {
|
||
const obj = res.data.account;
|
||
$(".no-login").attr("style", "display:none");
|
||
$(".login-in").attr("style", "display:flex");
|
||
$("#username").text(res.data.account.username);
|
||
const reg = /^[a-zA-Z]+$/;
|
||
if (reg.test(res.data.account.username.substring(0, 1))) {
|
||
obj.firstName = res.data.account.username
|
||
.substring(0, 1)
|
||
.toUpperCase();
|
||
$("#headImg").text(
|
||
res.data.account.username.substring(0, 1).toUpperCase()
|
||
);
|
||
} else {
|
||
obj.firstName = res.data.account.username.substring(0, 1);
|
||
$("#headImg").text(res.data.account.username.substring(0, 1));
|
||
}
|
||
if (sessionStorage.headBgc) {
|
||
$("#headImg").attr(
|
||
"style",
|
||
`background:${sessionStorage.headBgc}`
|
||
);
|
||
} else {
|
||
const index = Math.round(
|
||
Math.random() * (headBgcList.length - 1)
|
||
);
|
||
$("#headImg").attr("style", `background:${headBgcList[index]}`);
|
||
sessionStorage.headBgc = headBgcList[index];
|
||
}
|
||
sessionStorage.accountInfo = JSON.stringify(obj);
|
||
} else {
|
||
$(".login-in").attr("style", "display:none");
|
||
$(".no-login").attr("style", "display:block");
|
||
}
|
||
},
|
||
});
|
||
$.ajax({
|
||
url: " /console/v1/certification/info",
|
||
method: "get",
|
||
headers: {
|
||
Authorization: "Bearer" + " " + localStorage.jwt,
|
||
},
|
||
success: function (res) {
|
||
if (res.status === 200) {
|
||
if (res.data.is_certification) {
|
||
$("#isCertification").attr("style", "display:inline-block");
|
||
$("#noCertification").attr("style", "display:none");
|
||
sessionStorage.is_certification = true;
|
||
} else {
|
||
$("#isCertification").attr("style", "display:none");
|
||
$("#noCertification").attr("style", "display:inline-block");
|
||
sessionStorage.is_certification = false;
|
||
}
|
||
} else {
|
||
$(".login-in").attr("style", "display:none");
|
||
$(".no-login").attr("style", "display:block");
|
||
}
|
||
},
|
||
});
|
||
} else {
|
||
$(".login-in").attr("style", "display:none");
|
||
$(".no-login").attr("style", "display:block");
|
||
}
|
||
};
|
||
// 设置通用信息相关的点击跳转（云服务器/物理机 CTA 等），来源于 SSR 注入的 window.__themeCommon
|
||
const setCommData = () => {
|
||
const commentObj = window.__themeCommon || {};
|
||
$(".buy-cloud").click(function () {
|
||
if (commentObj.cloud_product_link) {
|
||
location.href = commentObj.cloud_product_link;
|
||
}
|
||
});
|
||
$(".buy-dcim-btn").click(function () {
|
||
if (commentObj.dcim_product_link) {
|
||
location.href = commentObj.dcim_product_link;
|
||
}
|
||
});
|
||
};
|
||
// 跳转函数
|
||
const goOtherPage = (url) => {
|
||
sessionStorage.redirectUrl = location.href;
|
||
location.href = url;
|
||
};
|
||
function initHeader() {
|
||
let showIndex = 0;
|
||
let hoverTimer = null;
|
||
let leaveTimer = null;
|
||
|
||
$(".nav-menu .nav-item").hover(
|
||
function () {
|
||
const index = $(".nav-menu .nav-item").index($(this));
|
||
|
||
// 清除离开定时器
|
||
if (leaveTimer) {
|
||
clearTimeout(leaveTimer);
|
||
leaveTimer = null;
|
||
}
|
||
|
||
// 添加150ms延迟，防止误触
|
||
hoverTimer = setTimeout(() => {
|
||
const $menu = $(".nav-cont .nav-cont-menu").eq(index);
|
||
|
||
if (!$menu.hasClass("nav-cont-empty")) {
|
||
// 1. 先让容器从0开始（防止闪烁）
|
||
$(".nav-cont").css("height", "0px");
|
||
|
||
// 2. 显示菜单（但容器高度为0，所以看不见）
|
||
$menu.css("display", "block");
|
||
|
||
// 3. 立即获取高度并展开（使用requestAnimationFrame确保渲染）
|
||
requestAnimationFrame(() => {
|
||
const height = $menu.outerHeight(true);
|
||
$(".nav-cont").css("height", height + "px");
|
||
});
|
||
}
|
||
showIndex = index;
|
||
}, 150);
|
||
},
|
||
function () {
|
||
// 清除悬停定时器
|
||
if (hoverTimer) {
|
||
clearTimeout(hoverTimer);
|
||
hoverTimer = null;
|
||
}
|
||
|
||
leaveTimer = setTimeout(() => {
|
||
const index = $(".nav-menu .nav-item").index($(this));
|
||
// 先收起容器
|
||
$(".nav-cont").css("height", "0");
|
||
// 等动画完成后隐藏内容
|
||
setTimeout(() => {
|
||
$(".nav-cont .nav-cont-menu").eq(index).css("display", "none");
|
||
}, 300); // 等待transition完成
|
||
}, 100);
|
||
}
|
||
);
|
||
|
||
$(".nav-cont").hover(
|
||
function () {
|
||
// 清除离开定时器
|
||
if (leaveTimer) {
|
||
clearTimeout(leaveTimer);
|
||
leaveTimer = null;
|
||
}
|
||
|
||
const $menu = $(".nav-cont .nav-cont-menu").eq(showIndex);
|
||
$menu.css("display", "block");
|
||
|
||
if (!$menu.hasClass("nav-cont-empty")) {
|
||
requestAnimationFrame(() => {
|
||
const height = $menu.outerHeight(true);
|
||
$(".nav-cont").css("height", height + "px");
|
||
});
|
||
}
|
||
},
|
||
function () {
|
||
leaveTimer = setTimeout(() => {
|
||
// 先收起容器
|
||
$(".nav-cont").css("height", "0");
|
||
// 等动画完成后隐藏内容
|
||
setTimeout(() => {
|
||
$(".nav-cont .nav-cont-menu").eq(showIndex).css("display", "none");
|
||
}, 300);
|
||
}, 100);
|
||
}
|
||
);
|
||
|
||
if (localStorage.jwt) {
|
||
if (sessionStorage.accountInfo) {
|
||
const obj = JSON.parse(sessionStorage.accountInfo);
|
||
$(".no-login").attr("style", "display:none");
|
||
$(".login-in").attr("style", "display:flex");
|
||
$("#username").text(obj.username);
|
||
$("#headImg").text(obj.firstName);
|
||
$("#headImg").attr("style", `background:${sessionStorage.headBgc}`);
|
||
if (sessionStorage.is_certification == true) {
|
||
$("#isCertification").attr("style", "display:inline-block");
|
||
$("#noCertification").attr("style", "display:none");
|
||
} else {
|
||
$("#isCertification").attr("style", "display:none");
|
||
$("#noCertification").attr("style", "display:inline-block");
|
||
}
|
||
}
|
||
initData();
|
||
} else {
|
||
$(".login-in").attr("style", "display:none");
|
||
$(".no-login").attr("style", "display:block");
|
||
}
|
||
// 退出登录
|
||
$("#logout").click(function () {
|
||
localStorage.removeItem("jwt");
|
||
initData();
|
||
});
|
||
// 点击登录
|
||
$("#loginBtn").click(function () {
|
||
goOtherPage("/login.htm");
|
||
});
|
||
// 点击注册
|
||
$("#registBtn").click(function () {
|
||
goOtherPage("/regist.htm");
|
||
});
|
||
// 点击账户信息
|
||
$("#accountBtn").click(function () {
|
||
location.href = "/account.htm";
|
||
});
|
||
// 未付款订单
|
||
$("#financeBtn").click(function () {
|
||
location.href = "/finance.htm";
|
||
});
|
||
// 我的工单
|
||
$("#ticketBtn").click(function () {
|
||
location.href = "/plugin/27/ticket.htm";
|
||
});
|
||
// 购物车
|
||
$("#shopping-cart").click(function () {
|
||
location.href = "/cart/shoppingCar.htm";
|
||
});
|
||
}
|
||
function initFooter() {
|
||
// 主题配置已在服务端渲染阶段注入到 window.__themeCommon，这里只做少量点击事件绑定
|
||
setCommData();
|
||
}
|
||
// 首页渲染
|
||
// $("#header").load("public/header.html", function () {
|
||
// initHeader();
|
||
// });
|
||
initHeader();
|
||
// 底部渲染
|
||
// $("#footer").load("public/footer.html", function () {
|
||
// initFooter();
|
||
// });
|
||
initFooter();
|
||
|
||
const resize = function () {
|
||
const width = $(window).width();
|
||
const num = width / 1400;
|
||
if (1000 < width && width < 1440) {
|
||
// 为了避免首页 3D 粒子地球被横向压扁，这里不再对首页 banner 区域做 scaleX，仅对其他 section 生效
|
||
$("section")
|
||
.not(".banner")
|
||
.each(function () {
|
||
this.style.width = "1400px";
|
||
this.style.transform = "scaleX(" + num + ")";
|
||
this.style.transformOrigin = "0 0";
|
||
});
|
||
} else {
|
||
$("section").each(function () {
|
||
this.style.width = "";
|
||
this.style.transform = "";
|
||
this.style.transformOrigin = "";
|
||
});
|
||
}
|
||
};
|
||
resize();
|
||
window.addEventListener("resize", resize);
|
||
|
||
$(".input-search-s ").click(function () {
|
||
$(".input-search-select .select-box").toggle();
|
||
});
|
||
|
||
$(".input-search-r").click(function () {
|
||
$(".input-search-select .select-box").toggle();
|
||
});
|
||
|
||
$(".input-search-select").on("click", ".select-box-item", function () {
|
||
$(".input-search-text").text($(this).text());
|
||
$(".input-search-select .select-box").toggle();
|
||
});
|
||
|
||
/* 招聘tab切换 */
|
||
$(".recuit-btn-group a").each(function (ind, el) {
|
||
$(el).click(function () {
|
||
$(this).addClass("active").siblings().removeClass("active");
|
||
$(".recuit-content .recuit-box").eq(ind).show().siblings().hide();
|
||
});
|
||
});
|
||
/* 常见问题toggle */
|
||
$(".agent-question .item").eq(0).addClass("active");
|
||
$(".agent-question .item").eq(0).find(".des").slideDown(300);
|
||
$(".agent-question .item").each(function (ind, el) {
|
||
$(el)
|
||
.find(".open")
|
||
.click(function () {
|
||
$(this).parent(".title").parent(".item").find(".des").slideDown(300);
|
||
$(this)
|
||
.parent(".title")
|
||
.parent(".item")
|
||
.addClass("active")
|
||
.siblings()
|
||
.removeClass("active")
|
||
.find(".des")
|
||
.slideUp(300);
|
||
});
|
||
$(el)
|
||
.find(".down")
|
||
.click(function () {
|
||
$(this)
|
||
.parent(".des")
|
||
.slideUp(300)
|
||
.parent(".item")
|
||
.removeClass("active");
|
||
});
|
||
});
|
||
|
||
$("#documentBtn").click(function () {
|
||
location.href = "./document.html";
|
||
});
|
||
$(".go-ticket-btn").click(function () {
|
||
location.href = "home.htm";
|
||
});
|
||
|
||
// 回到顶部功能
|
||
$("#backTop").click(function () {
|
||
$("html, body").animate({ scrollTop: 0 }, 300);
|
||
});
|
||
|
||
// 根据滚动位置显示/隐藏回到顶部按钮
|
||
$(window).scroll(function () {
|
||
if ($(this).scrollTop() > 300) {
|
||
$("#backTop").fadeIn(300);
|
||
} else {
|
||
$("#backTop").fadeOut(300);
|
||
}
|
||
});
|
||
|
||
// 初始化时隐藏回到顶部按钮
|
||
if ($(window).scrollTop() <= 300) {
|
||
$("#backTop").hide();
|
||
}
|
||
});
|