|
|
|
|
@ -3,24 +3,39 @@ |
|
|
|
|
<div class="search"> |
|
|
|
|
<h6>精品课程，精彩讲解</h6> |
|
|
|
|
<div class="input"> |
|
|
|
|
<img src="@/assets/img/search.png" alt=""> |
|
|
|
|
<input type="text" placeholder="请输入课程名称" v-model="keyword"> |
|
|
|
|
<img src="@/assets/img/search.png" |
|
|
|
|
alt=""> |
|
|
|
|
<input type="text" |
|
|
|
|
placeholder="请输入课程名称" |
|
|
|
|
v-model="keyword"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<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 class="filter"> |
|
|
|
|
<div class="wrap-inner" style="padding-bottom: 0"> |
|
|
|
|
<div class="wrap-inner" |
|
|
|
|
style="padding-bottom: 0"> |
|
|
|
|
<dl v-if="active != 2"> |
|
|
|
|
<dt>课程分类：</dt> |
|
|
|
|
<dd :class="{active: form.categoryId === ''}" @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> |
|
|
|
|
<dd :class="{active: form.categoryId === ''}" |
|
|
|
|
@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> |
|
|
|
|
<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> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -29,35 +44,47 @@ |
|
|
|
|
<div class="course-bg"></div> |
|
|
|
|
<template v-if="list.length"> |
|
|
|
|
<ul> |
|
|
|
|
<li v-for="(item, index) in list" :key="index" @click="toDetail(item.id)"> |
|
|
|
|
<img :src="item.coverUrl" alt="" /> |
|
|
|
|
<li v-for="(item, index) in list" |
|
|
|
|
:key="index" |
|
|
|
|
@click="toDetail(item.id)"> |
|
|
|
|
<img :src="item.coverUrl" |
|
|
|
|
alt="" /> |
|
|
|
|
<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="meta"> |
|
|
|
|
<i class="el-icon-view"></i> |
|
|
|
|
{{ item.pageviews }} |
|
|
|
|
</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> |
|
|
|
|
</div> |
|
|
|
|
<div class="meta"> |
|
|
|
|
<i class="el-icon-user"></i> |
|
|
|
|
{{ item.schoolName }} |
|
|
|
|
</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> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<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> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<div class="empty"> |
|
|
|
|
<div> |
|
|
|
|
<img src="@/assets/img/none.png" alt=""> |
|
|
|
|
<img src="@/assets/img/none.png" |
|
|
|
|
alt=""> |
|
|
|
|
<p>暂无课程</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -69,11 +96,13 @@ |
|
|
|
|
<script> |
|
|
|
|
import { Loading } from "element-ui"; |
|
|
|
|
import Setting from "@/setting"; |
|
|
|
|
import util from "@/libs/util" |
|
|
|
|
export default { |
|
|
|
|
name: "course", |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
timer: null, |
|
|
|
|
token: util.local.get(Setting.tokenKey), |
|
|
|
|
isTourist: !!Setting.whiteList.find(e => e === this.$route.path), |
|
|
|
|
active: +this.$route.query.source || 0, |
|
|
|
|
tabs: [ |
|
|
|
|
@ -81,10 +110,6 @@ export default { |
|
|
|
|
id: 0, |
|
|
|
|
name: '共享课程' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
name: '我的收藏' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
form: { |
|
|
|
|
categoryId: '', |
|
|
|
|
@ -115,6 +140,12 @@ export default { |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
// 登录以后才需要展示我的收藏 |
|
|
|
|
this.token && this.tabs.push({ |
|
|
|
|
id: 2, |
|
|
|
|
name: '我的收藏' |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 登录后的课程才需要展示本校课程 |
|
|
|
|
this.isTourist || this.tabs.splice(1, 0, { |
|
|
|
|
id: 1, |
|
|
|
|
@ -269,8 +300,8 @@ export default { |
|
|
|
|
border-bottom: 3px solid transparent; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&.active { |
|
|
|
|
color: #007EFF; |
|
|
|
|
border-color: #007EFF; |
|
|
|
|
color: #007eff; |
|
|
|
|
border-color: #007eff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -334,11 +365,11 @@ export default { |
|
|
|
|
img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 165px; |
|
|
|
|
transition: .3s; |
|
|
|
|
transition: 0.3s; |
|
|
|
|
} |
|
|
|
|
.title { |
|
|
|
|
margin: 10px 0 5px; |
|
|
|
|
color: #0B1D30; |
|
|
|
|
color: #0b1d30; |
|
|
|
|
font-size: 16px; |
|
|
|
|
word-wrap: break-word; |
|
|
|
|
word-break: break-all; |
|
|
|
|
@ -352,7 +383,7 @@ export default { |
|
|
|
|
background-color: #f00; |
|
|
|
|
} |
|
|
|
|
.desc { |
|
|
|
|
color: #757F92; |
|
|
|
|
color: #757f92; |
|
|
|
|
font-size: 14px; |
|
|
|
|
display: -webkit-box; |
|
|
|
|
-webkit-box-orient: vertical; |
|
|
|
|
@ -386,7 +417,8 @@ export default { |
|
|
|
|
font-size: 20px; |
|
|
|
|
} |
|
|
|
|
&: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 { |
|
|
|
|
transform: scale(1.05); |
|
|
|
|
} |
|
|
|
|
|
