zhxy-desk/components/ui/ui-page-list.vue

<template>
    <view class="page-list">
        <slot></slot>
        
        <u-no-network v-if="offNetwork" @connected="tryAgain" @retry="tryAgain"></u-no-network>
        
		<template v-else>
			<view class="text-center ui-flex ui-flex-align-center ui-flex-center" v-if="isLoad && !silent" style="height: 50px;">
                <u-loading-icon size="40"></u-loading-icon>
			</view>
					
			<view v-if="!isLoad && showPageText">
				<view v-if="showType == 2">
					<slot name="empty">
						<u-empty text="当前记录为空" iconSize="160" textSize="32" mode="data" show></u-empty>
                        <!-- <text>当前记录为空</text> -->
					</slot>
				</view>

				<view v-if="showType == 3" @click="next()" class="ui-flex ui-flex-align-center ui-flex-center" style="height: 50px;">
					<text class="u-tips-color f16 text-center">点击继续加载信息</text>
				</view>
				<slot name="info">
					<view v-if="showType == 4" class="ui-flex ui-flex-align-center ui-flex-center" style="height: 50px;">
						<text class="u-tips-color f16 text-center">显示{{((page || 1)-1) * size + 1}}到{{page * size}},共{{total}}记录</text>
					</view>
				</slot>
			</view>
		</template>
		
    </view>
</template>

<script>
	const globalData = getApp().globalData;
	
    export default {
        props : {
            url : String,
            showPageText : {
                type : Boolean,
                default : true
            },
            start : {
                type : Boolean,
                default : true
            },
            method : {
                type : String,
                default : 'POST'
            },
            refreshRate : {     //多少秒自动刷新页面
                type : Number,
                default : null
            },
            params : {
                type: Object,
                default: function () {
                    return {}
                }
            },
            value : {
                type: Array,
                default: function () {
                    return []
                }
            },
			format : {
				type : Function,
				default : function(){
					return function(){}
				}
			}
			
        },
        data : function(){
            return {
				init : false,
                // url : '',
                // params : {},
                size : 10,
                page : 0,
                // rows : [],
                total : 0,
                isLoad : false,
				silent : false,
                // lastTime : 0,
				
                lazyLoadPage : null,
				showCount : 0,
				offNetwork : false,
            }
        },
        created : function(){
            this.start && this.url && this.get();
        },
        computed: {
            showType : function(){
                // console.log('来计算');
// 				if(this.isLoad){
// 					return 1;	//加载中
// 				}

                if(this.total == 0 && this.page == 1){
                    return 2;	//记录空
                }

                if(this.total/this.size > this.page){
                    return 3;	//点击继续
                }

                if(this.page){
                    return 4;	//全完成
                }
            }
        },
		//#ifndef H5
        onShow() { // mp-vue执行
			if(this.showCount){
				this.view_show();
			}
			this.showCount ++
		},
		//#endif
		//#ifdef H5
		activated : function(){ // web-vue执行
			// console.log('web-vue执行')
			this.view_show();
        },
		//#endif
        methods : {
			view_show : function(){
				// console.log('我来了')
				var time = Date.parse(new Date())/1000;
				var fresh = false;
				this.lastTime = this.lastTime || time;
				if(this.lastTime && this.refreshRate && time - this.lastTime > this.refreshRate){
				    if(this.lastTime){
				        this.fresh(Object.assign(
				            this.params,
				            {$silent : true}
				        ));
				        // this.fresh({
				        //     ...this.params,
				        //     ...{$silent : true}
				        // });
				    }
				    this.lastTime = time;
				    fresh = true;
				}
				
				
				if(!fresh && this.lazyLoadPage !== null){
				    this.get(null, Object.assign(
				        this.params,
				        {page : this.lazyLoadPage, $silent : true}
				    ), (res)=>{
				        this.lazyLoadPage = null;
				    })
				
				    // this.get(null, {...this.params, ...{page : this.lazyLoadPage, $silent : true}}, (res)=>{
				    //     this.lazyLoadPage = null;
				    // })
				}
			},
			
            intoItem : function(index, $pageTo, data){ //进入了这个条目，算出属于第几页，返回的时候需要重新加载此页
				console.log(data)
                this.lazyLoadPage = Math.ceil( (index + 1) / this.size);
				if($pageTo){
                    this.$nextTick(()=>{
						this.$pageTo($pageTo, data);
					})
                }
            },
            next : function(fn){
                if(this.size * this.page >= this.total){
                    return;
                }
                if(this.isLoad){ return; }
                var params = this.params;
                params.page = params.page ? params.page + 1 : 1;
                this.get(this.url, params, fn);
            },
            fresh : function(params, url, fn){
                url = url || this.url;
                params = params || this.params;

                this.size = params.size || this.size;
                if(!params.$silent){
                    this.$emit('input', []);
                    this.total = 0;
                }
                this.get(url, params, fn);

            },
			tryAgain : function(){
				this.offNetwork = false;
				this.isLoad = true;
				setTimeout(() => {
					this.fresh(null, null, this._again_data_fn)
				}, 300)
			},
            get : function(url, params, fn){
				this.init = true;
                url = url || this.url;
                params = params || this.params;

                if(params.$silent){
					this.silent = true;
                    delete params.$silent;
                }else{
					this.silent = false;
                    this.isLoad = true;
                }
				
				this._again_data_fn = fn;

                // this.get.CancelDo && this.get.CancelDo.cancel('Operation canceled by the user.');
                // this.get.CancelDo = axios.CancelToken.source();
                // params.cancelToken = this.get.CancelDo.token;
				
				// console.log('检查网路');
				uni.getNetworkType({
					success : res => {
						// console.log(res);
						if(res.networkType == "none"){
							this.$emit('input', []);
							uni.stopPullDownRefresh();
							this.offNetwork = true;
						}else{
							this.offNetwork = false;
						}
					}
				})
                
                this.$api.sendRequest({
                    url: url,
                    method: this.method,
                    data: params,
                    success: res => {
                        this.dataCallBack(url, params, fn, res.data)
                    },
                    fail : (res) => {
                    	this.isLoad = false;
                    }
                })
            },
            dataCallBack(url, params, fn, res){
                Object.assign(this.params, params);
                
                res.size = res.size || res.per_page;
                res.page = res.page || res.current_page;
                res.rows = res.rows || res.data;
                
                this.isLoad = false;
                this.$emit('onget', res);
                
                this.params.page = ~~res.page;
                
                this.page = ~~res.page;
                this.size = ~~res.size;
                this.total = ~~res.total;
                
                // 局部条目更新 self.page 会变成是当前页
                if(this.lazyLoadPage && res.rows.length){  //静默去更新下一页
                    if(this.size * this.page < this.total){
                        this.get(url, Object.assign(params, {page : ++params.page, $silent : true}))
                    }
                }else{
                    this.value.splice((this.page - 1) * this.size);
                }
                
                this.format(res.rows)
                
                var index = (this.page - 1) * this.size;
                var len = res.rows.length;
                for (var i = 0; i < len; i++) {
                    if(this.value[index + i]){
                        this.value.splice(index + i, 1, res.rows[i]);
                    }else{
                        this.value.push(res.rows[i]);
                    }
                }
                this.$emit('input', this.value);
                
                fn && fn(res);
            }
        }
    }
</script>

<style>
	.page-list{
		/* margin-top: 15px; */
		margin-bottom: 15px;
		border-top: 1px solid transparent;
		border-bottom: 1px solid transparent;
	}
</style>