refactor: pc导航重构

app/index/controller/Common.php

@@ -8,6 +8,7 @@ use app\index\model\LanguageModel;
 use app\index\model\ProductCategoryModel;
 use app\index\model\ProductModel;
 use app\index\model\SysConfigModel;
+use app\index\model\SysMallStoreEntranceModel;
 use app\index\model\SysNavigationItemModel;
 use think\facade\Lang;
 use think\facade\View;
@@ -38,7 +39,7 @@ abstract class Common extends BaseController
         }
 
         // 获取产品分类
-        $categorys = $this->getProductCategory($this->lang_id);
+        $categorys = $this->getProductCategory($this->lang_id, true);
         // 输出产品分类
         View::assign('header_categorys', $categorys);
 
@@ -47,6 +48,9 @@ abstract class Common extends BaseController
         // 输出热销产品
         View::assign('header_hot_products', $hot_products);
 
+        // 获取商品购买入口
+        View::assign("header_mall_entrance", $this->getMallStoreEntrance($this->lang_id));
+
         // 输出顶部导航
         View::assign('header_navigation', $this->getNavigation('NAV_67f3701f3e831', $this->lang_id));
 
@@ -78,7 +82,7 @@ abstract class Common extends BaseController
     }
 
     // 获取产品分类
-    protected function getProductCategory($language = 1)
+    protected function getProductCategory($language = 1, $with_recommends = false)
     {
         $categorys = ProductCategoryModel::field([
                 'id',
@@ -87,15 +91,42 @@ abstract class Common extends BaseController
                 'icon',
                 'level'
             ])
+            ->when($with_recommends, function($query) {
+                $query->with(['recommends' => function($query) {
+                    $query->field(['id', 'category_id', 'title', 'image', 'desc', 'link'])
+                        ->order(['sort' => 'asc', 'id' => 'desc']);
+                }]);
+            })
             ->language($language)
             ->displayed()
             ->order(['sort' => 'asc', 'id' => 'desc'])
-            ->select();
+            ->select()
+            ->hidden(["recommends.category_id"]);
         if ($categorys->isEmpty()) {
             return [];
         }
 
-        return array_to_tree($categorys->toArray(), 0, 'pid', 1, false);
+        return $this->toTreeAndChunk($categorys->toArray(), 0, 1);
+    }
+    private function toTreeAndChunk(array $categorys, int $pid, int|bool $level): array
+    {
+        $ret = [];
+        foreach ($categorys as $item) {
+            if ($item['pid'] == $pid) {
+                $lv = $level;
+                if ($level !== false) {
+                    $item['level'] = $level;
+                    $lv            = $level + 1;
+                }
+                $children = $this->toTreeAndChunk($categorys, $item['id'], $lv);
+                if (!empty($children)) {
+                    $item['children'] = $item['level'] == 1 ? array_chunk($children, 2) : $children;
+                }
+                $ret[] = $item;
+            }
+        }
+
+        return $ret;
     }
 
     // 获取顶部导航
@@ -164,6 +195,26 @@ abstract class Common extends BaseController
         return $languages;
     }
 
