special/pages/tabbar/message/message.vue

<template>
	<z-paging ref="msgpPging" v-model="dataList" @query="queryList" loading-more-no-more-text="没有更多消息了">
		<template v-slot:top>
			<up-navbar title=" 消息" bgColor="transparent" leftIcon='' :title-style="{fontWeight:'bold'}">
			</up-navbar>
			<div class="nav-header" :style="{height:computeNavHeight}"></div>
		</template>
		<ItemMessage v-for="(item,index) in dataList" :item="item" :index="index" @modify="handleModify">
		</ItemMessage>
	</z-paging>
</template>

<script>
	import {
		getMsgCountUrl,
		getMessageListUrl,
		modifyMsgUrl
	} from '@/common/config/api.js'
	import ItemMessage from '@/components/ItemMessage.vue'
	export default {
		components: {
			ItemMessage
		},
		data() {
			return {
				dataList: []
			}
		},
		onShow() {
			this.getMsgCount();
		},
		computed: {
			computeNavHeight() {
				console.log(uni.$u.sys());
				return uni.$u.sys().statusBarHeight + 44 + 'px'
			}
		},
		methods: {
			handleModify(id) {
				modifyMsgUrl({
						params: {
							id
						}
					})
					.then(res => {
						console.log('阅读消息', res);
						this.$refs.msgpPging.reload();
						this.getMsgCount()
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 获取未读消息数量
			getMsgCount() {
				getMsgCountUrl({
						params: {
							userId: this.vuex_user.id
						}
					})
					.then(res => {
						console.log('未读消息数', res);
						this.$refs.msgpPging.reload();
						const count = parseInt(res);
						if (count > 0) {
							uni.setTabBarBadge({
								index: 1,
								text: count > 99 ? '99+' : res
							})
						} else {
							uni.removeTabBarBadge({
								index: 1
							})
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			queryList(pageNo, pageSize) {
				// this.$refs.msgpPging.complete([1, 2, 3, 4, 5]);
				getMessageListUrl({
						pageNum: pageNo,
						pageSize: pageSize,
						userId: this.vuex_user.id
					})
					.then(res => {
						console.log('消息列表: ', res);
						this.$refs.msgpPging.complete(res.records);
					})
					.catch(err => {
						console.log('err: ', err);
						this.$refs.msgpPging.complete(false);
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F8FD;
	}

	.nav-header {
		background-image: url('@/static/images/nav-bg.png');
		background-size: cover;
		background-position: center;
	}
</style>