v1.0

pages/goodsCategory/goodsCategory.vue

@@ -0,0 +1,193 @@
+<template>
+  <layout>
+    <uv-navbar
+      :fixed="false"
+      title="分类"
+    />
+    <view class="goods-category">
+      <uv-vtabs
+        :chain="chain"
+        :list="categoryData"
+        :height="height"
+        hdHeight="100rpx"
+        @change="change"
+      >
+        <template
+          v-for="(item, index) in categoryData"
+          :key="index"
+        >
+          <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>
+                <view class="category-content">
+                  <uv-grid
+                    :border="false"
+                    :col="3"
+                  >
+                    <uv-grid-item
+                      v-for="(goodCategory, goodCategoryIndex) in item.children"
+                      :key="goodCategoryIndex"
+                    >
+                      <view class="category-item">
+                        <view class="category-item-icon">
+                          <image
+                            class="image"
+                            :src="goodCategory.picUrl"
+                          />
+                        </view>
+                        <view class="category-item-name">
+                          {{ goodCategory.name }}
+                        </view>
+                      </view>
+                    </uv-grid-item>
+                  </uv-grid>
+                </view>
+              </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
+          bg-color="#fff"
+          height="600"
+        ></uv-gap>
+      </uv-vtabs>
+    </view>
+  </layout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getCategoryList } from '@/api/product'
+const active = ref(0);
+
+const categoryData = ref([])
+
+const handleGetCategoryList = async () => {
+  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)
+  }
+}
+
+handleGetCategoryList()
+
+
+const navigatorProductList = () => {
+  uni.navigateTo({
+    url: '/pages/goodsList/goodsList'
+  })
+}
+
+const onChange = (index) => showToast(`标签名 ${index + 1}`);
+</script>
+
+<style lang="less">
+.goods-category {}
+
+.category-list {
+  padding: 0 20rpx;
+}
+
+.category {
+  margin-bottom: 20rpx;
+
+  &-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 50rpx;
+    margin-bottom: 30rpx;
+
+    &-text {
+      line-height: 45rpx;
+      font-size: 32rpx;
+      color: #333333;
+      margin: 0 30rpx;
+    }
+
+    .line {
+      width: 30rpx;
+      height: 1rpx;
+      background: #CCCCCC;
+    }
+  }
+
+  &-content {}
+
+  &-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 30rpx;
+
+    .image {
+      width: 150rpx;
+      height: 110rpx;
+      display: block;
+      background: #ececec;
+    }
+
+    &-name {
+      margin-top: 20rpx;
+      line-height: 32rpx;
+      font-size: 24rpx;
+      color: #333333;
+    }
+  }
+}
+</style>