金页面自动下拉刷新 & 上拉触底 加载下一页 带有加载中提示

<template name="room">
    <view class="todaycheck-box invoiceBox">     
            <view class="bcard" v-for="(item, k) in orderRecordlist" :key="k" v-if="orderRecordlist.length > 0">                    
           

                <view class="bt">
                    <text class="hotel-name">{{ item.hotelName }}</text>
                    <text class="room-num">( {{ item.homeNumber }} )</text>
                </view>
                <view class="bc">
                    <view class="binfo">
                        <text class="pname">{{ item.name }}</text>
                        <text class="phone">{{item.phoneNumber }}</text>
                    </view>
                    <view class="btime">{{ item.entryTime }} ~ {{ item.leaveTime }}<text>{{item.invoiceValue }}</text></view>                
                </view>                                          
            </view>            
    </view>
</template>

<script>

export default {
    name: "room",
  
    data() {
        return {
            whole:true,
            pagename:'orderRecord',
            bottom: true,
            orderRecordlist: [],
            pagenum: 1,
            request:true,
            invoiceStatuses:'',
            dclNumber:0
              
        };
    },
 

    methods: {
      

        orderRecord() {        
           uni.showLoading({
               title: '加载中'
           });
                            
            if(this.request){
                this.$http
                .get("/invoice/landlord/page",{                    
                    invoiceStatuses:this.invoiceStatuses,
                    pageNum:this.pagenum,
                    pageSize:10,
                    })
                .then(res => {
                    let data = res.data.data;
                    if (data.code == 0) {                       
                        if(this.orderRecordlist.length < data.total){                            
                            this.orderRecordlist= this.orderRecordlist.concat(data.rows); //合并数组   新旧数据拼接
                            if(this.orderRecordlist.length == data.total){
                                this.request=false;
                            }
                           
                        }else{
                            this.request=false;
                        }    
                                                                                                                                                    
                    } else {
                        uni.showToast({
                            image: "/static/img/warn.png",
                            title: data.msg,
                            duration: 2000
                        });
                    }
                    uni.hideLoading();    
                     
                    
                })
                .catch(err => {});
                
            }else{
                uni.hideLoading();    
            }
            
            
        }
    },
    onShow() {        
       
        let user = uni.getStorageSync("user");
        if (!user) { //判断登录缓存
            uni.reLaunch({
                url: "/pages/login/login"
            });
        }
         uni.startPullDownRefresh(); //下拉刷新
         
    },
    onLoad() {    
     
    },
    onPullDownRefresh() {         this.pagenum=1;
        this.orderRecordlist=[];
        this.request=true;
        this.orderRecord();
 
        setTimeout(function() {
            uni.stopPullDownRefresh(); //定时停止下拉刷新
        }, 500);
    },
    
       onReachBottom(){ //触底开始下一页                           
          this.pagenum=this.pagenum + 1, //更新当前页数         
           this.orderRecord();//重新调用请求获取下一页数据
        },
   
};
</script>

<style>
    .invoiceBox{
        position: relative;
    }
    
    .invoiceBox .tab{
        width: 100%;
        display: flex;
        padding-bottom: 40upx;
    /*     position: fixed;
        left: 0rpx;
        top: 0rpx; */
    }
    .invoiceBox .tab .item{
        flex: 1 1 auto;
        text-align: center;
    }
    .invoiceBox .tab .item text{        
        font-size: 32upx;
        font-family: PingFang SC;    
        color: #797979;    
        padding-bottom: 10upx;
    }
    .invoiceBox .tab .item text.on{
        border-bottom: 2upx solid #4382FF;
        color: #4382FF;
    }
.page {
    height: 100vh;
}
.todaycheck-box{
    min-height: 100%;
    height: auto;
    background: #fff;
}

.avatar {
    border-radius: 50%;
    height: 100%;
    width: 100%;
}

