zhishifufei_php/application/web/view/special/list.html

{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}