+    // 获取商品购买入口
+    private function getMallStoreEntrance($language = 1)
+    {
+        return SysMallStoreEntranceModel::field([
+                'id',
+                'name',
+                'image',
+                'hover_image',
+                'link'
+            ])
+            ->language($language)
+            ->enabled()
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select()
+            ?->each(function($item) {
+                $item->image = thumb($item->image);
+                return $item;
+            });
+    }
+
     // 获取系统联系方式配置
     protected function getSysConfig($language, $group = [])
     {

app/index/lang/en-us/pc.php

@@ -5,10 +5,17 @@ return [
     '产品列表' => 'Products',
     '店铺' => 'Store',
     '搜索记录' => 'Search History',
-    '热销产品' => 'Popular Products',
     '产品' => 'Product',
     '联系我们' => 'Contact',
 
+    // 新导航栏 - 2023-03-31
+    '搜索' => 'Search',
+    '搜索产品、分类...' => 'Search products and categories...',
+    '最近搜索' => 'Recent Searches',
+    '清空' => 'Clear',
+    '热销产品' => 'Popular Products',
+    '购买' => 'Buy',
+
     // 返回文本
     '提交成功' => 'success',
     '提交失败' => 'fail',

app/index/model/ProductCategoryModel.php

@@ -17,6 +17,12 @@ class ProductCategoryModel extends ProductCategoryBaseModel
     // 软件删除时间字段
     protected $deleteTime = 'deleted_at';
 
+    // 关联产品推荐
+    public function recommends()
+    {
+        return $this->hasMany(ProductCategoryRecommendModel::class, 'category_id', 'id');
+    }
+
     // 所属语言范围查询
     public function scopeLanguage($query, $language)
     {

app/index/model/ProductCategoryRecommendModel.php

@@ -0,0 +1,25 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\ProductCategoryRecommendBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 产品分类推荐模型
+ * @mixin \think\Model
+ */
+class ProductCategoryRecommendModel extends ProductCategoryRecommendBaseModel
+{
+    // 启用软件删除
+    use SoftDelete;
+    // 软件删除时间字段
+    protected $deleteTime = 'deleted_at';
+
+    // 所属语言范围查询
+    public function scopeLanguage($query, $language)
+    {
+        $query->where($this->getTable() . '.language_id', '=', $language);
+    }
+}

app/index/model/SysMallStoreEntranceModel.php

@@ -0,0 +1,43 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\model;
+
+use app\common\model\SysMallStoreEntranceBaseModel;
+use think\model\concern\SoftDelete;
+
+/**
+ * 系统商城店铺入口模型
+ * @mixin \think\Model
+ */
+class SysMallStoreEntranceModel extends SysMallStoreEntranceBaseModel
+{
+    // 启用软删除
+    use SoftDelete;
+    // 软删除字段
+    protected $deleteTime = 'deleted_at';
+
+    // 关联语言
+    public function language()
+    {
+        return $this->belongsTo(\app\index\model\LanguageModel::class, 'language_id', 'id');
+    }
+
+    // 所属语言范围查询
+    public function scopeLanguage($query, $language)
+    {
+        $query->where($this->getTable() . '.language_id', '=', $language);
+    }
+
+    // 查询启用状态
+    public function scopeEnabled($query)
+    {
+        $query->where('disabled', '=', 0);
+    }
+
+    // 查询禁用状态
+    public function scopeDisabled($query)
+    {
+        $query->where('disabled', '=', 1);
+    }
+}

app/index/view/pc/public/20230331.header.html

@@ -0,0 +1,287 @@
+<header class="header-PC">
+	<div id="header">
+		<!-- LOG -->
+		<div class="nav1">
+			<a href="/">
+				<img src="__IMAGES__/logo.png" />
+			</a>
+		</div>
+		<!--顶部导航栏 -->
+		<div class="nav2">
+			<nav id="booNavigation" class="booNavigation">
+				<ul>
+					{if condition="!empty($header_categorys)"}
+					<li class="navItem">
+						<a href="javascript:void(0);">{:lang_i18n('产品列表')}</a>
+						<img src="__IMAGES__/black-down.png" class="downimg" />
+						<ol class="navItemConten">
+							<!-- 左边子菜单-->
+							<ul class="navItem_cyleft">
+								{volist name="header_categorys" id="vo"}
+								<li class="{$key == 0 ? 'it_active' : ''}">
+									<a href="{:url('product/category', ['id' => $vo.id])}">{$vo.name}</a>
+								</li>
+								{/volist}
+							</ul>
+							<!-- 右边子菜单-->
+							{volist name="header_categorys" id="vo" key="idx"}
+							<div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"{else/}style="display: none;"{/eq}>
+								{if condition="!empty($vo.children)"}
+								{volist name="vo.children" id="vc"}
+								<dl class="nav_cyrightit">
+									<dt>
+										<a href="{:url('product/subcategory', ['id' => $vc.id])}">{$vc.name}</a>
+									</dt>
+									{if condition="!empty($vc.children)"}
+									{volist name="vc.children" id="vcc"}
+									<dd>
+										<a href="{:url('product/subcategory', ['id' => $vcc.id])}">{$vcc.name}</a>
+									</dd>
+									{/volist}
+									{/if}
+								</dl>
+								{/volist}
+								{/if}
+							</div>
+							{/volist}
+						</ol>
+					</li>
+					{/if}
+					{volist name="header_navigation" id="vo"}
+					<li class="navItem">
+						<a href="{$vo.link}" target="{$vo.blank==1?'_blank':'_self'}">{$vo.name}</a>
+						{if condition="!empty($vo.children)"}
+						<img src="__IMAGES__/black-down.png" class="downimg" />
+						<!--下拉菜单 -->
+						<ol class="navItemConten1">
+							{volist name="vo.children" id="voc"}
+							<li>
+								<a href="{$voc.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
+							</li>
+							{/volist}
+						</ol>
+						{/if}
+					</li>
+					{/volist}
+				</ul>
+			</nav>
+		</div>
+		<!-- 顶部搜索/国家选择/商店-->
+		<div class="nav3">
+			<img src="__IMAGES__/icon-search.png" id="openModalBtn" class="searchimg" />
+			<div class="choesCountry">
+				<img src="__IMAGES__/icon-language.png" id="countrycheck" class="checkimg" />
+				<!--国家选择 -->
+				<div class="topCountry" id="top-country">
+					<ul>
+						<li class="closec">
+							<span class="closecountrybt">×</span>
+						</li>
+						{volist name="header_languages" id="vo"}
+						<a href="{$vo.lang_url}">
+							<li>
+								<div class="cico">
+									<img src="{$vo.lang_icon}" class="countryimg" />
+								</div>
+								<p class="countryName">{$vo.country_en_name} - {$vo.lang_en_name}</p>
+							</li>
+						</a>
+						{/volist}
+					</ul>
+				</div>
+			</div>
+			{eq name=":cookie('think_lang')" value="en-us"}
+			{notempty name="basic_config['navigation_store_url']['value']"}
+			<a class="storetopbt" href="{$basic_config['navigation_store_url']['value']}" target="_blank">
+				<img src="__IMAGES__/shopico.png" class="storeImgico" />{:lang_i18n('店铺')}
+			</a>
+			{/notempty}
+			{/eq}
+		</div>
+	</div>
+
+	<!-- 搜索弹框-->
+	<div class="searchmodalMian" id="scmodal">
+		<div class="searchmodalct">
+			<span class="close-btn">×</span>
+			<input type="text" name="keywords" id="serrchinput" autocomplete="off" />
+			<!-- 历史记录 -->
+			<div class="searchhistory">
+				<p class="h_title">{:lang_i18n('搜索记录')}</p>
+				<ul></ul>
+			</div>
+			<div class="popProduct">
+				<p class="h_title">{:lang_i18n('热销产品')}</p>
+				<div class="popmain">
+					{volist name="header_hot_products" id="vo"}
+					<div class="popitem">
+						<a href="{:url('product/detail', ['id' => $vo.id])}"><img src="{:thumb($vo.cover_image)}" class="popimg" /></a>
+						<div class="productName">{$vo.name}</div>
+						<div class="produc-dec">{$vo.short_name}</div>
+					</div>
+					{/volist}
+				</div>
+			</div>
+		</div>
+	</div>
+</header>
+<script type="text/javascript">
+    $(function() {
+        $('.header-PC #header .navItem>a').each(function(idx, item) {
+            var _item = $(item);
+            _item.removeClass('active');
+            if (_item.attr('href') && compareUrls(location.href, _item.get(0).href)) {
+                _item.addClass('active').siblings();
+            }
+        });
+        
+        // 比较两个URL是否相等（支持只有path的情况，并处理有无.html后缀的情况）
+        function compareUrls(url1, url2) {
+            // 如果输入的是相对路径，添加当前域名
+            if (!url1.startsWith('http')) {
+                url1 = window.location.origin + (url1.startsWith('/') ? '' : '/') + url1;
+            }
+            if (!url2.startsWith('http')) {
+                url2 = window.location.origin + (url2.startsWith('/') ? '' : '/') + url2;
+            }
+
+            // 将两个URL转换为URL对象
+            const urlObj1 = new URL(url1);
+            const urlObj2 = new URL(url2);
+
+            // 获取路径名并移除末尾的斜杠
+            let path1 = urlObj1.pathname.replace(/\/$/, '');
+            let path2 = urlObj2.pathname.replace(/\/$/, '');
+
+            // 移除.html后缀
+            path1 = path1.replace(/\.html$/, '');
+            path2 = path2.replace(/\.html$/, '');
+
+            // 比较处理后的路径
+            return path1 === path2;
+        }
+    })
+</script>
+<script>
+	$(document).ready(function () {
+		// 搜索历史记录处理
+		function history(keywords) {
+			var history = localStorage.getItem('header_search_keywords');
+			if (!history) {
+				history = [];
+			} else {
+				history = JSON.parse(history);
+			}
+			// 记录搜索关键词
+			if (keywords) {
+				if (history.includes(keywords)) {
+					history.splice(history.indexOf(keywords), 1);
+				}
+				history.unshift(keywords);
+				if (history.length > 3) {
+					history.pop();
+				}
+				localStorage.setItem('header_search_keywords', JSON.stringify(history));
+				return history;
+			}
+
+			// 回显搜索历史记录
+			history.forEach(function (item) {
+				$('.searchhistory ul').append('<li><a href="{:url(\'product/search\')}?keywords=' + item + '">' + item + '</a></li>');
+			});
+
+			return history;
+		}
+
+		// 封装一个函数用于处理鼠标悬停显示和隐藏内容
+		function handleHover($element, $content) {
+			// 同时支持鼠标悬停和点击事件
+			$element
+				.mouseenter(function () {
+					$content.stop(true, true).slideDown(60);
+				})
+				.mouseleave(function () {
+					$content.stop(true, true).slideUp(60);
+				})
+				.click(function (e) {
+					// 阻止链接默认跳转（如果有链接的话）
+					if ($content.is(':visible')) {
+						$content.stop(true, true).slideUp(60);
+					} else {
+						$content.stop(true, true).slideDown(60);
+					}
+					// 防止点击事件冒泡到a标签
+					e.preventDefault();
+					e.stopPropagation();
+				});
+		}
+
+		// 处理产品列表的下拉菜单
+		var $firstNav = $('.navItem').eq(0);
+		if ($firstNav.find('.navItemConten').length) {
+			handleHover($firstNav, $firstNav.find('.navItemConten'));
+		}
+
+		// 鼠标移入左侧子菜单切换显示
+		$('.navItem_cyleft li').mouseenter(function () {
+			$(this).addClass('it_active').siblings().removeClass('it_active');
+			$('.navItem_cyright').hide();
+			$('.navItem_cyright').eq($(this).index()).show();
+		});
+
+		// 动态处理所有带有navItemConten1的导航项
+		$('.navItem').each(function () {
+			var $this = $(this);
+			var $dropdown = $this.find('.navItemConten1');
+			// 只给有下拉菜单的导航项绑定事件
+			if ($dropdown.length) {
+				handleHover($this, $dropdown);
+			}
+		});
+
+		// 点击搜索
+		$('#openModalBtn').click(function () {
+			$('#scmodal').toggle();
+		});
+		$('.close-btn').click(function () {
+			$('#scmodal').hide();
+		});
+
+		// 点击空白处关闭下拉菜单
+		$(document).click(function () {
+			$('.navItemConten, .navItemConten1, #top-country').slideUp(60);
+		});
+
+		// 防止下拉菜单内部点击触发空白处关闭事件
+		$('.navItemConten, .navItemConten1, #top-country').click(function (e) {
+			e.stopPropagation();
+		});
+
+		// 搜索历史记录回显
+		history();
+
+		// 执行搜索
+		$('#serrchinput').keydown(function (event) {
+			if (event.originalEvent.keyCode == 13) {
+				var keywords = $(this).val();
+				if (keywords == '') {
+					return false;
+				}
+				// 记录搜索关键词
+				history(keywords);
+
+				// 跳转到搜索页面
+				window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
+			}
+		});
+
+		// 点击选择国家
+		$('#countrycheck').click(function (e) {
+			$('#top-country').toggle();
+			e.stopPropagation();
+		});
+		$('.closecountrybt').click(function () {
+			$('#top-country').hide();
+		});
+	});
+</script>