parking-manage-mobile/pages/whiteList/whiteList.vue

<template>
	<view class="container">
		<u-navbar title="" :is-back="false"  class="top-navbar">
			
			<view  class="navbar-left">
				<u-icon name="arrow-left" color="#2979ff" size="32" label=""  @click="backClose" style="margin-right: 30rpx;"></u-icon>
				<u-icon name="plus" color="#2979ff" size="32" label="增加"  @click="openEdit"></u-icon>
				<text style="flex:1;text-align: center;">白名单管理</text>
			</view>
			<u-dropdown ref="filterDropdown">
				<u-dropdown-item  title="筛选">
					<view class="slot-content dropdown-filter-con">
						
						<view class="filter-item">
							<text class="filter-label">使用期限</text>
							<view class="filter-date" @tap="showCalendar=true">
								<text>{{filter.endDate.length>0?(filter.startDate+' 至 '+filter.endDate):'请选择'}}</text>
								<u-icon name="search" style="margin:0rpx 20rpx;"></u-icon>
							</view>
						</view>
						
						<view class="filter-item">
							<text class="filter-label">车牌号</text>
							<view style="background-color:#f2f5fa;height:72rpx;margin-top:15rpx;"><u-input  type="text" v-model="filter.carNum" :border="false" placeholder="请输入车牌号" :custom-style="filterInputCss" :placeholder-style="filterInputCss.phstyle"/></view>
						</view>
						
						<view class="filter-item">
							<text class="filter-label">停车场</text>
							<view class="filter-con">
								<view @tap="selectedParkVal='all'" class="filter-con-item" :class="{'selected-filter':selectedParkVal=='all'}" data-val="all">全部</view>
								<block v-for="(item,index) in myParkSites" :key="item.park_id">
									<view @tap="selectedParkVal=item.park_id" class="filter-con-item"  :class="{'selected-filter':selectedParkVal==item.park_id}" :data-val="item.park_id">{{item.parking_name.length>7?(item.parking_name.substr(0,7)+'...'):item.parking_name}}</view>
								</block>
								
							</view>
						</view>
						
					    <view class="filter-btn">
							<view class="filter-btn-reset" @tap="resetFilter">重置</view>
							<view class="filter-btn-sure" @tap="sureFilter">确定</view>
						</view>
						
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</u-navbar>
		<u-calendar v-model="showCalendar" mode="range" @change="changeCalendar"></u-calendar>
		<view class="white-card" :class="{'white-card-invalid':item.cloud_del_flag==1}" v-for="(item,index) in pagedData.records" :key="item.id">
			<view class="car-num">{{item.member_car_num}}{{item.member_type==0?'  [充电附赠]':''}}</view>
			<!-- <view class="us-time">使用时段：无限制</view> -->
			<view class="parking-site"><text style="color:#888;">使用场所：</text>{{item.parking_name}}</view>
			<view class="us-expire">使用期限：
			 <text v-if="item.cloud_del_flag==1" style="font-size:26rpx;font-weight: bold;">
				 已失效
			 </text>
			 <text v-else>
				 {{item.start_time+' 至 '+item.end_time}}
			 </text>
			</view>
			<view class="edit-btn" @tap="openEdit(item)">{{item.cloud_del_flag||item.member_type==0?'查看':'编辑'}}</view>
		</view>
		
		
		
		<view v-show="showMoreTip">
			<u-loadmore :status="loadMoreStat" :load-text="loadMoreText"/>
		</view>
		
		<view v-show="pagedData.records.length==0" style="margin:50rpx;text-align: center;">未找到相关数据</view>
	</view>
</template>

<script>
	import * as api from '@/apis/whiteBill.js'
	
	export default {
		data() {
			return {
				showCalendar:false,
				myParkSites:[],
				selectedParkVal:'all',
				allParkIds:'',
				filter:{
					carNum:'',
					startDate:'',
					endDate:''
				},
				filterInputCss:{
					'background-color':'#f2f5fa',
					
					'padding-left':'10rpx',
					'phstyle':'font-size:24rpx;'
				},
				
				loadMoreStat:'loadmore',
				showMoreTip:false,
				loadMoreText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				pagedData:{
					records:[]
				}
			}
		},
		
		onLoad(){
			this.myParkSites=api.getMyParkSites();
			
			let ids=[];
			this.myParkSites.forEach(function(item){
				ids.push(item.park_id);
			});
			this.allParkIds=ids.join(",");
			
			this.loadPageData(this.getLoadParams(1));
			
			uni.$on('reloadWhiteList',(param) =>{
				this.loadPageData(this.getLoadParams(1));
			});
		},
	    
		onReachBottom(){
			this.showMoreTip=true;
			if(!this.checkHadMore()){  //没有更多数据
				return;
			}
			this.loadMoreStat = 'loading';
			this.loadPageData(this.getLoadParams(),true);
			
		},
		methods: {
			getLoadParams(pnum){
				let parkarg=this.selectedParkVal=="all"?this.allParkIds:this.selectedParkVal;
				if(!pnum){
					pnum=this.pagedData.pageNum!=null?(this.pagedData.pageNum+1):1;
				}
				return {parkingIds:parkarg,carNum:this.filter.carNum,queryStart:this.filter.startDate,queryEnd:this.filter.endDate,pageNum:pnum,pageSize:10};
			},
			checkHadMore(){
				let rst=this.pagedData.pageNum<this.pagedData.pageCount;
				this.loadMoreStat=rst?'loadmore':'nomore';
				return rst;
			},
			openEdit(item){
				let urlArg='editWhite';
				if(item){
					if(item.cloud_del_flag||item.member_type==0){
						urlArg='viewWhite?id='+item.id;
					}
					else{
						urlArg='editWhite?id='+item.id;
					}
				}
				
				uni.navigateTo({
					url:urlArg
				})
			},
			backClose(){
				//uni.navigateBack();
				uni.switchTab({
					url:'../me/me'
				})
			},
			changeCalendar(e){
				this.filter.startDate=e.startDate;
				this.filter.endDate=e.endDate;
			},
			resetFilter(){
				let resetObj={
					startDate:'',
					endDate:'',
					carNum:''
					
				};
				this.filter=resetObj;
				this.selectedParkVal='all';
			},
			sureFilter(){
				this.$refs.filterDropdown.close();
				this.loadPageData(this.getLoadParams(1));
			},
			loadPageData(param,moreLoad){
				uni.showLoading({
					title:'加载中...'
				});
				if(!moreLoad){   //全新查询重置该值
					this.showMoreTip=false;
				}
				
				api.query(param).then(resp => {
					console.log(resp)
					uni.hideLoading();
					if(!resp.success){
						return;
					}
					
					this.parseDatas(resp.data);
					if(moreLoad){  //附加以前的数据
						resp.data.records=resp.data.records?this.pagedData.records.concat(resp.data.records):this.pagedData.records;
					}
					this.pagedData=resp.data;
					this.checkHadMore();
					
				}).catch(error => {
					uni.hideLoading();
				});
			},
			parseDatas(respData){
				respData['pageNum']=respData.current;
				respData['pageCount']=respData.pages;
				respData['pageSize']=respData.size;
			}
		}
	}
