<template> <view> <u-navbar :title="title" title-color="#fff" :is-back="true" :custom-back="customBack" :border-bottom="false" 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="tabCurrent" @change="tabChange"></u-tabs> <!-- <u-gap height="20" bg-color="#F6F6F6"></u-gap> --> <mescroll-uni ref="mescrollRef01" @init="mescrollInit" :top="config.platform=='h5'?200:280" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick"> <view class="report-list"> <view class="report-list-item u-m-b-24" :class="{'arrearage':item.vehicleNoStatus}" v-for="item in dataList" :key="item.id" @click="goDetails(item)"> <view class="cell u-flex u-row-between"> <text>路段:{{item.roadName}}</text> <text class="time">上报:{{$u.timeFormat(item.createTime, 'mm月dd日hh时MM分')}}</text> </view> <view class="cell u-flex u-row-between"> <text class="u-line-1">泊位号:{{item.spaceNo}}</text> <text class="evaluate" :class="[{'evaluated0':item.isProcess==0,'evaluated1':item.isProcess==1,'evaluated2':item.isProcess==2}]"> {{item.isProcess|filterIsProcess}} </text> </view> <view class="cell u-line-1"> 异常详情:{{item.exceprionDes}} </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注册全局组件) components:{ }, data(){ return{ roadName:'', roadNo:'', title:"异常记录", tabCurrent:0, breakStatus:'', tabList:[ {name:'地磁',code:'1'}, {name:'车位锁',code:'2'}, {name:'停车场',code:'3'}, ], downOption:{ auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback) }, upOption:{ page: { size: 10 // 每页数据的数量 }, auto:true, // use:false, noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5 empty:{ tip: '~ 暂无数据 ~', // 提示 // btnText: '去看看' } }, dataList:[], deviceType:1, } }, onLoad(page){ console.log('page',page); }, onShow(){ }, methods:{ customBack(){ uni.navigateBack() }, openPage(path,id) { this.$u.route({ url: path, params:{ id:id } }) }, goDetails(item){ this.$u.route({ url: 'pages/center/reportList/reportDetails', params:{ id:item.id, deviceId:item.deviceId, roadNo:this.roadNo, roadName:this.roadName, deviceType:this.deviceType, } }) }, // 切换菜单 tabChange(index) { this.tabCurrent = index; this.deviceType = this.tabList[index].code; this.refresh() }, /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */ upCallback(page) { // console.log('page',page); let params ={ roadNo:this.roadNo, deviceType:this.deviceType,//设备类型: 1-地磁 2-车位锁 pageNum:page.num, pageSize:page.size }; this.$u.api.getReportList(params).then(curPageData=>{ // console.log('word',word); console.log('curPageData',curPageData); //联网成功的回调,隐藏下拉刷新和上拉加载的状态; this.mescroll.endSuccess(curPageData.data.total); this.mescroll.endBySize(curPageData.data.rows.length, curPageData.data.total); //设置列表数据 if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表 this.dataList=this.dataList.concat(curPageData.data.rows); //追加新数据 console.log('this.dataList',this.dataList); }).catch(()=>{ console.log('catch'); //联网失败, 结束加载 this.mescroll.endErr(); }) }, //点击空布局按钮的回调 emptyClick(){ uni.showToast({ title:'点击了按钮,具体逻辑自行实现' }) }, refresh(){ this.mescroll.resetUpScroll( ); } } } </script> <style> page{background-color: #F3F3F3;} </style> <style lang="scss" scoped> .report-list{ margin: 24rpx 0; .report-list-item{ background-color: #fff; margin:24rpx; padding: 24rpx 30rpx; border-radius: 13rpx; font-size: 32rpx; line-height: 45rpx; color: #3A3A3A; .cell{ & + .cell{ margin-top: 10rpx; } } .time{ font-size: 26rpx; color: #A7A7A7; } .evaluate{ color: #f00; word-break: keep-all; &.evaluated1{ color: #00AE44; } &.evaluated2{ color: #FFA400; } } } } </style>