baseXX/application/wap/view/first/my/sign_list.html

{extend name="public/container"}
{block name="title"}我的报名{/block}
{block name="content"}
<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: 4rem;
        height: 4rem;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>
<div v-cloak id="app">
    <div class="activity_list">
        <div class="nav-bar">
            <div v-for="(item, index) in navs" :key="index" :class="{ active: navActive === index }" class="item" @click="navActives(index)">{{ item }}</div>
        </div>
        <div v-if="activityList.length" class="list">
            <a v-for="(item, index) in activityList" :key="index" :href="activityDetails(item.order_id)"
                class="activitys">
                <div class="items">单号：{{item.order_id}}</div>
                <div class="item">
                    <div class="image">
                        <img :src="item.activity.image" class="img">
                    </div>
                    <div class="text">
                        <div class="names">{{ item.activity.title }}</div>
                        <div class="time">
                            <span class="knowledge icondidian"></span>{{ item.activity.province }}{{ item.activity.city }}{{ item.activity.district }}{{ item.activity.detail }}
                        </div>
                        <div class="group">
                            <div class="money">
                                ¥<span class="num">{{ item.pay_price }}</span>
                            </div>
                            <span class="status-txt off fr" v-if="item.activity.status<=2 && item.status==0">未核销</span>
                            <span class="status-txt off fr" v-else-if="item.activity.status<=2 && item.status==1">已核销</span>
                            <span class="status-txt off fr" v-else-if="item.activity.status==3 && item.status==0">活动中,未核销</span>
                            <span class="status-txt off fr" v-else-if="item.activity.status==3 && item.status==1">活动中,已核销</span>
                            <span class="status-txt off fr" v-else-if="item.activity.status==4 && item.status==0">已结束,未核销</span>
                            <span class="status-txt off fr" v-else-if="item.activity.status==4 && item.status==1">已结束,已核销</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div v-show="loading" class="loading">
            <span class="fa fa-spinner"></span>
        </div>
        <div v-if="loadend && activityList.length" class="loaded">{{loadTitle}}</div>
        <div v-if="!activityList.length && !loading">
            <img class="nothing" src="/wap/first/zsff/images/no_data_available.png">
        </div>
    </div>
    <shortcut></shortcut>
</div>
<script>
    require(['vue', 'store', 'helper', '{__WAP_PATH}zsff/js/shortcut.js'], function (Vue, store, $h) {
        var app = new Vue({
            el: '#app',
            data: {
                navs: ['全部', '未核销', '已核销'],
                navActive: 0,
                activityList: [],
                loading: false,
                loadend: false,
                page: 1,
                limit: 20,
                loadTitle:''
            },
            mounted: function () {
                this.getActivitySignList();
                this.$nextTick(function () {
                    this.init();
                });
            },
            methods: {
                navActives: function (index) {
                    var that = this;
                    that.navActive = index;
                    that.page = 1;
                    that.loading = false;
                    that.loadend = false;
                    that.activityList = [];
                    that.getActivitySignList();
                },
                init: function () {
                    var that = this;
                    window.addEventListener('scroll', function () {
                        var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
                            scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight,
                            scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                        if (clientHeight + scrollTop >= scrollHeight) {
                            that.getActivitySignList();
                        }
                    });
                },
                activityDetails: function (order_id) {
                    return $h.U({ c: 'my', a: 'sign_order', q: { type: 1, order_id: order_id } });
                },
                // 获取活动列表
                getActivitySignList: function () {
                    var that = this;
                    if (that.loading) return;
                    if (that.loadend) return;
                    that.loading = true;
                    store.baseGet($h.U({ c: 'activity', a: 'activitySignInList', p: { page: that.page, limit: that.limit, navActive: that.navActive } }), function (res) {
                        var list = res.data.data;
                        that.activityList.push.apply(that.activityList, list);
                        that.loadend = list.length < that.limit;
                        that.loadTitle = that.loadend ? '已全部加载' : '上拉加载更多';
                        that.page = that.page + 1;
                        that.loading = false;
                        that.$set(this, 'activityList', that.activityList);
                    }, function (res) {
                        that.loadTitle = '上拉加载更多';
                        that.loading = false;
                    });
                }
            }
        });
    });
</script>
{/block}