更新：课程首页增加”分类“功能

2025-11-13 14:54:11 +08:00
parent 6ba3781375
commit 8ed3680e5d
6 changed files with 529 additions and 117 deletions
--- a/pages/course/index.vue
+++ b/pages/course/index.vue
@@ -1,14 +1,15 @@
 <template>
  <view class="course-home-page">
    <!-- 头部区域 -->
-    <view class="home-bg" :style="{ paddingTop: notchHeight + 'px' }">
+    <view class="home-bg" :style="{ paddingTop: getNotchHeight() + 'px' }">
      <wd-search
        hide-cancel
        light
        clearable
+        disabled
        class="search-bar"
        :placeholder="$t('courseHome.searchPlaceholder')"
-        @search="handleSearch"
+        @click="handleSearch"
      />
      <view class="icon-hua">
        <image
@@ -20,7 +21,17 @@
    </view>

    <!-- 课程分类标签区域 -->
-    <!-- <view class="newLeve2">
+    <view class="classify-first-level">
+      <view 
+        class="item" 
+        v-for="(item, index) in firstLevelCategories" 
+        :class="{ active: selectedFirstLevel === item }"
+        :key="index" 
+        @click="handleFirstLevelClick(item)"
+      >{{ item }}</view>
+    </view>
+    <!-- 医学 -->
+    <view v-if="selectedFirstLevel === '医学'" class="newLeve2">
      <view class="home_nar nomargin" style="padding: 0; background-color: #fff">
        <view class="flexbox">
          <view
@@ -58,7 +69,42 @@
          </view>
        </view>
      </view>
-    </view> -->
+    </view>
+    <!-- 心理学 -->
+    <view v-if="selectedFirstLevel === '心理学'" class="soul_cate_box">
+      <scroll-view scroll-x="true">
+        <view class="cate_list" v-if="soulCateList.length > 0">
+          <view
+            class="cate_item_box"
+            v-for="(item, index) in soulCateList"
+            :key="index"
+            @click="handleClickCate(item)"
+          >
+            <view class="cate_item_border">
+              <image :src="item.icon"></image>
+            </view>
+            <view class="cate_item_name">{{ item.title }}</view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <!-- 国学 -->
+    <view v-if="selectedFirstLevel === '国学' && sociologyCateList.length > 0" class="sociology_cate_box">
+      <view
+        class="cate_item_box"
+        v-for="(v, i) in sociologyCateList"
+        @click="handleClickCate(v)"
+      >
+        <view class="cate_item_border">
+          <image
+            :src="v.icon"
+            mode="aspectFill"
+            style="width: 49rpx; height: 49rpx"
+          ></image>
+        </view>
+        <view class="cate_item_name">{{ v.title }}</view>
+      </view>
+    </view>

    <!-- 观看记录区域 -->
    <view class="learnBox" v-if="learnList.length > 0">
@@ -162,45 +208,59 @@ import { ref, onMounted } from 'vue'
 import { onShow, onHide, onPullDownRefresh, onPageScroll, onLoad } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import { courseApi } from '@/api/modules/course'
+import { courseSubjectClassificationApi } from '@/api/modules/cousre_subject_classification'
 import { commonApi } from '@/api/modules/common'
+import { getNotchHeight } from '@/utils/system'
+// import { onPageJump } from '@/utils'
 import type { IMedicalTag, ICourse, INews } from '@/types/course'

 const { t } = useI18n()

 // 系统信息
-const notchHeight = ref<number>(0)          // 刘海屏高度
 const scrollTop = ref<number>(0)            // 滚动位置

+/**
+ * 处理搜索点击
+ */
+const handleSearch = ({ value }: { value: string }) => {
+  uni.navigateTo({
+    url: `/pages/course/search?keyword=${value}`
+  })
+}
+
 // 分类相关
 const curseTagList = ref<IMedicalTag[]>([])           // 一级分类标签列表
 const sbuMedicalTagsList = ref<IMedicalTag[]>([])     // 二级分类标签列表
 const currentIndex = ref<number>(0)                    // 当前选中的一级分类索引
 const currentItem = ref<IMedicalTag | null>(null)     // 当前选中的一级分类项

