znyc.dispatching.wx/pages/warnItem/warnItem.vue

<template>
	<view id="warp">
		<view class="content">
			<template v-if="speedList.length > 0">
				<view 
					class="list_item" 
					v-for="(item,index) in speedList" 
					:key="index"
					@tap="selectSpeedList(item)"
				>
					<view class="list_item_top">
						<view class="list_item_lef">
							<image src="/static/images/index/car_info_icon.png"></image> {{item.vehicleCode}} ({{item.vehiclePlate}})
						</view>
						<view class="list_item_right">
							<image src="/static/images/common/speed.png"></image>
							<text>{{item.speed}}km/h</text>
						</view>
					</view>
					<view class="list_item_bot">
						<view class="list_item_bot_bot">
							<view class="list_item_bot_bot_left">报警时间:</view>
							<view class="list_item_bot_bot_rig">{{item.gpsTime}}</view>
						</view>
						<view class="list_item_bot_bot">
							<view class="list_item_bot_bot_left">报警位置:</view>
							<view class="list_item_bot_bot_rig">{{item.address}}</view>
						</view>
					</view>
				</view>
				<view class="bottomTitle" v-if="showNone">
					<text>没有更多数据了 ~</text>
				</view>
			</template>
			<template v-else>
				<view class="blank">
				    <image src="/static/images/common/empty.png"></image>
				    <text>暂无记录</text>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	const {urlList,https} = require('@/static/api');
	export default {
		data() {
			return {
				speedList:[],
				showNone:false,
				isLoading:false,    //是否在加载中
				page:1,
				pageSize:10,
			};
		},
		onLoad() {
			this.page = 1;
			this.getSpeedList(1)
		},
		methods:{
			selectSpeedList(item){
				uni.navigateTo({
					url: `/pages/warnItemInfo/warnItemInfo?data=${JSON.stringify(item)}`,
				})
			},
			getSpeedList(page){
				const _that = this;
				https(urlList.getSpeedList+'/'+page+'/'+_that.pageSize,'GET','','加载中...').then(data => {
					console.log('超速记录',data)
					const list = data.data.list;
					if(list.length !== 0){
						if(page == 1){
							_that.speedList = list;
						}else{
							_that.speedList = _that.speedList.concat(list);
						}
					}else{
						if(_that.page > 1){
							_that.page-=1;
						}
						_that.showNone = true;
					}
					_that.isLoading = false;
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
					_that.isLoading = false;
					if(_that.page > 1){
						_that.page-=1;
					}
				})
				uni.stopPullDownRefresh();
			},
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getSpeedList(1);
		},
		onReachBottom() {
			if(!this.isLoading){
				this.isLoading = true;
				this.page+=1;
				this.getSpeedList(this.page);
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F4F6;
	}
</style>
<style lang="scss" scoped>
	
#warp{
	width: 100%;
	.content{
		width: 100%;
		display: flex;
		flex-direction: column;
		.list_item{
			width: 100%;
			height: 250rpx;
			background-color: white;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			/* padding: 20rpx 0rpx; */
			.list_item_top{
			    height: 80rpx;
			    width: 95%;
			    display: flex;
			    flex-direction: row;
			    align-items: center;
			    justify-content: space-between;
			    font-size: 14px;
			}
			.list_item_right{
			    display: flex;
			    flex-direction: row;
				align-items: center;
			    color: #FF582D;
				image{
					width: 32rpx;
					height: 32rpx;
					margin-right: 6rpx;
				}
			}
			.list_item_lef{
				font-weight: bold;
				color: #353535;
				display: flex;
				flex-direction: row;
				align-items: baseline;
			}
			.list_item_lef image{
				width: 35rpx;
				height: 27rpx;
				margin-right: 5px;
			}
			.list_item_bot{
			    width: 95%;
			    display: flex;
			    flex-direction: column;
			    border-top: 1rpx solid rgb(231, 230, 230);
			    font-size:14px;
				.list_item_bot_bot{
				  display: flex;
				  flex-direction: row;
				  margin-top: 15rpx;
				  color: #363636;
				}
				.list_item_bot_bot_left{
				    width: 135rpx;
				    display: flex;
				    flex-wrap: nowrap;
				}
				.list_item_bot_bot_rig{
				    width:  calc(100% - 175rpx);
				    text-overflow: -o-ellipsis-lastline;
				    overflow: hidden;
				    text-overflow: ellipsis;
				    display: -webkit-box;
				    -webkit-line-clamp: 2;
				    line-clamp: 2;
				    -webkit-box-orient: vertical;
				}
			}
			
		}
		.bottomTitle{
			width: 100%;
			height: 100rpx;
			color: #666666;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.blank{
			width: 100%;
			height: 100%;
			font-size: 24rpx;
			color: #999999FF;
			margin-top: 30%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 300rpx;
				height: 240rpx;
				margin-bottom: 40rpx;
			}
		}
	}
}
</style>