代码提交

pages/goodsCategory/goodsCategory.vue

@@ -1,141 +1,154 @@
 <template>
-  <layout>
-    <uv-navbar
-      :fixed="false"
-      title="分类"
-    />
-    <view class="goods-category">
-      <uv-vtabs
-        :chain="chain"
+  <Header ref="headerRef"> 分类</Header>
+  <view
+      class="goods-category"
+      :style="computeMainBoxStyle"
+  >
+    <uv-vtabs
         :list="categoryData"
-        :height="height"
-        hdHeight="100rpx"
-        @change="change"
-      >
-        <template
+        :hdHeight="`${headerRef&&headerRef.containerHeight || 0}rpx`"
+    >
+      <template
           v-for="(item, index) in categoryData"
           :key="index"
-        >
-          <uv-vtabs-item :index="index">
-            <view class="category-list">
-              <view
+      >
+        <uv-vtabs-item :index="index">
+          <view class="category-list">
+            <view
                 class="category"
-                @click="navigatorProductList"
-              >
-                <view class="category-title">
-                  <view class="line"></view>
-                  <view class="category-title-text">
-                    {{ item.name }}
-                  </view>
-                  <view class="line"></view>
+            >
+              <view class="category-title">
+                <view class="line"></view>
+                <view class="category-title-text">
+                  {{ item.name }}
                 </view>
-                <view class="category-content">
-                  <uv-grid
+                <view class="line"></view>
+              </view>
+              <view class="category-content">
+                <uv-grid
                     :border="false"
                     :col="3"
+                >
+                  <uv-grid-item
+                      v-for="goodCategory in item.children"
+                      @click="toGoodsCategoryList(goodCategory.id)"
+                      :key="goodCategory.id"
                   >
-                    <uv-grid-item
-                      v-for="(goodCategory, goodCategoryIndex) in item.children"
-                      :key="goodCategoryIndex"
-                    >
-                      <view class="category-item">
-                        <view class="category-item-icon">
-                          <image
+                    <view class="category-item">
+                      <view class="category-item-icon">
+                        <image
                             class="image"
                             :src="goodCategory.picUrl"
-                          />
-                        </view>
-                        <view class="category-item-name">
-                          {{ goodCategory.name }}
-                        </view>
+                            mode="aspectFit"
+                        />
                       </view>
-                    </uv-grid-item>
-                  </uv-grid>
-                </view>
+                      <view class="category-item-name">
+                        {{ goodCategory.name }}
+                      </view>
+                    </view>
+                  </uv-grid-item>
+                </uv-grid>
               </view>
-
             </view>
-
-
-
-
-            <!-- <view
-              class="gap"
-              v-if="index < list.length - 1"
-            >
-              <uv-gap
-                bg-color="red"
-                height="4"
-              ></uv-gap>
-            </view> -->
-          </uv-vtabs-item>
-        </template>
-        <uv-gap
+          </view>
+        </uv-vtabs-item>
+      </template>
+      <uv-gap
           bg-color="#fff"
           height="600"
-        ></uv-gap>
-      </uv-vtabs>
-    </view>
-  </layout>
+      ></uv-gap>
+    </uv-vtabs>
+  </view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { getCategoryList } from '@/api/product'
-const active = ref(0);
+import { useRouter } from "@/hooks/useRouter";
+import Header from "@/components/Header/index.vue"
+import { onLoad } from "@dcloudio/uni-app";
+import UvVtabs from "@/uni_modules/uv-vtabs/components/uv-vtabs/uv-vtabs.vue";
+import UvVtabsItem from "@/uni_modules/uv-vtabs/components/uv-vtabs-item/uv-vtabs-item.vue";
+import UvGrid from "@/uni_modules/uv-grid/components/uv-grid/uv-grid.vue";
+import UvGridItem from "@/uni_modules/uv-grid/components/uv-grid-item/uv-grid-item.vue";
+import UvGap from "@/uni_modules/uv-gap/components/uv-gap/uv-gap.vue";
 
