read_opc/reado-app/pages/message/index.vue

<template>
	<view class="content">
		<view class="msg-box">
			<view style="margin-bottom:10rpx;position:relative" v-for="item in msgList" :key="item.id">
				<view class="msg-item">
					<view class="msg-row">
						<image src="@/static/image/bj1.png" style="margin-right:20rpx;width: 40rpx;height:40rpx;"
							alt="">
							<view class="msg-content">
								编号 ：{{item.userId}}
							</view>
					</view>
					<view class="msg-row">
						<image src="@/static/image/bj2.png" style="margin-right:20rpx;width: 40rpx;height:40rpx;"
							alt="">
							<view class="msg-content">
								事件 ：<text style="font-weight: bold;">{{item.noticeTitle}}</text>
							</view>
					</view>
					<view class="msg-row">
						<image src="@/static/image/bj3.png" style="margin-right:20rpx;width: 40rpx;height:40rpx;"
							alt="">
							<view class="msg-content">
								地点 ：{{item.noticeContent}}
							</view>
					</view>
					<view class="msg-row">
						<image src="@/static/image/bj4.png" style="margin-right:20rpx;width: 40rpx;height:40rpx;"
							alt="">
							<view class="msg-content">
								时间 ：{{item.createTime}}
							</view>
					</view>
				</view>
				<view class="msg-btn">
					<u-button type="primary" class="cl" @click="handleMsg(item.id)">查看详情</u-button>
				</view>
				<view class="emergent" v-if="item.readState!==0">
					<image src="@/static/image/jjbq.png" alt="" style="width:95rpx;height:80rpx">
				</view>
			</view>
		</view>

		<u-empty v-if="!msgList.length" class="empty" icon="../../static/data.png" text="暂无数据">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 查询参数
				queryParams: {
					page: 1,
					limit: 20
				},
				// 列表数据
				msgList: []
			};
		},
		onShow() {
			this.queryParams.limit = 20
			this.getMsgList()
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			})
		},
		onPullDownRefresh() {
			this.queryParams.limit = 20
			this.getMsgList()
		},
		onReachBottom() {
			this.queryParams.limit += 10
			this.getMsgList()
		},
		methods: {
			// 获取消息数据
			getMsgList() {
				uni.$http.get('/messageNotice/getAllMessageNotice', this.queryParams).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.msgList = data.data.messageNoticeList
						uni.stopPullDownRefresh()
					}
				})
			},
			//立即处理
			handleMsg(id) {
				uni.navigateTo({
					url: "/pages/message/msg-detail/index?id=" + id,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 45rpx 20rpx 45rpx;
		background: #EEEDF2;
	}

	.empty {
		width: 400rpx;
		height: 400rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -280rpx !important;
		margin-left: -200rpx;
	}

	.msg-box {

		.msg-item {
			background: #ffffff;
			padding: 25rpx;
			margin-bottom: 4rpx;

			.msg-row {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.msg-content {
					width: 450rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}

		.msg-btn {
			background: #ffffff;
			padding: 25rpx;

			.cl {
				width: 180rpx;
				margin-right: 0
			}
		}

		.emergent {
			position: absolute;
			right: 30rpx;
			top: 0;
		}
	}
</style>