删除无用备份
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
This commit is contained in:
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-dropdown-menu" style="height: 100vh; overflow-y: scroll;-webkit-overflow-scrolling: touch;padding-bottom:4rem;">
|
||||
<div class="nav-dropdown-menu" style="height: 100vh; overflow-y: scroll;-webkit-overflow-scrolling: touch;padding-bottom:9rem;">
|
||||
<!-- 产品列表 - 有子菜单 -->
|
||||
<div class="menu-item has-child">
|
||||
<div class="menu-item-box">
|
||||
|
||||
@@ -1,161 +0,0 @@
|
||||
<header class="oircoEgapp-head">
|
||||
<div class="headtop">
|
||||
<a href="/"><img src="__IMAGES__/logo.png" class="headerlogimg" /></a>
|
||||
<div class="action-r">
|
||||
<div class="right img-responsive cursor_p">
|
||||
<span class="icon-category cursor_p top-menu-toggle"><i class="icon-menu-svg"></i></span>
|
||||
<span class="icon-keyword cursor_p top-search-toggle"><i class="icon-search-svg"></i></span>
|
||||
<span class="mask-up cursor_p top-country-toggle"><i class="icon-lag-svg"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 顶部菜单-->
|
||||
<div class="top-menu">
|
||||
<div class="it-ct">
|
||||
<div class="it-1"><a href="/">{:lang_i18n('首页')}</a></div>
|
||||
</div>
|
||||
<div class="it-ct">
|
||||
<div class="it-1">
|
||||
<div class="it-1-more">{:lang_i18n('产品列表')}<i class="icon-arrow"></i></div>
|
||||
{notempty name="header_categorys"}
|
||||
{volist name="header_categorys" id="ca"}
|
||||
<div class="it-1-2"><a href="{:url('product/category', ['id' => $ca.id])}">{$ca.name}</a></div>
|
||||
{/volist}
|
||||
{/notempty}
|
||||
</div>
|
||||
</div>
|
||||
{notempty name="header_navigation"}
|
||||
{volist name="header_navigation" id="nav"}
|
||||
<div class="it-ct">
|
||||
<div class="it-1">
|
||||
{empty name="nav.children"}
|
||||
<a href="{$nav.link}">{$nav.name}</a>
|
||||
{else/}
|
||||
<div class="it-1-more">{$nav.name}<i class="icon-arrow"></i></div>
|
||||
{volist name="nav.children" id="ch"}
|
||||
<div class="it-1-2"><a href="{$ch.link}">{$ch.name}</a></div>
|
||||
{/volist}
|
||||
{/empty}
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
{/notempty}
|
||||
</div>
|
||||
<!-- 顶部搜索-->
|
||||
<div class="top-search">
|
||||
<div class="marsk-container">
|
||||
<div class="popup-quick">
|
||||
<div class="ac-close float_r "><img src="__IMAGES__/close.png"></div>
|
||||
<div class="search-in">
|
||||
<form action="{:url('product/search')}" method="get">
|
||||
<input type="text" name="keywords" placeholder="{:lang_i18n('产品')} USB 2.0...">
|
||||
<button type="submit" id="search-btnput" class="search-button">{:lang_i18n('搜索')}</button>
|
||||
</form>
|
||||
<div class="title-text">
|
||||
<p><a href="#">{:lang_i18n('搜索历史')}</a></p>
|
||||
<div id="history"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 顶部国家选择-->
|
||||
<div class="top-country">
|
||||
<div class="mask"></div>
|
||||
<div class="action-sheet">
|
||||
<div class="menu-title">
|
||||
<div class="menu-name">{:lang_i18n('请择地区')}</div>
|
||||
<div class="close-icon">
|
||||
<img src="__IMAGES__/close.png">
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
{volist name="header_languages" id="la"}
|
||||
<li>
|
||||
<a href="{$la.lang_url}" target="_blank">
|
||||
<img src="{$la.lang_icon}">{$la.country_en_name} - {$la.lang_en_name}
|
||||
</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
// 点击顶部菜单
|
||||
$(".top-menu-toggle").click(function() {
|
||||
$(".top-menu").slideToggle(800);
|
||||
})
|
||||
// 点击一级菜单显示二级菜单
|
||||
$(".it-1-more").on("click", function() {
|
||||
$('.it-1-2').hide();
|
||||
$('.icon-arrow').removeClass('rotate');
|
||||
$(this).siblings('.it-1-2').slideToggle(800);
|
||||
$(this).find('.icon-arrow').addClass('rotate');
|
||||
});
|
||||
//点击搜索
|
||||
$('.top-search-toggle').click(function() {
|
||||
$(".marsk-container").show();
|
||||
})
|
||||
$('.ac-close').click(function() {
|
||||
$(".marsk-container").hide();
|
||||
})
|
||||
// 顶部国家选择
|
||||
$('.top-country-toggle').click(function(){
|
||||
$(".mask,.action-sheet").show();
|
||||
})
|
||||
$('.top-country .close-icon').click(function(){
|
||||
$(".mask,.action-sheet").hide();
|
||||
})
|
||||
|
||||
// 移动端顶部宽度设置和主体内容宽度一致
|
||||
var pageWidth = $('.oricoEGapp').outerWidth();
|
||||
// 设置.header-PC元素的宽度
|
||||
$('.oircoEgapp-head').css('width', pageWidth + 'px');
|
||||
// 可选：监听窗口大小变化，实时更新宽度
|
||||
$(window).resize(function() {
|
||||
var newWidth = $('.oricoEGapp').outerWidth();
|
||||
$('.oircoEgapp-head').css('width', newWidth + 'px');
|
||||
});
|
||||
|
||||
// 回显搜索历史记录
|
||||
history();
|
||||
})
|
||||
|
||||
function history() {
|
||||
var keywords = new URL(window.location.href).searchParams.get('keywords')
|
||||
var history_keywords = localStorage.getItem('header_search_keywords');
|
||||
if (!history_keywords) {
|
||||
history_keywords = [];
|
||||
} else {
|
||||
history_keywords = JSON.parse(history_keywords);
|
||||
}
|
||||
|
||||
// 记录搜索关键词
|
||||
if (keywords) {
|
||||
if (history_keywords.includes(keywords)) {
|
||||
history_keywords.splice(history_keywords.indexOf(keywords), 1);
|
||||
}
|
||||
history_keywords.unshift(keywords);
|
||||
if (history_keywords.length > 3) {
|
||||
history_keywords.pop();
|
||||
}
|
||||
localStorage.setItem('header_search_keywords', JSON.stringify(history_keywords));
|
||||
}
|
||||
|
||||
// 回显搜索历史
|
||||
history_keywords.forEach(function(item) {
|
||||
$('#history').append(
|
||||
$('<a>')
|
||||
.css({
|
||||
'margin-right': '10px'
|
||||
})
|
||||
.attr('href', '{:url("product/search")}?keywords=' + item)
|
||||
.text(item)
|
||||
);
|
||||
});
|
||||
|
||||
return history_keywords;
|
||||
}
|
||||
</script>
|
||||
@@ -1,679 +0,0 @@
|
||||
<link rel="stylesheet" href="__CSS__/new_header.css">
|
||||
<header>
|
||||
<div class="mobile-header-box">
|
||||
<div class="mobile-header-left">
|
||||
<img src="__IMAGES__/header/nav.png" class="nav-img">
|
||||
<img src="__IMAGES__/header/x.png" class="nav-img1">
|
||||
<a href="/" target="_self" style="display: flex; justify-content: center;">
|
||||
<img src="__IMAGES__/logo.png" class="nav-log">
|
||||
</a>
|
||||
</div>
|
||||
<div class="mobile-header-right">
|
||||
<img src="__IMAGES__/header/search.png" class="nav-search">
|
||||
<img src="__IMAGES__/header/lang.png" class="nav-lang">
|
||||
<img src="__IMAGES__/header/card.png" class="nav-card">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-dropdown-menu">
|
||||
<!-- 产品列表 - 有子菜单 -->
|
||||
<div class="menu-item has-child">
|
||||
<div class="menu-item-box">
|
||||
<span>{:lang_i18n('产品列表')}</span>
|
||||
<img src="__IMAGES__/header/b.png" class="menu-item-img">
|
||||
</div>
|
||||
{if condition="!empty($header_categorys)"}
|
||||
<div class="sub-menu" style="overflow-y: auto;">
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="sub-item"><a href="{:url('product/classify', ['id' => $vo.id])}" target="_self">{$vo.name}</a></div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{if condition="!empty($header_navigation)"}
|
||||
{volist name="header_navigation" id="nav"}
|
||||
{empty name='nav.children'}
|
||||
<div class="menu-item no-child" data-link="{$nav.link}">
|
||||
{else/}
|
||||
<div class="menu-item has-child" data-link="{$nav.link}">
|
||||
{/empty}
|
||||
<div class="menu-item-box">
|
||||
<span>{$nav.name}</span>
|
||||
<img src="__IMAGES__/header/b.png" class="menu-item-img">
|
||||
</div>
|
||||
{if condition="!empty($nav.children)"}
|
||||
<div class="sub-menu" style="border: none;" >
|
||||
{volist name="nav.children" id="child"}
|
||||
<div class="sub-item no-padding ">
|
||||
<a href="{$child.link}" target="{$child.blank==1?'_blank':'_self'}" class="sub-item-card">
|
||||
<img src="{$child.image}" alt="" class="sub-item-card-img">
|
||||
<div class="sub-item-card-title">{$child.name}</div>
|
||||
<div class="sub-item-card-name">{$child.desc}</div>
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- ====================== 购物车弹窗 ====================== -->
|
||||
<div class="modal-overlay" id="cartModal">
|
||||
<div class="modal-content">
|
||||
<img src="__IMAGES__/header/x.png" class="modal-close">
|
||||
{if condition="!empty($header_mall_entrance)"}
|
||||
<div class="modal-items-list">
|
||||
{volist name="header_mall_entrance" id="ma"}
|
||||
{if condition="!empty($ma.link) && empty($ma.hover_image)"}
|
||||
<a class="modal-item" href="{$ma.link}" target="_self">
|
||||
<img src="{$ma.image}" alt="" class="modal-item-img">
|
||||
<div class="modal-item-title">{$ma.name}</div>
|
||||
</a>
|
||||
{else/}
|
||||
<!--悬浮图-->
|
||||
<a class="modal-item" href="{$ma.link}" target="_self">
|
||||
<img src="{$ma.image}" alt="" class="modal-item-img">
|
||||
<div class="modal-item-title">{$ma.name}</div>
|
||||
</a>
|
||||
<div class="modal-item" style="display:none">
|
||||
<img src="{$ma.hover_image}" alt="" class="modal-item-img">
|
||||
</div>
|
||||
{/if}
|
||||
{/volist}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================== 语言弹窗 ====================== -->
|
||||
<div class="modal-overlay" id="langModal">
|
||||
<div class="lang-modal-content">
|
||||
<img src="__IMAGES__/header/x.png" class="modal-close">
|
||||
<div class="lang-items-list">
|
||||
{volist name="header_languages" id="la"}
|
||||
<a class="lang-item" href="{$la.lang_url}" target="_self">
|
||||
<img src="{$la.lang_icon}" />
|
||||
<div>{$la.country_en_name} - {$la.lang_en_name}</div>
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================== 搜索弹窗 ====================== -->
|
||||
<div class="modal-overlay" id="searchModal">
|
||||
<div class="search-modal-content">
|
||||
<img src="__IMAGES__/header/x.png" class="modal-close">
|
||||
<div class="search-input-box">
|
||||
<input type="text" placeholder="{:lang_i18n('请输入搜索关键词')}" id="searchInput">
|
||||
|
||||
<div class="search-clear-box">
|
||||
<img src="__IMAGES__/header/x.png" alt="{:lang_i18n('清除')}" class="search-clear-btn" id="searchClearBtn" style="display: none;">
|
||||
</div>
|
||||
<!-- <span style="width: 1px; color:#d9d9d9;margin: 0 10px;">|</span> -->
|
||||
<div class="search-submit-box">
|
||||
<img src="__IMAGES__/header/search.png" alt="{:lang_i18n('搜索')}" class="search-submit-icon" id="searchSubmit">
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-history">
|
||||
<div class="search-history-header">
|
||||
<div class="search-history-title">{:lang_i18n('搜索记录')}</div>
|
||||
<div class="search-history-clear" id="clearAllHistory">{:lang_i18n('清空')}</div>
|
||||
</div>
|
||||
<div class="search-history-list" id="searchHistoryList">
|
||||
<!-- 搜索记录会动态显示在这里 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function ()
|
||||
{
|
||||
const navBtn = document.querySelector('.nav-img');
|
||||
const navBtn1 = document.querySelector('.nav-img1');
|
||||
const dropdownMenu = document.querySelector('.nav-dropdown-menu');
|
||||
|
||||
// 禁止body滚动
|
||||
function disableBodyScroll() {
|
||||
document.body.style.overflow = 'hidden ';
|
||||
document.body.style.position = 'fixed';
|
||||
document.body.style.top = `-${window.scrollY}px`;
|
||||
document.body.style.width = '100%';
|
||||
}
|
||||
|
||||
// 恢复body滚动
|
||||
function enableBodyScroll() {
|
||||
const scrollY = document.body.style.top;
|
||||
document.body.style.overflow = '';
|
||||
document.body.style.position = '';
|
||||
document.body.style.top = '';
|
||||
document.body.style.width = '';
|
||||
if (scrollY) {
|
||||
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
||||
}
|
||||
}
|
||||
|
||||
// 复位所有子菜单（关闭并重置滚动位置）
|
||||
function resetAllSubMenus() {
|
||||
let hasOpenMenu = false;
|
||||
document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
|
||||
if (subMenu.classList.contains('show')) {
|
||||
hasOpenMenu = true;
|
||||
}
|
||||
subMenu.classList.remove('show');
|
||||
// 重置滚动位置到顶部
|
||||
subMenu.scrollTop = 0;
|
||||
});
|
||||
document.querySelectorAll('.has-child').forEach(function(item) {
|
||||
item.classList.remove('open');
|
||||
});
|
||||
|
||||
// 如果没有打开的菜单，恢复body滚动
|
||||
if (!hasOpenMenu) {
|
||||
enableBodyScroll();
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭单个子菜单并重置滚动位置
|
||||
function closeSubMenu(subMenu, menuItem) {
|
||||
if (subMenu) {
|
||||
subMenu.classList.remove('show');
|
||||
subMenu.scrollTop = 0; // 重置滚动位置
|
||||
}
|
||||
if (menuItem) {
|
||||
menuItem.classList.remove('open');
|
||||
}
|
||||
// 检查是否还有其他打开的菜单
|
||||
const anyOpen = document.querySelector('.has-child .sub-menu.show');
|
||||
if (!anyOpen) {
|
||||
enableBodyScroll();
|
||||
}
|
||||
}
|
||||
|
||||
// 打开子菜单
|
||||
function openSubMenu(subMenu, menuItem) {
|
||||
|
||||
|
||||
subMenu.classList.add('show');
|
||||
menuItem.classList.add('open');
|
||||
// 确保新打开的菜单滚动位置在顶部
|
||||
subMenu.scrollTop = 0;
|
||||
}
|
||||
|
||||
// 打开菜单
|
||||
navBtn.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
// 禁止body滚动
|
||||
disableBodyScroll();
|
||||
// 关闭所有弹窗
|
||||
closeAllModals();
|
||||
dropdownMenu.classList.add('show');
|
||||
navBtn.style.display = 'none';
|
||||
navBtn1.style.display = 'block';
|
||||
});
|
||||
|
||||
// 关闭菜单 - 复位所有子菜单
|
||||
navBtn1.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
dropdownMenu.classList.remove('show');
|
||||
navBtn.style.display = 'block';
|
||||
navBtn1.style.display = 'none';
|
||||
|
||||
// 复位所有子菜单到初始状态
|
||||
resetAllSubMenus();
|
||||
});
|
||||
|
||||
// ====================== 处理所有菜单项（同一时间只展开一个） ======================
|
||||
document.querySelectorAll('.menu-item').forEach(function (item)
|
||||
{
|
||||
const isHasChild = item.classList.contains('has-child');
|
||||
const subMenu = item.querySelector('.sub-menu');
|
||||
const box = item.querySelector('.menu-item-box');
|
||||
|
||||
if (isHasChild && subMenu) {
|
||||
// 移除原有事件，重新绑定（确保只有一个展开）
|
||||
const newBox = box.cloneNode(true);
|
||||
box.parentNode.replaceChild(newBox, box);
|
||||
|
||||
newBox.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
|
||||
// 检查当前是否已展开
|
||||
const isOpen = subMenu.classList.contains('show');
|
||||
|
||||
// 关闭所有其他子菜单并重置滚动位置
|
||||
document.querySelectorAll('.has-child').forEach(function (otherItem) {
|
||||
const otherSubMenu = otherItem.querySelector('.sub-menu');
|
||||
if (otherSubMenu && otherSubMenu !== subMenu) {
|
||||
otherSubMenu.classList.remove('show');
|
||||
otherSubMenu.scrollTop = 0; // 重置滚动位置
|
||||
otherItem.classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
// 切换当前菜单
|
||||
if (!isOpen) {
|
||||
openSubMenu(subMenu, item);
|
||||
} else {
|
||||
closeSubMenu(subMenu, item);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const link = item.getAttribute('data-link');
|
||||
if (link) {
|
||||
item.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
window.location.href = link;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 阻止子菜单链接冒泡
|
||||
document.querySelectorAll('.sub-item').forEach(function (sub)
|
||||
{
|
||||
sub.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
dropdownMenu.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
navBtn1.style.display = 'none';
|
||||
navBtn.style.display = 'block';
|
||||
|
||||
// 关闭所有弹窗的公共函数
|
||||
function closeAllModals ()
|
||||
{
|
||||
cartModal.classList.remove('show');
|
||||
langModal.classList.remove('show');
|
||||
searchModal.classList.remove('show');
|
||||
if (searchInput) {
|
||||
searchInput.value = '';
|
||||
if (searchClearBtn) searchClearBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// ====================== 购物车弹窗交互 ======================
|
||||
const cardBtn = document.querySelector('.nav-card');
|
||||
const cartModal = document.getElementById('cartModal');
|
||||
const cartModalClose = cartModal.querySelector('.modal-close');
|
||||
|
||||
cardBtn.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
// 关闭下拉菜单和其他弹窗
|
||||
dropdownMenu.classList.remove('show');
|
||||
navBtn.style.display = 'block';
|
||||
navBtn1.style.display = 'none';
|
||||
closeAllModals();
|
||||
// 复位所有子菜单
|
||||
resetAllSubMenus();
|
||||
cartModal.classList.add('show');
|
||||
});
|
||||
|
||||
cartModalClose.addEventListener('click', function ()
|
||||
{
|
||||
cartModal.classList.remove('show');
|
||||
});
|
||||
|
||||
cartModal.addEventListener('click', function (e)
|
||||
{
|
||||
if (e.target === cartModal) {
|
||||
cartModal.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
// ====================== 语言弹窗交互 ======================
|
||||
const langBtn = document.querySelector('.nav-lang');
|
||||
const langModal = document.getElementById('langModal');
|
||||
const langModalClose = langModal.querySelector('.modal-close');
|
||||
|
||||
langBtn.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
// 关闭下拉菜单和其他弹窗
|
||||
dropdownMenu.classList.remove('show');
|
||||
navBtn.style.display = 'block';
|
||||
navBtn1.style.display = 'none';
|
||||
closeAllModals();
|
||||
// 复位所有子菜单
|
||||
resetAllSubMenus();
|
||||
langModal.classList.add('show');
|
||||
});
|
||||
|
||||
langModalClose.addEventListener('click', function ()
|
||||
{
|
||||
langModal.classList.remove('show');
|
||||
});
|
||||
|
||||
langModal.addEventListener('click', function (e)
|
||||
{
|
||||
if (e.target === langModal) {
|
||||
langModal.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.lang-item').forEach(function (item)
|
||||
{
|
||||
item.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
console.log('选择了语言:', this.innerText);
|
||||
langModal.classList.remove('show');
|
||||
});
|
||||
});
|
||||
|
||||
// ====================== 搜索记录功能 ======================
|
||||
// 获取搜索记录
|
||||
function getSearchHistory ()
|
||||
{
|
||||
const history = localStorage.getItem('searchHistory');
|
||||
return history ? JSON.parse(history) : [];
|
||||
}
|
||||
|
||||
// 保存搜索记录
|
||||
function saveSearchHistory (history)
|
||||
{
|
||||
localStorage.setItem('searchHistory', JSON.stringify(history));
|
||||
}
|
||||
|
||||
// 添加搜索记录
|
||||
function addSearchHistory (keyword)
|
||||
{
|
||||
if (!keyword || !keyword.trim()) return;
|
||||
keyword = keyword.trim();
|
||||
let history = getSearchHistory();
|
||||
history = history.filter(item => item !== keyword);
|
||||
history.unshift(keyword);
|
||||
if (history.length > 10) {
|
||||
history = history.slice(0, 10);
|
||||
}
|
||||
saveSearchHistory(history);
|
||||
renderSearchHistory();
|
||||
}
|
||||
|
||||
// 删除单条搜索记录
|
||||
function deleteSearchHistoryItem (keyword)
|
||||
{
|
||||
let history = getSearchHistory();
|
||||
history = history.filter(item => item !== keyword);
|
||||
saveSearchHistory(history);
|
||||
renderSearchHistory();
|
||||
}
|
||||
|
||||
// 清空所有搜索记录
|
||||
function clearAllSearchHistory ()
|
||||
{
|
||||
saveSearchHistory([]);
|
||||
renderSearchHistory();
|
||||
}
|
||||
|
||||
// 渲染搜索记录列表
|
||||
function renderSearchHistory ()
|
||||
{
|
||||
const historyList = document.getElementById('searchHistoryList');
|
||||
const history = getSearchHistory();
|
||||
|
||||
if (!historyList) return;
|
||||
|
||||
if (history.length === 0) {
|
||||
historyList.innerHTML = '<div class="empty-history">暂无搜索记录</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
historyList.innerHTML = '';
|
||||
history.forEach(function (keyword)
|
||||
{
|
||||
const itemDiv = document.createElement('div');
|
||||
itemDiv.className = 'search-history-item';
|
||||
itemDiv.innerHTML = `
|
||||
<span>${escapeHtml(keyword)}</span>
|
||||
<img src="__IMAGES__/header/x.png" class="delete-icon" data-keyword="${escapeHtml(keyword)}">
|
||||
`;
|
||||
itemDiv.addEventListener('click', function (e)
|
||||
{
|
||||
if (e.target.classList && e.target.classList.contains('delete-icon')) {
|
||||
e.stopPropagation();
|
||||
deleteSearchHistoryItem(keyword);
|
||||
} else {
|
||||
e.stopPropagation();
|
||||
searchInput.value = keyword;
|
||||
doSearch(keyword);
|
||||
}
|
||||
});
|
||||
historyList.appendChild(itemDiv);
|
||||
});
|
||||
}
|
||||
|
||||
// 简单的防XSS
|
||||
function escapeHtml (str)
|
||||
{
|
||||
return str.replace(/[&<>]/g, function (m)
|
||||
{
|
||||
if (m === '&') return '&';
|
||||
if (m === '<') return '<';
|
||||
if (m === '>') return '>';
|
||||
return m;
|
||||
});
|
||||
}
|
||||
|
||||
// ====================== 搜索弹窗交互 ======================
|
||||
const searchBtn = document.querySelector('.nav-search');
|
||||
const searchModal = document.getElementById('searchModal');
|
||||
const searchModalClose = searchModal.querySelector('.modal-close');
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const searchSubmit = document.getElementById('searchSubmit');
|
||||
const searchClearBtn = document.getElementById('searchClearBtn');
|
||||
const clearAllHistoryBtn = document.getElementById('clearAllHistory');
|
||||
|
||||
searchInput.addEventListener('input', function (e)
|
||||
{
|
||||
if (searchInput.value.length > 0) {
|
||||
searchClearBtn.style.display = 'block';
|
||||
} else {
|
||||
searchClearBtn.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
searchClearBtn.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
searchInput.value = '';
|
||||
searchClearBtn.style.display = 'none';
|
||||
searchInput.focus();
|
||||
});
|
||||
|
||||
if (clearAllHistoryBtn) {
|
||||
clearAllHistoryBtn.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
clearAllSearchHistory();
|
||||
});
|
||||
}
|
||||
|
||||
searchBtn.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
// 关闭下拉菜单和其他弹窗
|
||||
dropdownMenu.classList.remove('show');
|
||||
navBtn.style.display = 'block';
|
||||
navBtn1.style.display = 'none';
|
||||
closeAllModals();
|
||||
// 复位所有子菜单
|
||||
resetAllSubMenus();
|
||||
renderSearchHistory();
|
||||
searchModal.classList.add('show');
|
||||
setTimeout(() =>
|
||||
{
|
||||
searchInput.focus();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
searchModalClose.addEventListener('click', function ()
|
||||
{
|
||||
searchModal.classList.remove('show');
|
||||
searchInput.value = '';
|
||||
searchClearBtn.style.display = 'none';
|
||||
});
|
||||
|
||||
searchModal.addEventListener('click', function (e)
|
||||
{
|
||||
if (e.target === searchModal) {
|
||||
searchModal.classList.remove('show');
|
||||
searchInput.value = '';
|
||||
searchClearBtn.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// 执行搜索
|
||||
function doSearch (keyword)
|
||||
{
|
||||
if (keyword && keyword.trim()) {
|
||||
const searchKeyword = keyword.trim();
|
||||
console.log('搜索关键词:', searchKeyword);
|
||||
if (searchKeyword) {
|
||||
addSearchHistory(searchKeyword);
|
||||
window.location.href = "{:url('product/search')}?keywords=" + encodeURIComponent(searchKeyword);
|
||||
searchModal.classList.remove('show');
|
||||
searchInput.value = '';
|
||||
searchClearBtn.style.display = 'none';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
searchSubmit.addEventListener('click', function (e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
doSearch(searchInput.value);
|
||||
});
|
||||
|
||||
searchInput.addEventListener('keypress', function (e)
|
||||
{
|
||||
console.log(e,'========e=============')
|
||||
if (e.key === 'Enter' || e.key === 'enter' || e.keyCode === 13) {
|
||||
e.preventDefault();
|
||||
doSearch(searchInput.value);
|
||||
}
|
||||
});
|
||||
|
||||
// ====================== 添加：点击空白区域关闭所有子菜单 ======================
|
||||
document.addEventListener('click', function(e) {
|
||||
// 如果点击的不是菜单项内部，关闭所有子菜单
|
||||
if (!e.target.closest('.menu-item')) {
|
||||
resetAllSubMenus();
|
||||
}
|
||||
});
|
||||
|
||||
// ====================== 动态计算子菜单高度并添加滚动功能（产品列表除外） ======================
|
||||
// 判断是否为产品列表（第一个菜单项）
|
||||
function isProductList(menuItem) {
|
||||
const firstMenuItem = document.querySelector('.menu-item');
|
||||
return menuItem === firstMenuItem;
|
||||
}
|
||||
|
||||
// 设置子菜单的最大高度
|
||||
function setSubMenuHeight(subMenu, menuItem) {
|
||||
if (!subMenu || !menuItem) return;
|
||||
|
||||
// 产品列表不处理
|
||||
if (isProductList(menuItem)) {
|
||||
subMenu.style.maxHeight = '';
|
||||
subMenu.style.overflowY = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取菜单位置信息
|
||||
const rect = menuItem.getBoundingClientRect();
|
||||
const bottomSpace = 50; // 底部留白空间
|
||||
|
||||
// 计算可用高度 = 视口高度 - 菜单顶部距离 - 底部留白
|
||||
let availableHeight = window.innerHeight - rect.top - bottomSpace;
|
||||
|
||||
// 限制最小高度
|
||||
if (availableHeight < 200) {
|
||||
availableHeight = 200;
|
||||
}
|
||||
|
||||
// 设置子菜单的最大高度和滚动
|
||||
subMenu.style.maxHeight = availableHeight + 'px';
|
||||
subMenu.style.overflowY = 'auto';
|
||||
subMenu.style.overflowX = 'hidden';
|
||||
subMenu.style.WebkitOverflowScrolling = 'touch';
|
||||
}
|
||||
|
||||
// 为所有有子菜单的导航项（产品列表除外）绑定事件
|
||||
const allMenuItems = document.querySelectorAll('.has-child');
|
||||
|
||||
allMenuItems.forEach(function(menuItem) {
|
||||
const subMenu = menuItem.querySelector('.sub-menu');
|
||||
const box = menuItem.querySelector('.menu-item-box');
|
||||
|
||||
if (!subMenu || !box) return;
|
||||
|
||||
// 产品列表不处理滚动功能
|
||||
if (isProductList(menuItem)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加点击事件处理高度
|
||||
box.addEventListener('click', function(e) {
|
||||
// 如果子菜单即将打开，计算高度
|
||||
if (!subMenu.classList.contains('show')) {
|
||||
// 延迟一帧，确保DOM已更新
|
||||
setTimeout(function() {
|
||||
setSubMenuHeight(subMenu, menuItem);
|
||||
// 确保滚动位置在顶部
|
||||
subMenu.scrollTop = 0;
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 窗口大小改变时，重新计算已打开的子菜单高度
|
||||
window.addEventListener('resize', function() {
|
||||
const openSubMenus = document.querySelectorAll('.has-child .sub-menu.show');
|
||||
openSubMenus.forEach(function(subMenu) {
|
||||
const menuItem = subMenu.closest('.has-child');
|
||||
if (menuItem && !isProductList(menuItem)) {
|
||||
setSubMenuHeight(subMenu, menuItem);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 监听菜单打开状态变化（使用 MutationObserver 确保高度正确设置）
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.attributeName === 'class') {
|
||||
const target = mutation.target;
|
||||
if (target.classList && target.classList.contains('sub-menu') && target.classList.contains('show')) {
|
||||
const menuItem = target.closest('.has-child');
|
||||
if (menuItem && !isProductList(menuItem)) {
|
||||
setSubMenuHeight(target, menuItem);
|
||||
// 确保滚动位置在顶部
|
||||
target.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 观察所有子菜单的class变化
|
||||
document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
|
||||
observer.observe(subMenu, { attributes: true });
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,287 +0,0 @@
|
||||
<header class="header-PC">
|
||||
<div id="header">
|
||||
<!-- LOG -->
|
||||
<div class="nav1">
|
||||
<a href="/">
|
||||
<img src="__IMAGES__/logo.png" />
|
||||
</a>
|
||||
</div>
|
||||
<!--顶部导航栏 -->
|
||||
<div class="nav2">
|
||||
<nav id="booNavigation" class="booNavigation">
|
||||
<ul>
|
||||
{if condition="!empty($header_categorys)"}
|
||||
<li class="navItem">
|
||||
<a href="javascript:void(0);">{:lang_i18n('产品列表')}</a>
|
||||
<img src="__IMAGES__/black-down.png" class="downimg" />
|
||||
<ol class="navItemConten">
|
||||
<!-- 左边子菜单-->
|
||||
<ul class="navItem_cyleft">
|
||||
{volist name="header_categorys" id="vo"}
|
||||
<li class="{$key == 0 ? 'it_active' : ''}">
|
||||
<a href="{:url('product/category', ['id' => $vo.id])}">{$vo.name}</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
<!-- 右边子菜单-->
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"{else/}style="display: none;"{/eq}>
|
||||
{if condition="!empty($vo.children)"}
|
||||
{volist name="vo.children" id="vc"}
|
||||
<dl class="nav_cyrightit">
|
||||
<dt>
|
||||
<a href="{:url('product/subcategory', ['id' => $vc.id])}">{$vc.name}</a>
|
||||
</dt>
|
||||
{if condition="!empty($vc.children)"}
|
||||
{volist name="vc.children" id="vcc"}
|
||||
<dd>
|
||||
<a href="{:url('product/subcategory', ['id' => $vcc.id])}">{$vcc.name}</a>
|
||||
</dd>
|
||||
{/volist}
|
||||
{/if}
|
||||
</dl>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
{/volist}
|
||||
</ol>
|
||||
</li>
|
||||
{/if}
|
||||
{volist name="header_navigation" id="vo"}
|
||||
<li class="navItem">
|
||||
<a href="{$vo.link}" target="{$vo.blank==1?'_blank':'_self'}">{$vo.name}</a>
|
||||
{if condition="!empty($vo.children)"}
|
||||
<img src="__IMAGES__/black-down.png" class="downimg" />
|
||||
<!--下拉菜单 -->
|
||||
<ol class="navItemConten1">
|
||||
{volist name="vo.children" id="voc"}
|
||||
<li>
|
||||
<a href="{$voc.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ol>
|
||||
{/if}
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- 顶部搜索/国家选择/商店-->
|
||||
<div class="nav3">
|
||||
<img src="__IMAGES__/icon-search.png" id="openModalBtn" class="searchimg" />
|
||||
<div class="choesCountry">
|
||||
<img src="__IMAGES__/icon-language.png" id="countrycheck" class="checkimg" />
|
||||
<!--国家选择 -->
|
||||
<div class="topCountry" id="top-country">
|
||||
<ul>
|
||||
<li class="closec">
|
||||
<span class="closecountrybt">×</span>
|
||||
</li>
|
||||
{volist name="header_languages" id="vo"}
|
||||
<a href="{$vo.lang_url}">
|
||||
<li>
|
||||
<div class="cico">
|
||||
<img src="{$vo.lang_icon}" class="countryimg" />
|
||||
</div>
|
||||
<p class="countryName">{$vo.country_en_name} - {$vo.lang_en_name}</p>
|
||||
</li>
|
||||
</a>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{eq name=":cookie('think_lang')" value="en-us"}
|
||||
{notempty name="basic_config['navigation_store_url']['value']"}
|
||||
<a class="storetopbt" href="{$basic_config['navigation_store_url']['value']}" target="_blank">
|
||||
<img src="__IMAGES__/shopico.png" class="storeImgico" />{:lang_i18n('店铺')}
|
||||
</a>
|
||||
{/notempty}
|
||||
{/eq}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索弹框-->
|
||||
<div class="searchmodalMian" id="scmodal">
|
||||
<div class="searchmodalct">
|
||||
<span class="close-btn">×</span>
|
||||
<input type="text" name="keywords" id="serrchinput" autocomplete="off" />
|
||||
<!-- 历史记录 -->
|
||||
<div class="searchhistory">
|
||||
<p class="h_title">{:lang_i18n('搜索记录')}</p>
|
||||
<ul></ul>
|
||||
</div>
|
||||
<div class="popProduct">
|
||||
<p class="h_title">{:lang_i18n('热销产品')}</p>
|
||||
<div class="popmain">
|
||||
{volist name="header_hot_products" id="vo"}
|
||||
<div class="popitem">
|
||||
<a href="{:url('product/detail', ['id' => $vo.id])}"><img src="{:thumb($vo.cover_image)}" class="popimg" /></a>
|
||||
<div class="productName">{$vo.name}</div>
|
||||
<div class="produc-dec">{$vo.short_name}</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('.header-PC #header .navItem>a').each(function(idx, item) {
|
||||
var _item = $(item);
|
||||
_item.removeClass('active');
|
||||
if (_item.attr('href') && compareUrls(location.href, _item.get(0).href)) {
|
||||
_item.addClass('active').siblings();
|
||||
}
|
||||
});
|
||||
|
||||
// 比较两个URL是否相等（支持只有path的情况，并处理有无.html后缀的情况）
|
||||
function compareUrls(url1, url2) {
|
||||
// 如果输入的是相对路径，添加当前域名
|
||||
if (!url1.startsWith('http')) {
|
||||
url1 = window.location.origin + (url1.startsWith('/') ? '' : '/') + url1;
|
||||
}
|
||||
if (!url2.startsWith('http')) {
|
||||
url2 = window.location.origin + (url2.startsWith('/') ? '' : '/') + url2;
|
||||
}
|
||||
|
||||
// 将两个URL转换为URL对象
|
||||
const urlObj1 = new URL(url1);
|
||||
const urlObj2 = new URL(url2);
|
||||
|
||||
// 获取路径名并移除末尾的斜杠
|
||||
let path1 = urlObj1.pathname.replace(/\/$/, '');
|
||||
let path2 = urlObj2.pathname.replace(/\/$/, '');
|
||||
|
||||
// 移除.html后缀
|
||||
path1 = path1.replace(/\.html$/, '');
|
||||
path2 = path2.replace(/\.html$/, '');
|
||||
|
||||
// 比较处理后的路径
|
||||
return path1 === path2;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// 搜索历史记录处理
|
||||
function history(keywords) {
|
||||
var history = localStorage.getItem('header_search_keywords');
|
||||
if (!history) {
|
||||
history = [];
|
||||
} else {
|
||||
history = JSON.parse(history);
|
||||
}
|
||||
// 记录搜索关键词
|
||||
if (keywords) {
|
||||
if (history.includes(keywords)) {
|
||||
history.splice(history.indexOf(keywords), 1);
|
||||
}
|
||||
history.unshift(keywords);
|
||||
if (history.length > 3) {
|
||||
history.pop();
|
||||
}
|
||||
localStorage.setItem('header_search_keywords', JSON.stringify(history));
|
||||
return history;
|
||||
}
|
||||
|
||||
// 回显搜索历史记录
|
||||
history.forEach(function (item) {
|
||||
$('.searchhistory ul').append('<li><a href="{:url(\'product/search\')}?keywords=' + item + '">' + item + '</a></li>');
|
||||
});
|
||||
|
||||
return history;
|
||||
}
|
||||
|
||||
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
|
||||
function handleHover($element, $content) {
|
||||
// 同时支持鼠标悬停和点击事件
|
||||
$element
|
||||
.mouseenter(function () {
|
||||
$content.stop(true, true).slideDown(60);
|
||||
})
|
||||
.mouseleave(function () {
|
||||
$content.stop(true, true).slideUp(60);
|
||||
})
|
||||
.click(function (e) {
|
||||
// 阻止链接默认跳转（如果有链接的话）
|
||||
if ($content.is(':visible')) {
|
||||
$content.stop(true, true).slideUp(60);
|
||||
} else {
|
||||
$content.stop(true, true).slideDown(60);
|
||||
}
|
||||
// 防止点击事件冒泡到a标签
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
// 处理产品列表的下拉菜单
|
||||
var $firstNav = $('.navItem').eq(0);
|
||||
if ($firstNav.find('.navItemConten').length) {
|
||||
handleHover($firstNav, $firstNav.find('.navItemConten'));
|
||||
}
|
||||
|
||||
// 鼠标移入左侧子菜单切换显示
|
||||
$('.navItem_cyleft li').mouseenter(function () {
|
||||
$(this).addClass('it_active').siblings().removeClass('it_active');
|
||||
$('.navItem_cyright').hide();
|
||||
$('.navItem_cyright').eq($(this).index()).show();
|
||||
});
|
||||
|
||||
// 动态处理所有带有navItemConten1的导航项
|
||||
$('.navItem').each(function () {
|
||||
var $this = $(this);
|
||||
var $dropdown = $this.find('.navItemConten1');
|
||||
// 只给有下拉菜单的导航项绑定事件
|
||||
if ($dropdown.length) {
|
||||
handleHover($this, $dropdown);
|
||||
}
|
||||
});
|
||||
|
||||
// 点击搜索
|
||||
$('#openModalBtn').click(function () {
|
||||
$('#scmodal').toggle();
|
||||
});
|
||||
$('.close-btn').click(function () {
|
||||
$('#scmodal').hide();
|
||||
});
|
||||
|
||||
// 点击空白处关闭下拉菜单
|
||||
$(document).click(function () {
|
||||
$('.navItemConten, .navItemConten1, #top-country').slideUp(60);
|
||||
});
|
||||
|
||||
// 防止下拉菜单内部点击触发空白处关闭事件
|
||||
$('.navItemConten, .navItemConten1, #top-country').click(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// 搜索历史记录回显
|
||||
history();
|
||||
|
||||
// 执行搜索
|
||||
$('#serrchinput').keydown(function (event) {
|
||||
if (event.originalEvent.keyCode == 13) {
|
||||
var keywords = $(this).val();
|
||||
if (keywords == '') {
|
||||
return false;
|
||||
}
|
||||
// 记录搜索关键词
|
||||
history(keywords);
|
||||
|
||||
// 跳转到搜索页面
|
||||
window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
|
||||
}
|
||||
});
|
||||
|
||||
// 点击选择国家
|
||||
$('#countrycheck').click(function (e) {
|
||||
$('#top-country').toggle();
|
||||
e.stopPropagation();
|
||||
});
|
||||
$('.closecountrybt').click(function () {
|
||||
$('#top-country').hide();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,893 +0,0 @@
|
||||
<link rel="stylesheet" href="__CSS__/header.css">
|
||||
<div class="header" >
|
||||
<!-- 导航外容器：1920px宽，下拉框基于此定位 -->
|
||||
<div class="header-nav-outer" >
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="header-nav-bar">
|
||||
<div style="display:flex;align-items:center">
|
||||
<a href="/" style="display:flex;align-items:center">
|
||||
<img src="__IMAGES__/logo.png" alt="orico" class="header-log">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-nav-items">
|
||||
{if condition="!empty($header_categorys)"}
|
||||
<div class="header-nav-item">
|
||||
<div class="header-nav-title">{:lang_i18n('产品列表')}</div>
|
||||
<div class="header-dropdown" >
|
||||
<div class="header-dropdown-tabs">
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="header-tab-item {if condition="$idx == 1"}active{/if}" data-tab="tag-{$vo.id}">{$vo.name}</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="header-dropdown-content header-tab-content {if condition="$idx == 1"}active{/if}" id="tag-{$vo.id}">
|
||||
<div class="header-dropdown-category">
|
||||
{if condition="!empty($vo.children)"}
|
||||
{volist name="vo.children" id="vc"}
|
||||
<div class="header-category-box">
|
||||
{volist name="vc" id="vcc"}
|
||||
<div class="header-category-block">
|
||||
<div class="header-category-title">
|
||||
<a href="{:url('product/subcategory', ['id' => $vcc.id])}" target="_self">
|
||||
{$vcc.name}
|
||||
</a>
|
||||
</div>
|
||||
<ul class="header-category-list">
|
||||
{if condition="!empty($vcc.children)"}
|
||||
{volist name="vcc.children" id="vccc" length="4"}
|
||||
<li class="header-category-item">
|
||||
<a href="{:url('product/subcategory', ['id' => $vccc.id])}" target="_self">
|
||||
{$vccc.name}
|
||||
</a>
|
||||
</li>
|
||||
{/volist}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="header-dropdown-products">
|
||||
{if condition="!empty($vo.recommends)"}
|
||||
{volist name="vo.recommends" id="recommend"}
|
||||
<div class="header-product-card">
|
||||
<a href="{$recommend.link}">
|
||||
<div class="header-product-img">
|
||||
<img src="{$recommend.image}" alt="">
|
||||
</div>
|
||||
<div class="header-product-name">{$recommend.title}</div>
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{if condition="!empty($header_navigation)"}
|
||||
{volist name="header_navigation" id="nav"}
|
||||
<div class="header-nav-item">
|
||||
{if condition="empty($nav.children)"}
|
||||
<div class="header-nav-title">
|
||||
<a href="{$nav.link}" target="{$nav.blank==1?'_blank':'_self'}">{$nav.name}</a>
|
||||
</div>
|
||||
{else /}
|
||||
<div class="header-nav-title">{$nav.name}</div>
|
||||
<!-- style="display: block;" -->
|
||||
<div class="header-dropdown" >
|
||||
<div class="header-dropdown-content1">
|
||||
{volist name="nav.children" id="child"}
|
||||
<div class="header-product-card-1">
|
||||
<a href="{$child.link}" target="{$child.blank==1?'_blank':'_self'}">
|
||||
<div class="header-product-img-1">
|
||||
<img src="{$child.image}" alt="">
|
||||
</div>
|
||||
<div class="header-product-title-1">{$child.name}</div>
|
||||
<div class="header-product-name-1">{$child.desc}</div>
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- 右侧功能按钮 -->
|
||||
<div class="header-nav-actions">
|
||||
<div class="header-search-wrapper">
|
||||
<span class="header-nav-btn">
|
||||
<img src="__IMAGES__/s1.png" alt="" style="width: 17px;height: 17px;">
|
||||
</span>
|
||||
<div class="header-search-dropdown" id="searchDropdown">
|
||||
<span class="header-search-dropdown-delete-icon">✕</span>
|
||||
<div class="header-search-input-wrapper">
|
||||
<input type="text" class="header-search-input" placeholder="{:lang_i18n('搜索产品、分类...')}">
|
||||
<button class="header-search-submit">{:lang_i18n('搜索')}</button>
|
||||
</div>
|
||||
<div class="header-search-history" id="searchHistory">
|
||||
<div class="header-history-title">
|
||||
<span>{:lang_i18n('最近搜索')}</span>
|
||||
<span class="header-clear-history" id="clearHistory">{:lang_i18n('清空')}</span>
|
||||
</div>
|
||||
<div class="header-history-list" id="historyList"></div>
|
||||
</div>
|
||||
<div class="header-hot-products">
|
||||
<div class="header-hot-title">{:lang_i18n('热销产品')}</div>
|
||||
<div class="header-hot-product-list">
|
||||
{if condition="!empty($header_hot_products)"}
|
||||
{volist name="header_hot_products" id="pro"}
|
||||
<div class="header-hot-product-item" data-keyword="keyword-{$pro.id}">
|
||||
<div class="header-hot-product-img">
|
||||
<a href="{:url('product/detail', ['id' => $pro.id])}">
|
||||
<img src="{:thumb($pro.cover_image)}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-hot-product-name">{$pro.name}</div>
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-lang-wrapper" >
|
||||
<span class="header-nav-btn">
|
||||
<img src="__IMAGES__/l1.png" alt="" style="width: 20px;height:20px">
|
||||
</span>
|
||||
<div class="header-lang-dropdown" id="langDropdown">
|
||||
<span class="header-lang-dropdown-delete-icon">✕</span>
|
||||
{volist name="header_languages" id="vo"}
|
||||
<a href="{$vo.lang_url}" class="header-lang-item" data-lang="zh-CN" target="_self">
|
||||
<img src="{$vo.lang_icon}" alt="">
|
||||
|
||||
{eq name=":cookie('think_lang')" value="zh-cn"}
|
||||
<span class="header-lang-code">{$vo.country_zh_name}</span>
|
||||
<span class="header-lang-name">{$vo.lang_name}</span>
|
||||
{else}
|
||||
<span class="header-lang-code">{$vo.country_en_name}</span>
|
||||
<span class="header-lang-name-en">{$vo.lang_en_name}</span>
|
||||
{/eq}
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-buy-wrapper">
|
||||
<button class="header-buy-btn">
|
||||
<img src="__IMAGES__/g1.png" alt="" style="margin-right: 3px;">
|
||||
{:lang_i18n('购买')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购买下拉框 -->
|
||||
<div class="header-buy-dropdown" id="buyDropdown">
|
||||
<div class="header-buy-dropdown-content">
|
||||
{if condition="!empty($header_mall_entrance)"}
|
||||
{volist name="header_mall_entrance" id="ma"}
|
||||
<a class="header-buy-product-card" target="_self" href="{$ma.link}">
|
||||
<div class="header-buy-product-img">
|
||||
<img class="header-default-img" src="{$ma.image}" alt="{$ma.name}">
|
||||
{if condition="!empty($ma.hover_image)"}
|
||||
<img class="header-hover-img" src="{$ma.hover_image}" alt="{$ma.name}">
|
||||
{/if}
|
||||
</div>
|
||||
<div class="header-buy-product-title">{$ma.name}</div>
|
||||
</a>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100vw;height: 64px;"></div>
|
||||
<div id="mhk"></div>
|
||||
<script>
|
||||
|
||||
// 获取所有包含商品卡片的元素
|
||||
const productCards = document.querySelectorAll('.header-buy-product-card');
|
||||
|
||||
productCards.forEach(card => {
|
||||
// 获取卡片内的图片容器和两张图片
|
||||
const imgContainer = card.querySelector('.header-buy-product-img');
|
||||
const defaultImg = imgContainer?.querySelector('.header-default-img');
|
||||
const hoverImg = imgContainer?.querySelector('.header-hover-img');
|
||||
|
||||
// 检查悬浮图是否存在（因为HTML中用了if判断，所以可能有也可能没有这个元素）
|
||||
const hasHoverImg = hoverImg !== null;
|
||||
|
||||
// 如果没有悬浮图，不需要任何交互，直接返回
|
||||
if (!hasHoverImg) return;
|
||||
|
||||
// 初始状态确保普通图显示，悬浮图隐藏
|
||||
defaultImg.style.opacity = '1';
|
||||
hoverImg.style.opacity = '0';
|
||||
|
||||
// 鼠标移入事件：显示悬浮图，隐藏普通图
|
||||
card.addEventListener('mouseenter', () => {
|
||||
defaultImg.style.opacity = '0';
|
||||
hoverImg.style.opacity = '1';
|
||||
});
|
||||
|
||||
// 鼠标移出事件：恢复普通图，隐藏悬浮图
|
||||
card.addEventListener('mouseleave', () => {
|
||||
defaultImg.style.opacity = '1';
|
||||
hoverImg.style.opacity = '0';
|
||||
});
|
||||
});
|
||||
//产品列表在hover复位tabs选择
|
||||
const productNavContainer = document.querySelector('.header-nav-item:first-child');
|
||||
|
||||
if (productNavContainer) {
|
||||
productNavContainer.addEventListener('mouseleave', () => {
|
||||
// 延迟执行，确保下拉菜单已经隐藏
|
||||
setTimeout(() => {
|
||||
const tabs = document.querySelectorAll('.header-tab-item');
|
||||
const contents = document.querySelectorAll('.header-tab-content');
|
||||
|
||||
// 重置到第一个tab
|
||||
if (tabs.length > 0 && tabs[0]) {
|
||||
tabs.forEach(tab => tab.classList.remove('active'));
|
||||
contents.forEach(content => content.classList.remove('active'));
|
||||
|
||||
tabs[0].classList.add('active');
|
||||
const firstContentId = tabs[0].getAttribute('data-tab');
|
||||
const firstContent = document.getElementById(firstContentId);
|
||||
if (firstContent) firstContent.classList.add('active');
|
||||
}
|
||||
}, 350);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
const tabItems = document.querySelectorAll('.header-tab-item');
|
||||
const tabContents = document.querySelectorAll('.header-tab-content');
|
||||
|
||||
tabItems.forEach(tab =>
|
||||
{
|
||||
tab.addEventListener('click', () =>
|
||||
{
|
||||
tabItems.forEach(item => item.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
const tabId = tab.getAttribute('data-tab');
|
||||
tabContents.forEach(content =>
|
||||
{
|
||||
content.classList.remove('active');
|
||||
if (content.id === tabId) {
|
||||
content.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let searchHistory = JSON.parse(localStorage.getItem('searchHistory') || '[]');
|
||||
|
||||
function renderHistory ()
|
||||
{
|
||||
const historyList = document.getElementById('historyList');
|
||||
const historySection = document.getElementById('searchHistory');
|
||||
if (searchHistory.length === 0) {
|
||||
historySection.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
historySection.style.display = 'block';
|
||||
historyList.innerHTML = searchHistory.map((item, index) => `
|
||||
<div class="header-history-item" data-keyword="${item}">
|
||||
<span>${item}</span>
|
||||
<span class="header-delete-icon" data-index="${index}">✕</span>
|
||||
</div>
|
||||
`).join('');
|
||||
document.querySelectorAll('.header-history-item').forEach(item =>
|
||||
{
|
||||
const keyword = item.getAttribute('data-keyword');
|
||||
const deleteBtn = item.querySelector('.header-delete-icon');
|
||||
item.addEventListener('click', (e) =>
|
||||
{
|
||||
if (e.target === deleteBtn) return;
|
||||
performSearch(keyword);
|
||||
});
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
const index = parseInt(deleteBtn.getAttribute('data-index'));
|
||||
searchHistory.splice(index, 1);
|
||||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||||
renderHistory();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addToHistory (keyword)
|
||||
{
|
||||
if (!keyword.trim()) return;
|
||||
searchHistory = searchHistory.filter(item => item !== keyword);
|
||||
searchHistory.unshift(keyword);
|
||||
if (searchHistory.length > 10) searchHistory.pop();
|
||||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||||
renderHistory();
|
||||
}
|
||||
|
||||
const clearHistoryBtn = document.getElementById('clearHistory');
|
||||
if (clearHistoryBtn) {
|
||||
clearHistoryBtn.addEventListener('click', () =>
|
||||
{
|
||||
searchHistory = [];
|
||||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||||
renderHistory();
|
||||
});
|
||||
}
|
||||
|
||||
function performSearch (keyword)
|
||||
{
|
||||
if (keyword.trim()) {
|
||||
addToHistory(keyword);
|
||||
window.location.href = "{:url('product/search')}?keywords=" + encodeURIComponent(keyword);
|
||||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||||
if (searchInput) searchInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
const searchBtn = document.querySelector('.header-search-wrapper .header-nav-btn');
|
||||
const searchDropdown = document.getElementById('searchDropdown');
|
||||
const searchInput = document.querySelector('.header-search-input');
|
||||
const searchSubmit = document.querySelector('.header-search-submit');
|
||||
const langDropdown = document.getElementById('langDropdown');
|
||||
const buyDropdown = document.getElementById('buyDropdown');
|
||||
|
||||
const langCloseBtn = document.querySelector('.header-lang-dropdown-delete-icon');
|
||||
const searchCloseBtn = document.querySelector('.header-search-dropdown-delete-icon');
|
||||
|
||||
// 语言关闭按钮
|
||||
if (langCloseBtn && langCloseBtn) {
|
||||
langCloseBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
langDropdown.classList.remove('show');
|
||||
|
||||
});
|
||||
}
|
||||
//搜索关闭
|
||||
if (searchCloseBtn && searchCloseBtn) {
|
||||
searchCloseBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
|
||||
e.stopPropagation();
|
||||
searchDropdown.classList.remove('show');
|
||||
|
||||
});
|
||||
}
|
||||
// 鼠标移入导航项时，关闭购买下拉框
|
||||
const navItems = document.querySelectorAll('.header-nav-item');
|
||||
navItems.forEach(item =>
|
||||
{
|
||||
|
||||
item.addEventListener('mouseenter', () =>
|
||||
{
|
||||
|
||||
buyDropdown.classList.remove('show');
|
||||
langDropdown.classList.remove('show');
|
||||
searchDropdown.classList.remove('show');
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
if (searchBtn && searchDropdown) {
|
||||
searchBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
if (langDropdown) langDropdown.classList.remove('show');
|
||||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||||
searchDropdown.classList.toggle('show');
|
||||
if (searchDropdown.classList.contains('show')) {
|
||||
renderHistory();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (searchSubmit) {
|
||||
searchSubmit.addEventListener('click', () =>
|
||||
{
|
||||
performSearch(searchInput.value);
|
||||
});
|
||||
}
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('keypress', (e) =>
|
||||
{
|
||||
if (e.key === 'Enter') {
|
||||
performSearch(searchInput.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const hotProducts = document.querySelectorAll('.header-hot-product-item');
|
||||
hotProducts.forEach(product =>
|
||||
{
|
||||
product.addEventListener('click', () =>
|
||||
{
|
||||
const keyword = product.getAttribute('data-keyword');
|
||||
if (keyword) performSearch(keyword);
|
||||
});
|
||||
});
|
||||
|
||||
const langBtn = document.querySelector('.header-lang-wrapper .header-nav-btn');
|
||||
if (langBtn && langDropdown) {
|
||||
langBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||||
langDropdown.classList.toggle('show');
|
||||
});
|
||||
}
|
||||
|
||||
const buyWrapper = document.querySelector('.header-buy-wrapper');
|
||||
if (buyWrapper && buyDropdown) {
|
||||
buyWrapper.addEventListener('click', () =>
|
||||
{
|
||||
// buyDropdown.classList.add('show');
|
||||
buyDropdown.classList.toggle('show');
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('click', (e) =>
|
||||
{
|
||||
if (!e.target.closest('.header-search-wrapper')) {
|
||||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||||
}
|
||||
if (!e.target.closest('.header-lang-wrapper')) {
|
||||
if (langDropdown) langDropdown.classList.remove('show');
|
||||
}
|
||||
if (!e.target.closest('.header-buy-wrapper')) {
|
||||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
if (searchDropdown) searchDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||||
if (langDropdown) langDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||||
if (buyDropdown) buyDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||||
|
||||
renderHistory();
|
||||
|
||||
|
||||
// ========== 蒙版层功能（支持所有弹窗，包括导航悬停下拉） ==========
|
||||
const mhk = document.getElementById('mhk');
|
||||
const body = document.body;
|
||||
|
||||
|
||||
|
||||
// 获取滚动条宽度（防止打开弹窗时页面抖动）
|
||||
function getScrollbarWidth() {
|
||||
const scrollDiv = document.createElement('div');
|
||||
scrollDiv.style.cssText = `
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
`;
|
||||
document.body.appendChild(scrollDiv);
|
||||
const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
document.body.removeChild(scrollDiv);
|
||||
return scrollbarWidth;
|
||||
}
|
||||
|
||||
// 打开蒙版层的函数
|
||||
function openOverlay() {
|
||||
if (mhk && mhk.style.display !== 'block') {
|
||||
mhk.style.display = 'block';
|
||||
body.style.overflow = 'hidden';
|
||||
body.style.paddingRight = getScrollbarWidth() + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭蒙版层的函数
|
||||
function closeOverlay() {
|
||||
if (mhk && mhk.style.display === 'block') {
|
||||
// 检查是否还有其他弹窗打开（包括导航下拉菜单）
|
||||
const isBuyOpen = buyDropdown && buyDropdown.classList.contains('show');
|
||||
const isSearchOpen = searchDropdown && searchDropdown.classList.contains('show');
|
||||
const isLangOpen = langDropdown && langDropdown.classList.contains('show');
|
||||
|
||||
// 检查导航下拉菜单是否打开（通过检查是否有 active 或显示状态）
|
||||
const productDropdown = document.querySelector('.header-nav-item:first-child .header-dropdown');
|
||||
const isProductDropdownOpen = productDropdown && window.getComputedStyle(productDropdown).display !== 'none';
|
||||
|
||||
// 检查其他导航下拉菜单
|
||||
let isOtherNavOpen = false;
|
||||
const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
|
||||
otherNavItems.forEach(item => {
|
||||
const dropdown = item.querySelector('.header-dropdown');
|
||||
if (dropdown && window.getComputedStyle(dropdown).display !== 'none') {
|
||||
isOtherNavOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 只有当所有弹窗和导航下拉菜单都关闭时，才关闭蒙版层
|
||||
if (!isBuyOpen && !isSearchOpen && !isLangOpen && !isProductDropdownOpen && !isOtherNavOpen) {
|
||||
mhk.style.display = 'none';
|
||||
body.style.overflow = '';
|
||||
body.style.paddingRight = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 强制关闭所有弹窗和蒙版
|
||||
function closeAllDropdownsAndOverlay() {
|
||||
let anyOpen = false;
|
||||
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
anyOpen = true;
|
||||
}
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
anyOpen = true;
|
||||
}
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
anyOpen = true;
|
||||
}
|
||||
|
||||
// 关闭产品列表导航的下拉菜单（通过移除hover触发的显示）
|
||||
const productNavItem = document.querySelector('.header-nav-item:first-child');
|
||||
if (productNavItem) {
|
||||
const productDropdown = productNavItem.querySelector('.header-dropdown');
|
||||
if (productDropdown && window.getComputedStyle(productDropdown).display !== 'none') {
|
||||
productDropdown.style.display = '';
|
||||
anyOpen = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭其他导航的下拉菜单
|
||||
const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
|
||||
otherNavItems.forEach(item => {
|
||||
const dropdown = item.querySelector('.header-dropdown');
|
||||
if (dropdown && window.getComputedStyle(dropdown).display !== 'none') {
|
||||
dropdown.style.display = '';
|
||||
anyOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (anyOpen) {
|
||||
closeOverlay();
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 监听导航下拉菜单的显示/隐藏 ==========
|
||||
|
||||
// 1. 产品列表导航（第一个导航项）
|
||||
const productNavItem = document.querySelector('.header-nav-item:first-child');
|
||||
if (productNavItem) {
|
||||
const productDropdown = productNavItem.querySelector('.header-dropdown');
|
||||
|
||||
// 监听鼠标进入产品列表导航
|
||||
productNavItem.addEventListener('mouseenter', () => {
|
||||
// 当导航下拉菜单显示时，关闭其他点击弹窗
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
}
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
}
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
}
|
||||
// 打开蒙版层
|
||||
openOverlay();
|
||||
});
|
||||
|
||||
// 监听鼠标离开产品列表导航（延迟关闭，给用户移动到下拉菜单的时间）
|
||||
productNavItem.addEventListener('mouseleave', () => {
|
||||
setTimeout(() => {
|
||||
// 检查鼠标是否在下拉菜单上
|
||||
if (productDropdown) {
|
||||
const isHoveringDropdown = productDropdown.matches(':hover');
|
||||
const isHoveringNav = productNavItem.matches(':hover');
|
||||
if (!isHoveringDropdown && !isHoveringNav) {
|
||||
closeOverlay();
|
||||
}
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 监听下拉菜单的鼠标离开事件
|
||||
if (productDropdown) {
|
||||
productDropdown.addEventListener('mouseleave', () => {
|
||||
setTimeout(() => {
|
||||
const isHoveringNav = productNavItem.matches(':hover');
|
||||
if (!isHoveringNav) {
|
||||
closeOverlay();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 其他导航项（有下拉菜单的）
|
||||
const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
|
||||
otherNavItems.forEach(item => {
|
||||
const hasDropdown = item.querySelector('.header-dropdown');
|
||||
if (hasDropdown) {
|
||||
const dropdown = hasDropdown;
|
||||
|
||||
// 监听鼠标进入导航项
|
||||
item.addEventListener('mouseenter', () => {
|
||||
// 关闭其他点击弹窗
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
}
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
}
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
}
|
||||
// 打开蒙版层
|
||||
openOverlay();
|
||||
});
|
||||
|
||||
// 监听鼠标离开导航项
|
||||
item.addEventListener('mouseleave', () => {
|
||||
setTimeout(() => {
|
||||
if (dropdown) {
|
||||
const isHoveringDropdown = dropdown.matches(':hover');
|
||||
const isHoveringNav = item.matches(':hover');
|
||||
if (!isHoveringDropdown && !isHoveringNav) {
|
||||
closeOverlay();
|
||||
}
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 监听下拉菜单的鼠标离开
|
||||
if (dropdown) {
|
||||
dropdown.addEventListener('mouseleave', () => {
|
||||
setTimeout(() => {
|
||||
const isHoveringNav = item.matches(':hover');
|
||||
if (!isHoveringNav) {
|
||||
closeOverlay();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ========== 重新绑定所有点击弹窗事件 ==========
|
||||
|
||||
// 1. 购买弹窗
|
||||
const buyWrapperNew = document.querySelector('.header-buy-wrapper');
|
||||
if (buyWrapperNew && buyDropdown) {
|
||||
const newBuyWrapper = buyWrapperNew.cloneNode(true);
|
||||
buyWrapperNew.parentNode.replaceChild(newBuyWrapper, buyWrapperNew);
|
||||
|
||||
newBuyWrapper.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = buyDropdown.classList.contains('show');
|
||||
|
||||
if (isOpen) {
|
||||
buyDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
} else {
|
||||
// 关闭其他弹窗和导航下拉菜单
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
}
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
}
|
||||
// 关闭导航下拉菜单
|
||||
closeAllNavDropdowns();
|
||||
|
||||
buyDropdown.classList.add('show');
|
||||
openOverlay();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 2. 搜索弹窗
|
||||
const searchBtnNew = document.querySelector('.header-search-wrapper .header-nav-btn');
|
||||
if (searchBtnNew && searchDropdown) {
|
||||
const newSearchBtn = searchBtnNew.cloneNode(true);
|
||||
searchBtnNew.parentNode.replaceChild(newSearchBtn, searchBtnNew);
|
||||
|
||||
newSearchBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = searchDropdown.classList.contains('show');
|
||||
|
||||
if (isOpen) {
|
||||
searchDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
} else {
|
||||
// 关闭其他弹窗和导航下拉菜单
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
}
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
}
|
||||
// 关闭导航下拉菜单
|
||||
closeAllNavDropdowns();
|
||||
|
||||
searchDropdown.classList.add('show');
|
||||
openOverlay();
|
||||
if (typeof renderHistory === 'function') {
|
||||
renderHistory();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 3. 语言弹窗
|
||||
const langBtnNew = document.querySelector('.header-lang-wrapper .header-nav-btn');
|
||||
if (langBtnNew && langDropdown) {
|
||||
const newLangBtn = langBtnNew.cloneNode(true);
|
||||
langBtnNew.parentNode.replaceChild(newLangBtn, langBtnNew);
|
||||
|
||||
newLangBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = langDropdown.classList.contains('show');
|
||||
|
||||
if (isOpen) {
|
||||
langDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
} else {
|
||||
// 关闭其他弹窗和导航下拉菜单
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
}
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
}
|
||||
// 关闭导航下拉菜单
|
||||
closeAllNavDropdowns();
|
||||
|
||||
langDropdown.classList.add('show');
|
||||
openOverlay();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 辅助函数：关闭所有导航下拉菜单
|
||||
function closeAllNavDropdowns() {
|
||||
// 关闭产品列表导航下拉菜单
|
||||
const productNavItem = document.querySelector('.header-nav-item:first-child');
|
||||
if (productNavItem) {
|
||||
const productDropdown = productNavItem.querySelector('.header-dropdown');
|
||||
if (productDropdown) {
|
||||
productDropdown.style.display = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭其他导航下拉菜单
|
||||
const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
|
||||
otherNavItems.forEach(item => {
|
||||
const dropdown = item.querySelector('.header-dropdown');
|
||||
if (dropdown) {
|
||||
dropdown.style.display = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ========== 关闭按钮事件重新绑定 ==========
|
||||
|
||||
// 语言关闭按钮
|
||||
const langCloseBtnNew = document.querySelector('.header-lang-dropdown-delete-icon');
|
||||
if (langCloseBtnNew && langDropdown) {
|
||||
const newLangCloseBtn = langCloseBtnNew.cloneNode(true);
|
||||
langCloseBtnNew.parentNode.replaceChild(newLangCloseBtn, langCloseBtnNew);
|
||||
|
||||
newLangCloseBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
langDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索关闭按钮
|
||||
const searchCloseBtnNew = document.querySelector('.header-search-dropdown-delete-icon');
|
||||
if (searchCloseBtnNew && searchDropdown) {
|
||||
const newSearchCloseBtn = searchCloseBtnNew.cloneNode(true);
|
||||
searchCloseBtnNew.parentNode.replaceChild(newSearchCloseBtn, searchCloseBtnNew);
|
||||
|
||||
newSearchCloseBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
searchDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
});
|
||||
}
|
||||
|
||||
// ========== 全局点击事件 ==========
|
||||
document.addEventListener('click', (e) => {
|
||||
// 检查是否点击在购买区域外
|
||||
if (!e.target.closest('.header-buy-wrapper') && !e.target.closest('#buyDropdown')) {
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
// 检查是否点击在搜索区域外
|
||||
if (!e.target.closest('.header-search-wrapper') && !e.target.closest('#searchDropdown')) {
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
// 检查是否点击在语言区域外
|
||||
if (!e.target.closest('.header-lang-wrapper') && !e.target.closest('#langDropdown')) {
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
// 检查是否点击在导航区域外（如果点击在导航外部，关闭导航下拉菜单）
|
||||
if (!e.target.closest('.header-nav-item')) {
|
||||
closeAllNavDropdowns();
|
||||
closeOverlay();
|
||||
}
|
||||
});
|
||||
|
||||
// ========== 蒙版层点击事件 ==========
|
||||
if (mhk) {
|
||||
mhk.addEventListener('click', () => {
|
||||
closeAllDropdownsAndOverlay();
|
||||
closeAllNavDropdowns();
|
||||
closeOverlay();
|
||||
});
|
||||
}
|
||||
|
||||
// ========== 监听弹窗状态变化 ==========
|
||||
function setupDropdownObserver(dropdown, name) {
|
||||
if (!dropdown) return;
|
||||
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.attributeName === 'class') {
|
||||
if (!dropdown.classList.contains('show')) {
|
||||
closeOverlay();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
observer.observe(dropdown, { attributes: true });
|
||||
}
|
||||
|
||||
setupDropdownObserver(buyDropdown, 'buy');
|
||||
setupDropdownObserver(searchDropdown, 'search');
|
||||
setupDropdownObserver(langDropdown, 'lang');
|
||||
|
||||
// ========== 页面卸载时恢复滚动 ==========
|
||||
window.addEventListener('beforeunload', () => {
|
||||
if (body) {
|
||||
body.style.overflow = '';
|
||||
body.style.paddingRight = '';
|
||||
}
|
||||
});
|
||||
|
||||
// 确保蒙版层初始状态正确
|
||||
closeOverlay();
|
||||
</script>
|
||||
Reference in New Issue
Block a user