taimed-international-app/pages/course/list/category.vue

<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>