aiot-app/pages/home/wt/message/message.vue

<template>
	<view class="msg-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="我的消息" @clickLeft="back"
			background-color="#157A2C" color="#fff" style="margin-bottom: 10rpx;z-index: 99999;">

		</uni-nav-bar>
		<view class="tool-box">
			<view class="tool-box-wrapper">
				<u-transition :show="checkShow" mode="fade-down">
					<view class="inner">
						<text @tap="checkShow = false">取消</text>
						<text @tap="markDelete">删除</text>
					</view>
				</u-transition>
			</view>
			<uni-list class="list-item">
				<template v-for="(item, index) in list" size="small">
					<uni-badge v-if='item.readStatus!=1' :text="100" :offset=[0,20] is-dot type="error"
						style="z-index: 99;" absolute='rightTop'>
						<uni-list-item @click="" style="border-top: 1px solid #f2f2f2;" direction='column'
							@click='handleRead(item)' clickable :avatarCircle='false' :border='false'>
							<template v-slot:header>
								<div style="display: flex;justify-content: space-between;">
									<span
										style="font-size: 15px;align-self: center;color: #afafaf">{{item.createTime}}</span>
								</div>
							</template>
							<template v-slot:body>
								<div>
									<span style="font-size: 15px;">{{item.templateContent}}</span>
								</div>
							</template>
							<template v-slot:footer>
								<div style="display: flex;justify-content: flex-end;">
									<span
										style="font-size: 15px;align-self: center;color: #afafaf">{{item.templateNickname}}</span>
								</div>
							</template>
						</uni-list-item>
					</uni-badge>

					<uni-list-item v-else style="border-top: 1px solid #f2f2f2;" direction='column' clickable
						:avatarCircle='false' :border='false'>
						<template v-slot:header>
							<div style="display: flex;justify-content: space-between;">
								<span
									style="font-size: 15px;align-self: center;color: #afafaf">{{item.createTime}}</span>
							</div>
						</template>
						<template v-slot:body>
							<div>
								<span style="font-size: 15px;">{{item.templateContent}}</span>
							</div>
						</template>
						<template v-slot:footer>
							<div style="display: flex;justify-content: flex-end;">
								<span
									style="font-size: 15px;align-self: center;color: #afafaf">{{item.templateNickname}}</span>
							</div>
						</template>
					</uni-list-item>
					</uni-badge>

				</template>


			</uni-list>

		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		notifyMessagePageAPI,
		updateNotifyMessageReadByIdAPI
	} from '@/api/wt/index.js'

	// let [page, isEnd] = [1, false]
	export default {

		data() {
			return {
				checkList: [],
				list: [],
				checkShow: false,
				messageType: {
					0: '系统消息',
					1: '提醒消息',
					2: '告警消息'
				},
				messageStatus: {
					0: '已读',
					1: '未读'
				},
				page: 1,
				size: 10,
				isEnd: false,
				userInfo: ''
			}
		},
		onReachBottom() {
			console.log(this.isEnd, this.page);
			this.getList()
		},
		onShow() {
			this.doSearch();
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
			console.log(this.userInfo);
		},
		methods: {
			doSearch() {
				this.isEnd = false;
				this.page = 1;
				this.list = []
				this.getList();
			},
			//已读操作
			async handleRead(item) {
				const res = await updateNotifyMessageReadByIdAPI([item.id]);
				if (res.code == 0) {
					this.list.find(data => item.id === data.id).readStatus = 1
				}
				// this.getList()
			},
			toggleChecked() {
				this.checkShow = !this.checkShow
				this.checkList = []
			},
			handleCheckChange({
				detail
			}) {
				this.checkList = detail.value
			},
			async readAll() {
				await this.markRead(
					this.list.filter(i => i.messageStatus == 1).map(i => i.id),
					0
				)
				this.page = 1
				this.getList()
			},
			//获取我的消息列表数据
			async getList() {

				if (this.isEnd) {
					this.$refs.uToast.show({
						message: "暂无更多数据",
						duration: 1000
					})
					return
				}

				uni.showLoading({
					title: '加载中'
				})

				let params = {
					pageNum: this.page,
					size: this.size,
					userId: this.userInfo.userId
				}
				console.log(params);
				let res = await notifyMessagePageAPI(params)
				if (params.pageNum === 1) {
					this.list = res.list
				} else {
					this.list.push(...res.list)
				}
				this.page += 1
				this.isEnd = this.list.length >= res.count;

			},
			handleTo(e) {
				console.log(e)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.msg-container {
		padding: 0 20rpx;
		// background-color: $page-bg;
		min-height: 100vh;
	}
</style>