104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<template>
|
|
<!-- 页面头部 -->
|
|
<PageHeader title="活氧舱" subtitle="科学训练 · 遇见更好的自己" />
|
|
|
|
<!-- 滚动内容区域 -->
|
|
<scroll-view
|
|
scroll-y
|
|
@scroll="handleScroll"
|
|
class="scroll-container"
|
|
>
|
|
<!-- 主内容 -->
|
|
<view class="home-page">
|
|
<HomeSkeleton v-if="loading" />
|
|
<template v-else>
|
|
<BannerSwiper />
|
|
<QuickEntry />
|
|
<RecommendCourses ref="recommendCoursesRef" />
|
|
<TodayRecommend ref="todayRecommendRef" />
|
|
<view class="bottom-placeholder"></view>
|
|
</template>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- TabBar 固定在底部 -->
|
|
<view class="tabbar-fixed">
|
|
<TabBar />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import BannerSwiper from '@/components/index/BannerSwiper.vue'
|
|
import QuickEntry from '@/components/index/QuickEntry.vue'
|
|
import RecommendCourses from '@/components/index/RecommendCourses.vue'
|
|
import TodayRecommend from '@/components/index/TodayRecommend.vue'
|
|
import TabBar from '@/components/TabBar.vue'
|
|
import HomeSkeleton from '@/components/Skeleton/HomeSkeleton.vue'
|
|
import PageHeader from '@/components/index/PageHeader.vue'
|
|
|
|
const loading = ref(true)
|
|
const recommendCoursesRef = ref(null)
|
|
const todayRecommendRef = ref(null)
|
|
|
|
// 滚动距离
|
|
const scrollDistance = ref(0)
|
|
|
|
// 滚动监听
|
|
const handleScroll = (e) => {
|
|
scrollDistance.value = e.detail.scrollTop
|
|
console.log(`滚动距离: ${scrollDistance.value}`)
|
|
}
|
|
|
|
onShow(() => {
|
|
// 页面显示时触发未读消息检查
|
|
uni.$emit('pageShow')
|
|
})
|
|
|
|
onMounted(() => {
|
|
// 设置测试token和userId（实际项目中由登录接口返回）
|
|
const testUserId = 1
|
|
uni.setStorageSync('userId', testUserId)
|
|
|
|
// 延迟触发未读消息检查，等待子组件挂载完成
|
|
setTimeout(() => {
|
|
uni.$emit('pageShow')
|
|
}, 500)
|
|
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1500)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 滚动容器 */
|
|
.scroll-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 主内容区域 */
|
|
.home-page {
|
|
min-height: 100vh;
|
|
padding-bottom: 160rpx;
|
|
}
|
|
|
|
/* 固定 TabBar */
|
|
.tabbar-fixed {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.bottom-placeholder {
|
|
height: 120rpx;
|
|
}
|
|
</style>
|