feat: 首页分类模块

This commit is contained in:
jqtmviyu 2025-04-20 17:17:58 +08:00
parent 6282e80779
commit 62559f7ac1
3 changed files with 85 additions and 4 deletions

View File

@ -0,0 +1,51 @@
<template>
<view class="category">
<navigator
class="category-item"
hover-class="none"
url="/pages/index/index"
v-for="item in props.list"
:key="item.id"
>
<image class="icon" :src="item.icon"></image>
<text class="text">{{ item.name }}</text>
</navigator>
</view>
</template>
<script setup lang="ts">
import type { CategoryItem } from '@/types/home'
const props = defineProps<{
list: CategoryItem[]
}>()
</script>
<style lang="scss">
/* 前台类目 */
.category {
margin: 20rpx 0 0;
padding: 10rpx 0;
display: flex;
flex-wrap: wrap;
min-height: 328rpx;
.category-item {
width: 150rpx;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
box-sizing: border-box;
.icon {
width: 100rpx;
height: 100rpx;
}
.text {
font-size: 26rpx;
color: #666;
}
}
}
</style>

View File

@ -1,15 +1,17 @@
<template>
<CustomNavbar />
<JbcSwiper :list="bannerList" />
<CategoryPanel :list="categoryList" />
<view class="content"> home </view>
</template>
<script setup lang="ts">
import type { BannerItem } from '@/types/home'
import type { BannerItem, CategoryItem } from '@/types/home'
import CustomNavbar from './components/CustomNavbar.vue'
import { ref } from 'vue'
import { getHomeBanner } from '@/services/home'
import { getCategory, getHomeBanner } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import CategoryPanel from './components/CategoryPanel.vue'
//
const bannerList = ref<BannerItem[]>([])
@ -21,6 +23,23 @@ const getBannerList = async () => {
onLoad(() => {
getBannerList()
})
//
const categoryList = ref<CategoryItem[]>([])
const getCategoryList = async () => {
const res = await getCategory()
categoryList.value = res.result
console.log('categoryList: ', categoryList.value)
}
onLoad(() => {
getCategoryList()
})
</script>
<style></style>
<style lang="scss">
page {
background-color: #f7f7f7;
height: 100%;
overflow: hidden;
}
</style>

View File

@ -1,4 +1,4 @@
import type { BannerItem } from '@/types/home'
import type { BannerItem, CategoryItem } from '@/types/home'
import { http } from '@/utils/http'
/**
@ -15,3 +15,14 @@ export const getHomeBanner = (distributionSite = 1) => {
},
})
}
/**
*
* @returns
*/
export const getCategory = () => {
return http<CategoryItem[]>({
url: '/home/category/mutli',
method: 'GET',
})
}