zyedu/application/wap/view/first/spread/special.html

<!-- +---------------------------------------------------------------------- -->
<!-- | CRMEB [ CRMEB赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author: CRMEB Team <admin@crmeb.com> -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name='title'}专题推广{/block}
{block name="head_top"}
<script src="/wap/first/zsff/js/scroll.js"></script>
<script src="/wap/first/zsff/js/navbarscroll.js"></script>
<style>
    body {
        background-color: #f5f5f5;
    }

    .loading {
        font-size: .4rem;
        text-align: center;
        color: #999;
    }

    .loaded {
        font-size: .28rem;
        line-height: .72rem;
        text-align: center;
        color: #999;
    }

    .nothing {
        position: absolute;
        top: 30%;
        left: 50%;
        width: 4.14rem;
        height: 3.36rem;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>
{/block}
{block name="content"}
<div class="thematic-promotion" id="app" v-cloak ref="app">
    <div class="goodsClass">
        <div class="header" style="height: 1.0rem">
            <div class="wrapper" id="wrapper">
                <div class="scroller">
                    <ul>
                        <li v-for="item in gradeList" :data-id="item.id">
                            <a href="javascript:void(0)" v-text="item.name"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-details" v-for="item in specialList" ref="list" v-if="item.list.length">
        <div class="title line1 acea-row row-middle" v-text="item.name"></div>
        <div class="video-listn">
            <div class="item acea-row" v-for="val in item.list">
                <div class="pictrue"><img :src="val.image"></div>
                <div class="text acea-row row-between row-column">
                    <div class="name line1" v-text="val.title"></div>
                    <div class="num acea-row row-middle">
                        <div class="money">¥<span>{{val.money}}</span></div>
                        <div class="earn" v-if="val.spread_money>0">赚¥{{val.spread_money}}</div>
                    </div>
                    <a class="toPromote acea-row row-center-wrapper" :href="goSpreadUrl(val)">去推广</a>
                </div>
            </div>
        </div>
    </div>
    <div v-show="loading" class="loading">
        <span class="fa fa-spinner"></span>
    </div>
    <div v-if="loadend && where.page > 2" class="loaded">已全部加载</div>
    <div v-if="!specialList.length && !loading">
        <img class="nothing"  src="/wap/first/zsff/images/no_data_available.png">
    </div>
    <quick-menu></quick-menu>
</div>
{/block}
{block name="foot"}
<script>
    require(['vue', 'helper', 'store', '{__WAP_PATH}zsff/js/quick.js'], function (Vue, $h, app) {
        new Vue({
            el: '#app',
            data: {
                gradeList: [{ name: '全部', id: 0 }],
                where: {
                    grade_id: 0,
                    page: 1,
                    limit: 10,
                },
                specialList: [],
                loadend: false,
                loading: false
            },
            watch: {
                'where.grade_id': function (n) {
                    this.loadend = false;
                    this.where.page = 1;
                    this.$set(this, 'specialList', []);
                    this.getSpecialSpread();
                }
            },
            mounted: function () {
                this.get_grade_list();
                this.getSpecialSpread();
            },
            methods: {
                goSpreadUrl: function (value) {
                    return $h.U({ c: 'Spread', a: 'poster_special', q: { special_id: value.id } });
                },
                get_grade_list: function () {
                    var that = this;
                    app.baseGet($h.U({ c: 'Spread', a: 'get_grade_list' }), function (res) {
                        var list = res.data.data;
                        var gradeList = $h.SplitArray(list, that.gradeList);
                        that.$set(that, 'gradeList', gradeList);
                        that.$nextTick(function () {
                            $('#wrapper').navbarscroll({
                                defaultSelect: 0,
                                scrollerWidth: 5,
                                fingerClick: 1,
                                endClickScroll: function (obj) {
                                    that.where.grade_id = obj.data('id');
                                }
                            });
                        })
                    });
                },
                getSpecialSpread: function () {
                    var that = this;
                    if (that.loadend) return;
                    if (that.loading) return;
                    that.loading = true;
                    app.baseGet($h.U({ c: 'Spread', a: 'getSpecialSpread', q: that.where }), function (res) {
                        var list = res.data.data.data;
                        var specialList = $h.SplitArray(list, that.specialList);
                        that.loadend = list.length < that.where.limit;
                        that.where.page = res.data.data.page;
                        that.loading = false;
                        that.$set(that, 'specialList', specialList);
                        that.$nextTick(function () {
                            that.bScrollInit();
                        });
                    }, function () {
                        that.loading = false;
                    });
                },
                //滑动底部加载
                bScrollInit: function () {
                    var that = this;
                    $h.EventUtil.listenTouchDirection(document, function () {
                        that.loading == false && that.getSpecialSpread();
                    }, false);
                }
            }
        });
    })
</script>
{/block}