重构分类页二级分类模板

pages/category/components/commodity.vue

@@ -66,10 +66,8 @@
 <script>
   import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
   import { getEmptyPaginateObj, getMoreListData, setCartTabBadge } from '@/core/app'
-  import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
   import AddCartBtn from '@/components/add-cart-btn'
   import AddCartPopup from '@/components/add-cart-popup'
-  import { rpx2px } from '@/utils/util'
   import * as GoodsApi from '@/api/goods'
 
   const pageSize = 15
@@ -94,8 +92,6 @@
     },
     data() {
       return {
-        // 枚举类
-        PageCategoryStyleEnum,
         // 一级分类：指针
         curIndex: -1,
         // 是否显示子分类

pages/category/components/secondary.vue

@@ -1,83 +1,52 @@
 <template>
-  <view v-if="list.length > 0" class="secondary" :style="appThemeStyle">
-    <!-- 二级分类 20 -->
+  <view class="container" :style="appThemeStyle">
+    <!-- 一级分类 -->
+    <scroll-view class="cate-left" :scroll-y="true" @touchmove.stop.prevent>
+      <text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index"
+        @click="handleSelectNav(index)">{{ item.name }}</text>
+    </scroll-view>
     <view class="cate-content">
-      <!-- 左侧 一级分类 -->
-      <scroll-view class="cate-left" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
-        <text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index"
-          @click="handleSelectNav(index)">{{ item.name }}</text>
-      </scroll-view>
-      <!-- 右侧 二级分类 -->
-      <scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
-        <view v-if="list[curIndex]" class="cate-right-cont">
-          <view class="cate-two-box">
-            <view class="cate-cont-box">
-              <view class="flex-three" v-for="(item, idx) in list[curIndex].children" :key="idx"
-                @click="onTargetGoodsList(item.category_id)">
-                <view class="cate-img-padding">
-                  <view v-if="item.image" class="cate-img">
-                    <image class="image" mode="scaleToFill" :src="item.image.preview_url"></image>
-                  </view>
-                </view>
-                <text class="name oneline-hide">{{ item.name }}</text>
-              </view>
-            </view>
+      <!-- 二级分类列表 -->
+      <view class="category-list clearfix">
+        <view class="category-item" v-for="(item, index) in list[curIndex].children" :key="index" @click="handleGoods(item.category_id)">
+          <view v-if="item.image" class="item-image">
+            <image class="image" mode="scaleToFill" :src="item.image.preview_url"></image>
+          </view>
+          <view class="item-name">
+            <text class="oneline-hide">{{ item.name }}</text>
           </view>
         </view>
-      </scroll-view>
+      </view>
     </view>
-    <empty v-if="!list.length" />
   </view>
 </template>
 
 <script>
-  import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
-  import Empty from '@/components/empty'
-  import { rpx2px } from '@/utils/util'
+  import * as GoodsApi from '@/api/goods'
 
   export default {
-    components: {
-      Empty
-    },
     props: {
       // 分类列表
       list: {
         type: Array,
         default: []
-      },
+      }
     },
     data() {
       return {
-        // 枚举类
-        PageCategoryStyleEnum,
-        // 列表高度
-        scrollHeight: 0,
         // 一级分类：指针
-        curIndex: 0,
-        // 内容区竖向滚动条位置
-        scrollTop: 0,
+        curIndex: 0
       }
     },
-    created() {
-      // 设置分类列表高度
-      this.setListHeight()
-    },
     methods: {
 
-      // 设置列表内容的高度
-      setListHeight() {
-        const { windowHeight } = uni.getSystemInfoSync()
-        this.scrollHeight = windowHeight - rpx2px(96)
-      },
-
       // 一级分类：选中分类
       handleSelectNav(index) {
         this.curIndex = index
-        this.scrollTop = 0
       },
 
       // 跳转至商品列表页
-      onTargetGoodsList(categoryId) {
+      handleGoods(categoryId) {
         this.$navTo('pages/goods/list', { categoryId })
       }
 
@@ -86,45 +55,30 @@
 </script>
 
 <style lang="scss" scoped>
+  .container {
+    padding-left: 175rpx;
+  }
+
   // 分类内容
   .cate-content {
-    display: flex;
     z-index: 1;
     background: #fff;
-    padding-top: 96rpx;
+    padding-top: 90rpx;
+    min-height: 300rpx;
   }
 
   // 一级分类+二级分类 20
   .cate-left {
-    width: 173rpx;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+    position: fixed;
+    top: calc(88rpx + var(--window-top));
+    left: var(--window-left);
+    bottom: var(--window-bottom);
+    width: 175rpx;
+    height: calc(100% - var(--window-top) - var(--window-bottom) - 90rpx) !important;
     background: #f8f8f8;
     color: #444;
   }
 
-  .cate-right {
-    width: 577rpx;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-
-    .cate-right-cont {
-      width: 100%;
-      display: flex;
-      flex-flow: row wrap;
-      align-content: flex-start;
-      padding-top: 15rpx;
-
-      .cate-two-box {
-        width: 100%;
-        padding: 0 10px;
-      }
-    }
-  }
-
   // 左侧一级分类
   .type-nav {
     position: relative;
@@ -138,45 +92,37 @@
 
     &.selected {
       background: #fff;
-      color: $main-bg;
       border-right: none;
       font-size: 28rpx;
+      color: $main-bg
     }
   }
 
-  // 右侧二级分类
-  .cate-cont-box {
-    margin-bottom: 30rpx;
-    padding-bottom: 10rpx;
-    background: #fff;
-    overflow: hidden;
-
-    .name {
-      display: block;
-      padding-bottom: 30rpx;
-      text-align: center;
-      font-size: 26rpx;
-      color: #444444;
-    }
-
-    .cate-img-padding {
-      padding: 16rpx 16rpx 4rpx 16rpx;
-    }
+  // 分类列表
+  .category-list {
+    padding: 30rpx 20rpx;
+  }
 
-    .cate-img {
-      position: relative;
-      width: 100%;
-      padding-top: 100%;
+  .category-item {
+    float: left;
+    width: 33.33333%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 40rpx;
 
+    .item-image {
       .image {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: 10rpx;
+        display: block;
+        width: 146rpx;
+        height: 146rpx;
       }
     }
 
+    .item-name {
+      margin-top: 10rpx;
+      text-align: center;
+      font-size: 26rpx;
+    }
   }
 </style>