✨ 商品分类：second-one 样式接入完成

pages/index/category.vue

@@ -1,7 +1,9 @@
+<!-- 分类列表 -->
 <template>
 	<s-layout title="分类" tabbar="/pages/index/category" :bgStyle="{ color: '#fff' }">
 		<view class="s-category">
 			<view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
+        <!-- 商品分类（左） -->
 				<scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
 					<view class="menu-item ss-flex" v-for="(item, index) in state.categoryList?.children" :key="item.id"
 						:class="[{ 'menu-item-active': index == state.activeMenu }]" @tap="onMenu(index)">
@@ -10,7 +12,8 @@
 						</view>
 					</view>
 				</scroll-view>
-				<scroll-view class="goods-list-box" scroll-y :style="[{ height: pageHeight + 'px' }]"
+        <!-- 商品分类（右） -->
+        <scroll-view class="goods-list-box" scroll-y :style="[{ height: pageHeight + 'px' }]"
 					v-if="state.categoryList?.children?.length">
 					<image v-if="state.categoryList.children[state.activeMenu].image" class="banner-img"
 						:src="sheep.$url.cdn(state.categoryList.children[state.activeMenu].image)" mode="widthFix">
@@ -21,8 +24,6 @@
 						:activeMenu="state.activeMenu" :pagination="state.pagination" />
 					<second-one v-if="state.categoryList.style === 'second_one'" :data="state.categoryList"
 						:activeMenu="state.activeMenu" :pagination="state.pagination" />
-					<third-one v-if="state.categoryList.style === 'third_one'" :data="state.categoryList"
-						:activeMenu="state.activeMenu" :pagination="state.pagination" />
 					<uni-load-more v-if="
               (state.categoryList.style === 'first_one' ||
                 state.categoryList.style === 'first_two') &&
@@ -38,7 +39,6 @@
 
 <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';
@@ -52,8 +52,10 @@
 		reactive
 	} from 'vue';
 	import _ from 'lodash';
+  import { handleTree } from '@/sheep/util';
 	const state = reactive({
-		categoryList: [],
+    style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
+		categoryList: [], // 商品分类树
 		activeMenu: '0',
 
 		pagination: {
@@ -65,12 +67,7 @@
 		loadStatus: '',
 	});
 
-	const {
-		screenHeight,
-		safeAreaInsets,
-		screenWidth,
-		safeArea
-	} = sheep.$platform.device;
+	const { safeArea } = sheep.$platform.device;
 	const pageHeight = computed(() => safeArea.height - 44 - 50);
 
 	async function getList(options) {
@@ -82,8 +79,8 @@
 		});
 		if (code === 0) {
 			state.categoryList = {
-				children: data,
-				style: 'first_one'
+				children: handleTree(data),
+				style: 'second_one'
 			};
 		}
 	}

pages/index/components/second-one.vue

@@ -1,23 +1,25 @@
-<!-- 页面  -->
+<!-- 分类展示：second-one 风格  -->
 <template>
   <view>
+    <!-- 一级分类的名字 -->
     <view class="title-box ss-flex ss-col-center ss-row-center ss-p-b-30">
-      <view class="title-line-left"></view>
+      <view class="title-line-left" />
       <view class="title-text ss-p-x-20">{{ props.data.children[activeMenu].name }}</view>
-      <view class="title-line-right"></view>
+      <view class="title-line-right" />
     </view>
+    <!-- 二级分类的名字 -->
     <view class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
       <view
         class="goods-item"
         v-for="item in props.data.children[activeMenu].children"
         :key="item.id"
-		@tap="
-		  sheep.$router.go('/pages/goods/list', {
-		    categoryId: item.id,
-		  })
-		"
+        @tap="
+          sheep.$router.go('/pages/goods/list', {
+            categoryId: item.id,
+          })
+        "
       >
-        <image class="goods-img" :src="sheep.$url.cdn(item.image)" mode="aspectFill"></image>
+        <image class="goods-img" :src="item.picUrl" mode="aspectFill" />
         <view class="ss-p-10">
           <view class="goods-title ss-line-1">{{ item.name }}</view>
         </view>
@@ -28,13 +30,13 @@
 
 <script setup>
   import sheep from '@/sheep';
+
   const props = defineProps({
     data: {
       type: Object,
       default: () => ({}),
     },
-    activeMenu: [Number, String],
-    pagination: Object,
+    activeMenu: [Number, String]
   });
 </script>
 

pages/index/components/third-one.vue

@@ -1,92 +0,0 @@
-<!-- 页面  -->
-<template>
-  <view>
-    <view v-for="item in props.data.children[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">
-          <view
-            @tap="
-              sheep.$router.go('/pages/goods/list', {
-                categoryId: i.id,
-              })
-            "
-          >
-            <image class="goods-img" :src="sheep.$url.cdn(i.image)" 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>