zyedu/application/wap/view/first/index/more_list.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"}{$search} 搜索{/block}
{block name="head_top"}
<style>
    body {
        background-color: #f2f2f2;
    }
</style>
{/block}
{block name="content"}
<div class="search-page" id="app" v-cloak>
    <div class="searchResult swiper-details" ref="list">
        <div v-if="where.type===0">
            <div class="title acea-row row-middle line1">专题</div>
            <div class="swiper-list2">
                <div class="item acea-row row-between-wrapper" v-for="item in searchList">
                    <a class="pictrue" :href="getSpecialUrl(item.id)"><img :src="item.image"></a>
                    <div class="underline">
                        <a class="text-pic acea-row row-column" :href="getSpecialUrl(item.id)">
                            <div class="name line1" v-text="item.title"></div>
                            <div class="notes line1" v-text="item.abstract"></div>
                            <div class="bottom acea-row row-between-wrapper">
                                <div class="acea-row row-middle">
                                    <div class="num acea-row row-center-wrapper" v-for="(vo,index) in item.label" v-text="vo" v-if="index <= 1"></div>
                                </div>
                                <div class="money">{{item.is_pink ? (item.pink_money == 0 ? '免费':'￥'+item.pink_money): (item.money <= 0 ? '免费':'￥'+item.money) }}</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <div class="title acea-row row-middle line1">任务视频</div>
            <div class="video-listn">
                <div class="item acea-row row-between-wrapper" v-for="item in searchList">
                    <a class="pictrue" :href="getTashUrl(item.special_id)"><img :src="item.image"></a>
                    <div class="underline">
                        <a class="text acea-row row-center row-column" :href="getTashUrl(item.special_id)">
                            <div class="name line1" v-text="item.title">7课掌握病句解析技巧</div>
                            <div class="num acea-row row-middle"><span class="iconfont icon-bofang1"></span>{{item.play_count}}</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <p class="loading-line" style="background-color: #ffffff">
        <span v-show="loading==true" class="fa fa-spinner loadingpic" style="font-size: 0.4rem"></span>
        <span v-text="loadTitle">没有更多内容了</span>
    </p>
    <quick-menu></quick-menu>
</div>
{/block}
{block name='foot'}
<script>
    var type = {$type}, search = '{$search}';
    require(['vue', 'helper', 'store', '{__WAP_PATH}zsff/js/quick.js'], function (Vue, $h, app) {
        new Vue({
            el: '#app',
            data: {
                searchList: [],
                loadTitle: '',
                loading: false,
                loadend: false,
                where: {
                    type: type,
                    search: search || '',
                    page: 1,
                    limit: 10
                }
            },
            methods: {
                getMoreList: function () {
                    if (this.loading) return;
                    if (this.loaded) return;
                    this.loading = true;
                    this.loadTitle = '';
                    app.baseGet($h.U({c: 'index', a: 'get_more_list', q: this.where}), function (res) {
                        var list = res.data.data.more_list;
                        var searchList = $h.SplitArray(list, this.searchList);
                        this.where.page = res.data.data.page;
                        this.loading = false;
                        this.loaded = list.length < this.where.limit;
                        this.loadTitle = this.loaded ? '没有更多内容了' : '加载更多';
                        this.$set(this, 'searchList', searchList);
                        this.$nextTick(function () {
                            this.EventUtil();
                        }.bind(this));
                    }.bind(this), function (res) {
                        this.loading = false;
                        this.loadTitle = '加载更多';
                    }.bind(this));
                },
                EventUtil: function () {
                    this.$nextTick(function () {
                        $h.EventUtil.listenTouchDirection(document, function () {
                            this.loading == false && this.getMoreList();
                        }.bind(this), false);
                    })
                },
                getSpecialUrl: function (id) {
                    return $h.U({c: 'special', a: 'details', q: {id: id}});
                },
                getTashUrl: function (id) {
                    return $h.U({c: 'special', a: 'details', q: {id: id}}) + '#tash';
                }
            },
            mounted: function () {
                this.getMoreList();
            }
        });
    });
</script>
{/block}