|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者，助力企业发展 ] -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Licensed 该系统并不是自由软件，未经许可不能去掉相关版权 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
{extend name="public/container"}
|
|
|
{block name="title"}直播课{/block}
|
|
|
{block name="app"}
|
|
|
<div v-cloak id="app">
|
|
|
<base-header :public-data="publicData" :user-info="userInfo"></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="courseClassificationList_item_content" :class="{ autoHeight: flag1 }">
|
|
|
<div v-for="item in courseClassificationList1" :key="item.id" :class="{ on: filterData.cate_id === item.id }" class="content_item"
|
|
|
@click="filterData.cate_id = item.id, filterData.subject_id = 0, 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="courseClassificationList_item_content" :class="{ autoHeight: flag2 }">
|
|
|
<div v-for="item in courseClassificationList2" :key="item.id" :class="{ on: filterData.subject_id === item.id }" class="content_item"
|
|
|
@click="filterData.subject_id = item.id, 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: filterData.is_pay === '' }" class="content_item" @click="filterData.is_pay = '', 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.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.page = 1">
|
|
|
<span class="content_item_value">付费</span>
|
|
|
</div>
|
|
|
<div :class="{ on: filterData.is_pay === 2 }" class="content_item" @click="filterData.is_pay = 2, 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.salesOrder = ''">
|
|
|
<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')">
|
|
|
<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>
|
|
|
</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, index) in courseList" :key="index" @click="handleSelectDetils(item)">
|
|
|
<div class="container_curriculum_list_item_image">
|
|
|
<img :src="item.image" :alt="item.title">
|
|
|
<div v-if="item.status === 1" class="live1">直播中</div>
|
|
|
<div v-else-if="item.status === 2" class="live1">回放</div>
|
|
|
<div v-else-if="item.status === 3" class="live2">直播时间 {{ item.start_play_time }}</div>
|
|
|
<div v-else-if="item.status === 4" class="live2">已结束</div>
|
|
|
</div>
|
|
|
<div class="course">
|
|
|
<div class="course_title">
|
|
|
<span>{{item.title}}</span>
|
|
|
</div>
|
|
|
<div class="course_price">
|
|
|
<div class="course_price_content">
|
|
|
<div class="course_price_content_item">
|
|
|
|
|
|
<div class="course_price_content_item_label">
|
|
|
<span>时间：</span>
|
|
|
</div>
|
|
|
<div class="course_price_content_item_value">
|
|
|
<span>{{ item.start_play_time }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="item.lecturer_name" class="course_price_content_item">
|
|
|
<div class="course_price_content_item_label">
|
|
|
<span>讲师：</span>
|
|
|
</div>
|
|
|
<div class="course_price_content_item_value">
|
|
|
<span>{{ item.lecturer_name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="upload_number">
|
|
|
<div>{{ item.browse_count }}人已学</div>
|
|
|
<div v-if="item.pay_type === 1">￥<span>{{ item.money }}</span></div>
|
|
|
<div v-else class="free">免费</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-empty v-else image="{__PUBLIC_WEB_PATH}pc/images/empty2.png" description=" "></el-empty>
|
|
|
</div>
|
|
|
<!-- 课程列表结束 -->
|
|
|
<div class="pagination">
|
|
|
<el-pagination :page-size="filterData.limit" :total="total" :current-page="filterData.page" layout="prev, pager, next" prev-text="上一页" next-text="下一页"
|
|
|
hide-on-single-page @current-change="handleCurrentChange"></el-pagination>
|
|
|
</div>
|
|
|
</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/special',
|
|
|
'scripts/util',
|
|
|
'router/index',
|
|
|
'css!styles/liveCourse.css'
|
|
|
], function (Vue, ELEMENT, BaseHeader, BaseFooter, BaseLogin, BaseAgree, baseMixin, 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,
|
|
|
is_pay: '',
|
|
|
salesOrder: '',
|
|
|
search: ''
|
|
|
},
|
|
|
courseClassificationList1: [
|
|
|
{
|
|
|
name: '全部',
|
|
|
grade_id: 0,
|
|
|
id: 0,
|
|
|
children: []
|
|
|
}
|
|
|
],
|
|
|
courseList: [],
|
|
|
page: {
|
|
|
size: 100,
|
|
|
current: 1
|
|
|
},
|
|
|
total: 0,
|
|
|
sort: '',
|
|
|
flag1: false,
|
|
|
flag2: false,
|
|
|
hasMore1: false,
|
|
|
hasMore2: false
|
|
|
},
|
|
|
computed: {
|
|
|
courseClassificationList2: function () {
|
|
|
var vm = this;
|
|
|
var courseClassificationListItem = this.courseClassificationList1.find(function (item) {
|
|
|
return item.id === vm.filterData.cate_id;
|
|
|
});
|
|
|
var result = [
|
|
|
{
|
|
|
name: '全部',
|
|
|
grade_id: 0,
|
|
|
id: 0
|
|
|
}
|
|
|
];
|
|
|
if (courseClassificationListItem) {
|
|
|
return result.concat(courseClassificationListItem.children);
|
|
|
}
|
|
|
return result;
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
filterData: {
|
|
|
handler: function () {
|
|
|
this.get_live_special_list();
|
|
|
},
|
|
|
deep: true
|
|
|
},
|
|
|
courseClassificationList2: function () {
|
|
|
this.flag2 = false;
|
|
|
this.$nextTick(function () {
|
|
|
this.hasMore2 = this.$refs.itemContent2.offsetHeight !== this.$refs.itemContent2.scrollHeight;
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
created: function () {
|
|
|
this.get_all_special_cate();
|
|
|
this.get_live_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_live_special_list: function () {
|
|
|
specialApi.get_live_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(item) {
|
|
|
window.location.href = this.$router.special_detail + '?from=live&id=' + item.id;
|
|
|
},
|
|
|
// 更多
|
|
|
handleShowMoreThan(state) {
|
|
|
if (state === 1) {
|
|
|
if (this.$refs.itemContent1.offsetHeight === this.$refs.itemContent1.scrollHeight && !this.flag1) {
|
|
|
return;
|
|
|
}
|
|
|
this.flag1 = !this.flag1;
|
|
|
} else if (state === 2) {
|
|
|
if (this.$refs.itemContent2.offsetHeight === this.$refs.itemContent2.scrollHeight && !this.flag2) {
|
|
|
return;
|
|
|
}
|
|
|
this.flag2 = !this.flag2;
|
|
|
}
|
|
|
},
|
|
|
handleSizeChange(val) {
|
|
|
console.log(`每页 ${val} 条`);
|
|
|
},
|
|
|
handleCurrentChange(val) {
|
|
|
this.filterData.page = val;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
{/block}
|
|
|
|
