From 2c8cde62746d09b3f17c7400d016adb466c5848e Mon Sep 17 00:00:00 2001
From: jsasg <735273025@qq.com>
Date: Sat, 24 May 2025 17:03:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20mobile=E4=BA=A7=E5=93=81=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/index/lang/en-us/mobile.php               |  3 +-
 app/index/view/mobile/product/category.html   | 93 +++++++++++++++++++
 .../view/mobile/product/subcategory.html      | 74 +++++++++++++++
 .../index/mobile/css/product_category.css     | 25 +++++
 .../index/mobile/css/product_subcategory.css  |  9 ++
 5 files changed, 203 insertions(+), 1 deletion(-)
 create mode 100644 app/index/view/mobile/product/category.html
 create mode 100644 app/index/view/mobile/product/subcategory.html
 create mode 100755 public/static/index/mobile/css/product_category.css
 create mode 100755 public/static/index/mobile/css/product_subcategory.css

diff --git a/app/index/lang/en-us/mobile.php b/app/index/lang/en-us/mobile.php
index a32f9981..06329045 100644
--- a/app/index/lang/en-us/mobile.php
+++ b/app/index/lang/en-us/mobile.php
@@ -6,9 +6,10 @@ return [
     '请择地区' => 'SELECT A REGION',
     '首页' => 'Home',
     '产品列表' => 'Products',
-    '产品'   => 'Product',
+    '产品' => 'Product',
     '联系方式' => 'Contact',
     '查看所有' => 'View All',
+    '查看全部' => 'View All',
     '明星产品/热点产品' => 'Featured Products',
     '了解更多' => 'Learn More',
     'Orico 技术' => 'ORICO Technology',
diff --git a/app/index/view/mobile/product/category.html b/app/index/view/mobile/product/category.html
new file mode 100644
index 00000000..04702b45
--- /dev/null
+++ b/app/index/view/mobile/product/category.html
@@ -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}
\ No newline at end of file
diff --git a/app/index/view/mobile/product/subcategory.html b/app/index/view/mobile/product/subcategory.html
new file mode 100644
index 00000000..2a520cf1
--- /dev/null
+++ b/app/index/view/mobile/product/subcategory.html
@@ -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}
\ No newline at end of file
diff --git a/public/static/index/mobile/css/product_category.css b/public/static/index/mobile/css/product_category.css
new file mode 100755
index 00000000..b48a4c07
--- /dev/null
+++ b/public/static/index/mobile/css/product_category.css
@@ -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;
+}
diff --git a/public/static/index/mobile/css/product_subcategory.css b/public/static/index/mobile/css/product_subcategory.css
new file mode 100755
index 00000000..89f8a2f8
--- /dev/null
+++ b/public/static/index/mobile/css/product_subcategory.css
@@ -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;
+}