fix:修复课程页面进入错误刷新的问题

This commit is contained in:
yuk255 2025-09-15 16:27:30 +08:00
parent b287cf73b9
commit ad2ec33c6a

View File

@ -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,
@ -159,45 +155,33 @@ 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 {