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="消息中心"></u-navbar>
		<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.content,messageItem.createTime,messageItem.title)" >
						<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: [],
				newId:''
			};
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		methods: {
			customBack(){
				this.$u.route({
					type:'switchTab',
					url: 'pages/center/index'
				});
			},
			/*下拉刷新的回调*/
			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.getMessageList()
				this.$u.api.getMessageList({pageSize:pageSize ,pageNum: pageNum})
				.then(res=>{
					console.log(res)
					this.newId = res.data.rows[0].id;
					console.log(this.newId)
					// 接口返回的当前页数据列表 (数组)
					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 = 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)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
				
			},
			goDetails(content,createTime,title){
				this.$u.api.messageRead({newId:this.newId})
				.then(res =>{
					if(res.code == 200){
						console.log(res)
					}
				});
				this.$u.route({
					url: 'pages/message/messageInfo',
					params: {
						content:JSON.stringify(content),
						createTime:JSON.stringify(createTime),
						title:JSON.stringify(title),
					}
				});
			}
		},
	};
</script>

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

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