ParkApp/pages/index/car/car.vue

<template>
	<view>
		 <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="margin-top-20">
				<car-card  :list="dataList"></car-card>
			</view>
		 </mescroll-body>
		 <view @click="filterShow=true" class="cuIcon cu-btn round  bg-blue" style="position: fixed;bottom: 20%;right: 20rpx;width: 80rpx;height: 80rpx;">
		 	<text class="cuIcon-filter" style="font-size: 45rpx;"></text>
			<u-badge size="mini" type="error" :is-center="true" :count="filterCount"></u-badge>
		 </view>
		 <u-toast ref="uToast"/>
		 <u-modal negative-top="300" z-index="88" cancel-text="重置" cancel-color="#000000" @cancel="filterReset" :show-cancel-button="true"  @confirm="filterConfirm" title="筛选" :mask-close-able="true" v-model="filterShow" >
		 	<view class="slot-content" style="margin: 20rpx;">
		 		<u-form label-width="150"  ref="uForm">
		 			<u-form-item label="车牌号"><u-input placeholder="请输入车牌号" disabled @click="openKeyBoard" v-model="plateNumberStr" /></u-form-item>
		 			<!-- <u-form-item label="入场时间">
		 				<u-input placeholder="请选择入场时间" type="select" @click="enterTimeShow=true" :selectOpen="enterTimeShow" v-model="params.enterTime" />
		 			</u-form-item>
		 			<u-form-item :border-bottom="false" label="出场时间">
		 				<u-input placeholder="请选择出场时间" @click="outTimeShow=true" :selectOpen="outTimeShow" type="select"  v-model="params.outTime"   />
		 			</u-form-item> -->
		 		</u-form>
		 	</view>
		 </u-modal>
		 <keyboard-package z-index="999" ref="plateNumber" type="plateNumber"  @onInput="onInput" @onDelete="onDelete" @onConfirm="onConfirm"/>
		 <u-picker @confirm="enterTimeConfirm" v-model="enterTimeShow" mode="time"></u-picker>
		 <u-picker @confirm="outTimeConfirm" v-model="outTimeShow" mode="time"></u-picker>
	</view>
</template>

<script>
	import carCard from "@/components/car-card/car-card.vue"
	import keyboardPackage from "@/components/keyboard-package/keyboard-package.vue"
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		components:{
			keyboardPackage,carCard
		},
		data() {
			return {
				iconStyle:{
					color:"#59a5f0"
				},
				
				filterShow:false,
				filterCount:0,
				params:{
					carNo:'',
					enterTime:'',
					outTime:''
				},
				enterTimeShow:false,
				outTimeShow:false,
				carNoInputList:[],
				
				//园区tenantId
				tenantId:'',
				dataList: [],
				
				upOption: {
					noMoreSize: 4, 
					auto: true,
					page: {
						page: 0,
						size: 10
					}
				},
				// 下拉配置参数
				downOption: {
					use: true, 
					auto: false
				}
			}
		},
		computed:{
			plateNumberStr(){
				let str='';
				this.carNoInputList.forEach(item=>{
					str+=item.toString();
				})
				this.params.carNo=str
				return str;
			}
		},
		onLoad() {
			this.tenantId=this.$cache.get('agencyTenantId')
		},
		methods: {			
			enterTimeConfirm(e){
				this.params.enterTime=e.year+"-"+e.month+"-"+e.day
			},
			outTimeConfirm(e){
				this.params.outTime=e.year+"-"+e.month+"-"+e.day
			},
			filterConfirm(){
				let n=0
				if (this.$isEmpty()) {
					
				}
				if (!this.$isEmpty(this.params.carNo)) {
					n++
				}
				if (!this.$isEmpty(this.params.enterTime)) {
					n++
				}
				if (!this.$isEmpty(this.params.outTime)) {
					n++
				}
				this.filterCount=n
				this.dataList=[]
				this.mescroll.resetUpScroll();
			},
			filterReset(){
				this.filterCount=0
				this.carNoInputList=[]
				this.params.carNo=''
				this.params.enterTime=''
				this.params.outTime=''
				this.dataList=[]
				this.mescroll.resetUpScroll();
			},
			/**
			 * 下拉刷新回调
			 */
			downCallback(){
				setTimeout(()=>{
					this.$showToast('刷新成功')
					this.mescroll.resetUpScroll();
				},1500)
			},
			/**
			 * 上拉加载回调
			 */
			upCallback(page){
				let params={
					current:page.num,
					size:page.size,
					tenantId:this.tenantId,
				}
				if (!this.$isEmpty(this.params.carNo)) {
					params.carNo=this.params.carNo
				}
				// if (!this.$isEmpty(this.params.enterTime)) {
				// 	params.enterTime=this.params.enterTime
				// }
				// if (!this.$isEmpty(this.params.outTime)) {
				// 	params.outTime=this.params.outTime
				// }
				try{
					this.$api.car.page(params).then(res=>{
						let data=res.data.records
						this.mescroll.endBySize(data.length, res.total)
						if (page.num==1) this.dataList=[]
						this.dataList=this.dataList.concat(data)
						console.log(this);
					})
				}catch(e){
					this.mescroll.endErr();
				}
			},
			
			//车牌号键盘
			onInput(val){
				console.log(val);
				this.carNoInputList.push(val)
			},
			onDelete(){
				this.carNoInputList.pop();
			},
			onConfirm(){
				this.params.carNo=this.plateNumberStr
				console.log(this.params.carNo);
			},
			openKeyBoard() {
				this.$refs.plateNumber.open();
			},
			
		}
	}
</script>

<style lang="scss">
	.demo-warter {
		height: 530rpx;
		margin: 20rpx 8rpx;
		background-color: #ffffff;
		position: relative;
		border-top-right-radius: 12rpx;
		border-top-left-radius: 12rpx;
		.time{
			font-size: 26rpx;
			padding: 20rpx 0 10rpx 20rpx;
		}
	}
	
	.demo-image {
		border-top-right-radius: 12rpx;
		border-top-left-radius: 12rpx;
		height: 360rpx;
		width: 100%;
	}
</style>