更新：增加课程首页分类跳转列表页；优化全站列表分页加载；

2025-11-18 13:45:46 +08:00
parent 21b03635a2
commit d76c6cdff1
67 changed files with 10976 additions and 369 deletions
--- a/pages/course/index.vue
+++ b/pages/course/index.vue
@@ -78,7 +78,7 @@
            class="cate_item_box"
            v-for="(item, index) in soulCateList"
            :key="index"
-            @click="handleClickCate(item)"
+            @click="curseClickJump(item)"
          >
            <view class="cate_item_border">
              <image :src="item.icon"></image>
@@ -93,7 +93,7 @@
      <view
        class="cate_item_box"
        v-for="(v, i) in sociologyCateList"
-        @click="handleClickCate(v)"
+        @click="curseClickJump(v)"
      >
        <view class="cate_item_border">
          <image
@@ -339,8 +339,12 @@ const getSociologyCateList = async () => {
 * 终极分类点击处理
 */
 const curseClickJump = (item: IMedicalTag) => {
+  // uni.showToast({
+  //   title: '课程分类列表正在开发中，现在还不能跳转',
+  //   icon: 'none'
+  // })
  uni.navigateTo({
-    url: `/pages/course/index?id=${item.id}&title=${item.title}&pid=${item.pid}`
+    url: `/pages/course/list/category?id=${item.id}&title=${item.title}&pid=${item.pid}&subject=${selectedFirstLevel.value}`
  })
 }

@@ -420,7 +424,11 @@ const tryListenList = ref<ICourse[]>([]) // 试听课程列表
 */
 const getTryListenList = async () => {
  try {
-    const res = await courseApi.getMarketCourseList(1, 6, 1)
+    const res = await courseApi.getMarketCourseList({
+      page: 1,
+      limit: 6,
+      id: 1
+    })
    if (res && res.code === 0) {
      if (res.courseList && res.courseList.records && res.courseList.records.length > 0) {
        tryListenList.value = res.courseList.records
--- a/pages/course/list/category.vue
+++ b/pages/course/list/category.vue
@@ -0,0 +1,182 @@
+<template>
+  <z-paging ref="paging" v-model="courseList" auto-show-back-to-top class="course-list-paging" @query="getCourseList">
+    <template #top>
+      <!-- 自定义导航栏 -->
+      <nav-bar :title="pageTitle" />
+
+      <wd-tabs v-if="subCategoryList.length > 0" style="background-color: transparent;" @change="changeCategory">
+        <wd-tab v-for="item in subCategoryList" :key="item" :title="`${item.title}`" :name="item.id"></wd-tab>
+      </wd-tabs>
+    </template>
+
+    <!-- 子级分类 -->
+    <view v-if="selectedTab && selectedTab.children && selectedTab.children.length > 0" class="sub-category-list">
+      <view v-for="child in selectedTab.children" :key="child.id" :class="{'active': child.id === radio_category_id}" class="sub-category-child-item">{{ child.title }}</view>
+    </view>
+
+    <!-- 课程列表 -->
+    <view class="course-list">
+      <listItem v-for="item in courseList" :key="item.id" :data="item" cover="squareImage" desc="content" /> 
+    </view>
+
+    <!-- <wd-backtop :scrollTop="scrollTop"></wd-backtop> -->
+  </z-paging>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import listItem from '@/components/course/ListItem.vue'
+import { courseSubjectClassificationApi } from '@/api/modules/cousre_subject_classification'
+import type { ICategory, ICourse } from '@/types/course'
+
+const paging = ref<any>(null)
+
+// 获取url传输的参数
+const pageTitle = ref<string>('')
+const subject = ref<string>('')
+const categoryId = ref<number>(0)
+
+onLoad((options: any) => {
+  pageTitle.value = options.title || '' // 分类名称
+  subject.value = options.subject || '' // 学科
+  categoryId.value = options.id || 0 // 分类id
+})
+
+// 分类下的子级分类
+const tab_category_id = ref<number>(0) // 选中的tab
+const radio_category_id = ref<number>(0) // 选中的子级分类id
+const subCategoryList = ref<ICategory[]>([]) // 子级分类列表
+
+/**
+ * 获取分类下的子级分类
+ */
+const getSubCategoryList = async () => {
+  try {
+    let res: any = null
+    switch (subject.value) {
+      case '医学':
+        res = await courseSubjectClassificationApi.getCourseMedicalChildLabels(categoryId.value)
+        break
+      case '心理学':
+        res = await courseSubjectClassificationApi.getCourseSoulChildLabels(categoryId.value)
+        break
+    }
+    if (res && res.code === 0) {
+      if (res.labels && res.labels.length > 0) {
+        subCategoryList.value = res.labels
+        // 默认选中第一个tab
+        tab_category_id.value = res.labels[0].id
+        radio_category_id.value = res.labels[0].children[0] && res.labels[0].children[0].id || 0
+      } else {
+        subCategoryList.value = []
+        tab_category_id.value = 0
+        radio_category_id.value = 0
+      }
+    }
+  } catch (error) {
+    console.error('获取分类下的子级分类失败:', error)
+  }
+}
+
+/**
+ * tab切换
+ */
+const selectedTab = computed(() => {
+  return subCategoryList.value.find((item: ICategory) => item.id === tab_category_id.value)
+})
+const changeCategory = ({ name }: { name: number}) => {
+  tab_category_id.value = name
+  radio_category_id.value = selectedTab.value && selectedTab.value.children[0] && selectedTab.value.children[0].id || 0
+}
+
+// 分类下的课程列表
+const courseList = ref<ICourse[]>([]) // 课程列表
+const selectedCategoryId = computed(() => {
+  return radio_category_id.value || tab_category_id.value || categoryId.value
+})
+
+/**
+ * 获取分类下的课程列表
+ */
+const courseQuery = ref<any>({
+  id: 0,
+  page: 1,
+  limit: 2
+})
+const getCourseList = async (pageNo: number, pageSize: number) => {
+  if (!selectedCategoryId.value) {
+    return
+  }
+  try {
+    courseQuery.value.id = selectedCategoryId.value
+    courseQuery.value.page = pageNo
+    courseQuery.value.limit = pageSize
+
+    let res: any = null
+    switch (subject.value) {
+      case '医学':
+        res = await courseSubjectClassificationApi.getMedicalCourseList(courseQuery.value)
+        break
+      case '心理学':
+        res = await courseSubjectClassificationApi.getSoulCourseList(courseQuery.value)
+        break
+      case '国学':
+        res = await courseSubjectClassificationApi.getSociologyCourseList(courseQuery.value)
+        break
+    }
+    if (res && res.code === 0) {
+      paging.value.complete(res.courses.records);
+    }
+  } catch (error) {
+    paging.value.complete(false);
+    console.error('获取分类下的课程列表失败:', error)
+  }
+}
+
+// 监听显示状态，重置选择
+watch(() => selectedCategoryId.value, (newVal: number) => {
+  courseQuery.value.page = 1
+  courseList.value = []
+  paging.value && paging.value.reload();
+})
+
+// 页面加载时获取分类下的课程列表
+onMounted(async () => {
+  await getSubCategoryList()
+})
+</script>
+
+<style lang="scss" scoped>
+.course-list-paging {
+  background-color: #f5f7fa;
+}
+.sub-category-list {
+  padding: 10px;
+  padding-bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  .sub-category-child-item {
+    flex: 1;
+    text-align: center;
+    padding: 5px 10px;
+    margin: 5px;
+    border-radius: 5px;
+    border: 1px solid #bfcad9;
+    background-color: #fff;
+    color: #333;
+    font-size: 16px;
+    &.active {
+      border-color: #258feb;
+      background-color: #258feb;
+      color: #fff;
+    }
+  }
+}
+.course-list {
+  padding: 0 10px;
+  padding-top: 10px;
+}
+
+
+</style>
--- a/pages/course/list/components/list-item.vue
+++ b/pages/course/list/components/list-item.vue
@@ -1,141 +0,0 @@
-<template>
-  <wd-card type="rectangle" custom-class="list-item-card" @click="goCourseDetail(data.id)">
-    <view class="content">
-      <image :src="data[cover]" mode="aspectFill" class="course-cover-image"/>
-      <view class="course-info">
-        <view class="course-name">{{ data[title] }}</view>
-        <view class="course-desc" v-html="data[desc]"></view>
-        <!-- 课程标签 -->
-        <view class="course-tags">
-          <wd-tag v-if="data.level && data.level !== 0" type="primary">
-            {{ data.level === 1 ? $t('courseSearch.levelBeginner') : $t('courseSearch.levelAdvanced') }}
-          </wd-tag>
-          <wd-tag v-if="data.selective === 1" type="warning">
-            {{ $t('courseSearch.required') }}
-          </wd-tag>
-          <wd-tag v-if="data.selective === 2" type="success">
-            {{ $t('courseSearch.elective') }}
-          </wd-tag>
-        </view>
-      </view>
-    </view>
-
-    <template #footer>
-      <!-- 课程价格 -->
-      <view v-if="data.courseCatalogueEntityList" class="text-[red]">
-        <text v-if="data.courseCatalogueEntityList.length === 1">
-          {{
-            data.courseCatalogueEntityList[0].halfFee === 0
-              ? $t('courseSearch.free')
-              : `¥${data.courseCatalogueEntityList[0].halfFee}/${data.courseCatalogueEntityList[0].fee}`
-          }}
-        </text>
-        <text v-if="data.courseCatalogueEntityList.length > 1">
-          <text v-for="(v, i) in data.courseCatalogueEntityList" :key="i">
-            {{ formatCatalogueTitle(v.title) }}
-            <text v-if="i !== data.courseCatalogueEntityList.length - 1">/</text>
-          </text>
-          {{
-            data.courseCatalogueEntityList[0].halfFee === 0
-              ? $t('courseSearch.free')
-              : ` ${$t('courseSearch.each')}${data.courseCatalogueEntityList[0].halfFee}/${data.courseCatalogueEntityList[0].fee}`
-          }}
-        </text>
-      </view>
-      <wd-button v-if="showToDetail" size="small" custom-class="course-detail-btn">课程详情</wd-button>
-    </template>
-  </wd-card>
-</template>
-
-<script lang="ts" setup>
-import { defineProps } from 'vue'
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({})
-  },
-  title: {
-    type: String,
-    default: 'title'
-  },
-  desc: {
-    type: String,
-    default: 'desc'
-  },
-  cover: {
-    type: String,
-    default: 'squareImage'
-  },
-  showToDetail: {
-    type: Boolean,
-    default: true
-  }
-})
-
-/**
- * 格式化课程目录标题
- * 提取"上/中/下"
- */
-const formatCatalogueTitle = (title: string): string => {
-  const keywords = ['上部', '中部', '下部']
-  const result: string[] = []
-
-  keywords.forEach((keyword) => {
-    if (title.includes(keyword)) {
-      result.push(keyword.substring(0, 1))
-    }
-  })
-
-  return result.join('')
-}
-
-/**
- * 跳转到课程详情
- */
-const goCourseDetail = (courseId: number) => {
-  uni.navigateTo({
-    url: `/pages/course/details/course?id=${courseId}`
-  })
-}
-</script>
-
-<style lang="scss" scoped>
-.list-item-card {
-  box-shadow: 0px 0px 10px 0px #a7bbe4 !important;
-  border-radius: 10px !important;
-}
-.content {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-
-  .course-cover-image {
-    width: 124px;
-    height: 100px;
-  }
-  .course-info {
-    flex: 1;
-    margin-left: 10px;
-    .course-name {
-      color: rgba(0,0,0,0.85);
-      font-size: 16px;
-    }
-    .course-desc {
-      color: rgba(0,0,0,0.4);
-      font-size: 12px;
-      line-height: 1.5;
-      max-height: 4.5em;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      text-overflow: ellipsis;
-    }
-  }
-}
-.course-detail-btn {
-  background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;
-  color: #fff !important;
-}
-
-</style>
--- a/pages/course/list/tryListen.vue
+++ b/pages/course/list/tryListen.vue
@@ -1,47 +1,48 @@
 <template>
-  <view>
-    <!-- 自定义导航栏 -->
-    <nav-bar :title="$t('courseHome.tryListen')" />
+  <z-paging ref="paging" v-model="tryListenList" auto-show-back-to-top class="course-list-paging" @query="getTryListenList">
+    <template #top>
+      <!-- 自定义导航栏 -->
+      <nav-bar :title="$t('courseHome.tryListen')" />
+    </template>

    <!-- 课程列表 -->
    <view class="course-list">
-      <list-item v-for="item in tryListenList" :key="item.id" :data="item" desc="content" />
+      <listItem v-for="item in tryListenList" :key="item.id" :data="item" desc="content" />
    </view>
-  </view>
+  </z-paging>
 </template>

 <script lang="ts" setup>
 import { ref } from 'vue'
 import { onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import listItem from './components/list-item.vue'
+import listItem from '@/components/course/ListItem.vue'
 import { courseApi } from '@/api/modules/course'
+import type { ICourse } from '@/types/course'

-const { t } = useI18n()
+const paging = ref<any>(null)

 // 精彩试听
 const tryListenList = ref<ICourse[]>([]) // 试听课程列表
 /**
 * 获取试听课程列表
 */
-const getTryListenList = async () => {
+const getTryListenList = async (pageNo: number, pageSize: number) => {
  try {
-    const res = await courseApi.getMarketCourseList(1, 6, 1)
-    if (res && res.code === 0) {
-      if (res.courseList && res.courseList.records && res.courseList.records.length > 0) {
-        tryListenList.value = res.courseList.records
-      } else {
-        tryListenList.value = []
-      }
-    }
+    const res = await courseApi.getMarketCourseList({
+      id: 1,
+      page: pageNo,
+      limit: pageSize
+    })
+    paging.value.complete(res.courseList.records);
  } catch (error) {
+    paging.value.complete(false);
    console.error('获取试听课程失败:', error)
  }
 }

 // 页面加载时获取试听课程列表
 onMounted(() => {
-  getTryListenList()
+  paging.value && paging.value.reload();
 })
 </script>

@@ -52,6 +53,4 @@ body {
 .course-list {
  padding: 10px;
 }
-
-
 </style>
--- a/pages/course/search.vue
+++ b/pages/course/search.vue
@@ -1,21 +1,23 @@
 <template>
-  <view class="search-page">
-    <!-- 导航栏 -->
-    <nav-bar>
-      <template #title>
-        <view class="search-box">
-          <wd-search
-            v-model="keyword"
-            hide-cancel
-            clearable
-            :placeholder="$t('courseSearch.placeholder')"
-            @search="handleSearch"
-            @clear="handleClear"
-          />
-        </view>
-      </template>
-    </nav-bar>
-
+  <z-paging ref="paging" v-model="courseList" auto-show-back-to-top :auto="false" class="search-page" @query="getSearchCourseList">
+    <template #top>
+      <!-- 导航栏 -->
+      <nav-bar>
+        <template #title>
+          <view class="search-box">
+            <wd-search
+              v-model="keyword"
+              hide-cancel
+              clearable
+              :placeholder="$t('courseSearch.placeholder')"
+              @search="handleSearch"
+              @clear="handleClear"
+            />
+          </view>
+        </template>
+      </nav-bar>
+    </template>
+    
    <!-- 历史搜索区域 -->
    <view v-if="!showResults" class="history-section">
      <view class="history-title">{{ $t('courseSearch.historyTitle') }}</view>
@@ -32,15 +34,10 @@

    <!-- 搜索结果区域 -->
    <view v-if="showResults" class="search-results">
-      <!-- 加载状态 -->
-      <view v-if="loading" class="loading-wrapper">
-        <wd-loading />
-      </view>
-
      <!-- 课程列表 -->
      <view v-if="!loading && courseList.length > 0" class="course-section">
        <view class="course-list">
-          <list-item
+          <listItem
            v-for="(item, index) in courseList"
            :key="index"
            :data="item"
@@ -55,7 +52,7 @@
        <wd-divider :text="$t('courseSearch.noData')" />
      </view>
    </view>
-  </view>
+  </z-paging>
 </template>

 <script setup lang="ts">
@@ -64,9 +61,10 @@ import { onShow } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import { courseApi } from '@/api/modules/course'
 import type { ICourse } from '@/types/search'
-import listItem from './list/components/list-item.vue'
+import ListItem from '@/components/course/ListItem.vue'

 const { t } = useI18n()
+const paging = ref<any>(null)

 // 状态定义
 const keyword = ref<string>('')                    // 搜索关键词
@@ -123,29 +121,29 @@ const handleSearch = async () => {
  showResults.value = true
  isEmpty.value = false

+  await paging.value.reload()
+  loading.value = false
+  isEmpty.value = courseList.value.length === 0
+  showResults.value = !isEmpty.value
+
+  // 保存搜索历史
+  saveHistory(keyword.value.trim())
+}
+/**
+ * 获取搜索课程列表
+ */
+const getSearchCourseList = async (pageNo: number, pageSize: number) => {
  try {
    const res = await courseApi.searchData({
-      title: keyword.value.trim()
+      title: keyword.value.trim(),
+      page: pageNo,
+      size: pageSize
    })
-
-    if (res.code === 0) {
-      courseList.value = res.courseEntities || []
-      isEmpty.value = courseList.value.length === 0
-
-      // 保存搜索历史
-      saveHistory(keyword.value.trim())
-    } else {
-      courseList.value = []
-      isEmpty.value = true
-    }
+    paging.value.setLocalPaging(res.courseEntities)
+    
  } catch (error) {
+    paging.value.complete(false)
    console.error('搜索失败:', error)
-    uni.showToast({
-      icon: 'none',
-      title: t('global.networkConnectionError')
-    })
-    courseList.value = []
-    isEmpty.value = true
  } finally {
    loading.value = false
  }
@@ -187,7 +185,6 @@ onShow(() => {

 <style lang="scss" scoped>
 .search-page {
-  min-height: 100vh;
  background: #f7faf9;
 }

@@ -225,6 +222,7 @@ onShow(() => {
 // 搜索结果样式
 .search-results {
  padding: 20rpx;
+  padding-bottom: 0;
 }

 .loading-wrapper {
@@ -251,13 +249,8 @@ onShow(() => {
 }

 // 课程列表样式
-.course-section {
-  margin-bottom: 40rpx;
-}
-
 .course-list {
  display: flex;
  flex-direction: column;
-  gap: 20rpx;
 }
 </style>