From 33c10a12a586c8a9cfe3a9720d3590aeff504971 Mon Sep 17 00:00:00 2001
From: dafang <1073816412@qq.com>
Date: Fri, 7 Nov 2025 18:29:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(category):=20=E6=96=B0=E5=A2=9E=E4=B8=89?=
 =?UTF-8?q?=E7=BA=A7=E5=88=86=E7=B1=BB=E5=B1=95=E7=A4=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 third-one 组件用于展示三级商品分类
- 在 category.vue 中引入并条件渲染 third-one 组件
- 扩展分类样式选项，新增 third_one 类型
- 实现三级分类的布局和交互逻辑
- 支持点击查看更多和跳转至商品列表页面
---
 pages/index/category.vue             |  8 ++-
 pages/index/components/third-one.vue | 92 ++++++++++++++++++++++++++++
 2 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 pages/index/components/third-one.vue

diff --git a/pages/index/category.vue b/pages/index/category.vue
index 1dfa5d8a..d5e72938 100644
--- a/pages/index/category.vue
+++ b/pages/index/category.vue
@@ -35,6 +35,11 @@
               :data="state.categoryList"
               :activeMenu="state.activeMenu"
             />
+            <third-one
+              v-if="state.style === 'third_one'"
+              :data="state.categoryList"
+              :activeMenu="state.activeMenu"
+            />
             <uni-load-more
               v-if="
                 (state.style === 'first_one' || state.style === 'first_two') &&
@@ -55,6 +60,7 @@
 
 <script setup>
   import secondOne from './components/second-one.vue';
+  import thirdOne from './components/third-one.vue';
   import firstOne from './components/first-one.vue';
   import firstTwo from './components/first-two.vue';
   import sheep from '@/sheep';
@@ -66,7 +72,7 @@
   import { handleTree } from '@/sheep/helper/utils';
 
   const state = reactive({
-    style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
+    style: 'third_one', // first_one（一级 - 样式一）, first_two（一级 - 样式二）, second_one（二级）, third_one（三级）
     categoryList: [], // 商品分类树
     activeMenu: 0, // 选中的一级菜单，在 categoryList 的下标
 
diff --git a/pages/index/components/third-one.vue b/pages/index/components/third-one.vue
new file mode 100644
index 00000000..72ec1d42
--- /dev/null
+++ b/pages/index/components/third-one.vue
@@ -0,0 +1,92 @@
+<!-- 三级分类展示  -->
+<template>
+  <view>
+    <view v-for="item in props.data[activeMenu]?.children || []" :key="item.id">
+      <view class="title-box ss-flex ss-col-center ss-row-between ss-p-b-30">
+        <view class="title-text">{{ item.name }}</view>
+        <button
+            class="ss-reset-button more-btn"
+            @tap="
+            sheep.$router.go('/pages/goods/list', {
+              categoryId: item.id,
+            })
+          "
+        >
+          查看更多
+          <text class="cicon-forward"></text>
+        </button>
+      </view>
+      <view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
+        <view class="goods-item" v-for="i in item.children || []" :key="i.id">
+          <view
+              @tap="
+              sheep.$router.go('/pages/goods/list', {
+                categoryId: i.id,
+              })
+            "
+          >
+            <image class="goods-img" :src="sheep.$url.cdn(i.picUrl)" mode="aspectFill"></image>
+            <view class="ss-p-10">
+              <view class="goods-title ss-line-1">{{ i.name }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import sheep from '@/sheep';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  activeMenu: [Number, String],
+  pagination: Object,
+});
+</script>
+
+<style lang="scss" scoped>
+.title-box {
+  .title-text {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .more-btn {
+    font-size: 26rpx;
+    font-weight: 400;
+    color: #999999;
+  }
+}
+
+.goods-item {
+  width: calc((100% - 20px) / 3);
+  margin-right: 10px;
+  margin-bottom: 10px;
+
+  &:nth-of-type(3n) {
+    margin-right: 0;
+  }
+
+  .goods-img {
+    width: calc((100vw - 140px) / 3);
+    height: calc((100vw - 140px) / 3);
+  }
+
+  .goods-title {
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #333333;
+    text-align: center;
+  }
+
+  .goods-price {
+    color: $red;
+    line-height: 40rpx;
+  }
+}
+</style>