You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
347 lines
18 KiB
347 lines
18 KiB
{extend name="public/container"}
|
|
{block name="title"}所有课程{/block}
|
|
{block name="app"}
|
|
<div v-cloak id="app">
|
|
<base-header ref="baseHeader" :public-data="publicData" :user-info="userInfo" @submit-search="submitSearch"></base-header>
|
|
<div class="layout">
|
|
<div class="container">
|
|
<!-- 课程分类开始 -->
|
|
<div class="courseClassificationList">
|
|
<div class="courseClassificationList_item">
|
|
<div class="courseClassificationList_item_title">
|
|
<span>一级分类：</span>
|
|
</div>
|
|
<div ref="itemContent1" :class="{ autoHeight: flag1 }" class="courseClassificationList_item_content">
|
|
<div class="content_item" v-for="item in courseClassificationList1" :key="item.id"
|
|
:class="{ on: item.id == filterData.cate_id }"
|
|
@click="filterData.cate_id = item.id, filterData.subject_id = 0, filterData.search = '', filterData.page = 1">
|
|
<span class="content_item_value">{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="hasMore1" class="courseClassificationList_item_morethan" @click="handleShowMoreThan(1)">
|
|
<span>更多</span>
|
|
<i :class="[flag1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
|
|
</div>
|
|
</div>
|
|
<div class="courseClassificationList_item">
|
|
<div class="courseClassificationList_item_title">
|
|
<span>二级分类：</span>
|
|
</div>
|
|
<div ref="itemContent2" :class="{ autoHeight: flag2 }" class="courseClassificationList_item_content">
|
|
<div class="content_item" v-for="item in courseClassificationList2" :key="item.id"
|
|
:class="{ on: item.id == filterData.subject_id }"
|
|
@click="filterData.subject_id = item.id, filterData.search = '', filterData.page = 1">
|
|
<span class="content_item_value">{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="hasMore2" class="courseClassificationList_item_morethan" @click="handleShowMoreThan(2)">
|
|
<span>更多</span>
|
|
<i :class="[flag2 ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
|
|
</div>
|
|
</div>
|
|
<div class="courseClassificationList_item">
|
|
<div class="courseClassificationList_item_title">
|
|
<span>课程类型：</span>
|
|
</div>
|
|
<div class="courseClassificationList_item_content">
|
|
<div :class="{ on: !type.length }" class="content_item" @click="onType('')">
|
|
<span class="content_item_value">全部</span>
|
|
</div>
|
|
<div :class="{ on: type.indexOf(1) !== -1 }" class="content_item" @click="onType(1)">
|
|
<span class="content_item_value">图文专题</span>
|
|
</div>
|
|
<div :class="{ on: type.indexOf(2) !== -1 }" class="content_item" @click="onType(2)">
|
|
<span class="content_item_value">音频专题</span>
|
|
</div>
|
|
<div :class="{ on: type.indexOf(3) !== -1 }" class="content_item" @click="onType(3)">
|
|
<span class="content_item_value">视频专题</span>
|
|
</div>
|
|
<div :class="{ on: type.indexOf(4) !== -1 }" class="content_item" @click="onType(4)">
|
|
<span class="content_item_value">直播专题</span>
|
|
</div>
|
|
<div :class="{ on: type.indexOf(5) !== -1 }" class="content_item" @click="onType(5)">
|
|
<span class="content_item_value">专栏专题</span>
|
|
</div>
|
|
<div :class="{ on: type.indexOf(6) !== -1 }" class="content_item" @click="onType(6)">
|
|
<span class="content_item_value">轻专题</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="courseClassificationList_item">
|
|
<div class="courseClassificationList_item_title">
|
|
<span>课程性质：</span>
|
|
</div>
|
|
<div class="courseClassificationList_item_content">
|
|
<div :class="{ on: filterData.is_pay === '' }" class="content_item"
|
|
@click="filterData.is_pay = '', filterData.search = '', filterData.page = 1">
|
|
<span class="content_item_value">全部</span>
|
|
</div>
|
|
<div :class="{ on: filterData.is_pay === 0 }" class="content_item"
|
|
@click="filterData.is_pay = 0, filterData.search = '', filterData.page = 1">
|
|
<span class="content_item_value">免费</span>
|
|
</div>
|
|
<div :class="{ on: filterData.is_pay === 1 }" class="content_item"
|
|
@click="filterData.is_pay = 1, filterData.search = '', filterData.page = 1">
|
|
<span class="content_item_value">付费</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="courseClassificationList_item">
|
|
<div class="courseClassificationList_item_title">
|
|
<span>课程排序：</span>
|
|
</div>
|
|
<div class="courseClassificationList_item_content">
|
|
<div :class="{ on: sort == '' }" class="content_item" @click="sort = '', filterData.scoreOrder = '', filterData.salesOrder = '', filterData.search = ''">
|
|
<span class="content_item_value">默认</span>
|
|
</div>
|
|
<div :class="{ on: sort == 'salesOrder' }" class="content_item"
|
|
@click="sort = 'salesOrder', filterData.salesOrder = (filterData.salesOrder == 'asc' ? 'desc' : 'asc'), filterData.scoreOrder = '', filterData.search = ''">
|
|
<span class="content_item_value">销量</span>
|
|
<img v-if="sort != 'salesOrder'" src="{__PUBLIC_WEB_PATH}pc/images/1.png" alt="默认">
|
|
<img v-else-if="filterData.salesOrder == 'asc'" src="{__PUBLIC_WEB_PATH}pc/images/2.png" alt="降序">
|
|
<img v-else-if="filterData.salesOrder == 'desc'" src="{__PUBLIC_WEB_PATH}pc/images/3.png" alt="升序">
|
|
</div>
|
|
<div :class="{ on: sort == 'scoreOrder' }" class="content_item"
|
|
@click="sort = 'scoreOrder', filterData.scoreOrder = (filterData.scoreOrder === 'asc' ? 'desc' : 'asc'), filterData.salesOrder = '', filterData.search = ''">
|
|
<span class="content_item_value">评价</span>
|
|
<img v-if="sort != 'scoreOrder'" src="{__PUBLIC_WEB_PATH}pc/images/1.png" alt="默认">
|
|
<img v-else-if="filterData.scoreOrder == 'asc'" src="{__PUBLIC_WEB_PATH}pc/images/2.png" alt="降序">
|
|
<img v-else-if="filterData.scoreOrder == 'desc'" src="{__PUBLIC_WEB_PATH}pc/images/3.png" alt="升序">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 课程分类结束 -->
|
|
<!-- 课程列表开始 -->
|
|
<div class="container_curriculum_list">
|
|
<div v-if="courseList.length" class="container_curriculum_list_con">
|
|
<div class="container_curriculum_list_item" v-for="item in courseList" :key="item.id"
|
|
@click="handleSelectDetils(item)">
|
|
<div class="container_curriculum_list_item_image">
|
|
<img class="image" :src="item.image" :alt="item.title">
|
|
<img v-if="item.type === 1" class="type" src="{__PUBLIC_WEB_PATH}pc/images/course1.png"
|
|
alt="图文">
|
|
<img v-else-if="item.type === 2" class="type" src="{__PUBLIC_WEB_PATH}pc/images/course2.png"
|
|
alt="音频">
|
|
<img v-else-if="item.type === 3" class="type" src="{__PUBLIC_WEB_PATH}pc/images/course3.png"
|
|
alt="视频">
|
|
<img v-else-if="item.type === 4" class="type" src="{__PUBLIC_WEB_PATH}pc/images/course4.png"
|
|
alt="直播">
|
|
<img v-else-if="item.type === 5" class="type" src="{__PUBLIC_WEB_PATH}pc/images/course5.png"
|
|
alt="专栏">
|
|
</div>
|
|
<div class="course">
|
|
<div class="course_title">
|
|
<span>{{item.title}}</span>
|
|
</div>
|
|
<div class="label-count">
|
|
<div class="label-group">
|
|
<div v-for="label in item.label" class="label">{{ label }}</div>
|
|
</div>
|
|
<div v-if="item.type !== 4 && !item.is_light">共{{ item.count }}节</div>
|
|
</div>
|
|
<div class="browse-money">
|
|
<div>{{ item.browse_count }}人已学</div>
|
|
<div v-if="item.pay_type === 1" class="money">￥<span>{{ item.money }}</span></div>
|
|
<div v-else-if="item.pay_type === 0" class="money free">免费</div>
|
|
<div v-else-if="item.pay_type === 2" class="money free">加密</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-empty v-else image="{__PUBLIC_WEB_PATH}pc/images/empty1.png" description=" "></el-empty>
|
|
</div>
|
|
<!-- 课程列表结束 -->
|
|
<el-pagination :page-size="filterData.limit" :total="total" :current-page.sync="filterData.page" layout="prev, pager, next" prev-text="上一页" next-text="下一页" hide-on-single-page></el-pagination>
|
|
</div>
|
|
</div>
|
|
<base-footer :user-info="userInfo" :public-data="publicData"></base-footer>
|
|
<base-login :public-data="publicData" :agree-content="agreeContent"></base-login>
|
|
<base-agree :agree-content="agreeContent"></base-agree>
|
|
</div>
|
|
{/block}
|
|
{block name="vm"}
|
|
<script>
|
|
require([
|
|
'vue',
|
|
'ELEMENT',
|
|
'components/base-header/index',
|
|
'components/base-footer/index',
|
|
'components/base-login/index',
|
|
'components/base-agree/index',
|
|
'mixins/base',
|
|
'api/auth',
|
|
'api/special',
|
|
'scripts/util',
|
|
'router/index',
|
|
'css!styles/classification.css'
|
|
], function (Vue, ELEMENT, BaseHeader, BaseFooter, BaseLogin, BaseAgree, baseMixin, authApi, specialApi, util, router) {
|
|
Vue.use(ELEMENT);
|
|
Vue.use(router);
|
|
var vm = new Vue({
|
|
el: '#app',
|
|
components: {
|
|
'base-header': BaseHeader,
|
|
'base-footer': BaseFooter,
|
|
'base-login': BaseLogin,
|
|
'base-agree': BaseAgree
|
|
},
|
|
mixins: [baseMixin],
|
|
data: {
|
|
filterData: {
|
|
cate_id: 0,
|
|
subject_id: 0,
|
|
page: 1,
|
|
limit: 16,
|
|
type: '',
|
|
is_pay: '',
|
|
salesOrder: '',
|
|
scoreOrder: '',
|
|
search: ''
|
|
},
|
|
type: [],
|
|
sort: '',
|
|
courseClassificationList1: [
|
|
{
|
|
name: '全部',
|
|
grade_id: 0,
|
|
id: 0,
|
|
children: []
|
|
}
|
|
],
|
|
courseList: [],
|
|
total: 0,
|
|
flag1: false,
|
|
flag2: false,
|
|
hasMore1: false,
|
|
hasMore2: false
|
|
},
|
|
computed: {
|
|
courseClassificationList2: function () {
|
|
var vm = this;
|
|
var courseClassificationListItem = this.courseClassificationList1.find(function (item) {
|
|
return vm.filterData.cate_id == item.id;
|
|
});
|
|
var result = [
|
|
{
|
|
name: '全部',
|
|
grade_id: 0,
|
|
id: 0
|
|
}
|
|
];
|
|
if (courseClassificationListItem) {
|
|
return result.concat(courseClassificationListItem.children);
|
|
}
|
|
return result;
|
|
}
|
|
},
|
|
watch: {
|
|
filterData: {
|
|
handler: function (newVal, oldVal) {
|
|
this.get_special_list();
|
|
},
|
|
deep: true
|
|
},
|
|
courseClassificationList2: function () {
|
|
this.flag2 = false;
|
|
this.$nextTick(function () {
|
|
this.hasMore2 = this.$refs.itemContent2.offsetHeight !== this.$refs.itemContent2.scrollHeight;
|
|
});
|
|
},
|
|
'filterData.search': function (val) {
|
|
if (!val) {
|
|
this.$refs.baseHeader.searchValue = '';
|
|
}
|
|
}
|
|
},
|
|
created: function () {
|
|
var search = util.getParmas('search');
|
|
var cate_id = util.getParmas('cate_id');
|
|
var subject_id = util.getParmas('subject_id');
|
|
this.get_all_special_cate();
|
|
if (search) {
|
|
return this.filterData.search = search;
|
|
}
|
|
if (cate_id && subject_id) {
|
|
this.filterData.cate_id = cate_id;
|
|
return this.filterData.subject_id = subject_id;
|
|
}
|
|
this.get_special_list();
|
|
},
|
|
methods: {
|
|
// 分类
|
|
get_all_special_cate: function () {
|
|
specialApi.get_all_special_cate().then(function (res) {
|
|
vm.courseClassificationList1[0].children = res.data.children;
|
|
vm.courseClassificationList1 = vm.courseClassificationList1.concat(res.data.cateogry);
|
|
vm.$nextTick(function () {
|
|
this.hasMore1 = this.$refs.itemContent1.offsetHeight !== this.$refs.itemContent1.scrollHeight;
|
|
});
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 列表
|
|
get_special_list: function () {
|
|
specialApi.get_special_list(this.filterData).then(function (res) {
|
|
vm.courseList = res.data.data;
|
|
vm.total = res.data.count;
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 跳转专题详情
|
|
handleSelectDetils: function (item) {
|
|
window.location.assign((item.is_light ? this.$router.single_detail : this.$router.special_detail) + '?from=special_cate&id=' + item.id);
|
|
},
|
|
// 更多
|
|
handleShowMoreThan: function (state) {
|
|
if (state === 1) {
|
|
if (this.$refs.itemContent1.scrollHeight === this.$refs.itemContent1.offsetHeight && !this.flag1) {
|
|
return;
|
|
}
|
|
this.flag1 = !this.flag1;
|
|
} else if (state === 2) {
|
|
if (this.$refs.itemContent2.scrollHeight === this.$refs.itemContent2.offsetHeight && !this.flag2) {
|
|
return;
|
|
}
|
|
this.flag2 = !this.flag2;
|
|
}
|
|
},
|
|
// 搜索
|
|
submitSearch: function (value) {
|
|
this.filterData.cate_id = 0;
|
|
this.filterData.subject_id = 0;
|
|
this.filterData.type = '';
|
|
this.filterData.is_pay = '';
|
|
this.filterData.salesOrder = '';
|
|
this.filterData.scoreOrder = '';
|
|
this.filterData.search = value;
|
|
this.sort = '';
|
|
},
|
|
// 点击课程类型
|
|
onType: function (type) {
|
|
var index = -1;
|
|
if (type) {
|
|
index = this.type.indexOf(type);
|
|
if (index === -1) {
|
|
if (this.type.length === 5) {
|
|
this.type = [];
|
|
} else {
|
|
this.type.push(type);
|
|
}
|
|
} else {
|
|
this.type.splice(index, 1);
|
|
}
|
|
} else {
|
|
this.type = [];
|
|
}
|
|
this.filterData.page = 1;
|
|
this.filterData.search = '';
|
|
this.filterData.type = this.type.join();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{/block}
|
|
|