jp-floorlock-Inspection/pages/myTab/myMessage.vue

<template>
	<view>
		<u-navbar title="我的消息" ></u-navbar>
		<view class="main"  v-if="0">
			<view class="line">
				<view class="imgc img1">
					<img class="img" src="@/assets/img/myTab/message1.svg">
				</view>
				<view class="text">
					<view class="info"> 
						<view class="title">
							故障告警

						</view>
						<view class="date">
							02-02

						</view>
					</view>
					<view class="message">
						A01车位地锁于2025-02-02 23:00:01离线断网...

					</view>
				</view>
			</view>
			<view class="line">
				<view class="imgc img2">
					<img class="img" src="@/assets/img/myTab/message2.svg">
				</view>
				<view class="text">
					<view class="info"> 
						<view class="title">
							故障告警
			
						</view>
						<view class="date">
							02-02
			
						</view>
					</view>
					<view class="message">
						A01车位地锁于2025-02-02 23:00:01离线断网...
			
					</view>
				</view>
			</view>
			<view class="line">
				<view class="imgc img3">
					<img class="img" src="@/assets/img/myTab/message3.svg">
				</view>
				<view class="text">
					<view class="info"> 
						<view class="title">
							故障告警
			
						</view>
						<view class="date">
							02-02
			
						</view>
					</view>
					<view class="message">
						A01车位地锁于2025-02-02 23:00:01离线断网...
			
					</view>
				</view>
			</view>
			<view class="line">
				<view class="imgc img4">
					<img class="img" src="@/assets/img/myTab/message4.svg">
				</view>
				<view class="text">
					<view class="info"> 
						<view class="title">
							故障告警
			
						</view>
						<view class="date">
							02-02
			
						</view>
					</view>
					<view class="message">
						A01车位地锁于2025-02-02 23:00:01离线断网...
			
					</view>
				</view>
			</view>
			
		</view>
		<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				listForm: {
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
				},
			};
		},
		onLoad(op) {

			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.listForm.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
		
			myLoadmore() {
				this.listForm.pageIndex += 1;
				this.getList()
			},
			getList() {
				return
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
		
				API.floorlockList(this.listForm).then((res) => {
					var list = []
		
					if (this.listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}
					this.list = list
					this.listForm.recordsTotal=res.data.recordsTotal
					
					uni.hideLoading();
		
				}).catch(error => {
		
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.main{
		
		.line{
			background-color: rgba(255,255,255,1);
			border-top: 1px solid  rgba(232,232,232,1);
			    display: flex;
			    align-items: center;
				padding:16px;
				
				.text{
					  .info{
						  display: flex;
						  justify-content: space-between;
						  .title{
						  
						  	color: rgba(16,16,16,1);
						  	font-size: 16px;
						  font-weight: bold;
						  }
						  .date{
						  	color: rgb(140,140,140);
						  	font-size: 12px;
						  }
						  margin-bottom:  4px;
					  } 
					
				}
				.message{
					color: rgba(51,51,51,1);
					font-size: 12px;
				}
				.imgc{
					display: flex;
					align-items: center;
					    justify-content: center;
					border-radius: 12px;
					margin-right: 8px;
					width: 48px;
					height: 48px;
					.img{
						width: 28px;
						height: 28px;
					}
					

				}
				.img1{
					background: linear-gradient(180.29deg, rgba(255,214,125,1) 0.9%,rgba(255,150,0,1) 100.4%);
				}
				.img2{
				background: linear-gradient(180.29deg, rgba(255,124,112,1) 0.9%,rgba(255,79,63,1) 100.4%);}
				.img3{
				background: linear-gradient(179.2deg, rgba(168,178,238,1) 6.28%,rgba(123,123,240,1) 96.94%);}
				.img4{
				background: linear-gradient(180deg, rgba(121,172,255,1) 0%,rgba(57,132,255,1) 100%);}
		}
	}
</style>