bimwe/official_network
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化官网

Browse Source
This commit is contained in:
Daniel
2026-04-27 12:48:35 +08:00
parent 5797bc67b7
commit 1d50532a8c
18 changed files with 1533 additions and 2313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

718
src/static/common.js
View File

@@ -1,677 +1,47 @@
var isMobile = null;
var wasMobile = isMobile;
var isMiniHeader = false;
import { submitJsonForm } from './form_submit'
// 移除 jQuery 导入，使用原生 JavaScript
class Common {
constructor(name, age) {
this.name = name;
this.age = age;
}
// 封装原生 JavaScript 方法，提高代码复用性
add_event_listener(selector, event_type, callback, use_id = false) {
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
if (element) {
element.addEventListener(event_type, callback);
return true;
}
return false;
}
toggle_class(selector, class_name, use_id = false) {
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
if (element) {
element.classList.toggle(class_name);
return true;
}
return false;
}
add_class(selector, class_name, use_id = false) {
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
if (element) {
element.classList.add(class_name);
return true;
}
return false;
}
remove_class(selector, class_name, use_id = false) {
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
if (element) {
element.classList.remove(class_name);
return true;
}
return false;
}
show_element(selector, use_id = false) {
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
if (element) {
element.style.display = 'block';
return true;
}
return false;
}
hide_element(selector, use_id = false) {
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
if (element) {
element.style.display = 'none';
return true;
}
return false;
}
get_element_value(selector, use_id = false) {
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
return element ? element.value : '';
}
set_element_value(selector, value, use_id = false) {
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
if (element) {
element.value = value;
return true;
}
return false;
}
// 滚动到页面顶部 - 支持平滑滚动
scroll_to_top(behavior = 'smooth') {
window.scrollTo({
top: 0,
left: 0,
behavior: behavior
});
}
// 滚动到指定元素 - 支持平滑滚动和偏移
scroll_to_element(selector, offset = 0, behavior = 'smooth', use_id = false) {
const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
if (element) {
const elementTop = element.offsetTop - offset;
window.scrollTo({
top: elementTop,
left: 0,
behavior: behavior
});
return true;
}
return false;
}
// 滚动到指定位置 - 支持平滑滚动
scroll_to_position(top = 0, left = 0, behavior = 'smooth') {
window.scrollTo({
top: top,
left: left,
behavior: behavior
});
}
// 获取当前滚动位置
get_scroll_position() {
return {
top: window.pageYOffset || document.documentElement.scrollTop,
left: window.pageXOffset || document.documentElement.scrollLeft
};
}
// 检查是否在页面顶部
is_at_top() {
return window.pageYOffset === 0;
}
// 检查是否在页面底部
is_at_bottom() {
return window.innerHeight + window.pageYOffset >= document.documentElement.scrollHeight;
}
// 创建返回顶部按钮
create_back_to_top_button() {
// 检查是否已存在返回顶部按钮
if (document.getElementById('backToTopBtn')) {
return;
}
const button = document.createElement('button');
button.id = 'backToTopBtn';
button.innerHTML = '↑';
button.title = '返回顶部';
button.className = 'back-to-top-btn';
// 添加样式
button.style.cssText = `
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: #3498db;
color: white;
border: none;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
`;
// 悬停效果
button.addEventListener('mouseenter', () => {
button.style.background = '#2980b9';
button.style.transform = 'scale(1.1)';
});
button.addEventListener('mouseleave', () => {
button.style.background = '#3498db';
button.style.transform = 'scale(1)';
});
// 点击事件
button.addEventListener('click', () => {
this.scroll_to_top('smooth');
});
// 添加到页面
document.body.appendChild(button);
// 监听滚动事件，控制按钮显示/隐藏
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
button.style.opacity = '1';
button.style.visibility = 'visible';
} else {
button.style.opacity = '0';
button.style.visibility = 'hidden';
}
});
return button;
}
init() {
var self = this;
isMobile = common.isMobile();
// 创建 resizeEnd 事件触发器，在事件完成后调用
let resizeTO;
window.addEventListener('resize', function() {
if (resizeTO) clearTimeout(resizeTO);
resizeTO = setTimeout(function() {
// 触发自定义 resizeEnd 事件
window.dispatchEvent(new CustomEvent('resizeEnd'));
}, 100);
});
// 确定屏幕类型并在窗口调整大小完成后调用样式函数
window.addEventListener('resizeEnd', function() {
self.adjustElementsForScreen();
});
// 创建返回顶部按钮
this.create_back_to_top_button();
window.addEventListener('scroll', function() {
if (window.pageYOffset > 200) {
if (isMiniHeader === false && !self.isMobile()) {
common.add_class('.header', 'mini');
isMiniHeader = true;
}
} else {
if (isMiniHeader === true) {
common.remove_class('.header', 'mini');
isMiniHeader = false;
}
}
});
// 滚动到元素的原生实现
this.scrollToElement = function(selector) {
const element = document.querySelector(selector);
if (element) {
const adjustment = isMiniHeader ? 35 : 0;
const header = document.querySelector('.header:first-child');
const headerHeight = header ? header.offsetHeight : 0;
const targetPosition = element.offsetTop - headerHeight - adjustment;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
}
};
}
adjustElementsForScreen() {
isMobile = this.isMobile();
if (!this.isMobile()) {
const mobileContents = document.querySelectorAll(".mobileContent");
mobileContents.forEach(content => content.style.display = 'none');
}
if (isMobile) wasMobile = true;
if (wasMobile && !isMobile) location.reload();
if (isMobile && isMiniHeader === true) {
common.remove_class('.header', 'mini');
isMiniHeader = false;
}
this.adjustContentBannersForScreen();
}
initHeader() {
// 点击 logo 返回主页
this.add_event_listener(".logoCell .logo", "click", function() {
if (window.location.href.indexOf("index") === -1) {
window.location.href = "#/index";
}
});
// 显示/隐藏主导航下拉菜单（悬停）
const mainMenuItems = document.querySelectorAll(".mainMenu > tbody > tr > td");
mainMenuItems.forEach(item => {
item.addEventListener("mouseenter", function(e) {
e.stopPropagation();
const dropDowns = document.querySelectorAll(".dropDown");
dropDowns.forEach(dd => dd.style.display = 'none');
const selectedItems = document.querySelectorAll("table.mainMenu > tbody > tr > td.selected");
selectedItems.forEach(selected => selected.style.boxShadow = 'none');
const currentDropDown = this.querySelector(".dropDown");
if (currentDropDown) {
currentDropDown.classList.add("droppedDown");
currentDropDown.style.display = 'block';
}
});
item.addEventListener("mouseleave", function(e) {
e.stopPropagation();
const currentDropDown = this.querySelector(".dropDown");
if (currentDropDown) {
currentDropDown.classList.remove("droppedDown");
currentDropDown.style.display = 'none';
}
const selectedItems = document.querySelectorAll("table.mainMenu > tbody > tr > td.selected");
selectedItems.forEach(selected => selected.style.boxShadow = '0 -3px 0 #ff0000 inset');
});
});
}
initListeners() {
// 汉堡菜单点击事件
this.add_event_listener("hamburger", "click", function() {
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
if (mobileLanguageMenu && mobileLanguageMenu.classList.contains("showing")) {
common.hide_element("mobileLanguageMenu", true);
common.remove_class("mobileLanguageMenu", "showing", true);
}
const mobileMenu = document.getElementById("mobileMenu");
if (mobileMenu && mobileMenu.classList.contains("showing")) {
common.hideMobileMenu();
} else {
common.showMobileMenu();
}
}, true);
// 移动端语言菜单点击事件
this.add_event_listener("mobileLanguage", "click", function() {
const mobileMenu = document.getElementById("mobileMenu");
if (mobileMenu && mobileMenu.classList.contains("showing")) {
common.hide_element("mobileMenu", true);
common.remove_class("mobileMenu", "showing", true);
}
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
if (mobileLanguageMenu && !mobileLanguageMenu.classList.contains("showing")) {
common.showMobileLanguageMenu();
}
}, true);
// 屏幕覆盖层和返回按钮点击事件
const screenOverlay = document.getElementById("screenOverlayBehindHeader");
const goBackLinks = document.querySelectorAll(".linkGoBack");
if (screenOverlay) {
screenOverlay.addEventListener("click", function() {
const mobileMenu = document.getElementById("mobileMenu");
if (mobileMenu && mobileMenu.classList.contains("showing")) {
common.hideMobileMenu();
}
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
if (mobileLanguageMenu && mobileLanguageMenu.classList.contains("showing")) {
common.hideMobileLanguageMenu();
}
});
}
goBackLinks.forEach(link => {
link.addEventListener("click", function() {
const mobileMenu = document.getElementById("mobileMenu");
if (mobileMenu && mobileMenu.classList.contains("showing")) {
common.hideMobileMenu();
}
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
if (mobileLanguageMenu && mobileLanguageMenu.classList.contains("showing")) {
common.hideMobileLanguageMenu();
}
});
});
// 移动端语言菜单链接点击事件
const mobileLanguageMenuLinks = document.querySelectorAll("#mobileLanguageMenu a");
mobileLanguageMenuLinks.forEach(link => {
link.addEventListener("click", function(e) {
e.preventDefault();
});
});
// 显示支持表单
const supportLinks = document.querySelectorAll("a.linkSupport");
supportLinks.forEach(link => {
link.addEventListener("click", function(e) {
e.preventDefault();
common.showForm("support");
});
});
// 显示联系表单
const contactLinks = document.querySelectorAll("a.linkContactUs");
contactLinks.forEach(link => {
link.addEventListener("click", function(e) {
e.preventDefault();
common.showForm("contact");
});
});
// 滚动到盒子容器
const scrollToBoxes = document.getElementById("scrollToBoxes");
if (scrollToBoxes) {
scrollToBoxes.addEventListener("click", function(e) {
e.preventDefault();
common.scrollToElement("#pageBoxesContainer");
});
}
// Cookie 信息按钮点击事件
const cookieButtons = document.querySelectorAll('.cookiesInfo input[type="button"]');
cookieButtons.forEach(button => {
button.addEventListener("click", function() {
const parent = this.parentElement;
if (parent) {
parent.remove();
}
});
});
}
initMobileMenu() {
// 移动端菜单标签点击事件
const mobileMenuLabels = document.querySelectorAll("#mobileMenu label");
mobileMenuLabels.forEach(label => {
label.addEventListener("click", function(e) {
e.preventDefault();
const subMenus = document.querySelectorAll("#mobileMenu .subMenu");
subMenus.forEach(subMenu => {
if (subMenu !== this.nextElementSibling) {
subMenu.style.display = 'none';
}
});
const hasSubmenuElements = document.querySelectorAll(".hasSubmenu");
hasSubmenuElements.forEach(element => {
if (element !== this) {
element.style.fontWeight = "normal";
}
});
this.style.fontWeight = "bold";
const currentSubMenu = this.parentElement.querySelector(".subMenu");
if (currentSubMenu) {
currentSubMenu.style.display = 'block';
}
});
});
// 移动端菜单链接点击事件
const mobileMenuLinks = document.querySelectorAll("#mobileMenu a");
mobileMenuLinks.forEach(link => {
link.addEventListener("click", function() {
common.hideMobileMenu();
});
});
}
initForms() {
// 退出表单按钮
const quitButtons = document.querySelectorAll(".btnQuitForm");
quitButtons.forEach(button => {
button.addEventListener("click", function() {
common.hide_element("#forms", true);
common.hide_element("#screenOverlay", true);
common.hide_element("#formContactContainer", true);
common.hide_element("#formSupportContainer", true);
});
});
// 支持表单提交
const supportForm = document.getElementById("formSupport");
if (supportForm) {
supportForm.addEventListener("submit", function(e) {
e.preventDefault();
common.submitSupportForm(this);
});
}
// 联系表单提交
const contactForm = document.getElementById("formContact");
if (contactForm) {
contactForm.addEventListener("submit", function(e) {
e.preventDefault();
common.submitContactForm(this);
});
}
}
showForm(formName) {
common.show_element("#forms", true);
common.show_element("#screenOverlay", true);
const contactTable = document.querySelector(".contactTable");
const formInputContainer = document.querySelector(".formInputContainer");
const formResultContainer = document.querySelector(".formResultContainer");
if (contactTable) contactTable.style.display = 'table';
if (formInputContainer) formInputContainer.style.display = 'block';
if (formResultContainer) formResultContainer.style.display = 'none';
if (formName === "contact") {
const conCommentsTitle = document.querySelector("label[for='conComments']");
if (conCommentsTitle) {
const contactLinkElement = document.querySelector(".contentTableRight [data-contact-link]");
if (contactLinkElement && contactLinkElement.dataset.contactLink) {
conCommentsTitle.innerHTML = "Berätta vad du vill veta mer om gällande " +
contactLinkElement.dataset.contactLink + ": *";
} else {
conCommentsTitle.innerHTML = "Vad vill du veta mer om: ";
}
}
common.show_element("#formContactContainer", true);
} else if (formName === "support") {
common.show_element("#formSupportContainer", true);
}
common.scrollToTop();
}
submitSupportForm() {
// 使用原生 fetch API 替代 jQuery.post
const formData = {
subject: common.get_element_value("#supSubject", true),
company: common.get_element_value("#supCompany", true),
name: common.get_element_value("#supName", true),
email: common.get_element_value("#supEmail", true),
phone: common.get_element_value("#supPhone", true),
product: common.get_element_value("#supProduct", true),
comments: common.get_element_value("#supComments", true)
};
fetch("http://biz199.inmotionhosting.com/~rustyt6/pythagoras/php/submit_support_form.php", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => response.text())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
common.hide_element("#formInputContainer", true);
common.show_element("#formResultContainer", true);
common.scrollToTop();
// 清空表单
common.set_element_value("#supSubject", "", true);
common.set_element_value("#supCompany", "", true);
common.set_element_value("#supName", "", true);
common.set_element_value("#supEmail", "", true);
common.set_element_value("#supPhone", "", true);
common.set_element_value("#supProduct", "", true);
common.set_element_value("#supComments", "", true);
}
submitContactForm() {
// 使用原生 fetch API 替代 jQuery.post
const formData = {
name: common.get_element_value("#conName", true),
email: common.get_element_value("#conEmail", true),
phone: common.get_element_value("#conPhone", true),
comments: common.get_element_value("#conComments", true)
};
fetch("http://biz199.inmotionhosting.com/~rustyt6/pythagoras/php/submit_contact_form.php", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => response.text())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
common.hide_element(".contactTable");
common.show_element("#formResultContainer", true);
common.scrollToTop();
// 清空表单
common.set_element_value("#conName", "", true);
common.set_element_value("#conEmail", "", true);
common.set_element_value("#conPhone", "", true);
common.set_element_value("#conComments", "", true);
}
adjustContentBannersForScreen() {
if (this.isMobile()) {
const banner1 = document.getElementById("pageBannerImage1");
const banner2 = document.getElementById("pageBannerImage2");
const banner3 = document.getElementById("pageBannerImage3");
if (banner1) banner1.src = "images/banner_page_mobile_solutions_mobile.jpg";
if (banner2) banner2.src = "images/banner_page_ifrs16_mobile.jpg";
if (banner3) banner3.src = "images/banner_page_gdpr_mobile.jpg";
} else {
const banner1 = document.getElementById("pageBannerImage1");
const banner2 = document.getElementById("pageBannerImage2");
const banner3 = document.getElementById("pageBannerImage3");
if (banner1) banner1.src = "images/banner_page_mobile_solutions.jpg";
if (banner2) banner2.src = "images/banner_page_ifrs16.jpg";
if (banner3) banner3.src = "images/banner_page_gdpr.jpg";
}
}
showMobileMenu() {
common.show_element("#screenOverlayBehindHeader", true);
const mobileMenu = document.getElementById("mobileMenu");
if (mobileMenu) {
mobileMenu.style.display = 'block';
common.add_class("mobileMenu", "showing", true);
}
}
hideMobileMenu() {
const mobileMenu = document.getElementById("mobileMenu");
if (mobileMenu) {
mobileMenu.style.display = 'none';
common.hide_element("#screenOverlayBehindHeader", true);
common.remove_class("mobileMenu", "showing", true);
}
}
showMobileLanguageMenu() {
common.show_element("#screenOverlayBehindHeader", true);
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
if (mobileLanguageMenu) {
mobileLanguageMenu.style.display = 'block';
common.add_class("mobileLanguageMenu", "showing", true);
}
}
hideMobileLanguageMenu() {
const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
if (mobileLanguageMenu) {
mobileLanguageMenu.style.display = 'none';
common.hide_element("#screenOverlayBehindHeader", true);
common.remove_class("mobileLanguageMenu", "showing", true);
}
}
scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
isMobile() {
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
isMobile = isIphone || isAndroid;
return isMobile;
}
isPhone() {
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
var isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
return isIphone;
}
export function isMobileUserAgent(userAgent = '') {
return /(iPhone|Android|Mobile)/i.test(userAgent)
}
export const common = new Common();
export function normalizeBasePath(basePath = '/') {
return basePath.replace(/\/?$/, '/')
}
export function createSupportPayload(values = {}) {
return {
subject: values.subject || '',
company: values.company || '',
name: values.name || '',
email: values.email || '',
phone: values.phone || '',
product: values.product || '',
comments: values.comments || ''
}
}
export function createContactPayload(values = {}) {
return {
name: values.name || '',
email: values.email || '',
phone: values.phone || '',
comments: values.comments || ''
}
}
export function submitSupportPayload(values, endpoint = process.env.VUE_APP_SUPPORT_FORM_ENDPOINT) {
return submitJsonForm(endpoint, createSupportPayload(values))
}
export function submitContactPayload(values, endpoint = process.env.VUE_APP_CONTACT_FORM_ENDPOINT) {
return submitJsonForm(endpoint, createContactPayload(values))
}
export const common = {
isMobileUserAgent,
normalizeBasePath,
createSupportPayload,
createContactPayload,
submitSupportPayload,
submitContactPayload
}

27
src/static/form_submit.js Normal file
View File

@@ -0,0 +1,27 @@
export function submitJsonForm(endpoint, formData) {
if (!endpoint || !/^https:\/\//i.test(endpoint)) {
return Promise.resolve({
ok: false,
status: 'missing_endpoint',
message: 'Form endpoint must be configured with an HTTPS URL.'
})
}
return fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => response.text().then(text => ({
ok: response.ok,
status: response.ok ? 'success' : 'error',
message: text
})))
.catch(error => ({
ok: false,
status: 'error',
message: error.message
}))
}