194 lines
4.2 KiB
Vue
194 lines
4.2 KiB
Vue
<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>
|