feat: 添加教师管理图片资源和更新课程组件
This commit is contained in:
parent
4e58477135
commit
7ab20755b4
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="create-btn">创建课程</button>
|
||||
<button class="create-btn" @click="navigateToCreateCourse">创建课程</button>
|
||||
<div class="search-container">
|
||||
<input type="text" placeholder="请输入想要搜索的内容">
|
||||
<button class="search-btn">搜索</button>
|
||||
@ -22,16 +22,24 @@
|
||||
<!-- 主体 -->
|
||||
<div class="course-container">
|
||||
<div class="course-grid">
|
||||
<div class="course-card" v-for="course in courseList" :key="course.id">
|
||||
<div class="course-card" v-for="course in courseList" :key="course.id" @click="navigateToCourseDetail(course.id)">
|
||||
<div class="course-image-container">
|
||||
<div class="section-title" :class="{'offline': course.status === '下架中'}">{{ course.status }}</div>
|
||||
<div class="more-options">
|
||||
<span class="more-icon">⋮</span>
|
||||
<div class="options-menu">
|
||||
<a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">编辑</a>
|
||||
<a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">查看</a>
|
||||
<a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">删除</a>
|
||||
<a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">更多</a>
|
||||
<template v-if="course.status === '发布中'">
|
||||
<a href="#" class="option-item"><img src="/images/teacher/下架.png" alt="">下架</a>
|
||||
<a href="#" class="option-item"><img src="/images/teacher/小编辑.png" alt="">编辑</a>
|
||||
<a href="#" class="option-item"><img src="/images/teacher/移动.png" alt="">移动</a>
|
||||
<a href="#" class="option-item"><img src="/images/teacher/删除.png" alt="">删除</a>
|
||||
</template>
|
||||
<template v-else-if="course.status === '下架中'">
|
||||
<a href="#" class="option-item"><img src="/images/teacher/加号.png" alt="">发布</a>
|
||||
<a href="#" class="option-item"><img src="/images/teacher/小编辑.png" alt="">编辑</a>
|
||||
<a href="#" class="option-item"><img src="/images/teacher/移动.png" alt="">移动</a>
|
||||
<a href="#" class="option-item"><img src="/images/teacher/删除.png" alt="">删除</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -68,6 +76,18 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
// 路由跳转
|
||||
const router = useRouter();
|
||||
const navigateToCreateCourse = () => {
|
||||
router.push('/teacher/course-create');
|
||||
}
|
||||
|
||||
// 跳转到课程详情页
|
||||
const navigateToCourseDetail = (courseId: number) => {
|
||||
router.push(`/teacher/course-detail?id=${courseId}`);
|
||||
}
|
||||
|
||||
// 模拟课程数据
|
||||
const courseList = ref([
|
||||
|
14
src/components/admin/CourseComponents/CourseCreate.vue
Normal file
14
src/components/admin/CourseComponents/CourseCreate.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>课程创建</h1>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
35
src/components/admin/CourseComponents/CourseDetail.vue
Normal file
35
src/components/admin/CourseComponents/CourseDetail.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="course-detail-container">
|
||||
<h1>课程详情</h1>
|
||||
<p>当前课程ID: {{ courseId }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
// 获取路由对象
|
||||
const route = useRoute()
|
||||
|
||||
// 提取路由参数中的id
|
||||
const courseId = route.query.id
|
||||
|
||||
// 打印路由参数
|
||||
console.log('路由参数:', route.query)
|
||||
console.log('课程ID:', courseId)
|
||||
|
||||
// 如果需要监听路由参数变化
|
||||
import { watch } from 'vue'
|
||||
watch(
|
||||
() => route.query,
|
||||
(newQuery) => {
|
||||
console.log('路由参数变化:', newQuery)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.course-detail-container {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
@ -36,6 +36,8 @@ import StudentManagement from '@/components/admin/StudentManagement.vue'
|
||||
import CourseCategory from '@/components/admin/CourseComponents/CourseCategory.vue'
|
||||
import MaterialCategory from '@/components/admin/CourseComponents/MaterialCategory.vue'
|
||||
import CourseAnalysis from '@/components/admin/CourseComponents/CourseAnalysis.vue'
|
||||
import CourseCreate from '@/components/admin/CourseComponents/CourseCreate.vue'
|
||||
import CourseDetails from '@/components/admin/CourseComponents/CourseDetail.vue'
|
||||
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
@ -59,14 +61,14 @@ const routes: RouteRecordRaw[] = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'course-management',
|
||||
name: 'CourseManagement',
|
||||
component: CourseManagement,
|
||||
meta: {
|
||||
title: '课程管理'
|
||||
},
|
||||
redirect: '/teacher/course-management/course-category', // 添加默认重定向
|
||||
children: [
|
||||
path: 'course-management',
|
||||
name: 'CourseManagement',
|
||||
component: CourseManagement,
|
||||
meta: {
|
||||
title: '课程管理'
|
||||
},
|
||||
redirect: '/teacher/course-management/course-category', // 添加默认重定向
|
||||
children: [
|
||||
{
|
||||
path: 'course-category',
|
||||
name: 'CourseCategory',
|
||||
@ -91,6 +93,7 @@ const routes: RouteRecordRaw[] = [
|
||||
title: '课程分析'
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -108,6 +111,22 @@ const routes: RouteRecordRaw[] = [
|
||||
meta: {
|
||||
title: '学员管理'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'course-create',
|
||||
name: 'CourseCreate',
|
||||
component: CourseCreate,
|
||||
meta: {
|
||||
title: '创建课程'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'course-detail',
|
||||
name: 'TeacherCourseDetail',
|
||||
component: CourseDetails,
|
||||
meta: {
|
||||
title: '课程详情'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -314,7 +333,7 @@ const routes: RouteRecordRaw[] = [
|
||||
meta: {
|
||||
title: '页面未找到'
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
]
|
||||
|
||||
|
@ -20,21 +20,21 @@
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-container">
|
||||
<router-link to="/teacher/course-management" class="nav-item" :class="{ active: activeNavItem === 0 }" @click="setActiveNavItem(0)">
|
||||
<img src="/images/teacher/路径1.png" alt="">
|
||||
<img :src="activeNavItem === 0 ? '/images/teacher/课程管理(选中).png' : '/images/teacher/课程管理.png'" alt="">
|
||||
<span>课程管理</span>
|
||||
</router-link>
|
||||
<router-link to="/teacher/student-management" class="nav-item" :class="{ active: activeNavItem === 1 }" @click="setActiveNavItem(1)">
|
||||
|
||||
<img src="https://picsum.photos/200/200" alt="">
|
||||
<img :src="activeNavItem === 1 ? '/images/teacher/学院管理(选中).png' : '/images/teacher/学员管理.png'" alt="">
|
||||
<span>学员管理</span>
|
||||
</router-link>
|
||||
<router-link to="/teacher/my-resources" class="nav-item" :class="{ active: activeNavItem === 2 }" @click="setActiveNavItem(2)">
|
||||
<img src="https://picsum.photos/200/200" alt="">
|
||||
<img :src="activeNavItem === 2 ? '/images/teacher/我的资源(选中).png' : '/images/teacher/我的资源.png'" alt="">
|
||||
<span>我的资源</span>
|
||||
</router-link>
|
||||
<router-link to="/teacher/personal-center" class="nav-item" :class="{ active: activeNavItem === 3 }" @click="setActiveNavItem(3)">
|
||||
|
||||
<img src="/images/teacher/个人中心.png" alt="">
|
||||
<img :src="activeNavItem === 3 ? '/images/teacher/个人中心(选中).png' : '/images/teacher/个人中心.png'" alt="">
|
||||
<span>个人中心</span>
|
||||
</router-link>
|
||||
</div>
|
||||
@ -237,8 +237,9 @@ const updateActiveNavItem = () => {
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
margin-right: 10px;
|
||||
margin: 0 8px;
|
||||
color: #0C99DA;
|
||||
font-size: 16px;
|
||||
content: '>';
|
||||
}
|
||||
</style>
|
||||
|
Loading…
x
Reference in New Issue
Block a user