jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

refactor: 产品分类

Browse Source
This commit is contained in:
jsasg
2025-05-15 18:07:38 +08:00
parent 1a9c1b4967
commit f15f6746d0
13 changed files with 331 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
app/index/controller/Product.php
View File

@@ -13,6 +13,7 @@ use app\index\model\ProductRelatedModel;
use app\index\model\ProductSkuAttrModel;
use app\index\model\ProductSkuModel;
use app\index\model\SysBannerModel;
use app\index\model\SysBannerProdCateMappingModel;
use app\index\validate\ProductInquiryValidate;
use think\facade\View;
use think\helper\Arr;
@@ -22,21 +23,25 @@ use think\helper\Arr;
*/
class Product extends Common
{
// 产品分类
public function category()
// 获取分类页的banner图焦点横幅
private function getCategoryBanner($category_id)
{
// 参数
$param = request()->param(['id']);
$focus_image = [];
// 获取产品分类页焦点横幅
$banner = SysBannerModel::with(['items' => function($query) {
$banner = SysBannerModel::with(['items' => function($query) use($category_id) {
$query->withoutField([
'status',
'created_at',
'updated_at',
'deleted_at'
])
->whereExists(function($q) use($category_id) {
$r = $q->getModel()->getTable();
$m = new SysBannerProdCateMappingModel;
$q->model($m)->name($m->getName())
->where("banner_item_id = $r.id")
->where('product_category_id' , '=', $category_id);
})
->where('status', '=', 1)
->order(['sort' => 'asc', 'id' => 'desc']);
}])
@@ -51,7 +56,109 @@ class Product extends Common
}
$focus_image = data_get($banner_map, 'BANNER_6808abd813d78')?->items->toArray();
}
View::assign('focus_image', $focus_image);
return $focus_image;
}
// 产品分类 - 查看顶层分类
public function category()
{
// 参数
$param = request()->param(['id']);
// 获取产品分类页焦点横幅
View::assign('focus_image', $this->getCategoryBanner($param['id']));
// 获取分类及产品信息
$categorys_data = ProductCategoryModel::field(['id', 'pid', 'name', 'path', 'level'])
->language($this->lang_id)
->displayed(true)
->children($param['id'])
->order(['pid' => 'asc', 'sort' => 'asc', 'id' => 'desc'])
->select()
->toArray();
$list = [];
if (!empty($categorys_data)) {
// 分组分类
$list = array_filter($categorys_data, fn($it) => $it['level'] == 2);
foreach ($list as &$it) {
$it['children'] = array_column(array_filter($categorys_data, fn($v) => in_array($it['id'], explode(',', $v['path']))), 'id');
}
unset($it);
// 获取分类下的产品信息
if (!empty($list)) {
$product_model = new ProductModel;
$sql = $product_model->field([
'id',
'category_id',
'spu',
'name',
'cover_image',
'is_new',
'(' . $list[0]['id'] . ')' => 'group_mark'
])
->byCategory(data_get($list[0], 'children'))
->language($this->lang_id)
->enabled(true)
->onSale(true)
->onShelves(true)
->append(['p' => $list[0]['id']])
->order(['sort' => 'asc', 'id' => 'desc'])
->limit(5)
->buildSql();
$query = \think\facade\Db::table("($sql) as a");
foreach ($list as $it) {
$query = $query->union(function($query) use($product_model, $it) {
$query->model($product_model)
->name($product_model->getName())
->field([
'id',
'category_id',
'spu',
'name',
'cover_image',
'is_new',
'(' . $it['id'] . ')' => 'group_mark'
])
->byCategory($it['children'])
->language($this->lang_id)
->enabled(true)
->onSale(true)
->onShelves(true)
->order(['sort' => 'asc', 'id' => 'desc'])
->limit(5);
});
}
$pros = $query->select();
if (!empty($pros)) {
$pros_map = [];
foreach ($pros as $pro) {
$pros_map[$pro['group_mark']][] = $pro;
}
foreach ($list as $k => &$it) {
unset($it['children']);
if (!isset($pros_map[$it['id']])) {
unset($list[$k]);
continue;
}
$it['products'] = $pros_map[$it['id']];
}
unset($it);
}
}
}
View::assign('list', $list);
return View::fetch('category');
}
// 产品分类 - 查看子类
public function subcategory()
{
// 参数
$param = request()->param(['id']);
// 获取产品分类页焦点横幅
View::assign('focus_image', $this->getCategoryBanner($param['id']));
// 获取分类及产品信息
$categorys_data = ProductCategoryModel::field(['id', 'name', 'level'])
@@ -60,6 +167,7 @@ class Product extends Common
->child($param['id'], true)
->order(['sort' => 'asc', 'id' => 'desc'])
->select();
if (!$categorys_data->isEmpty()) {
if ($categorys_data->count() > 1) {
// 当分类数不只一个时，当前分类下有子分类，移除当前分类，只输出子分类
@@ -70,8 +178,8 @@ class Product extends Common
$categorys_data = $categorys_data->toArray();
$products = ProductModel::field([
'id',
'category_id',
'id',
'category_id',
'spu',
'name',
'short_name',
@@ -151,7 +259,7 @@ class Product extends Common
}
View::assign('categorys_data', $categorys_data);
return View::fetch('category');
return View::fetch('subcategory');
}
/**
@@ -399,7 +507,7 @@ class Product extends Common
$m = $map[$pro['category_id']];
$pro_map[$m['path']][] = $pro;
}
// 获取二级分类下的产品信息
foreach ($categorys as $val) {
if ($val['level'] != 2) {
@@ -407,7 +515,7 @@ class Product extends Common
}
foreach ($pro_map as $k => $pro) {
if (in_array($val['id'], explode(',', $k))) {
if (in_array($val['id'], explode(',', strval($k)))) {
$newpros[] = [
'category' => $val,
'products' => $pro,

15
app/index/model/SysBannerProdCateMappingModel.php Normal file
View File

@@ -0,0 +1,15 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\SysBannerProdCateMappingBaseModel;
/**
* banner与产品分类关联表模型
* @mixin \think\Model
*/
class SysBannerProdCateMappingModel extends SysBannerProdCateMappingBaseModel
{
//
}

2
app/index/route/route.php
View File

@@ -16,6 +16,8 @@ Route::get('/', 'Index/index');
Route::group('product', function () {
// 产品分类页
Route::get('category/:id', 'Product/category');
// 产品分类 - 查看子类
Route::get('subcategory/:id', 'Product/subcategory');
// 产品详情页
Route::get('detail/:id', 'Product/detail');
// 产品询盘

138
app/index/view/product/category.html
View File

@@ -1,71 +1,69 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/category.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_products">
{notempty name="focus_image"}
<div class="focus_image">
{volist name="focus_image" id="fimg"}
<a {notempty name="fimg.link"}href="{$fimg.link}"{/notempty}><img src="{$fimg.image}" alt="" /></a>
{/volist}
</div>
{/notempty}
<!-- 首页主题内容 -->
<div class="pageMain">
{notempty name="categorys_data"}
{volist name="categorys_data" id="vo"}
<div class="ori-pd-title">
<span>{$vo.name}</span>
{eq name="vo.level" value="2"}
<a href="{:url('product/category', ['id' => $vo.id])}">查看更多</a>
{/eq}
</div>
{notempty name="vo.products"}
<div class="ori-pd-list">
{volist name="vo.products" id="vp"}
<a class="oripditem" href="{:url('product/detail', ['id' => $vp.id])}">
<div>
{volist name="vp.sku" id="vs" key="vs_idx"}
<img src="{$vs.main_image}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
{/volist}
</div>
<div class="prdName">{$vp.name}</div>
<div class="prddec">{$vp.spu}</div>
{notempty name="vp.colors"}
<div class="prd-colors">
{volist name="vp.colors" id="vc" key="vc_idx"}
<div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
{assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
{eq name="color_type" value="IMAGE"}
<img src="{$vc.attr_value}" />
{elseif condition="$color_type == 'RGB'" /}
<span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
{/eq}
</div>
{/volist}
</div>
{/notempty}
</a>
{/volist}
</div>
{/notempty}
{/volist}
{/notempty}
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function () {
$('.prd-colors .prdolorit').click(function(event) {
event.stopPropagation();
event.preventDefault();
var sku_id = $(this).data('sku_id');
$('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
$(this).addClass('on').siblings().removeClass('on');
});
})
</script>
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_category.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_category">
<!-- banner轮播 -->
{notempty name="focus_image"}
<div class="opdBanner">
{volist name="focus_image" id="fi"}
<a {notempty name="fi.link" }href="{$fi.link}" {/notempty}>
<img src="{$fi.image}" class="opdbannerImg" />
</a>
{/volist}
</div>
{/notempty}
<!--分类/产品内容 -->
<div class="pageMain">
{volist name="list" id="vo"}
<div class="cat">
<div class="ori-pd-title">
<div class="catname">{$vo.name}</div>
<a class="catmore" href="{:url('product/subcategory', ['id' => $vo.id])}">
<span class="tmore">{:lang('product_newpro.view_all')}</span>
<img src="/static/index/images/more.png" class="catmoreImg" />
</a>
</div>
{notempty name="vo.products"}
<div class="ori-pd-list">
{volist name="vo.products" id="pro"}
<a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
<div>
<img src="{$pro.cover_image}" class="prdimg prdimg-show" />
</div>
<div class="prdName">{$pro.name}</div>
<div class="prddec">{$pro.spu}</div>
{eq name="pro.is_new" value="1"}
<div class="newcp">New</div>
{/eq}
</a>
{/volist}
</div>
{/notempty}
</div>
{/volist}
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function () {
// 显示第一张图片
$('.opdbannerImg').eq(0).show();
let currentIndex = 0;
const imgCount = $('.opdbannerImg').length;
setInterval(() => {
// 淡出当前图片
$('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
// 隐藏当前图片
$('.opdbannerImg').eq(currentIndex).hide();
// 计算下一张图片的索引
currentIndex = (currentIndex + 1) % imgCount;
// 显示并淡入下一张图片
$('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
});
}, 10000);
});
</script>
{/block}

59
app/index/view/product/product_category.html
View File

@@ -1,59 +0,0 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_category.css" type="text/css" />
{block name="main"}
<div class="orico_Page_category">
<!--首页主题内容 -->
<div class="pageMain">
<div class="cat">
<div class="ori-pd-title">
<div class="catname">Power Strip</div>
<a class="catmore">
<span class="tmore">View all</span>
<img src="/static/index/images/more.png" class="catmoreImg" />
</a>
</div>
<div class="ori-pd-list">
<a class="oripditem">
<div>
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
</div>
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
<div class="prddec">ORICO-AP3-2A3U</div>
<div class="newcp">New</div>
</a>
<a class="oripditem">
<div>
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
</div>
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
<div class="prddec">ORICO-AP3-2A3U</div>
<div class="newcp">New</div>
</a>
<a class="oripditem">
<div>
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
</div>
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
<div class="prddec">ORICO-AP3-2A3U</div>
</a>
<a class="oripditem">
<div>
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
</div>
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
<div class="prddec">ORICO-AP3-2A3U</div>
</a>
<a class="oripditem">
<div>
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
</div>
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
<div class="prddec">ORICO-AP3-2A3U</div>
<div class="newcp">New</div>
</a>
</div>
</div>
</div>
</div>
{/block}

34
app/index/view/product/product_subcategory.html
View File

@@ -1,34 +0,0 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_subcategory.css" type="text/css" />
{block name="main"}
<div class="orico_Page_subcategory">
<!--公共头部-->
<iframe align="center" width="100%" height="60" src="head.html" frameborder="no" border="0" marginwidth="0"
marginheight="0" scrolling="no"></iframe>
<!-- 这个图片可能有可能没有-->
<img src="/static/index/images/SSD-1920x900-CN.jpg" class="sbbanner">
<!--首页主题内容 -->
<div class="pageMain">
<h1 class="ori-pd-title">Power Strip</h1>
<div class="ori-pd-list">
<a class="oripditem">
<div>
<img src="/static/index/images/prtest.jpg" class="prdimg prdimg-show" />
<img src="/static/index/images/prtest1.jpg" class="prdimg" />
</div>
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
<div class="prddec">ORICO-AP3-2A3U</div>
<div class="prd-colors">
<div class="prdolorit on">
<img src="/static/index/images/WH.jpg">
</div>
<div class="prdolorit">
<img src="/static/index/images/BK.jpg">
</div>
</div>
</a>
</div>
</div>
</div>
{/block}

86
app/index/view/product/subcategory.html Normal file
View File

@@ -0,0 +1,86 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_subcategory.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_subcategory">
{notempty name="focus_image"}
<div class="opdBanner">
{volist name="focus_image" id="fi"}
<a {notempty name="fi.link"}href="{$fi.link}"{/notempty}>
<img src="{$fi.image}" alt="" class="opdbannerImg" />
</a>
{/volist}
</div>
{/notempty}
<!-- 首页主题内容 -->
<div class="pageMain">
{notempty name="categorys_data"}
{volist name="categorys_data" id="vo"}
<div class="ori-pd-title">
<span>{$vo.name}</span>
</div>
{notempty name="vo.products"}
<div class="ori-pd-list">
{volist name="vo.products" id="vp"}
<a class="oripditem" href="{:url('product/detail', ['id' => $vp.id])}">
<div>
{volist name="vp.sku" id="vs" key="vs_idx"}
<img src="{$vs.main_image}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
{/volist}
</div>
<div class="prdName">{$vp.name}</div>
<div class="prddec">{$vp.spu}</div>
{notempty name="vp.colors"}
<div class="prd-colors">
{volist name="vp.colors" id="vc" key="vc_idx"}
<div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
{assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
{eq name="color_type" value="IMAGE"}
<img src="{$vc.attr_value}" />
{elseif condition="$color_type == 'RGB'" /}
<span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
{/eq}
</div>
{/volist}
</div>
{/notempty}
</a>
{/volist}
</div>
{/notempty}
{/volist}
{/notempty}
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function () {
// 显示第一张图片
$('.opdbannerImg').eq(0).show();
let currentIndex = 0;
const imgCount = $('.opdbannerImg').length;
setInterval(() => {
// 淡出当前图片
$('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
// 隐藏当前图片
$('.opdbannerImg').eq(currentIndex).hide();
// 计算下一张图片的索引
currentIndex = (currentIndex + 1) % imgCount;
// 显示并淡入下一张图片
$('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
});
}, 10000);
$('.prd-colors .prdolorit').click(function(event) {
event.stopPropagation();
event.preventDefault();
var sku_id = $(this).data('sku_id');
$('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
$(this).addClass('on').siblings().removeClass('on');
});
})
</script>
{/block}

7
app/index/view/public/header.html
View File

@@ -25,16 +25,15 @@
</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}>
<div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"{else/}style="display: none;"{/eq}>
{volist name="vo.children" id="vc"}
<dl class="nav_cyrightit">
<dt>
<a href="{:url('product/category', ['id' => $vc.id])}">{$vc.name}</a>
<a href="{:url('product/subcategory', ['id' => $vc.id])}">{$vc.name}</a>
</dt>
{volist name="vc.children" id="vcc"}
<dd>
<a href="{:url('product/category', ['id' => $vcc.id])}">{$vcc.name}</a>
<a href="{:url('product/subcategory', ['id' => $vcc.id])}">{$vcc.name}</a>
</dd>
{/volist}
</dl>