fix:修复课程页面进入错误刷新的问题
This commit is contained in:
parent
b287cf73b9
commit
ad2ec33c6a
@ -21,10 +21,7 @@
|
||||
<div class="course-container">
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<n-spin size="large">
|
||||
<template #description>
|
||||
正在加载课程数据...
|
||||
</template>
|
||||
<n-spin size="large" :show="loading">
|
||||
</n-spin>
|
||||
</div>
|
||||
|
||||
@ -146,12 +143,11 @@ const loading = ref<boolean>(false);
|
||||
const error = ref<string>('');
|
||||
|
||||
// 获取课程列表
|
||||
const getCourseList = async (forceRefresh: boolean = false, showLoading: boolean = true) => {
|
||||
const getCourseList = async (forceRefresh: boolean = false) => {
|
||||
try {
|
||||
if (showLoading) {
|
||||
loading.value = true;
|
||||
}
|
||||
loading.value = true;
|
||||
error.value = ''; // 清除之前的错误状态
|
||||
courseList.value = [];
|
||||
|
||||
const params = {
|
||||
keyword: searchValue.value,
|
||||
@ -161,43 +157,31 @@ const getCourseList = async (forceRefresh: boolean = false, showLoading: boolean
|
||||
console.log('🔄 获取课程列表 - Tab:', activeTab.value, 'Status:', params.status, 'Keyword:', params.keyword);
|
||||
|
||||
const response = await TeachCourseApi.getTeacherCourseList(params);
|
||||
loading.value = false;
|
||||
if (response && response.data) {
|
||||
// 处理API返回的数据
|
||||
const courseData = response.data.result.map((course: TeachCourse): CourseDisplayItem => ({
|
||||
...course,
|
||||
// 映射状态显示文本
|
||||
const courseData = response.data.result.map((course: TeachCourse): CourseDisplayItem => ({
|
||||
...course,
|
||||
// 映射状态显示文本
|
||||
statusText: getStatusText(course.status),
|
||||
// 确保有默认图片
|
||||
image: course.cover || '/images/teacher/fj.png'
|
||||
}));
|
||||
|
||||
// 如果是强制刷新或者第一次加载,直接设置数据
|
||||
if (forceRefresh || originalCourseList.value.length === 0) {
|
||||
originalCourseList.value = courseData;
|
||||
courseList.value = courseData; // 直接显示API返回的数据,不需要再过滤
|
||||
courseList.value = courseData;
|
||||
} else {
|
||||
// 否则进行本地过滤
|
||||
originalCourseList.value = courseData;
|
||||
filterCourseList();
|
||||
}
|
||||
|
||||
console.log('✅ 课程列表加载成功,共', courseData.length, '门课程');
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取课程列表失败:', err);
|
||||
loading.value = false;
|
||||
|
||||
// 设置错误信息
|
||||
if (err.message?.includes('Network Error') || err.code === 'NETWORK_ERROR') {
|
||||
error.value = '网络连接失败,请检查网络设置后重试';
|
||||
} else if (err.response?.status === 401) {
|
||||
error.value = '登录已过期,请重新登录';
|
||||
} else if (err.response?.status === 403) {
|
||||
error.value = '暂无权限访问此功能';
|
||||
} else if (err.response?.status >= 500) {
|
||||
error.value = '服务器内部错误,请稍后重试';
|
||||
} else {
|
||||
error.value = err.message || '加载课程数据失败,请稍后重试';
|
||||
}
|
||||
error.value = err.message || ''
|
||||
|
||||
// 清空课程列表
|
||||
originalCourseList.value = [];
|
||||
@ -206,9 +190,7 @@ const getCourseList = async (forceRefresh: boolean = false, showLoading: boolean
|
||||
// 显示错误提示
|
||||
message.error(error.value);
|
||||
} finally {
|
||||
if (showLoading) {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -253,21 +235,17 @@ const searchValue = ref<string>('')
|
||||
const activeTab = ref<string>('ongoing')
|
||||
|
||||
// 监听标签页变化,重新调用接口获取数据
|
||||
watch(activeTab, async (newTab, oldTab) => {
|
||||
console.log('📋 Tab切换:', oldTab, '->', newTab);
|
||||
watch(activeTab, async () => {
|
||||
|
||||
// 立即清空当前列表,避免显示错误的数据
|
||||
courseList.value = [];
|
||||
originalCourseList.value = [];
|
||||
|
||||
// 当tab切换时,重新调用接口获取对应状态的数据,但不显示加载状态
|
||||
await getCourseList(true, false);
|
||||
await getCourseList(true);
|
||||
});
|
||||
|
||||
// 监听搜索值变化,进行本地过滤
|
||||
watch(searchValue, () => {
|
||||
console.log('🔍 搜索关键词变化:', searchValue.value);
|
||||
// 搜索时不重新调用接口,只进行本地过滤
|
||||
filterCourseList();
|
||||
});
|
||||
|
||||
@ -279,8 +257,8 @@ const navigateToCreateCourse = () => {
|
||||
// 处理搜索
|
||||
const handleSearch = async () => {
|
||||
console.log('🔍 执行搜索:', searchValue.value);
|
||||
// 搜索时重新调用接口,传递关键词参数
|
||||
await getCourseList(true);
|
||||
// 监听搜索值变化,进行本地过滤
|
||||
filterCourseList();
|
||||
};
|
||||
|
||||
// 获取课程对应的选项列表
|
||||
@ -289,19 +267,16 @@ const getOptionsForCourse = (course: CourseDisplayItem) => {
|
||||
return [
|
||||
{ label: '下架', value: 'offline', icon: '/images/teacher/下架.png' },
|
||||
{ label: '编辑', value: 'edit', icon: '/images/teacher/小编辑.png' },
|
||||
// { label: '移动', value: 'move', icon: '/images/teacher/移动.png' },
|
||||
{ label: '删除', value: 'delete', icon: '/images/teacher/删除.png' }
|
||||
];
|
||||
} else if (course.status === 0) { // 未开始/草稿
|
||||
return [
|
||||
{ label: '发布', value: 'publish', icon: '/images/teacher/加号.png' },
|
||||
{ label: '编辑', value: 'edit', icon: '/images/teacher/小编辑.png' },
|
||||
// { label: '移动', value: 'move', icon: '/images/teacher/移动.png' },
|
||||
{ label: '删除', value: 'delete', icon: '/images/teacher/删除.png' }
|
||||
];
|
||||
} else if (course.status === 2) { // 已结束
|
||||
return [
|
||||
// { label: '查看', value: 'view', icon: '/images/teacher/小编辑.png' },
|
||||
{ label: '发布', value: 'publish', icon: '/images/teacher/加号.png' },
|
||||
{ label: '编辑', value: 'edit', icon: '/images/teacher/小编辑.png' },
|
||||
{ label: '删除', value: 'delete', icon: '/images/teacher/删除.png' }
|
||||
@ -358,10 +333,6 @@ const handleOptionSelect = (value: string, course: any) => {
|
||||
// 发布逻辑
|
||||
handlePublishCourse(course);
|
||||
break;
|
||||
// case 'move':
|
||||
// // 移动逻辑
|
||||
// handleMoveCourse(course);
|
||||
// break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@ -437,7 +408,7 @@ const handleOfflineCourse = (course: CourseDisplayItem) => {
|
||||
|
||||
await TeachCourseApi.editCourse(updatedData);
|
||||
|
||||
getCourseList();
|
||||
await getCourseList();
|
||||
|
||||
message.success(`课程"${course.name}"已下架,现在可以删除了`);
|
||||
} catch (error) {
|
||||
@ -470,72 +441,20 @@ const handlePublishCourse = (course: CourseDisplayItem) => {
|
||||
|
||||
await TeachCourseApi.editCourse(updatedData);
|
||||
|
||||
getCourseList();
|
||||
await getCourseList();
|
||||
|
||||
message.success(`课程"${course.name}"已下架,现在可以删除了`);
|
||||
message.success(`课程"${course.name}"已发布`);
|
||||
} catch (error) {
|
||||
console.error('下架课程失败:', error);
|
||||
message.error('下架课程失败,请稍后重试');
|
||||
console.error('发布课程失败:', error);
|
||||
message.error('发布课程失败,请稍后重试');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 移动课程
|
||||
// const handleMoveCourse = (course: any) => {
|
||||
// const currentIndex = courseList.value.findIndex(c => c.id === course.id);
|
||||
// const totalCourses = courseList.value.length;
|
||||
|
||||
// dialog.create({
|
||||
// title: '移动课程位置',
|
||||
// content: () => h('div', [
|
||||
// h('p', `课程"${course.name}"当前位置:第 ${currentIndex + 1} 位`),
|
||||
// h('p', { style: 'margin-top: 10px; margin-bottom: 10px;' }, '移动到位置:'),
|
||||
// h('input', {
|
||||
// type: 'number',
|
||||
// min: 1,
|
||||
// max: totalCourses,
|
||||
// value: currentIndex + 1,
|
||||
// style: 'width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 4px;',
|
||||
// placeholder: `请输入位置 (1-${totalCourses})`,
|
||||
// id: 'movePositionInput'
|
||||
// }),
|
||||
// h('p', {
|
||||
// style: 'margin-top: 8px; font-size: 12px; color: #666;'
|
||||
// }, `提示:输入 1-${totalCourses} 之间的数字`)
|
||||
// ]),
|
||||
// positiveText: '确定移动',
|
||||
// negativeText: '取消',
|
||||
// onPositiveClick: () => {
|
||||
// const input = document.getElementById('movePositionInput') as HTMLInputElement;
|
||||
// const newPosition = parseInt(input.value);
|
||||
|
||||
// if (isNaN(newPosition) || newPosition < 1 || newPosition > totalCourses) {
|
||||
// message.error(`请输入有效的位置 (1-${totalCourses})`);
|
||||
// return false; // 阻止对话框关闭
|
||||
// }
|
||||
|
||||
// // 执行移动操作
|
||||
// const targetIndex = newPosition - 1;
|
||||
// if (targetIndex !== currentIndex) {
|
||||
// // 移除课程从当前位置
|
||||
// const [movedCourse] = courseList.value.splice(currentIndex, 1);
|
||||
// // 插入到新位置
|
||||
// courseList.value.splice(targetIndex, 0, movedCourse);
|
||||
|
||||
// message.success(`课程"${course.name}"已移动到第 ${newPosition} 位`);
|
||||
// } else {
|
||||
// message.info('位置未发生变化');
|
||||
// }
|
||||
|
||||
// return true; // 允许对话框关闭
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getCourseList();
|
||||
onMounted(async () => {
|
||||
loading.value = true;
|
||||
await getCourseList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -600,11 +519,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
width: 100%;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
|
Loading…
x
Reference in New Issue
Block a user