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

<template>
	<view class="content">
		<Nav title="消息" :isBack="false" />
		<view class="section">
			<u-list finished-text="没有更多了" @scrolltolower="scrolltolower">
				<view v-for="item in msgList" :key="item.id" @click="handelDetail(item)">
					<u-list-item>
						<u-cell-group class="cell">
							<u-cell :label="item.createTime" isLink>
								<view slot="title" class="title">
									<u-badge v-if="item.readState===0" isDot type="error" class="strick"></u-badge>
									<view class="title-content" :style="item.readState===0?'padding-left:20rpx':''">
										{{item.noticeTitle}}</view>
								</view>
							</u-cell>
						</u-cell-group>
					</u-list-item>
				</view>
			</u-list>
			<view class="empty" v-if="!this.msgList.length">
				<u-empty class="empty-icon" mode="data" icon="../../static/data.png">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 查询参数
				queryParams: {
					page: 1,
					limit: 13
				},
				// 列表数据
				msgList: []
			};
		},
		onShow() {
			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
					}
				})
			},
			// 跳转详情页
			handelDetail({
				id,
				readState
			}) {
				uni.navigateTo({
					url: "/pages/message/msg-detail/index?id=" + id + "&state=" + readState
				})
			},
			// 列表滚动到底部触发
			scrolltolower() {
				this.queryParams.limit += 10
				this.getMsgList()
			}
		}
	}
</script>

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

	.section {
		position: relative
	}

	.empty {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;

		.empty-icon {
			width: 400rpx;
			height: 400rpx;
			position: absolute;
			top: 30%;
			left: 50%;
			margin-left: -200rpx;
			margin-top: -200rpx;
		}
	}

	.cell {

		.title {
			position: relative;

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

			.strick {
				height: 15rpx;
				width: 15rpx;
				position: absolute;
				top: 0;
				left: 0;
				margin-top: 12rpx
			}
		}
	}
</style>