zhishifufei_php/application/wap/view/first/special/special_cate.html

<!-- +---------------------------------------------------------------------- -->
<!-- | 天诚科技 [ 刘海东 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="head_top"}
<style>
    .free{margin-top:.1rem;font-weight:400;font-size:.22rem;line-height:.38rem;color:#FF6B00;}
    .nothing {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4.14rem;
        height: 3.36rem;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    body {
        padding-bottom: 1.1rem;
        padding-bottom: calc(1.1rem + constant(safe-area-inset-bottom));
        padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
    }
</style>
<script src="/wap/first/zsff/js/scroll.js"></script>
<script src="/wap/first/zsff/js/navbarscroll.js"></script>
{/block}
{block name="content"}
<div v-cloak id="app" class="goodsClass">
    <div class="header">
        <div class="search acea-row row-middle">
            <div class="pictrue">{if $homeLogo}<img src="{$homeLogo}">{else}<img src="/wap/first/zsff/images/crmeb.png">{/if}</div>
            <form class="form" @submit.prevent="goSearch">
                <label class="label">
                    <img class="img" src="/wap/first/zsff/images/search.png">
                    <input class="input" v-model="search" placeholder="输入课程名称">
                </label>
                <input class="submit" type="submit" value="搜索">
            </form>
        </div>
        <div v-if="gradeCate.length" id="wrapper" class="wrapper">
            <div class="scroller">
                <ul>
                    <li v-for="item in gradeCate" :key="item.id" :data-id="item.id">
                        <a href="javascript:" v-text="item.name"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div v-if="subjectCate.length" id="nav" class="nav">
        <div class="scroller">
            <ul>
                <li v-for="item in subjectCate" :key="item.id" :data-id="item.id" class="item">
                    <a href="javascript:">
                        <div class="pictrue"><img :src="item.pic"></div>
                        <div class="name" v-text="item.name"></div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="public_list goodList">
        <a v-for="item in updateSpecialList" :key="item.id" :href="item.is_light ? '{:url('special/single_details')}?id=' + item.id : '{:url('special/details')}?id=' + item.id" class="item acea-row">
            <div class="pictrue">
                <img :src="item.image" :alt="item.title">
                <div class="label">{{ item.special_type }}</div>
            </div>
            <div class="text">
                <div class="title acea-row row-middle">
                    <div class="name line1" v-text="item.title"></div>
                </div>
                <div class="labelList">
                    <span class="labelItem" v-for="label in item.label">{{label}}</span>
                </div>
                <div class="acea-row row-middle row-between">
                    <div>
                        <div class="money" v-if="item.money > 0">¥<span>{{item.money}}</span></div>
                        <div class="free" v-else>免费</div>
                        <span v-if="!item.is_light && item.type!=4" class="total">共{{item.count}}节</span>
                    </div>
                    <div class="num">{{item.browse_count}}人已学习</div>
                </div>
            </div>
        </a>
    </div>
    <div v-if="loadend && !specialList.length">
        <img class="nothing"  src="/wap/first/zsff/images/no_data_available.png">
    </div>
    <p v-else class="loading-line" style="background-color: #fff;">
        <span v-show="loading" class="fa fa-spinner loadingpic" style="font-size: 0.4rem;"></span>
        <span v-text="loadTitle">加载更多</span>
    </p>
    {include file="public/store_menu"}
</div>
{/block}
{block name="foot"}
<script>
    var cate_id = {$cate_id};
    var subject_id = {$subject_id};
    require(['vue', 'axios', 'helper', 'special-type'], function (Vue, axios, $h, specialType) {
        var vm = new Vue({
            el: '#app',
            data: {
                gradeCate: [],
                subjectCate: [],
                specialList: [],
                gradeId: -1,
                subjectId: -1,
                search: '',
                loadTitle: '',
                page: 1,
                limit: 10,
                loading: false,
                loadend: false,
                count: 0
            },
            computed: {
                updateSpecialList: function () {
                    return this.specialList.map(function (value) {
                        value.special_type = specialType[value.type];
                        return value;
                    });
                }
            },
            created: function () {
                this.getCateList();
            },
            mounted: function () {
                this.$nextTick(function () {
                    $h.EventUtil.listenTouchDirection(document, function () {
                        this.getSpecialList();
                    }.bind(this), false);
                });
            },
            methods: {
                goSearch: function () {
                    this.loadend = false;
                    this.page = 1;
                    this.gradeId = 0;
                    this.$set(this, 'specialList', []);
                    this.getSpecialList();
                },
                // 获取导航数据
                getCateList: function () {
                    this.loading = true;
                    axios.get("{:url('special/get_grade_cate')}").then(function (res) {
                        vm.loading = false;
                        var resData = res.data;
                        if (resData.code === 200) {
                            vm.gradeCate = resData.data;
                            vm.gradeCate.unshift({
                                id: 0,
                                name: '全部'
                            });
                            var defaultSelect = 0;
                            for (var i = 0; i < vm.gradeCate.length; i++) {
                                if (vm.gradeCate[i].id === cate_id) {
                                    defaultSelect = i;
                                    break;
                                }
                            }
                            vm.$nextTick(function () {
                                $('#wrapper').navbarscroll({
                                    defaultSelect: defaultSelect,
                                    scrollerWidth: 5,
                                    fingerClick: 1,
                                    endClickScroll: function (elem) {
                                        var id = $(elem).data('id');
                                        vm.count++;
                                        if (vm.gradeId === id) {
                                            return;
                                        }
                                        vm.gradeId = id;
                                        if (vm.gradeId) {
                                            vm.getSubject();
                                        } else {
                                            vm.subjectCate = [];
                                            vm.specialList = [];
                                            vm.subjectId = 0;
                                            vm.loading = false;
                                            vm.loadend = false;
                                            vm.page = 1;
                                            vm.getSpecialList();
                                        }
                                    }
                                });
                            });
                        } else {
                            $h.pushMsg(resData.msg);
                        }
                    }).catch(function () {
                        vm.loading = false;
                    });
                },
                // 二级导航
                getSubject: function () {
                    var subjectCate = [{
                        id: 0,
                        name: '全部',
                        pic: '{__WAP_PATH}zsff/images/all.png',
                        grade_id: this.gradeId
                    }];

                    this.subjectCate = [];
                    this.specialList = [];
                    this.subjectId = -1;

                    for (var i = 0; i < this.gradeCate.length; i++) {
                        if (this.gradeId === this.gradeCate[i].id) {
                            subjectCate = subjectCate.concat(this.gradeCate[i].children);
                            break;
                        }
                    }

                    this.subjectCate = subjectCate;

                    var defaultSelect = 0;
                    if (this.count === 1) {
                        for (let j = 0; j < this.subjectCate.length; j++) {
                            if (this.subjectCate[j].id === subject_id) {
                                defaultSelect = j;
                                break;
                            }
                        }
                    }

                    this.$nextTick(function () {
                        $('#nav').navbarscroll({
                            defaultSelect: defaultSelect,
                            scrollerWidth: 5,
                            fingerClick: 1,
                            endClickScroll: function (elem) {
                                var id = $(elem).data('id');
                                if (vm.subjectId === id) {
                                    return;
                                }
                                vm.subjectId = id;
                                vm.specialList = [];
                                vm.loadend = false;
                                vm.page = 1;
                                vm.getSpecialList();
                            }
                        });
                    });
                },
                // 课程列表
                getSpecialList: function () {
                    if (this.loading || this.loadend) {
                        return;
                    };
                    this.loading = true;
                    this.loadTitle = '';
                    axios.get("{:url('special/get_special_list')}", {
                        params: {
                            grade_id: this.gradeId,
                            subject_id: this.subjectId,
                            search: this.search,
                            page: this.page++,
                            limit: this.limit
                        }
                    }).then(function (res) {
                        vm.loading = false;
                        var resData = res.data;
                        if (resData.code === 200) {
                            var data = resData.data;
                            vm.specialList = vm.specialList.concat(data);
                            vm.loadend = vm.limit > data.length;
                            vm.loadTitle = vm.loadend ? '已全部加载完' : '上拉加载更多';
                        } else {
                            $h.pushMsg(resData.msg);
                        }
                    }).catch(function () {
                        vm.loading = false;
                    });
                }
            }
        });
    })
</script>
{/block}