diff --git a/app/index/lang/en-us/mobile.php b/app/index/lang/en-us/mobile.php index 4e0cde9b..977199f5 100644 --- a/app/index/lang/en-us/mobile.php +++ b/app/index/lang/en-us/mobile.php @@ -6,6 +6,9 @@ return [ '产品列表' => 'Products', '搜索' => 'Search', '搜索历史' => 'Search History', + '请输入搜索关键词' => 'Please enter a search keyword', + '搜索记录' => 'Search History', + '清空' => 'Clear', '请择地区' => 'SELECT A REGION', '产品' => 'Product', '联系方式' => 'Contact', diff --git a/app/index/view/mobile/public/header.html b/app/index/view/mobile/public/header.html index 553aa167..d373e9fe 100644 --- a/app/index/view/mobile/public/header.html +++ b/app/index/view/mobile/public/header.html @@ -1,431 +1,422 @@ - - - - - - - ORICO 移动硬盘 - - - - + +
- - + + - +
- - - + + +
@@ -433,127 +424,80 @@ - -
+ - - \ No newline at end of file + 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 = '
暂无搜索记录
'; + return; + } + + historyList.innerHTML = ''; + history.forEach(function (keyword) + { + const itemDiv = document.createElement('div'); + itemDiv.className = 'search-history-item'; + itemDiv.innerHTML = ` + ${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); + addSearchHistory(searchKeyword); + alert('搜索: ' + searchKeyword); + searchModal.classList.remove('show'); + searchInput.value = ''; + searchClearBtn.style.display = 'none'; + } else { + alert('请输入搜索关键词'); + } + } + + searchSubmit.addEventListener('click', function (e) + { + e.stopPropagation(); + doSearch(searchInput.value); + }); + + searchInput.addEventListener('keypress', function (e) + { + if (e.key === 'Enter' || e.key === 'enter' || e.keyCode === 13) { + e.preventDefault(); + doSearch(searchInput.value); + } + }); + }); + diff --git a/public/static/index/mobile/images/header/log.png b/public/static/index/mobile/images/header/log.png deleted file mode 100644 index 61e0e057..00000000 Binary files a/public/static/index/mobile/images/header/log.png and /dev/null differ