From f2e2a5d05273abc52d399b470b8a6d72d62a09b8 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Thu, 19 Mar 2026 07:38:48 +0800
Subject: [PATCH] 21

---
 uniapp/pages/index/index.vue | 318 ++++++++++++++++++++---------------
 1 file changed, 180 insertions(+), 138 deletions(-)

diff --git a/uniapp/pages/index/index.vue b/uniapp/pages/index/index.vue
index 7113d7e..eb5e94b 100644
--- a/uniapp/pages/index/index.vue
+++ b/uniapp/pages/index/index.vue
@@ -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;
   }
 }