app-big-data/component/intelligentDevice/yujing-list.js

(function() {

	Vue.component('yujing-list', {
		template: '<div style="position:relative;height:100%;">\
						<div class="sk-spinner sk-spinner-chasing-dots" v-show="!isRequestEnd" style="top: 50%;left:50%;margin-left:-0.1rem;margin-top: -0.1rem;position:absolute;">\
				            <div class="sk-dot1"></div>\
				            <div class="sk-dot2"></div>\
				       </div>\
						<div id="wrapper"  style="overflow: hidden;" v-show="isRequestEnd">\
    						<div id="scroller">\
    						 	<div id="pullDown" style="display:none;">\
    						 		<div class="pullDownLabel"></div>\
    						 	</div>\
        						<div class="pulldown-tips">下拉刷新</div>\
								<div class="div-yujing-content">\
									<div class="mt32" v-for="(yujing,index) in yujingData">\
										<div class="c-f20 c-B5E1FC">{{yujing.create_time}}</div>\
										<div class="c-f20 c-B5E1FC mt8" v-if="yujing.address == null">地址暂无&emsp;{{yujing.sender_name}}&emsp;{{yujing.value2Name}}\
											<span class="c-E9350B ml20 c-f20">异常</span>\
										</div>\
										<div class="c-f20 c-B5E1FC mt8" v-else>{{yujing.address}}&emsp;{{yujing.sender_name}}&emsp;{{yujing.value2Name}}\
											<span class="c-E9350B ml20 c-f20">异常</span>\
										</div>\
									</div>\
								</div>\
								<div id="pullUp">\
        							<div class="pullUpLabel">加载更多</div>\
       							</div>\
						    </div>\
						 </div>\
					</div>',
		props: [],
		data: function() {
			return {
				yujingData: [],
				page: 1,
				pageSize: 50,
				myScroll: null,
				isEnd: false,
				loadingStep: 0,
				isRequestEnd:false
			}
		},
		mounted: function() {
			var _self = this;
			var pullDown = $("#pullDown"),
				pullUp = $("#pullUp"),
				pullDownLabel = $("#pullDown .pullDownLabel"),
				pullUpLabel = $("#pullUp .pullUpLabel");
			
			//初始化请求数据
			getRequestData();

			_self.myScroll = new IScroll("#wrapper", {
				scrollbars: "custom",
				mouseWheel: true,
				interactiveScrollbars: true,
				shrinkScrollbars: false,
				fadeScrollbars: false,
				scrollY: true,
				probeType: 2,
				resizeScrollbars: false
				//				        bindToWrapper:true
			});

			_self.myScroll.on("scroll", function() {
				if(this.y > 40) { //下拉刷新操作  
					$(".pulldown-tips").hide();
					pullDown.addClass("refresh").show();
					pullDownLabel.text("松手刷新数据");
					_self.loadingStep = 1;
					pullDownAction(_self);
				} else if(this.y <= this.maxScrollY &&!_self.isEnd) { //上拉加载更多  
					pullUp.addClass("refresh").show();
					pullUpLabel.text("正在载入");
					_self.loadingStep = 1;
					pullUpAction(_self);
				}
			});
			_self.myScroll.on("scrollEnd", function() {
				if(_self.loadingStep == 1) {
					if(pullDown.hasClass("refresh")) { //下拉刷新操作  
						pullDown.removeClass("refresh").addClass("loading");
						pullDownLabel.text("正在刷新");
						_self.loadingStep = 2;
						pullDownAction(_self);
					}
				}
			});
			document.addEventListener('touchmove', function(e) {
				e.preventDefault();
			}, false);

			//下拉刷新
			function pullDownAction() {
				setTimeout(function() {
					_self.page = 1;
					 pullDown.hide();
					getRequestData();
					loadingStep = 0;
					$(".pulldown-tips").show();
					_self.myScroll.refresh();
				}, 400);
			}

			//上拉加载
			function pullUpAction() {
				if(!_self.isEnd) {
					setTimeout(function() {
						pullUp.hide();
						_self.page++;
						getRequestData();
						_self.myScroll.refresh();
						loadingStep = 0;
					}, 400);
				}
			}

			function getRequestData() {
				//警报信息
				intelligentAPI.warningInformationAlarm({
					page: _self.page,
					pageSize: _self.pageSize
				}).then(function(res) {
					if(res.status == 200) {
						var reqData = res.data;
						if(_self.page == 1) {
							_self.yujingData = reqData;
						} else {
							var dataArr = _.map(reqData, function(data) {
								_self.yujingData.push(data);
								return data;
							})
						}
						if(reqData.length < _self.pageSize) {
							_self.isEnd = true;
							pullUpLabel.text("没有更多数据了...");
						}else{
							pullUpLabel.text("加载更多");
						}
						setTimeout(function() {
							_self.myScroll.refresh();
						}, 500)
						_self.isRequestEnd = true;
					} else {
						toastr.error(res.msg)
					}
				})
			}

		}
	});

})()