jsasg
62db7e8cb2
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
469 lines
17 KiB
HTML
469 lines
17 KiB
HTML
<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">
|
|
{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">
|
|
{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/}
|
|
<!--悬浮图-->
|
|
<div class="modal-item">
|
|
<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');
|
|
|
|
// 打开菜单
|
|
navBtn.addEventListener('click', function (e)
|
|
{
|
|
e.stopPropagation();
|
|
// 关闭所有弹窗
|
|
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';
|
|
});
|
|
|
|
// 处理所有菜单项
|
|
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) {
|
|
box.addEventListener('click', function (e)
|
|
{
|
|
e.stopPropagation();
|
|
subMenu.classList.toggle('show');
|
|
item.classList.toggle('open');
|
|
});
|
|
} 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();
|
|
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();
|
|
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();
|
|
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';
|
|
}
|
|
|
|
}
|
|
}12
|
|
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);
|
|
}
|
|
});
|
|
});
|
|
</script>
|