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

feat: mobile产品分类

Browse Source
This commit is contained in:
jsasg
2025-05-24 17:03:25 +08:00
parent 3d3aab18a0
commit 2c8cde6274
5 changed files with 203 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/index/lang/en-us/mobile.php
View File

@@ -6,9 +6,10 @@ return [
'请择地区' => 'SELECT A REGION',
'首页' => 'Home',
'产品列表' => 'Products',
'产品' => 'Product',
'产品' => 'Product',
'联系方式' => 'Contact',
'查看所有' => 'View All',
'查看全部' => 'View All',
'明星产品/热点产品' => 'Featured Products',
'了解更多' => 'Learn More',
'Orico 技术' => 'ORICO Technology',

93
app/index/view/mobile/product/category.html Normal file
View File

@@ -0,0 +1,93 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/product_category.css" />
{/block}
{block name="main"}
<div class="oricoEGapp">
<!-- banner轮播图 -->
{notempty name="focus_image"}
<div>
{volist name="focus_image" id="fi"}
<a {notempty name="fi.link" }href="{$fi.link}"{/notempty}>
<img src="{$fi.image}" />
</a>
{/volist}
</div>
{/notempty}
<div class="oricoEGapp-catelists">
<!-- 二级分类导航 -->
<div class="first_list_category">
<div class="scroller">
<ul class="clearfix">
{volist name="list" id="vo"}
<li>
<a href="{:url('product/subcategory', ['id' => $vo.id])}">
<div class="category_list">
<p>{$vo.name}</p>
</div>
</a>
</li>
{/volist}
</ul>
</div>
</div>
<!-- 二级分类几个产品展示 -->
{volist name="list" id="vo"}
<div class="m_Container">
<div class="product_list_title">
<div class="product_title">{$vo.name}</div>
<a href="{:url('product/subcategory', ['id' => $vo.id])}" class="view_all text_gray">
{:lang('查看全部')}<span class="icon-Double-Arrow"></span>
</a>
</div>
<div class="product_list">
{notempty name="vo.products"}
<ul>
{volist name="vo.products" id="pro" length="4"}
<li class="img-responsive">
<a href="{:url('product/detail', ['id' => $pro.id])}">
<img src="{$pro.cover_image}">
<span class="title">{$pro.name}</span>
<span class="subtitle">{$pro.spu}</span>
</a>
</li>
{/volist}
</ul>
{/notempty}
</div>
</div>
{/volist}
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
// 自定义 navbarscroll 方法
$(function() {
let startX = 0;
let isDragging = false;
let currentLi;
$('.scroller ul li').on('mousedown touchstart', function(e) {
startX = e.type === 'touchstart' ? e.originalEvent.touches[0].clientX : e.clientX;
isDragging = true;
currentLi = $(this);
});
$(document).on('mousemove touchmove', function(e) {
if (isDragging) {
const currentX = e.type === 'touchmove' ? e.originalEvent.touches[0].clientX : e.clientX;
const diffX = currentX - startX;
if (diffX > 20) { // 设定一个最小滑动距离，这里设为20像素
// 右滑操作
$('.scroller ul li').removeClass('cur');
currentLi.addClass('cur');
// 这里可以添加更多右滑后要执行的操作，例如显示对应内容
isDragging = false;
}
}
});
$(document).on('mouseup touchend', function() {
isDragging = false;
});
});
</script>
{/block}

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

@@ -0,0 +1,74 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/product_subcategory.css" />
{/block}
{block name="main"}
<div class="oricoEGapp">
<!-- banner轮播图 -->
{notempty name="focus_image"}
<div>
{volist name="focus_image" id="fi"}
<a {notempty name="fi.link"}href="{$fi.link}"{/notempty}>
<img src="{$fi.image}" alt="" style="width:100%;margin-top:3.5rem;" />
</a>
{/volist}
</div>
{/notempty}
<!-- 三级产品列表 -->
<div class="oricoEGapp-subcatelists">
<div class="m_Container">
{notempty name="categorys_data"}
<div class="product_list">
<ul>
{assign name="products" value=":\think\helper\Arr::flatMap(fn($pro) => $pro['products'], $categorys_data)" /}
{volist name="products" id="pr"}
<li class="img-responsive product-img">
{notempty name="pr.sku"}
<a href="{:url('product/detail', ['id' => $pr.id])}">
{volist name="pr.sku" id="ps" key="pk"}
<img src="{:thumb($ps.main_image)}" class="img_p" {neq name="pk" value="1" }style="display:none;"{/neq}>
{/volist}
</a>
{/notempty}
<a href="{:url('product/detail', ['id' => $pr.id])}">
<span class="title nowrap_ellipsis">{$pr.name}</span>
<span class="subtitle">{$pr.spu}</span>
</a>
{notempty name="pr.colors"}
<div class="hd Multi_color">
<ul>
{volist name="pr.colors" id="pc"}
<li class="img-responsive S-small-img">
<div class="cricle">
{assign name="color_type" value=":rgb_or_image($pc.attr_value)" /}
{eq name="color_type" value="IMAGE"}
<img src="{$pc.attr_value}" alt="" class="S-Cricle-Bg">
{elseif condition="$color_type == 'RGB'" /}
<span class="rgb_hex" {:style(['background-color'=>$pc.attr_value])}></span>
{/eq}
</div>
</li>
{/volist}
</ul>
</div>
{/notempty}
</li>
{/volist}
</ul>
</div>
{/notempty}
</div>
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function() {
// 图片切换
$('.Multi_color').find('.S-small-img').click(function() {
var index = $(this).index();
$(this).parents('.product-img').find('.img_p').eq(index).show().siblings().hide();
});
})
</script>
{/block}

25
public/static/index/mobile/css/product_category.css Executable file
View File

@@ -0,0 +1,25 @@
.oricoEGapp-catelists {
display: flex;
flex-direction: column;
}
.oricoEGapp-catelists .first_list_category {
margin-top: 50px;
width: 100%;
overflow-x: auto;
height: 3.4rem;
background-color: transparent;
}
.oricoEGapp-catelists .scroller ul {
background-color: #fafafa;
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
.oricoEGapp-catelists .scroller ul li {
display: inline-block;
margin-right: 10px;
padding: 10px;
cursor: pointer;
padding-bottom: 15px;
}

9
public/static/index/mobile/css/product_subcategory.css Executable file
View File

@@ -0,0 +1,9 @@
.oricoEGapp-subcatelists {
position: relative;
}
.oricoEGapp-subcatelists .product_list {
margin-top: 4.5rem;
}
.oricoEGapp-subcatelists .product_list .img_p {
margin: 0 auto;
}