parking_h5/pages/message/message.vue

<template>
	<view>
		<u-navbar
			title-color="#fff"
			:custom-back="customBack"
			:border-bottom="false"
			back-icon-color="#CCE8FF"
			:background="{background: '#008CFF' }"
			title="消息中心"
		/>
		<mescroll-body
			ref="mescrollRef"
			@init="mescrollInit"
			@down="downCallback"
			@up="upCallback">
			<scroll-view scroll-y style="height: 100%; width: 100%;" v-for="(messageItem, index) in  messageList"
				:key="messageItem.id">
				<view class="time">{{messageItem.createTime}}</view>
				<view class="page-box">
					<view class="message"
						@click="goDetails(messageItem)">
						<view class="message-top u-flex">
							<view class="message-top-left u-flex-1">
								<view class="car">{{messageItem.title}}</view>
							</view>
							<view class="message-top-right u-flex-2">
								<u-badge :is-dot="true" type="error" v-if="messageItem.readFlag=='0'"></u-badge>
							</view>
						</view>
						<view class="message-center">
							<view class="message-center-item">{{messageItem.content}}</view>
						</view>
						<view class="message-bottom">
							<u-cell-item title="查看详情" style="color: #008CFF;"></u-cell-item>
						</view>
					</view>
				</view>
			</scroll-view>
		</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				messageList: []
			};
		},
		methods: {
			// 返回上一页
			customBack() {
				uni.getStorage({
				    key: 'messageBack',
				    success: (res) => {
						this.$u.route({
							type: 'switchTab',
							url: res.data
						})
				    }
				})
			},
			/*下拉刷新的回调*/
			downCallback() {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				this.$u.api.getMessageList({
						pageSize: pageSize,
						pageNum: pageNum
					})
					.then(res => {
						if (res.code == 200) {
							// 接口返回的当前页数据列表 (数组)
							let curPageData = res.data?.rows??[];
							// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
							let curPageLen = curPageData.length;
							// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
							let totalPage = res.data.pages;
							// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
							let totalSize = res.data.total;
							// 接口返回的是否有下一页 (true/false)
							let hasNext = res.data.page < res.data.pages;

							//设置列表数据
							if (page.num == 1) this.messageList = []; // 如果是第一页需手动置空列表
							this.messageList = this.messageList.concat(curPageData); // 追加新数据
							// 后台接口有返回列表的总页数 totalPage
							this.mescroll.endByPage(curPageLen, totalPage);
							setTimeout(() => {
								this.mescroll.endSuccess(curPageLen)
							}, 20)
						} else {
							this.mescroll.endErr()
						}
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error',
						});
					});
			},
			// 跳转消息详情
			goDetails(item) {
				if (Number(item.readFlag) === 0) {
					this.$u.api.messageRead({
							newId: item.id
						})
						.then(res => {
							if (res.code == 200) {
								this.$u.route({
									url: 'pages/message/messageInfo',
									params: {
										details: JSON.stringify(item)
									}
								});
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								})
							}
						})
						.catch(err => {
							this.$refs.uToast.show({
								title: '操作失败',
								type: 'error'
							})
						})
				} else {
					this.$u.route({
						url: 'pages/message/messageInfo',
						params: {
							details: JSON.stringify(item)
						}
					});
				}
			}
		},
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #F6F6FF;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	@import "./message.scss";
</style>