parking_inspection/pages/ownersQuery/queryList/queryList.vue

<template>
	<view>
		<u-navbar
		 :title="title" 
		 title-color="#fff" 
		 :is-back="true"
		 :border-bottom="false" 
		 :custom-back="customBack" 
		 back-icon-color="#CCE8FF" 
		 :background="{background: 'linear-gradient(99deg, #7A4398 0%, #5A5DB9 100%)' }"></u-navbar>
		<!-- <u-tabs :list="tabList" :is-scroll="false" height="108" bar-width="100" :current="tabIndex" @change="tabChange"></u-tabs>
		<u-gap height="20" bg-color="#F6F6F6"></u-gap> -->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="config.platform=='h5'?60:120" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<view class="owelist">
				<view class="owelist-item" v-for="(item,index) in dataList" :key="item.id">
					<view class="item-header u-flex u-row-between">
						<view class="vehicle-no">{{item.vehicleNo}}</view>
						<view v-if="item.orderStatus==2" 
						class="order-status" 
						:class="{'order-status-0':item.orderStatus=='0','order-status-1':item.orderStatus=='1','order-status-2':item.orderStatus=='2','order-status-3':item.orderStatus=='3','order-status-4':item.orderStatus=='4'}">
							{{item.orderStatus|filterOrderStatus}}
							{{item.payStatus|filterPayStatus}}
						</view>
						<view v-else class="order-status" :class="{'order-status-0':item.orderStatus=='0','order-status-1':item.orderStatus=='1','order-status-2':item.orderStatus=='2','order-status-3':item.orderStatus=='3','order-status-4':item.orderStatus=='4'}">{{item.orderStatus|filterOrderStatus}}</view>
					</view>
						<view class="road-name u-flex">
							<u-icon name="map-fill" color="#3397FA" size="36"></u-icon>
							{{item.roadName}}
						</view>
						<view class="info-item">订单号：{{item.orderId}}</view>
						<view class="info-item">进场时间：{{item.inTime}}</view>
						<view v-if="item.orderStatus != 1" class="info-item">出场时间：{{item.ouTtime}}</view>
						<view v-if="item.orderStatus != 1" class="info-item">停车时长：{{item.duration}}</view>
						<view v-if="item.orderStatus != 1" class="info-item">免费时长：{{item.freeDuration}}</view>
						<view v-if="item.orderStatus != 1" class="info-item">计费时长：{{item.billinDuration}}</view>
						<view v-if="item.orderStatus != 1" class="info-item">应缴金额：{{item.payAmount}}</view>
						<view v-if="item.orderStatus != 1" class="info-item">实缴金额：<span class="amount">{{item.actualAmount||'0'}}元</span></view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default{
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data(){
			return{
				title:"查询结果",
				warningType:'环境',
				vehicleNo:'',
				selectShow:false,
				selectList: [
					{
						value: '1',
						label: '环境'
					},
					{
						value: '2',
						label: '设备/工艺'
					}
				],
				tabIndex:0,
				tabList:[
					{name:'停放中'},
					{name:'出场中'},
					{name:'欠费'},
					{name:'完成'},
				],
				upOption:{
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					// auto:false,
					// use:false,
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						// btnText: '去看看'
					}
				},
				dataList: [], //列表数据
			}
		},
		onLoad(page){
			this.vehicleNo = page.vehicleNo;
		},
		onShow(){
			setTimeout(()=>{
				this.mescroll.resetUpScroll();
			},500)
		},
		methods:{
			customBack(){
				uni.reLaunch({
				    url: '/pages/ownersQuery/ownersQuery'
				});
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// console.log('page',page)
				//联网加载数据
				// let keyword = this.tabs[this.tabIndex]?.text;
				let params ={
					// orderStatus:this.tabIndex + 1,//预警状态 1-待处理 2-已处理 3-已解除 如需要状态就放开
					vehicleNo:this.vehicleNo,
					// queryType:this.deviceTypeId,//查询类型 0-历史预警
					pageNum:page.num,
					queryType:page.size
				} 
				this.$u.api.getParkingRecord(params).then(curPageData=>{
					// console.log('curPageData',curPageData)
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(curPageData.total);
					this.mescroll.endBySize(curPageData.data.rows.length, curPageData.total);
					//设置列表数据
					if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.dataList=this.dataList.concat(curPageData.data.rows); //追加新数据
				}).catch((err)=>{
					uni.showToast({
						title:'链接失败'
					});
					console.log('err',err)
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick(){
				
			},
			// 切换菜单
			tabChange(index) {
				this.dataList = [];// 先置空列表,显示加载进度
				this.tabIndex = index;
				this.mescroll.resetUpScroll(); // 再刷新列表数据
				
			},
			selectConfirm(e){
				console.log('e',e);
				this.warningType = e[0].label;
				// this.$emit('workTypeChange', e[0].label);
			},
			openDetails(item){
				this.$u.route({
					url: 'pages/warningCenter/warningDetails/warningDetails',
					params:{
						deviceId:item.deviceId,
						warningId:item.id
					}
				})
			}
		}
	}
</script>
<style>
	page{background: #f7f7f7;}
</style>
<style lang="scss" scoped>
	// @import  './warningCenter.scss'
	.owelist{
		margin: 31rpx auto;
		padding: 24rpx;
		.owelist-item{
			background-color: #fff;
			padding: 25rpx 31rpx;
			border-radius: 10rpx;
			margin-bottom: 19rpx;
			.item-header{
				margin-bottom: 11rpx;
				.vehicle-no{
					font-size: 40rpx;
					font-weight: 500;
					color: #3D3D3D;
					line-height: 56rpx;
				}
				.order-status{
					font-size: 24rpx;
					font-weight: 500;
					color: #8F8F8F;
					line-height: 48rpx;
					border: 1px solid #ddd;
					color: #777;
					padding: 0 24rpx;
					border-radius: 8rpx;
					&.order-status-4{
						color: #777;
					}
					&.order-status-3{
						border-color: #FA6400;
						color: #FA6400;
					}
				}
			}
			.road-name{
				font-size: 26rpx;
				font-weight: 400;
				color: #A2A2A2;
				line-height: 37rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #D5D5D5;
				margin-bottom: 21rpx;
			}
			.info-item{
				font-size: 30rpx;
				color: #63717F;
				line-height: 42rpx;
				margin-bottom: 13rpx;
				.amount{
					font-weight: 500;
					color: #FA6400;
				}
			}
		}
	}
</style>