waterElectricityMinApp/pagesRepairs/message/message.vue

<template>
	<view class="container">
		<!-- 每一个消息区域 -->
		<view class="box" v-for="item in msgList" :key="item.id" @click="handleRead(item)">
			<view class="box_time">{{ item.updateTime }}</view>
			<view class="box_info">
				<view class="info_circle" :class="{ while: item.isRead === 1 }"></view>
				<view class="info_icon">
					<img src="../../static/images/repairsImg/msg.png" />
				</view>
				<view class="info_msg">
					<view class="msg_title">{{ item.content }}</view>
					<view class="msg_order">订单号：{{ item.recordNo }}</view>
				</view>
			</view>
		</view>

		<!-- 没有数据时展示的图片 -->
		<view class="no_data" v-if="msgList.length === 0">
			<img src="../../pagesClockIn/static/imgs/nodata.png" />
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 信息列表
			msgList: [],
			// 用户id
			userId: '',
			// 当前页
			currentPage: 1,
			// 每页多少条
			pageCount: 10,
			// 总条数
			total: null
		}
	},
	onLoad(options) {
		const repairsUserInfo = uni.getStorageSync('repairsUserInfo')
		this.userId = repairsUserInfo.userId
	},
	onShow() {
		this.msgList = []
		this.currentPage = 1
		this.getMsgList()
	},
	// 页面上拉触底回调
	onReachBottom() {
		if (this.total > this.msgList.length) {
			this.currentPage++
			this.getMsgList()
		} else {
			uni.showToast({
				title: '没有更多数据了',
				icon: 'none'
			})
		}
	},
	methods: {
		// 点击信息回调
		async handleRead(item) {
			// 未读信息
			if (item.isRead === 0) {
				const res = await this.$myRequest_repairs({
					url: '/repairSystemMessages/readSystemMessage',
					data: {
						id: item.id
					}
				})
				// console.log(res)
				if (res.code === '200') {
					uni.navigateTo({
						url: `/pagesRepairs/repairDetails/repairDetails?id=${item.recordId}`
					})
				}
			} else {
				uni.navigateTo({
					url: `/pagesRepairs/repairDetails/repairDetails?id=${item.recordId}`
				})
			}
		},
		// 获取列表信息
		async getMsgList() {
			const res = await this.$myRequest_repairs({
				url: '/repairSystemMessages/querySystemMessagePage',
				data: {
					currentPage: this.currentPage,
					pageCount: this.pageCount,
					userId: this.userId
				}
			})
			// console.log(res)
			if (res.code === '200') {
				this.total = res.data.totalCount
				this.msgList = [...this.msgList, ...res.data.list]
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	min-height: 100vh;
	background-color: #f2f2f2;
	overflow-y: auto;

	.box {
		margin-top: 10rpx;
		height: 194rpx;
		background-color: #fff;

		.box_time {
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			color: #999999;
			font-size: 24rpx;
		}

		.box_info {
			display: flex;
			align-items: center;
			margin-left: 30rpx;

			.info_circle {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #d43030;
			}

			.while {
				background-color: #fff;
			}

			.info_icon {
				margin: 0 8rpx;
				width: 90rpx;
				height: 90rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.info_msg {
				flex: 1;
				overflow: hidden;

				.msg_title {
					font-size: 32rpx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.msg_order {
					margin-top: 10rpx;
					color: #808080;
					font-size: 24rpx;
				}
			}
		}
	}

	.no_data {
		text-align: center;
		color: #b3b3b3;
		font-size: 24rpx;

		img {
			margin: 215rpx auto 0;
			width: 480rpx;
			height: 508rpx;
		}
	}
}
</style>