-// 观看记录
-const learnList = ref<ICourse[]>([])                  // 观看记录列表
-
-// 新闻播报
-const newsList = ref<INews[]>([])                     // 新闻列表
-
-// 精彩试听
-const tryListenList = ref<ICourse[]>([])              // 试听课程列表
-
+// 学科数据
+const firstLevelCategories = ref<string[]>(['医学', '心理学', '国学'])
+const selectedFirstLevel = ref<number>('医学') // 当前选中的一级分类索引
 /**
- * 处理搜索点击
+ * 学科点击处理
 */
-const handleSearch = ({ value }: { value: string }) => {
-  uni.navigateTo({
-    url: `/pages/book/search?keyword=${value}`
-  })
+const handleFirstLevelClick = (item: string) => {
+  selectedFirstLevel.value = item
+  switch (item) {
+    case '医学':
+      getMedicalTags()
+      break
+    case '心理学':
+      getSoulCateList()
+      break
+    case '国学':
+      getSociologyCateList()
+      break
+  }
 }
-
 /**
+ * 医学
 * 获取课程分类数据
 */
 const getMedicalTags = async () => {
  try {
-    const res = await courseApi.getCourseMedicalTree()
+    const res = await courseSubjectClassificationApi.getCourseMedicalTree()
    if (res && res.code === 0) {
      if (res.labels && res.labels.length > 0) {
        curseTagList.value = res.labels
@@ -221,10 +281,88 @@ const getMedicalTags = async () => {
      }
    }
  } catch (error) {
-    console.error('获取课程分类失败:', error)
+    console.error('获取医学课程分类失败:', error)
+  }
+}
+/**
+ * 医学
+ * 一级分类点击处理
+ */
+const curseClick = (item: IMedicalTag, index: number) => {
+  currentItem.value = item
+  currentIndex.value = index
+  
+  if (item.isLast === 0) {
+    // 非终极分类，显示子分类
+    if (item.children && item.children.length > 0) {
+      sbuMedicalTagsList.value = item.children
+    } else {
+      sbuMedicalTagsList.value = []
+    }
+  } else {
+    // 终极分类，直接跳转
+    curseClickJump(item)
  }
 }

+/**
+ * 心理学
+ * 获取课程分类数据
+ */
+const soulCateList = ref<IMedicalTag[]>([])
+const getSoulCateList = async () => {
+  try {
+    const res = await courseSubjectClassificationApi.getCourseSoulTree()
+    if (res.labels&&res.labels.length>0) {
+			soulCateList.value = res.labels;
+		}
+  } catch (error) {
+    console.error('获取心理学课程分类失败:', error)
+  }
+}
+
+/**
+ * 国学
+ * 获取课程分类数据
+ */
+const sociologyCateList = ref<IMedicalTag[]>([])
+const getSociologyCateList = async () => {
+  try {
+    const res = await courseSubjectClassificationApi.getCourseSociologyTree()
+    if (res.labels&&res.labels.length>0) {
+			sociologyCateList.value = res.labels;
+		}
+  } catch (error) {
+    console.error('获取国学课程分类失败:', error)
+  }
+}
+
+/**
+ * 终极分类点击处理
+ */
+const curseClickJump = (item: IMedicalTag) => {
+  uni.navigateTo({
+    url: `/pages/course/index?id=${item.id}&title=${item.title}&pid=${item.pid}`
+  })
+}
+
+/**
+ * 页面跳转统一处理
+ */
+const onPageJump = (url: string, id?: number, title?: string) => {
+  let targetUrl = url
+  if (id !== undefined) {
+    targetUrl += `?id=${id}`
+    if (title) {
+      targetUrl += `&title=${encodeURIComponent(title)}`
+    }
+  }
+  uni.navigateTo({ url: targetUrl })
+}
+
+
+// 观看记录
+const learnList = ref<ICourse[]>([]) // 观看记录列表
 /**
 * 获取观看记录
 */
@@ -243,6 +381,42 @@ const getLearnCourse = async () => {
  }
 }

+// 新闻播报
+const newsList = ref<INews[]>([]) // 新闻列表
+/**
+ * 获取新闻列表
+ */
+const getNewsList = async () => {
+  try {
+    const res = await commonApi.getMessageList(0, 1, 0)
+    if (res && res.code === 0) {
+      if (res.messages && res.messages.length > 0) {
+        newsList.value = res.messages
+      } else {
+        newsList.value = []
+      }
+    }
+  } catch (error) {
+    console.error('获取新闻列表失败:', error)
+  }
+}
+/**
+ * 新闻点击处理
+ */
+const newsClick = (item: INews) => {
+  if (item.type === 1 && item.url) {
+    uni.navigateTo({
+      url: `/pages/news/newsForwebview?newsId=${item.id}&url=${item.url}&type=${item.type}`
+    })
+  } else {
+    uni.navigateTo({
+      url: `/pages/news/news?newsId=${item.id}&url=${item.url}&type=${item.type}`
+    })
+  }
+}
+
+// 精彩试听
+const tryListenList = ref<ICourse[]>([]) // 试听课程列表
 /**
 * 获取试听课程列表
 */
@@ -261,102 +435,20 @@ const getTryListenList = async () => {
  }
 }

