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