jsasg
184e81737e
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
893 lines
25 KiB
HTML
893 lines
25 KiB
HTML
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: sans-serif
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.mobile-header-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 46px;
|
||
padding: 0 17px;
|
||
background: #fff;
|
||
/* position: relative; */
|
||
position: fixed;
|
||
top:0;
|
||
left:0;
|
||
z-index: 100;
|
||
width: 100%;
|
||
}
|
||
|
||
.mobile-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-img,
|
||
.nav-search,
|
||
.nav-lang,
|
||
.nav-img1,
|
||
.nav-card {
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-log {
|
||
width: 90px;
|
||
height: 22px;
|
||
margin-left: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-lang {
|
||
margin: 0 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 下拉菜单 */
|
||
.nav-dropdown-menu {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-top: 1px solid #eee;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
display: none;
|
||
position: absolute;
|
||
top: 46px;
|
||
left: 0;
|
||
z-index: 99;
|
||
}
|
||
|
||
.nav-dropdown-menu.show {
|
||
display: block;
|
||
}
|
||
|
||
/* 所有菜单项统一用 div */
|
||
.menu-item {
|
||
margin: 0 22px;
|
||
font-size: 15px;
|
||
color: #333;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.menu-item-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 0;
|
||
}
|
||
|
||
.menu-item-img {
|
||
width: 14px;
|
||
height: 14px;
|
||
display: block;
|
||
}
|
||
|
||
/* 有子菜单才显示箭头 */
|
||
.has-child .menu-item-img {
|
||
display: block;
|
||
}
|
||
|
||
/* 无子菜单隐藏箭头 */
|
||
.no-child .menu-item-img {
|
||
display: none;
|
||
}
|
||
|
||
/* 箭头旋转 */
|
||
.has-child.open .menu-item-img {
|
||
transform: rotate(180deg);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.nav-img1 {
|
||
display: none;
|
||
}
|
||
|
||
.sub-menu {
|
||
display: none;
|
||
}
|
||
|
||
.sub-menu.show {
|
||
display: block;
|
||
}
|
||
|
||
.sub-item {
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.sub-item:nth-child(1) {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.sub-item a {
|
||
color: #686A70;
|
||
display: block;
|
||
}
|
||
|
||
.sub-item:last-child {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.sub-item-card-img {
|
||
width: 100%;
|
||
height: auto;
|
||
aspect-ratio: 358 / 192;
|
||
}
|
||
|
||
.sub-item-card-title {
|
||
font-size: 16px;
|
||
color: #1D1D1F;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.sub-item-card-name {
|
||
font-size: 14px;
|
||
color: #686A70;
|
||
margin-top: 4px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.no-padding {
|
||
padding: 0;
|
||
}
|
||
|
||
/* ====================== 弹窗样式（不遮盖头部） ====================== */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 46px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: calc(100% - 46px);
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
z-index: 98;
|
||
}
|
||
|
||
.modal-overlay.show {
|
||
display: flex;
|
||
}
|
||
|
||
.modal-content {
|
||
width: 90%;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 66px 24px 8px 24px;
|
||
margin-top: 20px;
|
||
position: relative;
|
||
text-align: center;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.modal-close {
|
||
position: absolute;
|
||
top: 24px;
|
||
right: 24px;
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 写法2：使用 flex 布局实现一行2个 */
|
||
.modal-items-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.modal-item {
|
||
width: calc(50% - 16px);
|
||
|
||
font-size: 16px;
|
||
color: #1D1D1F;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.modal-item-img {
|
||
width: clamp(48px, 17vw, 128px);
|
||
height: auto;
|
||
aspect-ratio: 64 / 64;
|
||
object-fit: contain;
|
||
display: block;
|
||
|
||
}
|
||
|
||
.modal-item-title {
|
||
margin-top: 10px;
|
||
font-size: 16px;
|
||
color: #1D1D1F;
|
||
}
|
||
|
||
.modal-item:hover {
|
||
background-color: #f5f5f5;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 语言弹窗样式 - 列表布局 */
|
||
.lang-modal-content {
|
||
width: 90%;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 68px 24px;
|
||
margin-top: 20px;
|
||
position: relative;
|
||
text-align: center;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.lang-items-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.lang-item {
|
||
font-size: 16px;
|
||
color: #1D1D1F;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.lang-item img {
|
||
width: 29px;
|
||
height: 20px;
|
||
margin-right: 16px;
|
||
display: block;
|
||
}
|
||
|
||
.lang-item:last-child {
|
||
border-bottom: none;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.lang-item:hover {
|
||
background-color: #f5f5f5;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 搜索弹窗样式 */
|
||
.search-modal-content {
|
||
width: 90%;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 68px 24px;
|
||
margin-top: 20px;
|
||
position: relative;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.search-input-box {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 30px;
|
||
padding-left: 24px;
|
||
padding-right: 13px;
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.search-input-box input {
|
||
flex: 1;
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.search-input-box input::placeholder {
|
||
color: #aaa;
|
||
}
|
||
|
||
.search-input-box .search-clear-btn {
|
||
width: 14px;
|
||
height: 14px;
|
||
cursor: pointer;
|
||
opacity: 0.6;
|
||
|
||
}
|
||
.search-clear-box {
|
||
padding-right: 10px;
|
||
}
|
||
/* .search-clear-btn {
|
||
border-right: 1px solid #eee;
|
||
} */
|
||
.search-input-box .search-clear-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.search-input-box .search-submit-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
}
|
||
.search-submit-box {
|
||
border-left: 1px solid #d9d9d9;
|
||
padding-left:10px;
|
||
max-height: 18px;
|
||
}
|
||
.search-history {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.search-history-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.search-history-title {
|
||
font-size: 14px;
|
||
color: #888;
|
||
}
|
||
|
||
.search-history-clear {
|
||
font-size: 12px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-history-clear:hover {
|
||
color: #666;
|
||
}
|
||
|
||
.search-history-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.search-history-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-history-item:hover {
|
||
background-color: #f5f5f5;
|
||
border-radius: 8px;
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
margin-left: -8px;
|
||
margin-right: -8px;
|
||
}
|
||
|
||
.search-history-item span {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.search-history-item .delete-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
cursor: pointer;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.search-history-item .delete-icon:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.empty-history {
|
||
text-align: center;
|
||
padding: 40px 0;
|
||
font-size: 14px;
|
||
color: #aaa;
|
||
}
|
||
.mobile-header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|
||
<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="#" 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>
|