feat: ✨ 首页分类模块
This commit is contained in:
parent
6282e80779
commit
62559f7ac1
51
src/pages/index/components/CategoryPanel.vue
Normal file
51
src/pages/index/components/CategoryPanel.vue
Normal 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>
|
@ -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>
|
||||
|
@ -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',
|
||||
})
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user