feat: 首页热门

This commit is contained in:
jqtmviyu 2025-04-21 11:19:33 +08:00
parent 62559f7ac1
commit 9e79f76cc0
5 changed files with 146 additions and 12 deletions

View File

@ -47,6 +47,12 @@
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/hot/hot",
"style": {
"navigationBarTitleText": "hot"
}
}
],
//

7
src/pages/hot/hot.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<view class="hot">hot</view>
</template>
<script lang="ts" setup></script>
<style lang="scss"></style>

View File

@ -0,0 +1,84 @@
<template>
<!-- 推荐专区 -->
<view class="panel hot">
<view class="item" v-for="item in list" :key="item.id">
<view class="title">
<text class="title-text">{{ item.title }}</text>
<text class="title-desc">{{ item.alt }}</text>
</view>
<navigator hover-class="none" :url="`/pages/hot/hot?type=${item.type}`" class="cards">
<image
v-for="src in item.pictures"
:key="src"
class="image"
mode="aspectFit"
:src="src"
></image>
</navigator>
</view>
</view>
</template>
<script setup lang="ts">
import type { HotItem } from '@/types/home'
// props
defineProps<{
list: HotItem[]
}>()
</script>
<style lang="scss">
/* 热门推荐 */
.hot {
display: flex;
flex-wrap: wrap;
min-height: 508rpx;
margin: 20rpx 20rpx 0;
border-radius: 10rpx;
background-color: #fff;
.title {
display: flex;
align-items: center;
padding: 24rpx 24rpx 0;
font-size: 32rpx;
color: #262626;
position: relative;
.title-desc {
font-size: 24rpx;
color: #7f7f7f;
margin-left: 18rpx;
}
}
.item {
display: flex;
flex-direction: column;
width: calc(50% - 1rpx);
height: 254rpx;
border-right: 1rpx solid #eee;
border-top: 1rpx solid #eee;
.title {
justify-content: start;
}
&:nth-child(2n) {
border-right: 0 none;
}
&:nth-child(-n + 2) {
border-top: 0 none;
}
.image {
width: 150rpx;
height: 150rpx;
}
}
.cards {
flex: 1;
padding: 15rpx 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>

View File

@ -1,38 +1,53 @@
<template>
<CustomNavbar />
<JbcSwiper :list="bannerList" />
<CategoryPanel :list="categoryList" />
<view class="content"> home </view>
<view class="viewport">
<!-- 自定义导航栏 -->
<CustomNavbar />
<!-- 滚动容器 -->
<scroll-view scroll-y class="scrool-view" refresher-enabled>
<!-- 轮播图 -->
<JbcSwiper :list="bannerList" />
<!-- 分类 -->
<CategoryPanel :list="categoryList" />
<!-- 热门 -->
<HotPanel :list="hotList" />
</scroll-view>
</view>
</template>
<script setup lang="ts">
import type { BannerItem, CategoryItem } from '@/types/home'
import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
import CustomNavbar from './components/CustomNavbar.vue'
import { ref } from 'vue'
import { getCategory, getHomeBanner } from '@/services/home'
import { getCategory, getHomeBanner, getHomeHot } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
//
const bannerList = ref<BannerItem[]>([])
const getBannerList = async () => {
const res = await getHomeBanner()
bannerList.value = res.result
console.log('bannerList: ', bannerList.value)
}
onLoad(() => {
getBannerList()
})
//
const categoryList = ref<CategoryItem[]>([])
const getCategoryList = async () => {
const res = await getCategory()
categoryList.value = res.result
console.log('categoryList: ', categoryList.value)
}
//
const hotList = ref<HotItem[]>([])
const getHotList = async () => {
const res = await getHomeHot()
hotList.value = res.result
console.log('hotList: ', hotList.value)
}
onLoad(() => {
getBannerList()
getCategoryList()
getHotList()
})
</script>
@ -42,4 +57,15 @@ page {
height: 100%;
overflow: hidden;
}
.viewport {
height: 100%;
display: flex;
flex-direction: column;
}
.scroll-view {
flex: 1;
overflow: hidden;
}
</style>

View File

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