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

(function() {

	Vue.component('juming-list', {
		template: '<div class="div-juming-list">\
							<div class="div-juming-btn" v-show="isShowJumingBtn" @click="seeInfo"></div>\
							<div class="div-juming-bg" v-show="isShowJumingContent">\
								<div class="div-header-name fl">居民列表</div>\
								<div class="div-shousuo-btn" @click="shouSuoBtn"></div>\
								<div class="sk-spinner sk-spinner-chasing-dots" v-show="isShow" 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="wrapper1"  style="overflow: hidden;" v-show="hasJumingList">\
	    							<div id="scroller1">\
			    						<div id="pullDown1" style="display:none;">\
		    						 		<div class="pullDownLabel"></div>\
		    						 	</div>\
		        						<div class="pulldown-tips">下拉刷新</div>\
										<div class="div-juming-content">\
											<div class="mt32" v-for="(juming,index) in jumingData" @click="personnalInfoDialog(juming.code)">\
												<div class="c-f20 c-B5E1FC">{{juming.name}}&ensp;({{juming.age}}&ensp;{{juming.sexName}}) &emsp;签约医生:{{juming.doctorName}}</div>\
												<div class="c-f20 c-B5E1FC mt8 height-20" v-if="juming.address == null">地址:暂无</div>\
												<div class="c-f20 c-B5E1FC mt8 height-20" v-else>{{juming.address}}</div>\
											</div>\
										</div>\
										<div id="pullUp1">\
	        							<div class="pullUpLabel">加载更多</div>\
	       							</div>\
								   </div>\
							   </div>\
							   <div v-show="!hasJumingList" class="no-result-panel">\
		                            <div class="no-result-img">\
		                                <img src="../images/wushuju_icon.png">\
		                            </div>\
		                            <div class="no-result-text">查无数据</div>\
		                        </div>\
					</div>\
		</div>',
		props: [],
		data: function() {
			return {
				jumingData: [],
				isShowJumingBtn: false,
				isShowJumingContent: false,
				hasJumingList:true,
				keyword: null,
				page: 1,
				pageSize: 15,
				juMingScroll: null,
				isEnd: false,
				loadingStep: 0,
				isShow:false
			}
		},
		methods: {
			shouSuoBtn: function() {
				this.isShowJumingBtn = true;
				this.isShowJumingContent = false;
			},
			seeInfo: function() {
				this.isShowJumingBtn = true;
				this.isShowJumingContent = true;
			},
			personnalInfoDialog: function(patientCode) {
				var height = (0.42 * window.screen.width) + 'px';
				parent.layer.open({
				    type: 2,
				    title: false,
				    shadeClose: true,
				    shade: 0.5,
				    area:  ['60%', height],
				    content: '../../../page/intelligentDevice/html/patient-info.html?patient='+patientCode
				});
			}
		},
		mounted: function() {
			var _self = this;
			var pullDown = $("#pullDown1"),
				pullUp = $("#pullUp1"),
				pullDownLabel = $("#pullDown1 .pullDownLabel"),
				pullUpLabel = $("#pullUp1 .pullUpLabel");
			
			//查询居民
			EventBus.$on('search-patient-info', function(arg) {
				var keyword = arg.keyword;
				_self.keyword = keyword;
				_self.isShowJumingBtn = true;
				_self.isShowJumingContent = true;
				_self.isShow = true;
				_self.isEnd = false;
				_self.page == 1
				getRequestData();
			});
			
			//更新居民信息
			EventBus.$on('update-patient-info', function(arg) {
					
					var patientData = JSON.parse(arg.patientData);
					patientData = _.map(patientData, function(data, index) {
						if(data.sex == 1) {
							data.sexName = "男";
						} else if(data.sex == 2) {
							data.sexName = "女";
						}
						return data;
					});
					_self.page = 1; 
					_self.jumingData = patientData;
					_self.isShowJumingBtn = true;
					_self.isShowJumingContent = true;
					_self.isShow = false;
					_self.isEnd = true;
					
					setTimeout(function() {
						_self.juMingScroll.refresh();
					}, 300)
			});

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

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

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

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

			function getRequestData() {
				//居民 医生搜索信息
				intelligentAPI.searchPatient({
					name: _self.keyword,
					page: _self.page,
					pageSize: _self.pageSize
				}).then(function(res) {
					if(res.status == 200) {
						var reqData = res.data;
						 if(reqData.length > 0){
		                    _self.hasJumingList = true;
		                }else{
		                    _self.hasJumingList = false;
		                }
						reqData = _.map(reqData, function(data, index) {
							if(data.sex == 1) {
								data.sexName = "男";
							} else if(data.sex == 2) {
								data.sexName = "女";
							}
							return data;
						});
						if(_self.page == 1) {
							_self.jumingData = reqData;
						} else {
							var dataArr = _.map(reqData, function(data) {
								_self.jumingData.push(data);
								return data;
							})
						}
						if(reqData.length < _self.pageSize) {
							_self.isEnd = true;
							pullUpLabel.text("没有更多数据了...");
						}else{
							pullUpLabel.text("加载更多");
						}
						pullUpLabel.show();
						if(reqData.length==0){
							pullUpLabel.hide();
						}
						setTimeout(function() {
							_self.juMingScroll.refresh();
						}, 500)
						_self.isShow = false;
					} else {
						toastr.error(res.msg)
					}
				})
			}
		}

	})

})()