From 685cd53b1ac2015389e5320bf416da0563ca628d Mon Sep 17 00:00:00 2001 From: jsasg <735273025@qq.com> Date: Wed, 8 Apr 2026 11:20:54 +0800 Subject: [PATCH] refactor: mobile header --- app/index/lang/en-us/mobile.php | 3 + app/index/view/mobile/public/header.html | 1637 ++++++++--------- .../static/index/mobile/images/header/log.png | Bin 1784 -> 0 bytes 3 files changed, 792 insertions(+), 848 deletions(-) delete mode 100644 public/static/index/mobile/images/header/log.png 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 61e0e0579d4389b216b64db6816fc8f5478d772f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1784 zcmV^2vsL>L`2>U$#GC*>u!$|nGyC=E-91PoVb&eX?Duf?l5vLmk-h)J>5N zp=Tc~hVayrl_gv}9g(z0wT;V)2mX+ja!OZ?)5^J<^TH{Na!hMVsq18X=?Hp(h&0XH z{Hw?#wtSu_+x7a;h0t z0vIfftm5@}lMWV7=+n+n-+F)!288NROdnDX=n6YgrCb-GeBd3?zITTIzkz;k@j-a8 zY7<9;QbTw~uXGLevTPJ7D4{*cZjti#^f=Lx+O+GRP!%}b`F*}f9_QXYxbIZH%Z`%u zOr@AE2Xt?Jp+6B7%IIkd4KV|aUKi@1_2#+ILF=-j!!MqWDvJyOuT|1VVD+z zw&pSRTmgf!U=jit;H9N;j{7%c%)ik1*Bhz>K^a41W5zpgGf$bWz{B6)lka?v?hRlx z@a7}8aJ`Y<)JZg&zz|3HMk`$3eoR&HO_n9?9qycb6pgJ5{Ch!NY`6?Q=nbf+!$j*4 zIM>=<0=C1(TWCz$nz^M&jiq_eI-*4oj!hVMDbC4Qe4)GDX|1s4jT)`YI|#7*vK5Wo z6(LiMuyI{*zknhPX+6{P%fMW|ludXkdsQpBFPUpA`7!#!+~F(pxH4v zX&QoZ{K=krWlu`q(-E7%O}us!f&laEzW%*Q2giC(^W`+0OEW7YT$}zaxHJo>AC+h8 zUg97sXdd0)t&R@nVwy+BYW!#&@4{2x(Eov)T)Ug)YWRr`R#Zc`i0ZWF5jX^C-lT=m zM(94)8^z}*ekO#|#F9eS)Mi+MDUWO6SEb*`&Xoa|k;Re5%6q{u^If;nqhqj#nr1v| zqk3xAqQ|UUAe{k80}YGOPp-IRyL5iX zwFi$n#-g1l1Fsv14Z|A}L!lPl_g?4ba01F68*Jj)3b`bqgbp9RV1 z2&SFvF>WlRL?;+0uc8hzzwWnWEQx!Du#~OpAiE2+ z4mz@Nt?Hob^W`4vVCbDvGTdQn=eL~jypz2e9-?=WKOS|WtHNi&-?PzCWefjM*w%`W zZqCq~5SE#4GG;od11{ZERG!6%?U0p+JL^09xKsxn%_};vvqXmGVd@!OgwS~9%%F=B z&TyXTGXo`B;USA&WtvXn`?(`oKIkb=8d<#bpP>%z>nyOsXTo_zJ3iK9+;%;=H&qfSTfzot1Dy6cl4y27e z(+wZLw{n&u=tsaj_$YWv#uCCBhilJu7xs{|jGqJR#@4(j&+y~}b{HpqPRQYL>#jJ% z7W{ERsS(=UH(NuOqu8@Kp%9&vB6WVM50000