2023-10-11 11:27:47 +08:00
|
|
|
|
<template>
|
2023-11-14 17:21:03 +08:00
|
|
|
|
<Header ref="headerRef"> 分类</Header>
|
|
|
|
|
<view
|
|
|
|
|
class="goods-category"
|
|
|
|
|
:style="computeMainBoxStyle"
|
|
|
|
|
>
|
|
|
|
|
<uv-vtabs
|
2023-10-11 11:27:47 +08:00
|
|
|
|
:list="categoryData"
|
2023-11-15 19:59:37 +08:00
|
|
|
|
:hdHeight="`${headerRef&&headerRef.containerHeight || 0}px`"
|
2023-11-14 17:21:03 +08:00
|
|
|
|
>
|
|
|
|
|
<template
|
2023-10-11 11:27:47 +08:00
|
|
|
|
v-for="(item, index) in categoryData"
|
|
|
|
|
:key="index"
|
2023-11-14 17:21:03 +08:00
|
|
|
|
>
|
|
|
|
|
<uv-vtabs-item :index="index">
|
|
|
|
|
<view class="category-list">
|
|
|
|
|
<view
|
2023-10-11 11:27:47 +08:00
|
|
|
|
class="category"
|
2023-11-14 17:21:03 +08:00
|
|
|
|
>
|
|
|
|
|
<view class="category-title">
|
|
|
|
|
<view class="line"></view>
|
|
|
|
|
<view class="category-title-text">
|
|
|
|
|
{{ item.name }}
|
2023-10-11 11:27:47 +08:00
|
|
|
|
</view>
|
2023-11-14 17:21:03 +08:00
|
|
|
|
<view class="line"></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="category-content">
|
|
|
|
|
<uv-grid
|
2023-10-11 11:27:47 +08:00
|
|
|
|
:border="false"
|
|
|
|
|
:col="3"
|
2023-11-14 17:21:03 +08:00
|
|
|
|
>
|
|
|
|
|
<uv-grid-item
|
|
|
|
|
v-for="goodCategory in item.children"
|
|
|
|
|
@click="toGoodsCategoryList(goodCategory.id)"
|
|
|
|
|
:key="goodCategory.id"
|
2023-10-11 11:27:47 +08:00
|
|
|
|
>
|
2023-11-14 17:21:03 +08:00
|
|
|
|
<view class="category-item">
|
|
|
|
|
<view class="category-item-icon">
|
|
|
|
|
<image
|
2023-10-11 11:27:47 +08:00
|
|
|
|
class="image"
|
|
|
|
|
:src="goodCategory.picUrl"
|
2023-11-14 17:21:03 +08:00
|
|
|
|
mode="aspectFit"
|
|
|
|
|
/>
|
2023-10-11 11:27:47 +08:00
|
|
|
|
</view>
|
2023-11-14 17:21:03 +08:00
|
|
|
|
<view class="category-item-name">
|
|
|
|
|
{{ goodCategory.name }}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</uv-grid-item>
|
|
|
|
|
</uv-grid>
|
2023-10-11 11:27:47 +08:00
|
|
|
|
</view>
|
|
|
|
|
</view>
|
2023-11-14 17:21:03 +08:00
|
|
|
|
</view>
|
|
|
|
|
</uv-vtabs-item>
|
|
|
|
|
</template>
|
|
|
|
|
<uv-gap
|
2023-10-11 11:27:47 +08:00
|
|
|
|
bg-color="#fff"
|
|
|
|
|
height="600"
|
2023-11-14 17:21:03 +08:00
|
|
|
|
></uv-gap>
|
|
|
|
|
</uv-vtabs>
|
|
|
|
|
</view>
|
2023-10-11 11:27:47 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
2023-11-14 17:21:03 +08:00
|
|
|
|
import { computed, ref } from 'vue'
|
2023-10-11 11:27:47 +08:00
|
|
|
|
import { getCategoryList } from '@/api/product'
|
2023-11-14 17:21:03 +08:00
|
|
|
|
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 {push} = useRouter()
|
|
|
|
|
|
|
|
|
|
const headerRef = ref() //导航条
|
|
|
|
|
|
|
|
|
|
// 中心高度 100bh - 上导航栏 - h5底部高度
|
|
|
|
|
const computeMainBoxStyle = computed(() => {
|
|
|
|
|
const height = headerRef.value?.containerHeight ?? 0
|
|
|
|
|
return {
|
|
|
|
|
height: `calc(100vh - ${ height }rpx - var(--window-bottom))`
|
|
|
|
|
}
|
|
|
|
|
})
|
2023-10-11 11:27:47 +08:00
|
|
|
|
|
2023-11-14 17:21:03 +08:00
|
|
|
|
const categoryData = ref([]) // 分类列表
|
2023-10-11 11:27:47 +08:00
|
|
|
|
|
2023-11-14 17:21:03 +08:00
|
|
|
|
/**
|
|
|
|
|
* 获取分类
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
async function doGetCategoryList() {
|
2023-10-11 11:27:47 +08:00
|
|
|
|
const category = await getCategoryList()
|
2023-11-14 17:21:03 +08:00
|
|
|
|
if (!category) return
|
|
|
|
|
// 二级分类,需要处理一下
|
|
|
|
|
categoryData.value = arrayToTree(category)
|
|
|
|
|
}
|
2023-10-11 11:27:47 +08:00
|
|
|
|
|
2023-11-14 17:21:03 +08:00
|
|
|
|
/**
|
|
|
|
|
* 数组转tree
|
|
|
|
|
* @param items
|
|
|
|
|
* @returns {*[]}
|
|
|
|
|
*/
|
|
|
|
|
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]);
|
|
|
|
|
}
|
|
|
|
|
});
|
2023-10-11 11:27:47 +08:00
|
|
|
|
|
2023-11-14 17:21:03 +08:00
|
|
|
|
// 然后,将子项添加到父项的children属性中
|
|
|
|
|
items.forEach(item => {
|
|
|
|
|
if (item.parentId !== 0) {
|
|
|
|
|
itemMap[item.parentId].children.push(itemMap[item.id]);
|
|
|
|
|
}
|
|
|
|
|
});
|
2023-10-11 11:27:47 +08:00
|
|
|
|
|
2023-11-14 17:21:03 +08:00
|
|
|
|
return rootItems;
|
2023-10-11 11:27:47 +08:00
|
|
|
|
}
|
|
|
|
|
|
2023-11-14 17:21:03 +08:00
|
|
|
|
/**
|
|
|
|
|
* 去商品列表
|
|
|
|
|
* @param categoryId
|
|
|
|
|
*/
|
|
|
|
|
function toGoodsCategoryList(categoryId) {
|
|
|
|
|
push({
|
2023-10-11 11:27:47 +08:00
|
|
|
|
url: '/pages/goodsList/goodsList'
|
2023-11-14 17:21:03 +08:00
|
|
|
|
}, {
|
|
|
|
|
data: {sid: categoryId}
|
2023-10-11 11:27:47 +08:00
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2023-11-14 17:21:03 +08:00
|
|
|
|
|
|
|
|
|
onLoad(() => {
|
|
|
|
|
doGetCategoryList()
|
|
|
|
|
})
|
2023-10-11 11:27:47 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
2023-11-14 17:21:03 +08:00
|
|
|
|
<style lang="scss">
|
|
|
|
|
.goods-category {
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
2023-10-11 11:27:47 +08:00
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-11-14 17:21:03 +08:00
|
|
|
|
&-content {
|
|
|
|
|
}
|
2023-10-11 11:27:47 +08:00
|
|
|
|
|
|
|
|
|
&-item {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
|
|
|
|
.image {
|
|
|
|
|
width: 150rpx;
|
|
|
|
|
height: 110rpx;
|
|
|
|
|
display: block;
|
2023-11-14 17:21:03 +08:00
|
|
|
|
background: #efefef;
|
2023-10-11 11:27:47 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-name {
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
line-height: 32rpx;
|
|
|
|
|
font-size: 24rpx;
|
2023-11-14 17:21:03 +08:00
|
|
|
|
color: #999999;
|
2023-10-11 11:27:47 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-11-14 17:21:03 +08:00
|
|
|
|
|
|
|
|
|
.goods-category :deep(.uv-vtabs__bar) {
|
|
|
|
|
background: #F5F5F5;
|
|
|
|
|
|
|
|
|
|
.uv-vtabs__bar-item {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-10-11 11:27:47 +08:00
|
|
|
|
</style>
|