-/**
- * 获取新闻列表
- */
-const getNewsList = async () => {
-  try {
-    const res = await commonApi.getMessageList(0, 1, 0)
-    if (res && res.code === 0) {
-      if (res.messages && res.messages.length > 0) {
-        newsList.value = res.messages
-      } else {
-        newsList.value = []
-      }
-    }
-  } catch (error) {
-    console.error('获取新闻列表失败:', error)
-  }
-}
-
 /**
 * 统一请求所有数据
 */
 const requestAll = async () => {
-  await getLearnCourse()
-  await getMedicalTags()
-  await getTryListenList()
-  await getNewsList()
-}
-
-/**
- * 一级分类点击处理
- */
-const curseClick = (item: IMedicalTag, index: number) => {
-  currentItem.value = item
-  currentIndex.value = index
-  
-  if (item.isLast === 0) {
-    // 非终极分类，显示子分类
-    if (item.children && item.children.length > 0) {
-      sbuMedicalTagsList.value = item.children
-    } else {
-      sbuMedicalTagsList.value = []
-    }
-  } else {
-    // 终极分类，直接跳转
-    uni.navigateTo({
-      url: `/pages/course/index?id=${item.id}&title=${item.title}&pid=${item.id}`
-    })
-  }
-}
-
-/**
- * 二级分类点击处理
- */
-const curseClickJump = (item: IMedicalTag) => {
-  uni.navigateTo({
-    url: `/pages/course/index?id=${item.id}&title=${item.title}&pid=${item.pid}`
-  })
-}
-
-/**
- * 新闻点击处理
- */
-const newsClick = (item: INews) => {
-  if (item.type === 1 && item.url) {
-    uni.navigateTo({
-      url: `/pages/news/newsForwebview?newsId=${item.id}&url=${item.url}&type=${item.type}`
-    })
-  } else {
-    uni.navigateTo({
-      url: `/pages/news/news?newsId=${item.id}&url=${item.url}&type=${item.type}`
-    })
-  }
-}
-
-/**
- * 页面跳转统一处理
- */
-const onPageJump = (url: string, id?: number, title?: string) => {
-  let targetUrl = url
-  if (id !== undefined) {
-    targetUrl += `?id=${id}`
-    if (title) {
-      targetUrl += `&title=${encodeURIComponent(title)}`
-    }
-  }
-  uni.navigateTo({ url: targetUrl })
+  getLearnCourse()
+  getMedicalTags()
+  getTryListenList()
+  getNewsList()
 }

 /**
 * 页面挂载
 */
