464 lines
10 KiB
Vue
464 lines
10 KiB
Vue
<template>
|
|
<view class="home-page">
|
|
<!-- 自定义导航栏 -->
|
|
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
|
<view class="navbar-content" :style="{ height: navbarHeight + 'px' }">
|
|
<text class="navbar-title">首页</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 导航栏占位 -->
|
|
<view class="navbar-placeholder" :style="{ height: totalNavbarHeight + 'px' }"></view>
|
|
|
|
<!-- 页面内容 -->
|
|
<scroll-view
|
|
class="page-content"
|
|
scroll-y
|
|
refresher-enabled
|
|
:refresher-triggered="isRefreshing"
|
|
@refresherrefresh="onRefresh"
|
|
>
|
|
<!-- Banner 轮播图 -->
|
|
<view class="banner-section" v-if="bannerList.length > 0">
|
|
<swiper
|
|
class="banner-swiper"
|
|
:indicator-dots="bannerList.length > 1"
|
|
indicator-color="rgba(255,255,255,0.5)"
|
|
indicator-active-color="#FFFFFF"
|
|
:autoplay="true"
|
|
:interval="4000"
|
|
:circular="true"
|
|
>
|
|
<swiper-item
|
|
v-for="(item, index) in bannerList"
|
|
:key="index"
|
|
@click="handleBannerClick(item)"
|
|
>
|
|
<image
|
|
:src="item.imageUrl"
|
|
mode="aspectFill"
|
|
class="banner-image"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 专业测评入口 -->
|
|
<view class="section-card" v-if="navigationList.length > 0">
|
|
<view class="section-header">
|
|
<view class="section-indicator"></view>
|
|
<text class="section-title">专业测评</text>
|
|
</view>
|
|
<view class="assessment-grid">
|
|
<view
|
|
class="assessment-card"
|
|
v-for="(item, index) in navigationList"
|
|
:key="index"
|
|
:class="'assessment-card--' + index"
|
|
@click="handleNavigationClick(item)"
|
|
>
|
|
<!-- 即将上线标签 -->
|
|
<view v-if="item.status === 2" class="coming-soon-tag">
|
|
<text>即将上线</text>
|
|
</view>
|
|
<image
|
|
:src="item.imageUrl"
|
|
mode="aspectFit"
|
|
class="assessment-icon"
|
|
/>
|
|
<text class="assessment-name">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 学业规划 -->
|
|
<view class="section-card">
|
|
<view class="section-header">
|
|
<view class="section-indicator"></view>
|
|
<text class="section-title">学业规划</text>
|
|
</view>
|
|
<view class="planner-btn" @click="goToPlanner">
|
|
<text class="planner-btn__text">预约入口</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 更多 -->
|
|
<view class="section-card">
|
|
<view class="section-header">
|
|
<view class="section-indicator"></view>
|
|
<text class="section-title">更多</text>
|
|
</view>
|
|
<view class="more-grid">
|
|
<view class="more-card more-card--plan" @click="goToStudyPlan">
|
|
<text class="more-card__title">学习方案</text>
|
|
<image
|
|
src="/static/icons/study-plan.png"
|
|
mode="aspectFit"
|
|
class="more-card__icon"
|
|
/>
|
|
</view>
|
|
<view class="more-card more-card--consult" @click="goToConsult">
|
|
<text class="more-card__title">详细咨询</text>
|
|
<image
|
|
src="/static/icons/consult.png"
|
|
mode="aspectFit"
|
|
class="more-card__icon"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view class="loading-section" v-if="pageLoading">
|
|
<Loading type="inline" :loading="true" />
|
|
</view>
|
|
|
|
<!-- 底部安全间距 -->
|
|
<view class="safe-bottom"></view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useUserStore } from '@/store/user.js'
|
|
import { useNavbar } from '@/composables/useNavbar.js'
|
|
import { getBannerList, getNavigationList } from '@/api/home.js'
|
|
import Loading from '@/components/Loading/index.vue'
|
|
|
|
const userStore = useUserStore()
|
|
const { statusBarHeight, navbarHeight, totalNavbarHeight } = useNavbar()
|
|
|
|
// 页面数据
|
|
const pageLoading = ref(true)
|
|
const isRefreshing = ref(false)
|
|
const bannerList = ref([])
|
|
const navigationList = ref([])
|
|
|
|
/**
|
|
* 加载Banner数据
|
|
*/
|
|
async function loadBannerList() {
|
|
try {
|
|
const res = await getBannerList()
|
|
if (res && res.code === 0 && res.data) {
|
|
bannerList.value = Array.isArray(res.data) ? res.data : (res.data.list || [])
|
|
}
|
|
} catch (error) {
|
|
console.error('加载Banner失败:', error)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 加载首页导航入口数据
|
|
*/
|
|
async function loadNavigationList() {
|
|
try {
|
|
const res = await getNavigationList()
|
|
if (res && res.code === 0 && res.data) {
|
|
navigationList.value = Array.isArray(res.data) ? res.data : (res.data.list || [])
|
|
}
|
|
} catch (error) {
|
|
console.error('加载导航入口失败:', error)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 初始化页面数据
|
|
*/
|
|
async function initPageData() {
|
|
pageLoading.value = true
|
|
try {
|
|
userStore.restoreFromStorage()
|
|
await Promise.all([
|
|
loadBannerList(),
|
|
loadNavigationList()
|
|
])
|
|
} finally {
|
|
pageLoading.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 处理Banner点击
|
|
*/
|
|
function handleBannerClick(item) {
|
|
if (!item.linkUrl) return
|
|
if (item.linkType === 1) {
|
|
uni.navigateTo({
|
|
url: item.linkUrl,
|
|
fail: () => {
|
|
uni.switchTab({ url: item.linkUrl })
|
|
}
|
|
})
|
|
} else if (item.linkType === 2) {
|
|
uni.navigateTo({
|
|
url: `/pages/webview/index?url=${encodeURIComponent(item.linkUrl)}`
|
|
})
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 处理导航入口点击
|
|
*/
|
|
function handleNavigationClick(item) {
|
|
if (item.status === 2) {
|
|
uni.showToast({ title: '该功能即将上线', icon: 'none', duration: 2000 })
|
|
return
|
|
}
|
|
if (!item.linkUrl) return
|
|
uni.navigateTo({
|
|
url: item.linkUrl,
|
|
fail: () => {
|
|
uni.switchTab({ url: item.linkUrl })
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 跳转学业规划预约
|
|
*/
|
|
function goToPlanner() {
|
|
uni.navigateTo({ url: '/pages/planner/list/index' })
|
|
}
|
|
|
|
/**
|
|
* 跳转学习方案（业务详情页）
|
|
*/
|
|
function goToStudyPlan() {
|
|
uni.navigateTo({ url: '/pages/business/detail/index?type=study-plan' })
|
|
}
|
|
|
|
/**
|
|
* 跳转详细咨询（业务详情页）
|
|
*/
|
|
function goToConsult() {
|
|
uni.navigateTo({ url: '/pages/business/detail/index?type=consult' })
|
|
}
|
|
|
|
/**
|
|
* 下拉刷新
|
|
*/
|
|
async function onRefresh() {
|
|
isRefreshing.value = true
|
|
await initPageData()
|
|
isRefreshing.value = false
|
|
}
|
|
|
|
onMounted(() => {
|
|
initPageData()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/styles/variables.scss';
|
|
|
|
.home-page {
|
|
min-height: 100vh;
|
|
background-color: $bg-color;
|
|
}
|
|
|
|
// 自定义导航栏
|
|
.custom-navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: $bg-white;
|
|
z-index: 999;
|
|
|
|
.navbar-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.navbar-title {
|
|
font-size: 34rpx;
|
|
font-weight: $font-weight-medium;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-placeholder {
|
|
width: 100%;
|
|
}
|
|
|
|
// 页面内容
|
|
.page-content {
|
|
height: calc(100vh - var(--navbar-height, 0px));
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
// Banner轮播
|
|
.banner-section {
|
|
width: 100%;
|
|
padding: 0 $spacing-lg;
|
|
box-sizing: border-box;
|
|
margin-top: $spacing-sm;
|
|
|
|
.banner-swiper {
|
|
width: 100%;
|
|
height: 330rpx;
|
|
border-radius: $border-radius-lg;
|
|
overflow: hidden;
|
|
|
|
.banner-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: $border-radius-lg;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 通用区块卡片
|
|
.section-card {
|
|
margin: $spacing-lg $spacing-lg 0;
|
|
padding: $spacing-lg;
|
|
background-color: $bg-white;
|
|
border-radius: $border-radius-xl;
|
|
}
|
|
|
|
// 区块标题
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: $spacing-lg;
|
|
|
|
.section-indicator {
|
|
width: 8rpx;
|
|
height: 36rpx;
|
|
background-color: $warning-color;
|
|
border-radius: $border-radius-xs;
|
|
margin-right: $spacing-sm;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: $font-size-xl;
|
|
font-weight: $font-weight-bold;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
|
|
// 专业测评 - 两列卡片
|
|
.assessment-grid {
|
|
display: flex;
|
|
gap: $spacing-md;
|
|
}
|
|
|
|
.assessment-card {
|
|
position: relative;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 240rpx;
|
|
border-radius: $border-radius-xl;
|
|
overflow: hidden;
|
|
|
|
// 第一个卡片 - 红/橙渐变
|
|
&--0 {
|
|
background: linear-gradient(135deg, #FF7B6B, #FF5B5B);
|
|
}
|
|
|
|
// 第二个卡片 - 橙/黄渐变
|
|
&--1 {
|
|
background: linear-gradient(135deg, #FFD080, #FFB347);
|
|
}
|
|
|
|
.coming-soon-tag {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
padding: 6rpx 20rpx;
|
|
border-radius: 0 $border-radius-xl 0 $border-radius-lg;
|
|
z-index: 1;
|
|
|
|
text {
|
|
font-size: $font-size-xs;
|
|
color: $text-white;
|
|
}
|
|
}
|
|
|
|
.assessment-icon {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin-bottom: $spacing-sm;
|
|
}
|
|
|
|
.assessment-name {
|
|
font-size: $font-size-md;
|
|
font-weight: $font-weight-bold;
|
|
color: $text-white;
|
|
}
|
|
}
|
|
|
|
// 学业规划 - 预约按钮
|
|
.planner-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 96rpx;
|
|
border-radius: $border-radius-round;
|
|
background: linear-gradient(90deg, #FFB347, #FF8C42);
|
|
|
|
&__text {
|
|
font-size: $font-size-lg;
|
|
font-weight: $font-weight-bold;
|
|
color: $text-white;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
}
|
|
|
|
// 更多 - 两列卡片
|
|
.more-grid {
|
|
display: flex;
|
|
gap: $spacing-md;
|
|
}
|
|
|
|
.more-card {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 160rpx;
|
|
padding: 0 $spacing-lg;
|
|
border-radius: $border-radius-xl;
|
|
overflow: hidden;
|
|
|
|
&--plan {
|
|
background: linear-gradient(135deg, #FFF5EB, #FFE8D5);
|
|
}
|
|
|
|
&--consult {
|
|
background: linear-gradient(135deg, #FFE8EC, #FFD5DC);
|
|
}
|
|
|
|
&__title {
|
|
font-size: $font-size-md;
|
|
font-weight: $font-weight-bold;
|
|
color: $text-color;
|
|
}
|
|
|
|
&__icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
|
|
// 加载状态
|
|
.loading-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 100rpx 0;
|
|
}
|
|
|
|
// 底部安全区域
|
|
.safe-bottom {
|
|
height: 40rpx;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
</style>
|