-const categoryData = ref([])
+const {push} = useRouter()
 
-const handleGetCategoryList = async () => {
+const headerRef = ref() //导航条
+
+// 中心高度 100bh - 上导航栏 - h5底部高度
+const computeMainBoxStyle = computed(() => {
+  const height = headerRef.value?.containerHeight ?? 0
+  return {
+    height: `calc(100vh - ${ height }rpx - var(--window-bottom))`
+  }
+})
+
+const categoryData = ref([]) // 分类列表
+
+/**
+ * 获取分类
+ * @returns {Promise<void>}
+ */
+async function doGetCategoryList() {
   const category = await getCategoryList()
-
-  let data = []
-
-
-  function arrayToTree(items) {
-    const rootItems = [];
-    const itemMap = {};
-
-    // 首先，将所有项按照id映射到itemMap中，并找到根项（没有父项的项）
-    items.forEach(item => {
-      itemMap[item.id] = { ...item, children: [] };
-
-      if (item.parentId === 0) {
-        rootItems.push(itemMap[item.id]);
-      }
-    });
-
-    // 然后，将子项添加到父项的children属性中
-    items.forEach(item => {
-      if (item.parentId !== 0) {
-        itemMap[item.parentId].children.push(itemMap[item.id]);
-      }
-    });
-
-    return rootItems;
-  }
-
-  if (category) {
-    // 二级分类，需要处理一下
-    categoryData.value = arrayToTree(category)
-    console.log("--> % handleGetCategoryList % category:\n", categoryData.value)
-  }
+  if (!category) return
+  // 二级分类，需要处理一下
+  categoryData.value = arrayToTree(category)
 }
 
-handleGetCategoryList()
+/**
+ * 数组转tree
+ * @param items
+ * @returns {*[]}
+ */
+function arrayToTree(items) {
+  const rootItems = [];
+  const itemMap = {};
 
+  // 首先，将所有项按照id映射到itemMap中，并找到根项（没有父项的项）
+  items.forEach(item => {
+    itemMap[item.id] = {...item, children: []};
 
-const navigatorProductList = () => {
-  uni.navigateTo({
+    if (item.parentId === 0) {
+      rootItems.push(itemMap[item.id]);
+    }
+  });
+
+  // 然后，将子项添加到父项的children属性中
+  items.forEach(item => {
+    if (item.parentId !== 0) {
+      itemMap[item.parentId].children.push(itemMap[item.id]);
+    }
+  });
+
+  return rootItems;
+}
+
+/**
+ * 去商品列表
+ * @param categoryId
+ */
+function toGoodsCategoryList(categoryId) {
+  push({
     url: '/pages/goodsList/goodsList'
+  }, {
+    data: {sid: categoryId}
   })
 }
 
-const onChange = (index) => showToast(`标签名 ${index + 1}`);
+
+onLoad(() => {
+  doGetCategoryList()
+})
 </script>
 
-<style lang="less">
-.goods-category {}
+<style lang="scss">
+.goods-category {
+  width: 100%;
+  overflow: hidden;
+}
 
 .category-list {
   padding: 0 20rpx;
@@ -165,7 +178,8 @@ const onChange = (index) => showToast(`标签名 ${index + 1}`);
     }
   }
 
-  &-content {}
+  &-content {
+  }
 
   &-item {
     flex: 1;
@@ -179,15 +193,23 @@ const onChange = (index) => showToast(`标签名 ${index + 1}`);
       width: 150rpx;
       height: 110rpx;
       display: block;
-      background: #ececec;
+      background: #efefef;
     }
 
     &-name {
       margin-top: 20rpx;
       line-height: 32rpx;
       font-size: 24rpx;
-      color: #333333;
+      color: #999999;
     }
   }
 }
+
+.goods-category :deep(.uv-vtabs__bar) {
+  background: #F5F5F5;
+
+  .uv-vtabs__bar-item {
+    text-align: center;
+  }
+}
 </style>