.userinfo {
    position: relative;
    width: 750rpx;
    height: 320rpx;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userinfo-avatar {
    overflow: hidden;
    display: block;
    width: 160rpx;
    height: 160rpx;
    margin: 20rpx;
    margin-top: 50rpx;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.userinfo {
    /* color: #fff; */
    font-size: 14px;
    background-color: #c0c0c0;
}
.header {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scroll {
    /* margin-top: 40px; */
    padding-top: 60rpx;
    
}
.dateshow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 115rpx;
}
.dateshow view {
    background: #bdbdbd;
    padding: 5px;
    border-radius: 4px 4px 4px 4px;
    color: white;
}
.todaycard {
    margin:24upx 24upx 0upx 24upx ;
    height: 121px;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px; 
    box-shadow:4upx 5upx 10upx 0upx rgba(0, 0, 0, 0.2);
}
.todaycard .top {
    width: 100%;
    height: 40px;
    background: rgba(230, 230, 230, 1);
    border-radius: 8px 8px 0 0;
}
.todaycard .top .topl {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(121, 121, 121, 1);
    margin-left: 19px;
}
.todaycard .top .topr {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(121, 121, 121, 1);
    margin-right: 19px;
}
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.todaycard .greyb {
    background: rgba(230, 230, 230, 1);
}
.todaycard .grey {
    color: #797979;
}
.todaycard .redb {
    background: rgba(244, 60, 35, 1);
}
.todaycard .redb .topl,
.todaycard .redb .topr {
    color: white !important;
}
.todaycard .red {
    color: rgba(244, 60, 35, 1);
}
.titem {
    display: flex;
    align-items: center;
}
.bottom {
    padding: 20px;
}
.titem .todayimg {
    height: 20px;
    width: 20px;
}
.tname {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(121, 121, 121, 1);
    margin-left: 10px;
}
.ttip {
    font-size: 10px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(244, 60, 35, 1);
    margin-left: 10px;
}
.zwkf {
    width:380upx ;
    height: 380upx;
    margin-top:208upx;
}
.none {
    margin: auto;
    display: flex;
    justify-content: center
}
.bcard {     
    margin:0px 24upx 24upx 24upx;   
    background:#fff;
    border:1upx solid rgba(245, 245, 245, 1);
    box-shadow:4upx 7upx 10upx 0upx rgba(0, 0, 0, 0.1);
    border-radius:16upx;    
    padding: 40upx;
    position: relative;
    font-family:PingFang SC;
}
.bcard .orderSource{
    position: absolute;
    right: 60upx;
    top: 40upx;
    height:32upx;
/*     border:1px solid #4382FF;
    border-radius:4upx; */
    line-height: 30upx;
    padding: 0 10upx;
    font-size:24upx;
    color:#4382FF;
}
.left-line{
    position:absolute;
    left: 0upx;
    top: 0upx;
    width:8upx;
    height:66upx;
    background:#6585F2;
    border-radius:16upx 0upx 0upx   0upx;
}
.bt {
    font-size: 24upx;    
    height: 28upx;
    line-height: 28upx;
}
.hotel-name {   
    color: #000;    
}
.room-num {
   padding-left:18upx;
   color: #797979;
}
.bc {
  
}
.binfo {
  color: #000;
  padding-top: 8upx;
}
.pname {
   font-size:32upx;
}
.phone {
    font-size:24upx;
    padding-left: 24upx;
}
.btime {
    color: #797979;
    font-size: 24upx;
    padding-top: 12upx;
}

.badd {   
    height:64upx;
    width: 224upx;
    background:#6585F2;
    border-radius:32upx;
    position: fixed;
    left: 50%;
    bottom: 70upx;
    transform: translate(-50%,-50%);
    padding:0 24upx 0upx 80upx;
    line-height: 64upx;
    position: relative;
}
.badd .add {
    font-size: 24upx;
    color: #fff !important;
}
.badd image{
    height: 36upx;
    width: 36upx;
    position: absolute;
    left: 24upx;
    top: 15upx;
}
</style>