</script>

<style>
	page{
			
			background-color: #f4f4f4;
			padding:30rpx;
			font-family: '华文行楷';
			/* height: 100%; */
		}
	.top-navbar/deep/ .u-slot-content{
		justify-content: space-between;
		padding:0rpx;
		
	}
	
	.top-navbar/deep/ .u-dropdown__menu{
		justify-content: flex-end;
	}
	.top-navbar/deep/ .u-dropdown__menu .u-dropdown__menu__item{
		flex:none;
		margin-right: 40rpx;
		
	}
	
	.top-navbar .navbar-left{
		position: absolute;
		z-index: 20;
		left:20rpx;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		width:calc(100vw - 220rpx);
	}
	
	.dropdown-filter-con{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding:20rpx 0rpx 0rpx;
		box-sizing: border-box;
		background-color: #fafafa;
		font-size: 26rpx;
	}
	
	.filter-item{
		width:100%;
		padding:0rpx 20rpx 30rpx;
	}
	.filter-item .filter-label{
		/* font-family: '楷体'; */
		
	}
	.filter-date{
		width:100%;
		height:55rpx;
		line-height: 55rpx;
		background-color: #f2f5fa;
		margin-top: 20rpx;
		display: flex;
		align-items:center;
		
	}
	.filter-date text{
		flex:1;
	}
	
	.filter-con{
		display: flex;
		flex-flow: row wrap;
		justify-content:flex-start;
		align-items: center;
		margin-top: 20rpx;
	}
	.filter-con .filter-con-item{
		padding:10rpx 10rpx;
		text-align: center;
		background-color: #f2f5fa;
		/* color:#ffffff; */
		/* height: 45rpx; */
		width:28vw;
		margin-right: 3vw;
		margin-bottom: 20rpx;
	}
	.filter-con .selected-filter{
		background-color: #185ac6;
		color:#ffffff;
	}
	
	.filter-btn{
		display: flex;
		flex-flow: row wrap;
		justify-content:flex-start;
		align-items: center;
		height: 80rpx;
		width:100vw;
		border-top:1px solid #f2f2f2;
	}
	.filter-btn-reset{
		flex:1;
		text-align: center;
		line-height: 80rpx;
		background-color: #f2f2f2;
	}
	.filter-btn-sure{
		flex:2;
		text-align: center;
		background-color: #185ac6;
		color:#ffffff;
		line-height: 80rpx;
	}
	.white-card{
		border-radius: 10rpx;
		/* padding:30rpx; */
		margin-bottom: 20rpx;
		background: linear-gradient(90deg,#fbe09e,#fada8a);
		position: relative;
	}
	
	.white-card-invalid{
		background: linear-gradient(90deg,#d0d0d0,#b4b4b4);
	}
		
	.white-card .car-num{
		font-size:30rpx;
		padding: 20rpx 30rpx 0rpx;
	}
	
	.white-card .us-time{
		font-size:24rpx;
		margin-top:5rpx;
		padding: 0rpx 30rpx;
	}
	
	.white-card .parking-site{
		font-size:34rpx;
		text-align: center;
		font-family: '黑体';
		margin:40rpx auto;
	}
	
	.white-card .us-expire{
		border-top:1px solid #c5c145;
		font-size:24rpx;
		padding:15rpx 30rpx;
		text-align: left;
	}
	.white-card-invalid .us-expire{
		border-top:1px solid #a1a1a1;
	}
	
	.white-card .edit-btn{
		position: absolute;
		top:25%;
		right: 0rpx;
		height:50rpx;
		width:100rpx;
		background-color: #f1bb57;
		border-top-left-radius: 25rpx;
		border-bottom-left-radius: 25rpx;
		text-align: center;
		line-height: 50rpx;
		font-size:24rpx;
	}
	
	.white-card-invalid .edit-btn{
		background-color: #a2a2a2;
	}
</style>