wycore/wyUniapp/pages/inspection/Plan.vue

<template>	
	<view >
	<uni-nav-bar fixed="true" height="80px" dark color="#ffffff" backgroundColor="#1989fa" shadow left-icon="home"
			title="巡检计划" @clickLeft="GoBackHome()"/>
	<div style="padding:0 20px;">
		<div @click="open" style="height:40px;line-height:40px;border-bottom: 1px solid #e8e8e8;margin-bottom:20px">
		<label style="float:left">巡检日期</label>
		<input style="float:left;position:relative;top:9px;margin-left:15px;line-height:60px;" v-model="seledDate" placeholder="请选择日期">
		</div>
		<uni-calendar
		ref="calendar"
		:insert="false"
		:startDate="startDate"
		@confirm="confirm"
		 />
	<button @click="getPlanList" style="width:100%;height:40px;line-height:40px;border-radius:4px;background-color:#1989fa;color:#fff;border:#1989fa;margin-bottom:20px">查询</button>
	</div>	
	<uni-list style="position:static;">
		<view v-for="item in listdata" class="view_tupian_wenzi" bindtap="click" >					
			<view class="view_wenzi2">
				<view style="font-size:18px;">
				<uni-icons type="map-pin-ellipse" size="20" style="padding-right:8px;"></uni-icons>
				{{item.planname}}
				</view>
				<view class="text_small">
				<uni-icons type="calendar" size="18" style="padding-right:8px;"></uni-icons>	
			    {{item.plantime}}
				</view>
				<text class="text_small">巡更人员: {{item.usernames}}</text>
				<text class="text_small">巡检进度: {{item.planprogress}}</text>
				
			</view>							 
			<button v-if="'开始巡逻'==item.planstatus" @click="GoRouteViews(item.plancode,item.plandate,item.plantime,item.planstatus)"
			                             class="btn" style="background: #1989fa;">{{item.planstatus}}</button>                         
			<button v-else  class="btn" style="background:#969799;" >{{item.planstatus}}</button>	    
		</view>		
	</uni-list>
	<uni-load-more :status="statusLoadMore" />	
	</view>
</template>
<script>
	export default {
		data() {
			return {
				startDate:'',
				seledDate:'',
				pageNumber: 1, // 请求第几页      
				pageSize: 10, // 每页请求的数量				
				statusLoadMore:"nomore",//more,loading,nomore			
				listdata:  []
			};
		},
		created(){			
			this.startDate = this.getcurrentDate();
			this.seledDate=this.getcurrentDate();			
			this.getPlanList()
		},		
		methods: {
			open(){
				this.$refs.calendar.open();
			},
			confirm(e) {				
				this.seledDate = e.fulldate;
			},				
			getPlanList() {			      				  
					  if(this.$store.state.data.staffCode == undefined){
							uni.showToast({
								icon: 'none',
								title: "token过期请重新登录~",
								duration:1500
							});	
							
							setTimeout(function() {
							         uni.navigateTo({
							             url:'../index/login'
							             })
							    }, 1500);								
							
						  return
					  }	
									
				     var data ={
				     			staffcode: this.$store.state.data.staffCode,
				     			datestr: this.seledDate,
				     			pageNumber: this.pageNumber,
				     			pageSize: this.pageSize 				     	
				     		} 
				       
					 this.$api.GetEmployeePlanList(data).then(res=>{						
						if (res.isSuccess && res.data !=undefined && res.data.length>0) {
							this.listdata = res.data // 将接口返回赋值data定义的数组
							// 加载状态结束 状态更新为false
							this.statusLoadMore = "more"													
						}else{									    
							this.listdata =[]
							this.statusLoadMore = "nomore"	
							uni.showToast({
								icon: 'none',
								title: "没有查询到巡更记录~"
							});																								  	
					    }
						
					 })
					   
			    },
				
			   GoRouteViews (plancode,plandate,plantime) {			         
			    uni.navigateTo({
			    		url:'/pages/inspection/Route?plancode='+encodeURIComponent(plancode)+'&plandate='+encodeURIComponent(plandate)+'&plantime='+encodeURIComponent(plantime)
						
			    	});
				}, 
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
							console.log("下拉刷新")
							var that = this
							setTimeout(function() {	
								//隐藏转圈动画
								uni.stopPullDownRefresh()
								uni.showToast({
									icon: 'none',
									title: "加载成功~"
								});
							this.statusLoadMore="nomore"	
							}, 1000)
							
						},
			
			// /**
			//  * 上拉加载更多
			//  */
			// onReachBottom() {
			// 	console.log("上拉加载更多")				
			// 	this.statusLoadMore = "loading"
			// 	var that = this						
			// 	setTimeout(function() {	
			// 		// 显示没有更多数据了
			// 		that.statusLoadMore = "nomore"
			// 	}, 2000)
			// },
			
			GoBackHome(){				
				uni.navigateTo({
					url:"/pages/index/home"
				})
			},
			getcurrentDate(){				
				let year = new Date().getFullYear();				
				let month = new Date().getMonth() +1;				
				let day = new Date().getDate();
				return year + '-' + month + '-' + day;
			}
		}
	};
</script>
<style lang="scss">	
.uni-list{border:none;background-color: #fff;padding-bottom: 20px;}
 .view_tupian_wenzi {
   height: 200rpx;
   display: flex;
   flex-direction: row;
   align-items: center;			  
   /* 圆角 */
   border-radius: 5rpx;	
   border-bottom: 0.5rpx solid #e8e8e8;
   background-color: #ffffff;
   margin: 10rpx;
   /* padding使得文字和图片不至于贴着边框 */
   padding: 40rpx 10rpx;
 
 }
 
 /* 包裹两行文字 */
 
 .view_wenzi2 {
   width: 100%;
   margin-left: 25rpx;
   display: flex;
   flex-direction: column;
 }
 
 /* 小字 */ 
 .text_small {
   font-size: 30rpx;
   word-break: break-all;
   color: #7a7878;
   margin-top: 10rpx		
}
  .btn{
   background: #1989fa;
   height:72rpx;
   border-radius:10rpx;
   width:240rpx;
   font-size:30rpx;
   border:0;
   color:#fff         
}   
</style>