|
@@ -1,14 +1,13 @@
|
|
|
<template>
|
|
|
- <div class="video_contianer">
|
|
|
+ <div :class="{'video_contianer':!nestedMode}">
|
|
|
<el-card>
|
|
|
<mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
|
|
|
- @invalid="handleInvalidQuery"
|
|
|
- ></mx-condition>
|
|
|
+ @invalid="handleInvalidQuery"></mx-condition>
|
|
|
</el-card>
|
|
|
<!-- 视频主体 -->
|
|
|
<el-card class="video_content" v-if="videoList.length > 0">
|
|
|
<div slot="header">
|
|
|
- <mx-search-group justify="end" :span="6" v-model="sectionName" placeholder="请输入搜索内容" @search="searchVideo">
|
|
|
+ <mx-search-group justify="end" :span="6" v-model="sectionName" placeholder="请输入搜索内容" @search="searchVideo">
|
|
|
</mx-search-group>
|
|
|
</div>
|
|
|
<el-row :gutter="20">
|
|
@@ -34,7 +33,8 @@
|
|
|
<p class="fx-row jc-between ai-center">
|
|
|
<span class="text-ellipsis"> {{ item.section_name }} </span>
|
|
|
<!-- 老师才能收藏 -->
|
|
|
- <span v-if="role" @click="toCollect(item)" class="pointer iconfont icon-shoucang" :class="{'f-primary':item.isCollect}"></span>
|
|
|
+ <span v-if="role" @click="toCollect(item)" class="pointer iconfont icon-shoucang"
|
|
|
+ :class="{'f-primary':item.isCollect}"></span>
|
|
|
</p>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -54,19 +54,22 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { videoList,collectVideoCourse } from '@/api/webApi/webVideo'
|
|
|
+import { collectVideoCourse, videoList } from '@/api/webApi/webVideo'
|
|
|
import MxSearchGroup from '@/components/MxSearch/mx-search-group'
|
|
|
import MxCondition from '@/components/MxCondition/mx-condition'
|
|
|
-import { checkRole } from '@/utils/permission'
|
|
|
+import { checkRole } from '@/utils/permission'
|
|
|
+
|
|
|
export default {
|
|
|
+ name: 'video-course',
|
|
|
components: { MxSearchGroup, MxCondition },
|
|
|
+ props: { 'nestedMode': { type: Boolean, default: false } },
|
|
|
data() {
|
|
|
return {
|
|
|
pageForm: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 16
|
|
|
},
|
|
|
- role:checkRole(['frontTeacher','frontHeadteacher']),
|
|
|
+ role: checkRole(['frontTeacher', 'frontHeadteacher']),
|
|
|
sectionName: '',
|
|
|
queryParams: {
|
|
|
videoType: '',
|
|
@@ -110,8 +113,8 @@ export default {
|
|
|
},
|
|
|
toCollect(item) {
|
|
|
collectVideoCourse({
|
|
|
- isCollect:!item.isCollect,
|
|
|
- id:item.id
|
|
|
+ isCollect: !item.isCollect,
|
|
|
+ id: item.id
|
|
|
}).then(res => {
|
|
|
item.isCollect = !item.isCollect
|
|
|
}).catch(_ => {
|
|
@@ -144,6 +147,7 @@ export default {
|
|
|
.video_contianer {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
+
|
|
|
.video_item > img {
|
|
|
cursor: pointer;
|
|
|
}
|
|
@@ -151,16 +155,18 @@ export default {
|
|
|
.video_content .el-col {
|
|
|
margin-bottom: 42px;
|
|
|
}
|
|
|
-.video_item{
|
|
|
+
|
|
|
+.video_item {
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
+
|
|
|
.video_item > img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
|
|
|
-.video_item >p{
|
|
|
- padding:5px 10px;
|
|
|
- box-shadow: 0px 1px 4px 0px rgba(47,78,154,0.14);
|
|
|
+.video_item > p {
|
|
|
+ padding: 5px 10px;
|
|
|
+ box-shadow: 0px 1px 4px 0px rgba(47, 78, 154, 0.14);
|
|
|
}
|
|
|
</style>
|