outsource/mi-assessment
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

21

Browse Source
This commit is contained in:
zpc 2026-03-19 07:38:48 +08:00
parent 304431010e
commit f2e2a5d052
1 changed files with 180 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

318
uniapp/pages/index/index.vue
View File

@ -44,7 +44,7 @@
</view>
<!-- 专业测评入口 -->
<view class="assessment-section" v-if="navigationList.length > 0">
<view class="section-card" v-if="navigationList.length > 0">
<view class="section-header">
<view class="section-indicator"></view>
<text class="section-title">专业测评</text>
@ -54,12 +54,13 @@
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">
<view v-if="item.status === 2" class="coming-soon-tag">
<text>即将上线</text>
</view> -->
</view>
<image
:src="item.imageUrl"
mode="aspectFit"
@ -70,19 +71,41 @@
</view>
</view>
<!-- 关于我们 - 宣传长图 -->
<view class="promotion-section" v-if="promotionList.length > 0">
<!-- 学业规划 -->
<view class="section-card">
<view class="section-header">
<view class="section-indicator"></view>
<text class="section-title">关于我们</text>
<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>
<image
v-for="(item, index) in promotionList"
:key="index"
:src="item.imageUrl"
mode="widthFix"
class="promotion-image"
/>
</view>
<!-- 加载状态 -->
@ -90,16 +113,17 @@
<Loading type="inline" :loading="true" />
</view>
<!-- 底部安全间距 -->
<view class="safe-bottom"></view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user.js'
import { useNavbar } from '@/composables/useNavbar.js'
import { getBannerList, getAssessmentList, getNavigationList, getPromotionList } from '@/api/home.js'
import { getBannerList, getNavigationList } from '@/api/home.js'
import Loading from '@/components/Loading/index.vue'
const userStore = useUserStore()
@ -109,11 +133,7 @@ const { statusBarHeight, navbarHeight, totalNavbarHeight } = useNavbar()
const pageLoading = ref(true)
const isRefreshing = ref(false)
const bannerList = ref([])
const assessmentList = ref([])
const navigationList = ref([])
const promotionList = ref([])
// 导航栏样式已直接在模板中绑定
/**
* 加载Banner数据
@ -129,20 +149,6 @@ async function loadBannerList() {
}
}
/**
* 加载测评入口数据
*/
async function loadAssessmentList() {
try {
const res = await getAssessmentList()
if (res && res.code === 0 && res.data) {
assessmentList.value = Array.isArray(res.data) ? res.data : (res.data.list || [])
}
} catch (error) {
console.error('加载测评入口失败:', error)
}
}
/**
* 加载首页导航入口数据
*/
@ -157,35 +163,16 @@ async function loadNavigationList() {
}
}
/**
* 加载宣传图数据
*/
async function loadPromotionList() {
try {
const res = await getPromotionList()
if (res && res.code === 0 && res.data) {
promotionList.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(),
loadAssessmentList(),
loadNavigationList(),
loadPromotionList()
loadNavigationList()
])
} finally {
pageLoading.value = false
@ -197,21 +184,14 @@ async function initPageData() {
*/
function handleBannerClick(item) {
if (!item.linkUrl) return
// 根据链接类型跳转（0=无 1=内部页面 2=外部链接 3=小程序）
if (item.linkType === 1) {
// 小程序内页面跳转
uni.navigateTo({
url: item.linkUrl,
fail: () => {
// 如果是tabBar页面，使用switchTab
uni.switchTab({
url: item.linkUrl
})
uni.switchTab({ url: item.linkUrl })
}
})
} else if (item.linkType === 2) {
// 跳转到webview页面
uni.navigateTo({
url: `/pages/webview/index?url=${encodeURIComponent(item.linkUrl)}`
})
@ -222,30 +202,42 @@ function handleBannerClick(item) {
* 处理导航入口点击
*/
function handleNavigationClick(item) {
// 即将上线的导航，弹出提示
if (item.status === 2) {
uni.showToast({
title: '该功能即将上线',
icon: 'none',
duration: 2000
})
uni.showToast({ title: '该功能即将上线', icon: 'none', duration: 2000 })
return
}
// 根据后台配置的跳转链接进行导航
if (!item.linkUrl) return
uni.navigateTo({
url: item.linkUrl,
fail: () => {
// 如果是tabBar页面，使用switchTab
uni.switchTab({ url: item.linkUrl })
}
})
}
/**
* scroll-view 下拉刷新
* 跳转学业规划预约
*/
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
@ -253,9 +245,6 @@ async function onRefresh() {
isRefreshing.value = false
}
/**
* 页面加载
*/
onMounted(() => {
initPageData()
})
@ -277,12 +266,12 @@ onMounted(() => {
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;
@ -295,7 +284,7 @@ onMounted(() => {
width: 100%;
}
// 页面内容（scroll-view 需要固定高度）
// 页面内容
.page-content {
height: calc(100vh - var(--navbar-height, 0px));
padding-bottom: env(safe-area-inset-bottom);
@ -307,14 +296,13 @@ onMounted(() => {
padding: 0 $spacing-lg;
box-sizing: border-box;
margin-top: $spacing-sm;
.banner-swiper {
width: 100%;
// 按设计图比例 750:360 ≈ 2:1，减去两侧 padding 后约 686rpx 宽，高度约 330rpx
height: 330rpx;
border-radius: $border-radius-lg;
overflow: hidden;
.banner-image {
width: 100%;
height: 100%;
@ -323,12 +311,20 @@ onMounted(() => {
}
}
// 通用区块卡片
.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;
@ -336,7 +332,7 @@ onMounted(() => {
border-radius: $border-radius-xs;
margin-right: $spacing-sm;
}
.section-title {
font-size: $font-size-xl;
font-weight: $font-weight-bold;
@ -344,65 +340,111 @@ onMounted(() => {
}
}
// 测评入口 - 横向排列
.assessment-section {
padding: $spacing-xl $spacing-lg $spacing-lg;
.assessment-grid {
display: flex;
gap: $spacing-md;
// 专业测评 - 两列卡片
.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);
}
.assessment-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 200rpx;
.coming-soon-tag {
position: absolute;
top: 0;
right: 0;
background-color: $warning-color;
padding: 4rpx 16rpx;
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: 200rpx;
height: 200rpx;
border-radius: $border-radius-xl;
}
.assessment-name {
margin-top: $spacing-sm;
font-size: $font-size-md;
font-weight: $font-weight-bold;
color: $text-color;
// 第二个卡片 - 橙/黄渐变
&--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;
}
}
// 关于我们 - 宣传长图
.promotion-section {
padding: $spacing-lg $spacing-lg 0;
.promotion-image {
width: 100%;
display: block;
margin-bottom: $spacing-md;
border-radius: $border-radius-lg;
&:last-child {
margin-bottom: 0;
}
// 学业规划 - 预约按钮
.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;
}
}