zhishifufei_php/application/wap/view/first/my/bill_detail.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>
    body {
        background-color: #f5f5f5;
    }

    .section {
        position: relative;
    }

    .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: translateX(-50%);
        transform: translateX(-50%);
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app">
    <div class="bill">
        <div class="header">
            <div class="cont">
                余额
                <div class="num">{$userInfo.now_money}</div>
            </div>
        </div>
        <div class="main">
            <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 class="nav-cont">
                <div class="section">
                    <div class="list">
                        <div v-for="(item, index) in billList" :key="index" class="item">
                            <div class="text">
                                <div class="name">{{ item.title }}</div>
                                <div class="time">{{ item.add_time }}</div>
                            </div>
                            <div class="nums" v-if="item.pm>0">+{{ item.number }}</div>
                            <div class="num" v-else>-{{ item.number }}</div>
                        </div>
                    </div>
                    <div v-show="loading" class="loading">
                        <span class="fa fa-spinner"></span>
                    </div>
                    <div v-if="loadend && billList.length" class="loaded">{{loadTitle}}</div>
                    <div v-if="!billList.length && !loading">
                        <img class="nothing"  src="/wap/first/zsff/images/no_data_available.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <quick-menu></quick-menu>
</div>
<script>
    require(['vue', 'store', 'helper', 'quick'], function (Vue, app, helper) {
            new Vue({
            el: '#app',
            data: {
                navs: ['全部', '支出', '收入'],
                billList: [],
                navActive: 0,
                limit: 20,
                page: 1,
                loadend:false,
                loading:false,
            },
            computed: {},
            watch: {
                navActive: function () {
                    this.index = 1;
                }
            },
            mounted: function () {
                var that = this;
                that.getBillList();
                this.$nextTick(function () {
                    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.getBillList();
                        }
                    });
                });
            },
            methods: {
                navActives:function(index){
                    var that=this;
                    that.navActive=index;
                    that.page=1;
                    that.loading=false;
                    that.loadend=false;
                    that.billList=[];
                    that.getBillList();
                },
                getBillList: function () {
                    var that = this;
                    if(this.loadend) return;
                    if(this.loading) return;
                    this.loading = true;
                    app.baseGet($h.U({c:'auth_api',a:'user_balance_list',p:{index:that.navActive,first:that.page,limit:that.limit}}), function (res) {
                        var list=res.data.data;
                        var billList=$h.SplitArray(list,that.billList);
                        that.loading=false;
                        that.loadend=list.length < that.limit;
                        that.page=that.page + 1;
                        that.loadTitle = that.loadend ? '已全部加载' : '上拉加载更多';
                        that.$set(that,'billList',billList);
                    }, function (params) {
                        that.loadTitle = '上拉加载更多';
                        that.loading=false;
                    });
                }
            }
        });
    });
</script>
{/block}