<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="60" @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 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.payAmount}}元</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>