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

<template>
	<view class="content">
		<uni-list>
			<uni-list-item v-for="item in msgList" :key="item.id" :title="item.noticeTitle" :note="item.createTime" link
				ellipsis="1" :to="`/pages/message/msg-detail/index?id=${item.id}&state=${item.readState}`">
				<template v-slot:header v-if="item.readState===0">
					<view class="slot-box">
						<view class="strick"></view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<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()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 25rpx 0rpx 25rpx;
	}

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

	.slot-box {
		display: flex;
		align-items: center;

		.strick {
			height: 15rpx;
			width: 15rpx;
			border-radius: 50%;
			background-color: red;
			margin-right: 10rpx;
		}
	}
</style>