|
|
|
@ -3,24 +3,39 @@ |
|
|
|
<div class="search"> |
|
|
|
<div class="search"> |
|
|
|
<h6>精品课程，精彩讲解</h6> |
|
|
|
<h6>精品课程，精彩讲解</h6> |
|
|
|
<div class="input"> |
|
|
|
<div class="input"> |
|
|
|
<img src="@/assets/img/search.png" alt=""> |
|
|
|
<img src="@/assets/img/search.png" |
|
|
|
<input type="text" placeholder="请输入课程名称" v-model="keyword"> |
|
|
|
alt=""> |
|
|
|
|
|
|
|
<input type="text" |
|
|
|
|
|
|
|
placeholder="请输入课程名称" |
|
|
|
|
|
|
|
v-model="keyword"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="tabs"> |
|
|
|
<div class="tabs"> |
|
|
|
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: item.id == active}" @click="tabChange(item)">{{ item.name }}</a> |
|
|
|
<a class="item" |
|
|
|
|
|
|
|
v-for="(item, i) in tabs" |
|
|
|
|
|
|
|
:key="i" |
|
|
|
|
|
|
|
:class="{active: item.id == active}" |
|
|
|
|
|
|
|
@click="tabChange(item)">{{ item.name }}</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 课程筛选 --> |
|
|
|
<!-- 课程筛选 --> |
|
|
|
<div class="filter"> |
|
|
|
<div class="filter"> |
|
|
|
<div class="wrap-inner" style="padding-bottom: 0"> |
|
|
|
<div class="wrap-inner" |
|
|
|
|
|
|
|
style="padding-bottom: 0"> |
|
|
|
<dl v-if="active != 2"> |
|
|
|
<dl v-if="active != 2"> |
|
|
|
<dt>课程分类：</dt> |
|
|
|
<dt>课程分类：</dt> |
|
|
|
<dd :class="{active: form.categoryId === ''}" @click="changeCategory('')">不限</dd> |
|
|
|
<dd :class="{active: form.categoryId === ''}" |
|
|
|
<dd v-for="(item, i) in classificationList" :key="i" :class="{active: form.categoryId === item.id}" @click="changeCategory(item.id)">{{ item.classificationName }}</dd> |
|
|
|
@click="changeCategory('')">不限</dd> |
|
|
|
|
|
|
|
<dd v-for="(item, i) in classificationList" |
|
|
|
|
|
|
|
:key="i" |
|
|
|
|
|
|
|
:class="{active: form.categoryId === item.id}" |
|
|
|
|
|
|
|
@click="changeCategory(item.id)">{{ item.classificationName }}</dd> |
|
|
|
</dl> |
|
|
|
</dl> |
|
|
|
<dl> |
|
|
|
<dl> |
|
|
|
<dt>课程类型：</dt> |
|
|
|
<dt>课程类型：</dt> |
|
|
|
<dd v-for="(item, i) in types" :key="i" :class="{active: form.courseType === item.id}" @click="changeType(item.id)">{{ item.name }}</dd> |
|
|
|
<dd v-for="(item, i) in types" |
|
|
|
|
|
|
|
:key="i" |
|
|
|
|
|
|
|
:class="{active: form.courseType === item.id}" |
|
|
|
|
|
|
|
@click="changeType(item.id)">{{ item.name }}</dd> |
|
|
|
</dl> |
|
|
|
</dl> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -29,35 +44,47 @@ |
|
|
|
<div class="course-bg"></div> |
|
|
|
<div class="course-bg"></div> |
|
|
|
<template v-if="list.length"> |
|
|
|
<template v-if="list.length"> |
|
|
|
<ul> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, index) in list" :key="index" @click="toDetail(item.id)"> |
|
|
|
<li v-for="(item, index) in list" |
|
|
|
<img :src="item.coverUrl" alt="" /> |
|
|
|
:key="index" |
|
|
|
|
|
|
|
@click="toDetail(item.id)"> |
|
|
|
|
|
|
|
<img :src="item.coverUrl" |
|
|
|
|
|
|
|
alt="" /> |
|
|
|
<div class="title">{{ item.courseName }}</div> |
|
|
|
<div class="title">{{ item.courseName }}</div> |
|
|
|
<div class="desc" :class="{ie: core.isIE(),ie: core.isFirefox()}" v-html="item.courseIntroduction"></div> |
|
|
|
<div class="desc" |
|
|
|
|
|
|
|
:class="{ie: core.isIE(),ie: core.isFirefox()}" |
|
|
|
|
|
|
|
v-html="item.courseIntroduction"></div> |
|
|
|
<div class="metas"> |
|
|
|
<div class="metas"> |
|
|
|
<div class="meta"> |
|
|
|
<div class="meta"> |
|
|
|
<i class="el-icon-view"></i> |
|
|
|
<i class="el-icon-view"></i> |
|
|
|
{{ item.pageviews }} |
|
|
|
{{ item.pageviews }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="meta collect" @click.stop="collect(item)"> |
|
|
|
<div class="meta collect" |
|
|
|
|
|
|
|
@click.stop="collect(item)"> |
|
|
|
<i :class="item.collectionStatus ? 'el-icon-star-on' : 'el-icon-star-off'"></i> |
|
|
|
<i :class="item.collectionStatus ? 'el-icon-star-on' : 'el-icon-star-off'"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="meta"> |
|
|
|
<div class="meta"> |
|
|
|
<i class="el-icon-user"></i> |
|
|
|
<i class="el-icon-user"></i> |
|
|
|
{{ item.schoolName }} |
|
|
|
{{ item.schoolName }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<span v-if="item.courseType == 0" class="type">{{ item.courseType == 1 ? '付费' : '免费'}}</span> |
|
|
|
<span v-if="item.courseType == 0" |
|
|
|
|
|
|
|
class="type">{{ item.courseType == 1 ? '付费' : '免费'}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<div class="pagination"> |
|
|
|
<div class="pagination"> |
|
|
|
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"> |
|
|
|
<el-pagination background |
|
|
|
|
|
|
|
layout="total, prev, pager, next" |
|
|
|
|
|
|
|
:total="total" |
|
|
|
|
|
|
|
@current-change="handleCurrentChange" |
|
|
|
|
|
|
|
:current-page="page"> |
|
|
|
</el-pagination> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<div class="empty"> |
|
|
|
<div class="empty"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<img src="@/assets/img/none.png" alt=""> |
|
|
|
<img src="@/assets/img/none.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
<p>暂无课程</p> |
|
|
|
<p>暂无课程</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -69,11 +96,13 @@ |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import { Loading } from "element-ui"; |
|
|
|
import { Loading } from "element-ui"; |
|
|
|
import Setting from "@/setting"; |
|
|
|
import Setting from "@/setting"; |
|
|
|
|
|
|
|
import util from "@/libs/util" |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "course", |
|
|
|
name: "course", |
|
|
|
data() { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
return { |
|
|
|
timer: null, |
|
|
|
timer: null, |
|
|
|
|
|
|
|
token: util.local.get(Setting.tokenKey), |
|
|
|
isTourist: !!Setting.whiteList.find(e => e === this.$route.path), |
|
|
|
isTourist: !!Setting.whiteList.find(e => e === this.$route.path), |
|
|
|
active: +this.$route.query.source || 0, |
|
|
|
active: +this.$route.query.source || 0, |
|
|
|
tabs: [ |
|
|
|
tabs: [ |
|
|
|
@ -81,10 +110,6 @@ export default { |
|
|
|
id: 0, |
|
|
|
id: 0, |
|
|
|
name: '共享课程' |
|
|
|
name: '共享课程' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
|
|
|
|
id: 2, |
|
|
|
|
|
|
|
name: '我的收藏' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
form: { |
|
|
|
form: { |
|
|
|
categoryId: '', |
|
|
|
categoryId: '', |
|
|
|
@ -114,7 +139,13 @@ export default { |
|
|
|
loadIns: null |
|
|
|
loadIns: null |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted () { |
|
|
|
|
|
|
|
// 登录以后才需要展示我的收藏 |
|
|
|
|
|
|
|
this.token && this.tabs.push({ |
|
|
|
|
|
|
|
id: 2, |
|
|
|
|
|
|
|
name: '我的收藏' |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 登录后的课程才需要展示本校课程 |
|
|
|
// 登录后的课程才需要展示本校课程 |
|
|
|
this.isTourist || this.tabs.splice(1, 0, { |
|
|
|
this.isTourist || this.tabs.splice(1, 0, { |
|
|
|
id: 1, |
|
|
|
id: 1, |
|
|
|
@ -122,12 +153,12 @@ export default { |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.getClassification(0) |
|
|
|
this.getClassification(0) |
|
|
|
this.getData() |
|
|
|
this.getData() |
|
|
|
this.$once('hook:beforeDestroy', function() { |
|
|
|
this.$once('hook:beforeDestroy', function () { |
|
|
|
clearInterval(this.timer) |
|
|
|
clearInterval(this.timer) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
watch: { |
|
|
|
keyword: function(val) { |
|
|
|
keyword: function (val) { |
|
|
|
clearTimeout(this.searchTimer); |
|
|
|
clearTimeout(this.searchTimer); |
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
this.initData(); |
|
|
|
this.initData(); |
|
|
|
@ -135,7 +166,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
getList() { |
|
|
|
getList () { |
|
|
|
// 登录前登录后页面调的课程接口不是同一个 |
|
|
|
// 登录前登录后页面调的课程接口不是同一个 |
|
|
|
this.$post(this.api[this.isTourist ? 'studentLoginPreCourse' : 'pageConditionalQueryCourseByStudent'], { |
|
|
|
this.$post(this.api[this.isTourist ? 'studentLoginPreCourse' : 'pageConditionalQueryCourseByStudent'], { |
|
|
|
...this.form, |
|
|
|
...this.form, |
|
|
|
@ -155,12 +186,12 @@ export default { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 获取redis缓存 |
|
|
|
// 获取redis缓存 |
|
|
|
getRedis() { |
|
|
|
getRedis () { |
|
|
|
this.$post(this.api.getRedisCache).then(({ data }) => { |
|
|
|
this.$post(this.api.getRedisCache).then(({ data }) => { |
|
|
|
data && this.getList() |
|
|
|
data && this.getList() |
|
|
|
}).catch(res => {}) |
|
|
|
}).catch(res => { }) |
|
|
|
}, |
|
|
|
}, |
|
|
|
getData() { |
|
|
|
getData () { |
|
|
|
this.loadIns = Loading.service() |
|
|
|
this.loadIns = Loading.service() |
|
|
|
this.getList() |
|
|
|
this.getList() |
|
|
|
if (!Setting.isDev) { |
|
|
|
if (!Setting.isDev) { |
|
|
|
@ -168,22 +199,22 @@ export default { |
|
|
|
this.timer = setInterval(this.getRedis, 1000) |
|
|
|
this.timer = setInterval(this.getRedis, 1000) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
initData() { |
|
|
|
initData () { |
|
|
|
this.page = 1; |
|
|
|
this.page = 1; |
|
|
|
this.getData(); |
|
|
|
this.getData(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 获取分类 |
|
|
|
// 获取分类 |
|
|
|
getClassification(platformSource) { |
|
|
|
getClassification (platformSource) { |
|
|
|
this.$post(this.api.listClassification, { |
|
|
|
this.$post(this.api.listClassification, { |
|
|
|
pageNum: 1, |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 1000, |
|
|
|
pageSize: 1000, |
|
|
|
platformSource |
|
|
|
platformSource |
|
|
|
}).then(({ page }) => { |
|
|
|
}).then(({ page }) => { |
|
|
|
this.classificationList = page.records |
|
|
|
this.classificationList = page.records |
|
|
|
}).catch(res => {}) |
|
|
|
}).catch(res => { }) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// tab切换 |
|
|
|
// tab切换 |
|
|
|
tabChange(item) { |
|
|
|
tabChange (item) { |
|
|
|
this.form = { |
|
|
|
this.form = { |
|
|
|
categoryId: '', |
|
|
|
categoryId: '', |
|
|
|
courseType: '' |
|
|
|
courseType: '' |
|
|
|
@ -193,26 +224,26 @@ export default { |
|
|
|
this.initData() |
|
|
|
this.initData() |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 分类切换 |
|
|
|
// 分类切换 |
|
|
|
changeCategory(id) { |
|
|
|
changeCategory (id) { |
|
|
|
this.form.categoryId = id |
|
|
|
this.form.categoryId = id |
|
|
|
this.initData() |
|
|
|
this.initData() |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 类型切换 |
|
|
|
// 类型切换 |
|
|
|
changeType(id) { |
|
|
|
changeType (id) { |
|
|
|
this.form.courseType = id |
|
|
|
this.form.courseType = id |
|
|
|
this.initData() |
|
|
|
this.initData() |
|
|
|
}, |
|
|
|
}, |
|
|
|
handleCurrentChange(val) { |
|
|
|
handleCurrentChange (val) { |
|
|
|
this.page = val; |
|
|
|
this.page = val; |
|
|
|
this.getData(); |
|
|
|
this.getData(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 收藏 |
|
|
|
// 收藏 |
|
|
|
collect(item) { |
|
|
|
collect (item) { |
|
|
|
this.$post(`${this.api.collectCourse}?courseId=${item.id}&state=${item.collectionStatus ? 0 : 1}`).then(res => { |
|
|
|
this.$post(`${this.api.collectCourse}?courseId=${item.id}&state=${item.collectionStatus ? 0 : 1}`).then(res => { |
|
|
|
this.getData() |
|
|
|
this.getData() |
|
|
|
}).catch(res => {}) |
|
|
|
}).catch(res => { }) |
|
|
|
}, |
|
|
|
}, |
|
|
|
toDetail(id) { |
|
|
|
toDetail (id) { |
|
|
|
this.$router.push(`/${this.isTourist ? 'preCourse' : 'course'}/details?id=${id}&source=${this.active}`); |
|
|
|
this.$router.push(`/${this.isTourist ? 'preCourse' : 'course'}/details?id=${id}&source=${this.active}`); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -225,8 +256,8 @@ export default { |
|
|
|
padding: 100px 0 130px; |
|
|
|
padding: 100px 0 130px; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
background: url(../../../assets/img/course-bg2.png) (73px 50px)/250px auto no-repeat, |
|
|
|
background: url(../../../assets/img/course-bg2.png) (73px 50px)/250px auto no-repeat, |
|
|
|
url(../../../assets/img/course-bg4.png) (top left)/auto no-repeat, |
|
|
|
url(../../../assets/img/course-bg4.png) (top left) / auto no-repeat, |
|
|
|
url(../../../assets/img/course-bg3.png) (top right)/auto no-repeat, |
|
|
|
url(../../../assets/img/course-bg3.png) (top right) / auto no-repeat, |
|
|
|
url(../../../assets/img/course-bg1.png) 0 0/100% 100% no-repeat; |
|
|
|
url(../../../assets/img/course-bg1.png) 0 0/100% 100% no-repeat; |
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
margin-bottom: 25px; |
|
|
|
margin-bottom: 25px; |
|
|
|
@ -269,8 +300,8 @@ export default { |
|
|
|
border-bottom: 3px solid transparent; |
|
|
|
border-bottom: 3px solid transparent; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
&.active { |
|
|
|
&.active { |
|
|
|
color: #007EFF; |
|
|
|
color: #007eff; |
|
|
|
border-color: #007EFF; |
|
|
|
border-color: #007eff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -305,7 +336,7 @@ export default { |
|
|
|
.courses { |
|
|
|
.courses { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
padding: 10px 0 20px; |
|
|
|
padding: 10px 0 20px; |
|
|
|
background: url(../../../assets/img/course3.png) 0 0/auto no-repeat; |
|
|
|
background: url(../../../assets/img/course3.png) 0 0 / auto no-repeat; |
|
|
|
.course-bg { |
|
|
|
.course-bg { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
top: 0; |
|
|
|
@ -334,11 +365,11 @@ export default { |
|
|
|
img { |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 165px; |
|
|
|
height: 165px; |
|
|
|
transition: .3s; |
|
|
|
transition: 0.3s; |
|
|
|
} |
|
|
|
} |
|
|
|
.title { |
|
|
|
.title { |
|
|
|
margin: 10px 0 5px; |
|
|
|
margin: 10px 0 5px; |
|
|
|
color: #0B1D30; |
|
|
|
color: #0b1d30; |
|
|
|
font-size: 16px; |
|
|
|
font-size: 16px; |
|
|
|
word-wrap: break-word; |
|
|
|
word-wrap: break-word; |
|
|
|
word-break: break-all; |
|
|
|
word-break: break-all; |
|
|
|
@ -352,7 +383,7 @@ export default { |
|
|
|
background-color: #f00; |
|
|
|
background-color: #f00; |
|
|
|
} |
|
|
|
} |
|
|
|
.desc { |
|
|
|
.desc { |
|
|
|
color: #757F92; |
|
|
|
color: #757f92; |
|
|
|
font-size: 14px; |
|
|
|
font-size: 14px; |
|
|
|
display: -webkit-box; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
@ -386,7 +417,8 @@ export default { |
|
|
|
font-size: 20px; |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16); |
|
|
|
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), |
|
|
|
|
|
|
|
0px 1px 2px -2px rgba(142, 123, 253, 0.16); |
|
|
|
img { |
|
|
|
img { |
|
|
|
transform: scale(1.05); |
|
|
|
transform: scale(1.05); |
|
|
|
} |
|
|
|
} |
|
|
|
|
