123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- <!-- +---------------------------------------------------------------------- -->
- <!-- | 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}
|