supervise/supervise-uniapp/pages/index/DeviceStatus.vue

<template>
	<view class="pages">
		<view>
			<view v-for="(item,index) in dataList" class="newslist">

				<view class="item" @click="itemClick(item)" :class="{'item2':index+1 == dataList.length}">

					<view class="item-lift" >
						<text class="item-lift-top">{{item.time}} [{{item.type}}]</text>
						<text class="item-lift-bom">{{item.name}}</text>
					</view>

					<image class="imge" src="../../static/baseIcon/zy.png"></image>

				</view>

			</view>
		</view>
		<!-- 加载....没有更多 -->
		<view style="line-height: 60rpx;margin-bottom: 50px;">
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '拉也没用，没有了'
				},
				listQuery: {
					current: 1,
					size: 10,
					params: {
						userSid: "",
					}
				},
				loadingType: 'more', //加载更多状态
				dataList: [

				]
			}
		},onPullDownRefresh() {
			this.listQuery.current = 1
			this.loadData('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		//加载更多
		onReachBottom() {
			this.listQuery.current = this.listQuery.current + 1
			this.loadData();
		},
		onLoad() {
		
				var userSid = getApp().globalData.sid
				console.log(">>>>>", userSid)
				this.listQuery.params.userSid = userSid
		
				this.loadData();
		},
		
		methods: {
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more';
				}
			
				var list = []
			
			console.log('listQuery', this.listQuery)
			
				this.$api.deviceListPage(this.listQuery).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)
			
			
					for (var i = 0; i < resp.records.length; i++) {
						var item = resp.records[i]
						var data = item.templateMessageVo
							console.log("data", data)
						list.push({
							sid:item.riskSid,
							time: data.time,
							name: data.shName,
							type: item.type,
						})
			
					}
			
			
			
					console.log("消息列表", list)
					if (type === 'refresh') {
						this.dataList = [];
					}
			
					this.dataList = this.dataList.concat(list);
					console.log("消息列表>>>>>", this.dataList.length)
			
			
					//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
					this.loadingType = this.dataList.length > list.total ? 'nomore' : 'more';
					if (type === 'refresh') {
						if (loading == 1) {
							uni.hideLoading();
						} else {
							uni.stopPullDownRefresh();
						}
					}
			
				}).catch(e => {
					console.log('eeeee', e)
				})
			
			},

			itemClick(item) {
				console.log('item', item)
				var type = item.type
				var sid = item.sid
				var date = item.time
				
				if('设备离线'==type){
					// 设备离线
					uni.navigateTo({
						url: "/pages/index/DeviceException?sid="+sid
					})
				}else if('系统异常'==type){
					// 系统故障
					uni.navigateTo({
						url: "/pages/index/SystemFailure?date="+date
					})
				} else{
					uni.showToast({
						icon: "none",
						title: '暂不支持',
						duration: 2000,
					});
					return
				}



			}
		}
	}
</script>

<style lang="scss">
	.pages {
		width: 100%;
		height: 100%;
		padding-top: 10px;

		.newslist {

			display: flex;
			flex-direction: column;

			.item {
				background: #fff;
				border-bottom: 1px solid #eee;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 15px 20px;

				.item-lift {
					flex: 1;
					display: flex;
					flex-direction: column;

					.item-lift-top {
						color: #101010;
						font-size: 16px;
						font-weight: 600;
						font-family: sans-serif
					}

					.item-lift-bom {
						margin-top: 5px;
						color: #707070;
						font-size: 15px;
					}
				}
				
				.imge {
					width: 20px;
					height: 20px;
				}
			}
			
			.item2{
				background: #fff;
				border-bottom: none;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 15px 20px;
				
			}
		}
	}
</style>