Files

216 lines
4.9 KiB
Vue
Raw Normal View History

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>