-onMounted(() => {
-  // 获取系统信息，设置刘海屏高度
-  const systemInfo = uni.getSystemInfoSync()
-  notchHeight.value = systemInfo.safeArea?.top || 0
-  
+onMounted(() => {  
  // 重置分类索引
  currentIndex.value = 0
  
@@ -447,6 +539,16 @@ $border-color: #eeeeee;

 .search-bar {
  background-color: transparent !important;
+
+  :deep(.wd-search__block) {
+    background-color: transparent !important;
+    .wd-search__cover{
+      background: rgba(255, 255, 255, 0.5) !important;
+    }
+    .wd-search__placeholder-txt, .wd-search__search-icon{
+      color: #fff !important;
+    }
+  } 
 }

 // 公共样式
@@ -460,10 +562,210 @@ $border-color: #eeeeee;

 // 分类标签样式
 .newLeve2 {
-  background-color: #fff;
  padding: 0 10rpx;
  border-top: 1px solid #eee;
  padding-top: 4rpx;
+  border-bottom-left-radius: 20rpx;
+  border-bottom-right-radius: 20rpx;
+  box-shadow: 0 4rpx 12rpx rgba(51, 97, 165, 0.08);
+  margin-bottom: 10rpx;
+}
+
+// 一级分类标签样式
+.classify-first-level {
+  background: #FAFCFF;
+  display: flex;
+  justify-content: space-around;
+  padding: 16rpx 20rpx;
+  position: relative;
+  
+  .item {
+    position: relative;
+    padding: 20rpx 40rpx;
+    font-size: 32rpx;
+    color: #333;
+    background-color: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(51, 97, 165, 0.2);
+    border-radius: 50rpx;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4rpx 15rpx rgba(51, 97, 165, 0.1);
+    backdrop-filter: blur(8px);
+    font-weight: 500;
+    overflow: hidden;
+    z-index: 1;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      z-index: -1;
+    }
+    
+    /* 选中状态样式 */
+    &.active {
+      background: linear-gradient(135deg, #3361a5, #2952a3);
+      border-color: #2952a3;
+      box-shadow: 0 6rpx 20rpx rgba(41, 82, 163, 0.35);
+      color: #ffffff;
+      font-weight: 600;
+      
+      &::before {
+        opacity: 0.3;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1));
+      }
+    }
+    
+    /* 点击效果 */
+    &:active {
+      transform: scale(0.95);
+      box-shadow: 0 2rpx 10rpx rgba(51, 97, 165, 0.2);
+      
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 10rpx;
+        height: 10rpx;
+        background-color: rgba(51, 97, 165, 0.6);
+        border-radius: 50%;
+        transform: translate(-50%, -50%) scale(20);
+        opacity: 0;
+        animation: ripple 0.6s ease-out;
+      }
+    }
+    
+    /* 悬停效果（在支持的设备上） */
+    @media (hover: hover) {
+      &:hover:not(.active) {
+        background-color: rgba(227, 242, 253, 0.8);
+        border-color: rgba(51, 97, 165, 0.4);
+        transform: translateY(-4rpx);
+        box-shadow: 0 8rpx 20rpx rgba(51, 97, 165, 0.15);
+        
+        &::before {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+}
+
+.soul_cate_box {
+  background: #7dc1f0;
+  box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
+  border-radius: 10rpx;
+  margin: 0 10rpx;
+
+  .cate_list {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .cate_item_box {
+      width: 20%;
+      padding: 40rpx 0 30rpx;
+      text-align: center;
+
+      .cate_item_border {
+        width: 60rpx;
+        height: 60rpx;
+        background-size: 100% 100%;
+        background-image: url("@/static/soul/cate_bg.png");
+        border-radius: 4rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+
+        image {
+          width: 46rpx;
+          height: 46rpx;
+        }
+      }
+
+      .cate_item_name {
+        margin-top: 15rpx;
+        font-size: 24rpx;
+        line-height: 34rpx;
+        text-align: center;
+        color: #fff;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.sociology_cate_box {
+  width: 100%;
+  height: auto;
+  background: #3ab3ae;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-wrap: wrap;
+
+  background-size: 100% 100%;
+  box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
+  border-radius: 7rpx;
+  padding: 10rpx 10rpx 0;
+  box-sizing: border-box;
+
+  .cate_item_box {
+    width: 25%;
+    height: 100%;
+    padding: 10rpx 0 10rpx;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    flex-direction: column;
+
+    .cate_item_border {
+      width: 65rpx;
+      height: 78rpx;
+      background-size: 100% 100%;
+      background-image: url("@/static/soul/cate_bg.png");
+      border-radius: 4rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      image {
+        // height: 56rpx;
+      }
+    }
+
+    .cate_item_name {
+      margin-top: 10rpx;
+      font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
+
+      font-weight: normal;
+      font-size: 36rpx;
+      color: #000000;
+      // line-height: 46rpx;
+      text-align: center;
+      color: #fff;
+    }
+  }
+}
+
+/* 点击涟漪动画 */
+@keyframes ripple {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(20);
+    opacity: 0;
+  }
 }

 .home_nar {