更新：增加课程首页分类跳转列表页；优化全站列表分页加载；
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user