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

<template>
	<view  class="content">
		<u-navbar title="" :is-back="false" :background="{backgroundColor: '#ffffff'}" class="top-navbar">
			<text style="position: absolute;z-index: 1;left:40rpx;">停车记录</text>
			<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 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-item">
							<text class="filter-label">车牌号</text>
							<!-- <u-field v-model="mobile" label="" placeholder="请填写手机号"></u-field> -->
							<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-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>
		<u-tabs :list="tablist" :is-scroll="false" :current="currentTab" @change="changeTab"></u-tabs>
		<scroll-view style="padding:20rpx;height:calc(100vh - 135px)" scroll-y="true"  @scrolltolower="scrollbtm">
			
			<view class="tab-con-item"  v-for="(item,index) in pagedData.records" :key="item.id">
				<view class="item-top">
					<u-image width="200rpx" height="160rpx" :src="item.car_img" border-radius="5rpx" @click="previewCarPhoto(item.car_img)"></u-image>
					<view class="item-top-right">
						<text style="">{{item.parking_name}}</text>
						<view class="top-right-con">
							<view>进场时间：{{item.in_parking_time}}</view>
							<view v-if="item.release_status=='1'">离场时间：{{item.out_parking_time}}</view>
							<view>停车时长：{{item.parking_time_txt}}</view>
						</view>
					</view>
				</view>
				<view class="item-footer">
					<text class="car-num">{{item.car_num}}</text>
					<!-- <view class="item-footer-btn" v-if="item.release_status=='0'" @tap="chargingAndPass(item.id)">收费离场</view> -->
				</view>
			</view>
			
			
			
			<!-- <u-loadmore :status="loadMoreStat"/> -->
			<view v-show="showMoreTip">
				<u-loadmore :status="loadMoreStat" :load-text="loadMoreText"/>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import * as api from '@/apis/parkinglog.js'
	
	export default {
		data() {
			return {
				showCalendar:false,
				tablist:[
					{
						name:'已离场'
					},
					{
						name:'未离场'
					}
				],
				currentTab:0,
				loadMoreStat:'loadmore',
				showMoreTip:false,
				loadMoreText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				filter:{
					startDate:'',
					endDate:'',
					carNum:''
				},
				myParkSites:[],
				selectedParkVal:'all',
				allParkIds:'',
				filterInputCss:{
					'background-color':'#f2f5fa',
					
					'padding-left':'10rpx',
					'phstyle':'font-size:24rpx;'
				},
				pagedData:{}
			}
		},
		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));
		},
		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,status:(this.currentTab==0?"off":"in"),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.showMoreTip=true;
				this.loadMoreStat=rst?'loadmore':'nomore';
				return rst;
			},
			
			changeCalendar(e){
				//console.log(e);
				this.filter.startDate=e.startDate;
				this.filter.endDate=e.endDate;
			},
			changeTab(idx){
				this.currentTab=idx;
				this.loadPageData(this.getLoadParams(1));
			},
			resetFilter(){
				let resetObj={
					startDate:'',
					endDate:'',
					carNum:''
					
				};
				this.filter=resetObj;
				this.selectedParkVal='all';
			},
			sureFilter(){
				this.$refs.filterDropdown.close();
				this.loadPageData(this.getLoadParams(1));
			},
			scrollbtm(){
				console.log('scroll btm')
				if(!this.checkHadMore()){  //没有更多数据
					return;
				}
				this.loadMoreStat = 'loading';
				this.loadPageData(this.getLoadParams(),true);
			},
			loadPageData(param,moreLoad){
				uni.showLoading({
					title:'加载中...'
				});
				api.loadPageData(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;
				
				let datas=respData.records;
				let tmp=null,pkh=null;
				datas.forEach((item) => {
					tmp=item.release_status=='0'?item.cal_parking_time:item.parking_time;
					tmp=!tmp?0:tmp;
					pkh=Math.floor(tmp/60);
					item['parking_time_txt']=pkh>0?(pkh.toFixed(0)+"小时"+(tmp-pkh*60)+"分钟"):(tmp+"分钟");
					
					item['car_img']=item.release_status=='0'?item.in_image:item.out_image;
					if(!item['car_img']){
						item['car_img']='../../static/img/def_car.png';
					}
				});
			},
			chargingAndPass(id){
				uni.navigateTo({
					url:'charging?parkingLogId='+id
				})
			},
			previewCarPhoto(img){
				let array = [];
				array.push(img);
				uni.previewImage({
					urls: array,
					current: array[0]
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #f4f4f4;
		overflow: hidden;
	}
	.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{
		font-size:28rpx;
	}
	
	
	uni-scroll-view{
		box-sizing: border-box;
	}
	
	.tab-con-item{
		background-color: #ffffff;
		border-radius: 10rpx;
		padding:20rpx;
		margin-bottom: 20rpx;
	}
	
	.tab-con-item .item-top{
		padding:0rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content:flex-start;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.tab-con-item .item-top-right{
		display: flex;
		flex-flow: column nowrap;
		justify-content:space-between;
		margin-left:20rpx;
	}
	
	.tab-con-item .item-top-right>text{
		color:#000000;
		margin-bottom:20rpx;
	}
	
	.tab-con-item .item-top-right .top-right-con{
		font-size:24rpx;
	}
	
	.tab-con-item .item-top-right .top-right-con>view{
		margin-bottom:10rpx;
	}
	
	.tab-con-item .item-footer{
		display: flex;
		flex-flow: row nowrap;
		justify-content:space-between;
		align-items: center;
		font-size:24rpx;
	}
	
	.tab-con-item .item-footer .car-num{
		font-size:28rpx;
		font-weight: bold;
	}
	
	.tab-con-item .item-footer .item-footer-btn{
		padding:10rpx 15rpx;
		color:#ffffff;
		background-color: #185AC6;
		border-radius: 6rpx;
		
	}
	
	
	.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-item .uni-input-wrapper{
		background-color: #f2f5fa;
	}
	.filter-date{
		width:100%;
		height:72rpx;
		line-height: 55rpx;
		background-color: #f2f5fa;
		margin-top: 20rpx;
		display: flex;
		align-items:center;
		padding-left:10rpx;
		
	}
	.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;
	}
</style>