Files
orico-official-website/app/index/view/mobile/public/header.html
jsasg 1d62a64014
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
删除无用备份
2026-04-16 15:02:02 +08:00

663 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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" style="height: 100vh; overflow-y: scroll;-webkit-overflow-scrolling: touch;padding-bottom:9rem;">
<!-- 产品列表 - 有子菜单 -->
<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)"}
<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/}
<!--悬浮图-->
<div class="modal-item" data-link="{$ma.link}" style="cursor: pointer;">
<img src="{$ma.image}" alt="" class="modal-item-img">
<div class="modal-item-title">{$ma.name}</div>
</div>
<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) {
// 禁止body滚动
disableBodyScroll();
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 '&amp;';
if (m === '<') return '&lt;';
if (m === '>') return '&gt;';
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 initCartModalHover() {
const modalItems = document.querySelectorAll('#cartModal .modal-item');
modalItems.forEach(function(item) {
// 查找当前item中是否有悬浮图隐藏的那个
const defaultImg = item.querySelector('.modal-item-img');
const hiddenItem = item.nextElementSibling;
let hoverImg = null;
// 检查下一个元素是否是隐藏的悬浮图容器
if (hiddenItem && hiddenItem.classList && hiddenItem.classList.contains('modal-item') && hiddenItem.style.display === 'none') {
hoverImg = hiddenItem.querySelector('.modal-item-img');
}
// 如果有悬浮图
if (hoverImg && defaultImg) {
const originalSrc = defaultImg.src;
const hoverSrc = hoverImg.src;
const link = item.getAttribute('data-link');
// 移除原有的href因为需要悬浮图效果
item.style.cursor = 'pointer';
// 鼠标移入:显示悬浮图
item.addEventListener('mouseenter', function(e) {
e.stopPropagation();
defaultImg.src = hoverSrc;
});
// 鼠标移出:恢复普通图
item.addEventListener('mouseleave', function(e) {
e.stopPropagation();
defaultImg.src = originalSrc;
});
// 点击事件:如果有链接就跳转
item.addEventListener('click', function(e) {
e.stopPropagation();
if (link && link !== '#') {
window.location.href = link;
}
});
} else {
// 没有悬浮图,保持原有链接
const link = item.getAttribute('href') || item.getAttribute('data-link');
if (link && link !== '#') {
item.addEventListener('click', function(e) {
e.stopPropagation();
window.location.href = link;
});
}
}
});
}
// 在购物车弹窗打开时初始化悬浮图功能
const cartModalObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
if (cartModal.classList.contains('show')) {
setTimeout(function() {
initCartModalHover();
}, 50);
}
}
});
});
if (cartModal) {
cartModalObserver.observe(cartModal, { attributes: true });
// 如果弹窗默认是打开的,也初始化一次
if (cartModal.classList.contains('show')) {
initCartModalHover();
}
}
});
</script>