significative
2 months ago
parent
f074bef41e
commit
d948aaca3d
9 changed files with 1050 additions and 67 deletions
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 780 B |
@ -1,14 +1,514 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { ref, onMounted } from 'vue' |
||||||
|
import { Plus } from '@element-plus/icons-vue' |
||||||
|
import { |
||||||
|
getCourseListApi, |
||||||
|
deleteCourseApi, |
||||||
|
getTeacherListApi, |
||||||
|
} from '../../api/user/crouse' |
||||||
|
import { userNewLikeService } from '@/api/user/user' |
||||||
|
import { ElMessageBox, ElMessage } from 'element-plus' |
||||||
|
// import router from '@/router' |
||||||
|
import { useRouter } from 'vue-router' |
||||||
|
import useUserStore from '@/store/modules/user' |
||||||
|
// import { useRoute } from 'vue-router' |
||||||
|
const userStore = useUserStore() |
||||||
|
// const userInfo = userStore.userInfo |
||||||
|
const router = useRouter() |
||||||
|
// const route = useRoute() |
||||||
|
// console.log(route) |
||||||
|
// import { client } from '@/utils/alioss.js' |
||||||
|
// 课程列表 |
||||||
|
const courseList = ref() |
||||||
|
// 教师列表 |
||||||
|
const teacherList = ref() |
||||||
|
|
||||||
|
const getTeacherList = async () => { |
||||||
|
const res = await userNewLikeService(userStore.data.id) |
||||||
|
console.log(res, 'teacher') |
||||||
|
teacherList.value = res.data |
||||||
|
console.log(teacherList.value, 'teacherList.value') |
||||||
|
} |
||||||
|
const total = ref(0) |
||||||
|
const params = ref({ |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 7, |
||||||
|
// username: 'qiuqiu', |
||||||
|
userId: userStore.data.id, |
||||||
|
assessmenttype: '', |
||||||
|
category: '', |
||||||
|
nature: '', |
||||||
|
teacher: '', |
||||||
|
}) |
||||||
|
console.log(userStore.data, 'userStore.data') |
||||||
|
const loading = ref(false) |
||||||
|
// 获取课程列表 |
||||||
|
const getCourseList = async () => { |
||||||
|
loading.value = true |
||||||
|
// console.log(params.value, '11') |
||||||
|
if (userStore.userInfo.roleId[0] === 2) { |
||||||
|
params.value.pageSize = 8 |
||||||
|
} |
||||||
|
|
||||||
|
const res = await getCourseListApi(params.value) |
||||||
|
courseList.value = res.data.list |
||||||
|
total.value = res.data.total |
||||||
|
console.log(res, 'courseres') |
||||||
|
console.log(courseList.value, 'courseList.value') |
||||||
|
loading.value = false |
||||||
|
// console.log(userStore.userName, '1111') |
||||||
|
fill() |
||||||
|
} |
||||||
|
// 渲染 |
||||||
|
onMounted(() => { |
||||||
|
getCourseList() |
||||||
|
getTeacherList() |
||||||
|
}) |
||||||
|
// 搜索 |
||||||
|
const onSearch = () => { |
||||||
|
params.value.pageNo = 1 |
||||||
|
getCourseList() |
||||||
|
} |
||||||
|
const onReset = () => { |
||||||
|
params.value.pageNo = 1 |
||||||
|
params.value.assessmenttype = '' |
||||||
|
// params.value.teacher = '' |
||||||
|
params.value.category = '' |
||||||
|
params.value.nature = '' |
||||||
|
getCourseList() |
||||||
|
} |
||||||
|
// 分页 |
||||||
|
const handleSizeChange = (size: any) => { |
||||||
|
// loading.value = true |
||||||
|
// console.log(size) |
||||||
|
params.value.pageNo = 1 |
||||||
|
params.value.pageSize = size |
||||||
|
// 基于每页条数重新渲染 |
||||||
|
getCourseList() |
||||||
|
} |
||||||
|
const handleCurrentChange = (page: any) => { |
||||||
|
console.log(page) |
||||||
|
params.value.pageNo = page |
||||||
|
// 基于当前页渲染数据 |
||||||
|
getCourseList() |
||||||
|
} |
||||||
|
|
||||||
|
// 弹框 |
||||||
|
const drawer = ref() |
||||||
|
// 添加时传递空对象给子组件 |
||||||
|
const onAddCourse = () => { |
||||||
|
flog.value = false |
||||||
|
drawer.value.open({}) |
||||||
|
} |
||||||
|
|
||||||
|
const flog = ref(false) |
||||||
|
// 编辑时传递数据给子组件 |
||||||
|
const onEditCourse = (item: any) => { |
||||||
|
flog.value = true |
||||||
|
console.log(item) |
||||||
|
drawer.value.open(item) |
||||||
|
} |
||||||
|
// |
||||||
|
const onSuccess = () => { |
||||||
|
loading.value = true |
||||||
|
getCourseList() |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
//删除 |
||||||
|
const onDeleteCourse = async (id: any) => { |
||||||
|
await ElMessageBox.confirm('您确定删除这条课程信息吗', '温馨提示', { |
||||||
|
confirmButtonText: '确认', |
||||||
|
cancelButtonText: '取消', |
||||||
|
type: 'warning', |
||||||
|
}) |
||||||
|
await deleteCourseApi(id) |
||||||
|
.then(() => { |
||||||
|
console.log(id, '删除id') |
||||||
|
ElMessage.success('删除成功') |
||||||
|
// console.log(res) |
||||||
|
}) |
||||||
|
.catch((err: any) => { |
||||||
|
console.log(id, 'id') |
||||||
|
ElMessage.error(err.response.data.message) |
||||||
|
}) |
||||||
|
|
||||||
|
getCourseList() |
||||||
|
} |
||||||
|
// 点击查看课程详情，把课程id传过去 |
||||||
|
const onGetCourseObject = async (id: any) => { |
||||||
|
console.log(id, 'id') |
||||||
|
// const res = await getCourseObjectApi(id) |
||||||
|
router.push({ |
||||||
|
path: '/curriculumCenter/courseDetails', |
||||||
|
// path: '/curriculumCenter/CourseObjectives', |
||||||
|
query: { |
||||||
|
id: id, |
||||||
|
}, |
||||||
|
}) |
||||||
|
// console.log(res) |
||||||
|
} |
||||||
|
const course_name = ref('点击添加课程') |
||||||
|
// const credit_name = ref('32') |
||||||
|
// const classhours_name = ref('2.0') |
||||||
|
// const creditChangeEvent = (credit: any) => { |
||||||
|
// credit_name.value = credit |
||||||
|
// } |
||||||
|
// const ClosecreditChangeEvent = () => { |
||||||
|
// credit_name.value = '32' |
||||||
|
// } |
||||||
|
const couresNameChangeEvent = (name: any) => { |
||||||
|
// console.log(name, 'name') |
||||||
|
course_name.value = name |
||||||
|
} |
||||||
|
const CloseCouresNameChangeEvent = () => { |
||||||
|
course_name.value = '点击添加课程' |
||||||
|
} |
||||||
|
// const classhoursChangeEvent = (classhours: any) => { |
||||||
|
// classhours_name.value = classhours |
||||||
|
// } |
||||||
|
// const CloseclasshoursChangeEvent = () => { |
||||||
|
// classhours_name.value = '2.0' |
||||||
|
// } |
||||||
|
// const goToObject = () => { |
||||||
|
// this.$route.push('/curriculumCenter/CourseObjectives') |
||||||
|
// } |
||||||
|
const likeObj = ref<Record<string, boolean>>({}) |
||||||
|
function changeLike(id: string) { |
||||||
|
likeObj.value[id] = !likeObj.value[id] |
||||||
|
} |
||||||
|
const collectObj = ref<Record<string, boolean>>({}) |
||||||
|
function changeCollect(id: string) { |
||||||
|
collectObj.value[id] = !collectObj.value[id] |
||||||
|
} |
||||||
|
function fill() { |
||||||
|
if (!Array.isArray(courseList.value)) return |
||||||
|
courseList.value.forEach((item) => { |
||||||
|
likeObj.value[item.id] = item.liked |
||||||
|
collectObj.value[item.id] = item.collected || true |
||||||
|
}) |
||||||
|
} |
||||||
|
</script> |
||||||
<template> |
<template> |
||||||
<div> |
<div class="main-content" v-loading="loading"> |
||||||
我的收藏 |
<div class="header"> |
||||||
|
<div class="btn"> |
||||||
|
<!-- <el-button type="primary" round size="large">全部课程</el-button> |
||||||
|
<el-button type="primary" round plain size="large">我的文件夹</el-button> --> |
||||||
|
<el-form inline v-if="userStore.userInfo.roleId[0] === '1'"> |
||||||
|
<!-- <el-form-item label="课程教师：" class="short-form-item"> |
||||||
|
<el-select v-model="params.teacher"> |
||||||
|
<el-option v-for="teachers in teacherList" :key="teachers.username" :value="teachers.username" |
||||||
|
:label="teachers.name"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> --> |
||||||
|
<el-form-item label="课程类别：" class="short-form-item"> |
||||||
|
<el-select v-model="params.category"> |
||||||
|
<el-option label="专业教育" value="1"></el-option> |
||||||
|
<el-option label="通识教育" value="2"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="课程性质" class="short-form-item"> |
||||||
|
<el-select v-model="params.nature"> |
||||||
|
<el-option label="必修" value="1"></el-option> |
||||||
|
<el-option label="选修" value="2"></el-option> |
||||||
|
<el-option label="任修" value="3"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="考核类型：" class="short-form-item"> |
||||||
|
<el-select v-model="params.assessmenttype"> |
||||||
|
<el-option label="考试" value="1"></el-option> |
||||||
|
<el-option label="考查" value="2"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="onSearch">搜索</el-button> |
||||||
|
<el-button type="primary" plain @click="onReset">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="course"> |
||||||
|
<ul class="course_list"> |
||||||
|
<li |
||||||
|
v-if="userStore.userInfo.roleId[0] === '1'" |
||||||
|
@click="onAddCourse()" |
||||||
|
class="add_course" |
||||||
|
> |
||||||
|
<div class="plus"> |
||||||
|
<el-icon class="avatar-uploader-icon"> |
||||||
|
<Plus /> |
||||||
|
</el-icon> |
||||||
|
</div> |
||||||
|
<h2 class="course_name">{{ course_name }}</h2> |
||||||
|
</li> |
||||||
|
<li v-for="item in courseList" :key="item.id"> |
||||||
|
<img |
||||||
|
title="点击查看课程详情" |
||||||
|
:src="item.img" |
||||||
|
alt="" |
||||||
|
@click="onGetCourseObject(item.id)" |
||||||
|
/> |
||||||
|
<h2 title="点击查看课程基本信息" class="course_name"> |
||||||
|
{{ item.name }} |
||||||
|
</h2> |
||||||
|
<p class="teacher_name">讲师：{{ item.teacher }}</p> |
||||||
|
<p class="credit"> |
||||||
|
<span>{{ item.classhours }}</span> |
||||||
|
学时 | |
||||||
|
<span>{{ item.credit }}</span> |
||||||
|
学分 |
||||||
|
</p> |
||||||
|
<div class="icon-box"> |
||||||
|
<svg-icon |
||||||
|
v-if="likeObj[item.id]" |
||||||
|
@click="changeLike(item.id)" |
||||||
|
width="25px" |
||||||
|
height="25px" |
||||||
|
name="点赞" |
||||||
|
></svg-icon> |
||||||
|
<svg-icon |
||||||
|
v-else |
||||||
|
@click="changeLike(item.id)" |
||||||
|
width="25px" |
||||||
|
height="25px" |
||||||
|
name="未点赞" |
||||||
|
></svg-icon> |
||||||
|
<svg-icon |
||||||
|
v-if="collectObj[item.id]" |
||||||
|
@click="changeCollect(item.id)" |
||||||
|
width="25px" |
||||||
|
height="25px" |
||||||
|
name="收藏" |
||||||
|
></svg-icon> |
||||||
|
<svg-icon |
||||||
|
v-else |
||||||
|
@click="changeCollect(item.id)" |
||||||
|
width="25px" |
||||||
|
height="25px" |
||||||
|
name="未收藏" |
||||||
|
></svg-icon> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- <el-icon class="del" @click="onDeleteCourse(item.id)"> |
||||||
|
<Delete /> |
||||||
|
</el-icon> --> |
||||||
|
<el-button |
||||||
|
:class="userStore.data.roles[0] == 1 ? 'object' : 'object1'" |
||||||
|
round |
||||||
|
plain |
||||||
|
@click="onGetCourseObject(item.id)" |
||||||
|
> |
||||||
|
详情 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
class="object1" |
||||||
|
round |
||||||
|
plain |
||||||
|
@click="onEditCourse(item)" |
||||||
|
v-if="userStore.data.roles[0] == 1" |
||||||
|
> |
||||||
|
编辑 |
||||||
|
</el-button> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<el-pagination |
||||||
|
v-model:current-page="params.pageNo" |
||||||
|
v-model:page-size="params.pageSize" |
||||||
|
:page-sizes="[2, 5, 7, 10]" |
||||||
|
:background="true" |
||||||
|
layout="jumper,total, sizes, prev, pager, next " |
||||||
|
:total="total" |
||||||
|
@size-change="handleSizeChange" |
||||||
|
@current-change="handleCurrentChange" |
||||||
|
style="margin-top: 10px; justify-content: center" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<course-edit |
||||||
|
ref="drawer" |
||||||
|
@success="onSuccess" |
||||||
|
@couresNameChange="couresNameChangeEvent" |
||||||
|
@CloseCouresNameChange="CloseCouresNameChangeEvent" |
||||||
|
:flog="flog" |
||||||
|
></course-edit> |
||||||
</div> |
</div> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<style lang="scss" scoped> |
||||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
.main-content { |
||||||
|
width: 1440px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
</script> |
.header { |
||||||
|
width: 100%; |
||||||
|
// height: 100px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
} |
||||||
|
|
||||||
|
// .btn { |
||||||
|
// // display: flex; |
||||||
|
// width: 50%; |
||||||
|
// height: 100%; |
||||||
|
// padding: 10px 0; |
||||||
|
// // display: inline; |
||||||
|
// // height: 40px; |
||||||
|
// // margin: 20px; |
||||||
|
// // padding-left: 50px; |
||||||
|
// } |
||||||
|
.search { |
||||||
|
width: 50%; |
||||||
|
display: flex; |
||||||
|
height: 100%; |
||||||
|
justify-content: flex-end; |
||||||
|
|
||||||
|
// flex-direction: row-reverse; |
||||||
|
// padding: 0 40px 0; |
||||||
|
input { |
||||||
|
width: 240px; |
||||||
|
height: 40px; |
||||||
|
border: 1px solid #dcdcdc; |
||||||
|
border-radius: 60px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.course { |
||||||
|
// display: flex; |
||||||
|
// flex: 0 0 25%; |
||||||
|
// justify-content: space-between; |
||||||
|
// flex-wrap: wrap; |
||||||
|
.course_list { |
||||||
|
display: flex; |
||||||
|
// flex: 0 0 25%; |
||||||
|
// justify-content: space-between; |
||||||
|
flex-wrap: wrap; |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
column-gap: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
li { |
||||||
|
margin: 40px 0; |
||||||
|
width: 349px; |
||||||
|
width: 100%; |
||||||
|
height: 297px; |
||||||
|
background: rgb(255, 255, 255); |
||||||
|
transition: all 0.5s; |
||||||
|
border-radius: 6px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
// flex: 1; /* 子元素按比例伸缩 */ |
||||||
|
&:hover { |
||||||
|
transform: translate3d(0, -3px, 0); |
||||||
|
box-shadow: 0 3px 8px rgb(0 0 0 / 20%); |
||||||
|
} |
||||||
|
|
||||||
|
.course_name { |
||||||
|
font-family: Inter-Bold; |
||||||
|
color: #333; |
||||||
|
font-size: 24px; |
||||||
|
margin-left: 30px; |
||||||
|
margin-top: 10px; |
||||||
|
font-weight: bold; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
background-color: #cccccc; |
||||||
|
width: 100%; |
||||||
|
height: 178px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin-left: 30px; |
||||||
|
margin-top: 5px; |
||||||
|
color: #555555; |
||||||
|
font-size: 14px; |
||||||
|
padding-top: 10px; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
span { |
||||||
|
color: #0052ff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.icon-box { |
||||||
|
position: absolute; |
||||||
|
right: 20px; |
||||||
|
// margin-left: 280px; |
||||||
|
margin-top: -80px; |
||||||
|
color: #0052ff; |
||||||
|
cursor: pointer; |
||||||
|
display: flex; |
||||||
|
column-gap: 5px; |
||||||
|
} |
||||||
|
.del { |
||||||
|
position: absolute; |
||||||
|
margin-left: 280px; |
||||||
|
margin-top: -80px; |
||||||
|
color: #0052ff; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.object { |
||||||
|
position: absolute; |
||||||
|
margin-left: 180px; |
||||||
|
margin-top: -29px; |
||||||
|
} |
||||||
|
|
||||||
|
.object1 { |
||||||
|
position: absolute; |
||||||
|
margin-left: 250px; |
||||||
|
margin-top: -29px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.plus { |
||||||
|
width: 100%; |
||||||
|
height: 178px; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
// background-position: center center; |
||||||
|
.el-icon.avatar-uploader-icon { |
||||||
|
font-size: 50px; |
||||||
|
color: #8c939d; |
||||||
|
width: 100%; |
||||||
|
height: 178px; |
||||||
|
margin-top: 20px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.add_course { |
||||||
|
border: 2px dashed rgb(143, 139, 139); |
||||||
|
|
||||||
|
h2 { |
||||||
|
font-size: 40px; |
||||||
|
text-align: center; |
||||||
|
font-family: Inter-Bold; |
||||||
|
color: #535050; |
||||||
|
font-weight: bold; |
||||||
|
margin-top: 20px; |
||||||
|
|
||||||
<style lang='scss' scoped> |
&:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.short-form-item { |
||||||
|
width: 300px; |
||||||
|
margin-right: 100px; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,14 +1,512 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { ref, onMounted } from 'vue' |
||||||
|
import { Plus } from '@element-plus/icons-vue' |
||||||
|
import { |
||||||
|
getCourseListApi, |
||||||
|
deleteCourseApi, |
||||||
|
getTeacherListApi, |
||||||
|
} from '../../api/user/crouse' |
||||||
|
import { ElMessageBox, ElMessage } from 'element-plus' |
||||||
|
// import router from '@/router' |
||||||
|
import { useRouter } from 'vue-router' |
||||||
|
import useUserStore from '@/store/modules/user' |
||||||
|
// import { useRoute } from 'vue-router' |
||||||
|
const userStore = useUserStore() |
||||||
|
// const userInfo = userStore.userInfo |
||||||
|
const router = useRouter() |
||||||
|
// const route = useRoute() |
||||||
|
// console.log(route) |
||||||
|
// import { client } from '@/utils/alioss.js' |
||||||
|
// 课程列表 |
||||||
|
const courseList = ref() |
||||||
|
// 教师列表 |
||||||
|
const teacherList = ref() |
||||||
|
const getTeacherList = async () => { |
||||||
|
const res = await getTeacherListApi() |
||||||
|
console.log(res, 'teacher') |
||||||
|
teacherList.value = res.data |
||||||
|
console.log(teacherList.value, 'teacherList.value') |
||||||
|
} |
||||||
|
const total = ref(0) |
||||||
|
const params = ref({ |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 7, |
||||||
|
// username: 'qiuqiu', |
||||||
|
userId: userStore.data.id, |
||||||
|
assessmenttype: '', |
||||||
|
category: '', |
||||||
|
nature: '', |
||||||
|
teacher: '', |
||||||
|
}) |
||||||
|
console.log(userStore.data, 'userStore.data') |
||||||
|
const loading = ref(false) |
||||||
|
// 获取课程列表 |
||||||
|
const getCourseList = async () => { |
||||||
|
loading.value = true |
||||||
|
// console.log(params.value, '11') |
||||||
|
if (userStore.userInfo.roleId[0] === 2) { |
||||||
|
params.value.pageSize = 8 |
||||||
|
} |
||||||
|
|
||||||
|
const res = await getCourseListApi(params.value) |
||||||
|
courseList.value = res.data.list |
||||||
|
total.value = res.data.total |
||||||
|
console.log(res, 'courseres') |
||||||
|
console.log(courseList.value, 'courseList.value') |
||||||
|
loading.value = false |
||||||
|
// console.log(userStore.userName, '1111') |
||||||
|
fill() |
||||||
|
} |
||||||
|
// 渲染 |
||||||
|
onMounted(() => { |
||||||
|
getCourseList() |
||||||
|
getTeacherList() |
||||||
|
}) |
||||||
|
// 搜索 |
||||||
|
const onSearch = () => { |
||||||
|
params.value.pageNo = 1 |
||||||
|
getCourseList() |
||||||
|
} |
||||||
|
const onReset = () => { |
||||||
|
params.value.pageNo = 1 |
||||||
|
params.value.assessmenttype = '' |
||||||
|
// params.value.teacher = '' |
||||||
|
params.value.category = '' |
||||||
|
params.value.nature = '' |
||||||
|
getCourseList() |
||||||
|
} |
||||||
|
// 分页 |
||||||
|
const handleSizeChange = (size: any) => { |
||||||
|
// loading.value = true |
||||||
|
// console.log(size) |
||||||
|
params.value.pageNo = 1 |
||||||
|
params.value.pageSize = size |
||||||
|
// 基于每页条数重新渲染 |
||||||
|
getCourseList() |
||||||
|
} |
||||||
|
const handleCurrentChange = (page: any) => { |
||||||
|
console.log(page) |
||||||
|
params.value.pageNo = page |
||||||
|
// 基于当前页渲染数据 |
||||||
|
getCourseList() |
||||||
|
} |
||||||
|
|
||||||
|
// 弹框 |
||||||
|
const drawer = ref() |
||||||
|
// 添加时传递空对象给子组件 |
||||||
|
const onAddCourse = () => { |
||||||
|
flog.value = false |
||||||
|
drawer.value.open({}) |
||||||
|
} |
||||||
|
|
||||||
|
const flog = ref(false) |
||||||
|
// 编辑时传递数据给子组件 |
||||||
|
const onEditCourse = (item: any) => { |
||||||
|
flog.value = true |
||||||
|
console.log(item) |
||||||
|
drawer.value.open(item) |
||||||
|
} |
||||||
|
// |
||||||
|
const onSuccess = () => { |
||||||
|
loading.value = true |
||||||
|
getCourseList() |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
//删除 |
||||||
|
const onDeleteCourse = async (id: any) => { |
||||||
|
await ElMessageBox.confirm('您确定删除这条课程信息吗', '温馨提示', { |
||||||
|
confirmButtonText: '确认', |
||||||
|
cancelButtonText: '取消', |
||||||
|
type: 'warning', |
||||||
|
}) |
||||||
|
await deleteCourseApi(id) |
||||||
|
.then(() => { |
||||||
|
console.log(id, '删除id') |
||||||
|
ElMessage.success('删除成功') |
||||||
|
// console.log(res) |
||||||
|
}) |
||||||
|
.catch((err: any) => { |
||||||
|
console.log(id, 'id') |
||||||
|
ElMessage.error(err.response.data.message) |
||||||
|
}) |
||||||
|
|
||||||
|
getCourseList() |
||||||
|
} |
||||||
|
// 点击查看课程详情，把课程id传过去 |
||||||
|
const onGetCourseObject = async (id: any) => { |
||||||
|
console.log(id, 'id') |
||||||
|
// const res = await getCourseObjectApi(id) |
||||||
|
router.push({ |
||||||
|
path: '/curriculumCenter/courseDetails', |
||||||
|
// path: '/curriculumCenter/CourseObjectives', |
||||||
|
query: { |
||||||
|
id: id, |
||||||
|
}, |
||||||
|
}) |
||||||
|
// console.log(res) |
||||||
|
} |
||||||
|
const course_name = ref('点击添加课程') |
||||||
|
// const credit_name = ref('32') |
||||||
|
// const classhours_name = ref('2.0') |
||||||
|
// const creditChangeEvent = (credit: any) => { |
||||||
|
// credit_name.value = credit |
||||||
|
// } |
||||||
|
// const ClosecreditChangeEvent = () => { |
||||||
|
// credit_name.value = '32' |
||||||
|
// } |
||||||
|
const couresNameChangeEvent = (name: any) => { |
||||||
|
// console.log(name, 'name') |
||||||
|
course_name.value = name |
||||||
|
} |
||||||
|
const CloseCouresNameChangeEvent = () => { |
||||||
|
course_name.value = '点击添加课程' |
||||||
|
} |
||||||
|
// const classhoursChangeEvent = (classhours: any) => { |
||||||
|
// classhours_name.value = classhours |
||||||
|
// } |
||||||
|
// const CloseclasshoursChangeEvent = () => { |
||||||
|
// classhours_name.value = '2.0' |
||||||
|
// } |
||||||
|
// const goToObject = () => { |
||||||
|
// this.$route.push('/curriculumCenter/CourseObjectives') |
||||||
|
// } |
||||||
|
const likeObj = ref<Record<string, boolean>>({}) |
||||||
|
function changeLike(id: string) { |
||||||
|
likeObj.value[id] = !likeObj.value[id] |
||||||
|
} |
||||||
|
const collectObj = ref<Record<string, boolean>>({}) |
||||||
|
function changeCollect(id: string) { |
||||||
|
collectObj.value[id] = !collectObj.value[id] |
||||||
|
} |
||||||
|
function fill() { |
||||||
|
if (!Array.isArray(courseList.value)) return |
||||||
|
courseList.value.forEach((item) => { |
||||||
|
likeObj.value[item.id] = item.liked || true |
||||||
|
collectObj.value[item.id] = item.collected |
||||||
|
}) |
||||||
|
} |
||||||
|
</script> |
||||||
<template> |
<template> |
||||||
<div> |
<div class="main-content" v-loading="loading"> |
||||||
我的点赞 |
<div class="header"> |
||||||
|
<div class="btn"> |
||||||
|
<!-- <el-button type="primary" round size="large">全部课程</el-button> |
||||||
|
<el-button type="primary" round plain size="large">我的文件夹</el-button> --> |
||||||
|
<el-form inline v-if="userStore.userInfo.roleId[0] === '1'"> |
||||||
|
<!-- <el-form-item label="课程教师：" class="short-form-item"> |
||||||
|
<el-select v-model="params.teacher"> |
||||||
|
<el-option v-for="teachers in teacherList" :key="teachers.username" :value="teachers.username" |
||||||
|
:label="teachers.name"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> --> |
||||||
|
<el-form-item label="课程类别：" class="short-form-item"> |
||||||
|
<el-select v-model="params.category"> |
||||||
|
<el-option label="专业教育" value="1"></el-option> |
||||||
|
<el-option label="通识教育" value="2"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="课程性质" class="short-form-item"> |
||||||
|
<el-select v-model="params.nature"> |
||||||
|
<el-option label="必修" value="1"></el-option> |
||||||
|
<el-option label="选修" value="2"></el-option> |
||||||
|
<el-option label="任修" value="3"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="考核类型：" class="short-form-item"> |
||||||
|
<el-select v-model="params.assessmenttype"> |
||||||
|
<el-option label="考试" value="1"></el-option> |
||||||
|
<el-option label="考查" value="2"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="onSearch">搜索</el-button> |
||||||
|
<el-button type="primary" plain @click="onReset">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="course"> |
||||||
|
<ul class="course_list"> |
||||||
|
<li |
||||||
|
v-if="userStore.userInfo.roleId[0] === '1'" |
||||||
|
@click="onAddCourse()" |
||||||
|
class="add_course" |
||||||
|
> |
||||||
|
<div class="plus"> |
||||||
|
<el-icon class="avatar-uploader-icon"> |
||||||
|
<Plus /> |
||||||
|
</el-icon> |
||||||
|
</div> |
||||||
|
<h2 class="course_name">{{ course_name }}</h2> |
||||||
|
</li> |
||||||
|
<li v-for="item in courseList" :key="item.id"> |
||||||
|
<img |
||||||
|
title="点击查看课程详情" |
||||||
|
:src="item.img" |
||||||
|
alt="" |
||||||
|
@click="onGetCourseObject(item.id)" |
||||||
|
/> |
||||||
|
<h2 title="点击查看课程基本信息" class="course_name"> |
||||||
|
{{ item.name }} |
||||||
|
</h2> |
||||||
|
<p class="teacher_name">讲师：{{ item.teacher }}</p> |
||||||
|
<p class="credit"> |
||||||
|
<span>{{ item.classhours }}</span> |
||||||
|
学时 | |
||||||
|
<span>{{ item.credit }}</span> |
||||||
|
学分 |
||||||
|
</p> |
||||||
|
<div class="icon-box"> |
||||||
|
<svg-icon |
||||||
|
v-if="likeObj[item.id]" |
||||||
|
@click="changeLike(item.id)" |
||||||
|
width="25px" |
||||||
|
height="25px" |
||||||
|
name="点赞" |
||||||
|
></svg-icon> |
||||||
|
<svg-icon |
||||||
|
v-else |
||||||
|
@click="changeLike(item.id)" |
||||||
|
width="25px" |
||||||
|
height="25px" |
||||||
|
name="未点赞" |
||||||
|
></svg-icon> |
||||||
|
<svg-icon |
||||||
|
v-if="collectObj[item.id]" |
||||||
|
@click="changeCollect(item.id)" |
||||||
|
width="25px" |
||||||
|
height="25px" |
||||||
|
name="收藏" |
||||||
|
></svg-icon> |
||||||
|
<svg-icon |
||||||
|
v-else |
||||||
|
@click="changeCollect(item.id)" |
||||||
|
width="25px" |
||||||
|
height="25px" |
||||||
|
name="未收藏" |
||||||
|
></svg-icon> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- <el-icon class="del" @click="onDeleteCourse(item.id)"> |
||||||
|
<Delete /> |
||||||
|
</el-icon> --> |
||||||
|
<el-button |
||||||
|
:class="userStore.data.roles[0] == 1 ? 'object' : 'object1'" |
||||||
|
round |
||||||
|
plain |
||||||
|
@click="onGetCourseObject(item.id)" |
||||||
|
> |
||||||
|
详情 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
class="object1" |
||||||
|
round |
||||||
|
plain |
||||||
|
@click="onEditCourse(item)" |
||||||
|
v-if="userStore.data.roles[0] == 1" |
||||||
|
> |
||||||
|
编辑 |
||||||
|
</el-button> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<el-pagination |
||||||
|
v-model:current-page="params.pageNo" |
||||||
|
v-model:page-size="params.pageSize" |
||||||
|
:page-sizes="[2, 5, 7, 10]" |
||||||
|
:background="true" |
||||||
|
layout="jumper,total, sizes, prev, pager, next " |
||||||
|
:total="total" |
||||||
|
@size-change="handleSizeChange" |
||||||
|
@current-change="handleCurrentChange" |
||||||
|
style="margin-top: 10px; justify-content: center" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<course-edit |
||||||
|
ref="drawer" |
||||||
|
@success="onSuccess" |
||||||
|
@couresNameChange="couresNameChangeEvent" |
||||||
|
@CloseCouresNameChange="CloseCouresNameChangeEvent" |
||||||
|
:flog="flog" |
||||||
|
></course-edit> |
||||||
</div> |
</div> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<style lang="scss" scoped> |
||||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
.main-content { |
||||||
|
width: 1440px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
</script> |
.header { |
||||||
|
width: 100%; |
||||||
|
// height: 100px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
} |
||||||
|
|
||||||
|
// .btn { |
||||||
|
// // display: flex; |
||||||
|
// width: 50%; |
||||||
|
// height: 100%; |
||||||
|
// padding: 10px 0; |
||||||
|
// // display: inline; |
||||||
|
// // height: 40px; |
||||||
|
// // margin: 20px; |
||||||
|
// // padding-left: 50px; |
||||||
|
// } |
||||||
|
.search { |
||||||
|
width: 50%; |
||||||
|
display: flex; |
||||||
|
height: 100%; |
||||||
|
justify-content: flex-end; |
||||||
|
|
||||||
|
// flex-direction: row-reverse; |
||||||
|
// padding: 0 40px 0; |
||||||
|
input { |
||||||
|
width: 240px; |
||||||
|
height: 40px; |
||||||
|
border: 1px solid #dcdcdc; |
||||||
|
border-radius: 60px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.course { |
||||||
|
// display: flex; |
||||||
|
// flex: 0 0 25%; |
||||||
|
// justify-content: space-between; |
||||||
|
// flex-wrap: wrap; |
||||||
|
.course_list { |
||||||
|
display: flex; |
||||||
|
// flex: 0 0 25%; |
||||||
|
// justify-content: space-between; |
||||||
|
flex-wrap: wrap; |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
column-gap: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
li { |
||||||
|
margin: 40px 0; |
||||||
|
width: 349px; |
||||||
|
width: 100%; |
||||||
|
height: 297px; |
||||||
|
background: rgb(255, 255, 255); |
||||||
|
transition: all 0.5s; |
||||||
|
border-radius: 6px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
// flex: 1; /* 子元素按比例伸缩 */ |
||||||
|
&:hover { |
||||||
|
transform: translate3d(0, -3px, 0); |
||||||
|
box-shadow: 0 3px 8px rgb(0 0 0 / 20%); |
||||||
|
} |
||||||
|
|
||||||
|
.course_name { |
||||||
|
font-family: Inter-Bold; |
||||||
|
color: #333; |
||||||
|
font-size: 24px; |
||||||
|
margin-left: 30px; |
||||||
|
margin-top: 10px; |
||||||
|
font-weight: bold; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
background-color: #cccccc; |
||||||
|
width: 100%; |
||||||
|
height: 178px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin-left: 30px; |
||||||
|
margin-top: 5px; |
||||||
|
color: #555555; |
||||||
|
font-size: 14px; |
||||||
|
padding-top: 10px; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
span { |
||||||
|
color: #0052ff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.icon-box { |
||||||
|
position: absolute; |
||||||
|
right: 20px; |
||||||
|
// margin-left: 280px; |
||||||
|
margin-top: -80px; |
||||||
|
color: #0052ff; |
||||||
|
cursor: pointer; |
||||||
|
display: flex; |
||||||
|
column-gap: 5px; |
||||||
|
} |
||||||
|
.del { |
||||||
|
position: absolute; |
||||||
|
margin-left: 280px; |
||||||
|
margin-top: -80px; |
||||||
|
color: #0052ff; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.object { |
||||||
|
position: absolute; |
||||||
|
margin-left: 180px; |
||||||
|
margin-top: -29px; |
||||||
|
} |
||||||
|
|
||||||
|
.object1 { |
||||||
|
position: absolute; |
||||||
|
margin-left: 250px; |
||||||
|
margin-top: -29px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.plus { |
||||||
|
width: 100%; |
||||||
|
height: 178px; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
// background-position: center center; |
||||||
|
.el-icon.avatar-uploader-icon { |
||||||
|
font-size: 50px; |
||||||
|
color: #8c939d; |
||||||
|
width: 100%; |
||||||
|
height: 178px; |
||||||
|
margin-top: 20px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.add_course { |
||||||
|
border: 2px dashed rgb(143, 139, 139); |
||||||
|
|
||||||
|
h2 { |
||||||
|
font-size: 40px; |
||||||
|
text-align: center; |
||||||
|
font-family: Inter-Bold; |
||||||
|
color: #535050; |
||||||
|
font-weight: bold; |
||||||
|
margin-top: 20px; |
||||||
|
|
||||||
<style lang='scss' scoped> |
&:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.short-form-item { |
||||||
|
width: 300px; |
||||||
|
margin-right: 100px; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue