RentWeAppFront/pages-biz/message/message.vue

<template>
	<view class="message-page">

		<!-- 顶部导航栏 -->
		<u-navbar title="消息中心" bg-color="#fff" title-color="#111" :border-bottom="true" @leftClick="goBack">
			<view slot="left">
				<u-icon name="arrow-left" size="44" color="#111"></u-icon>
			</view>
		</u-navbar>

		<!-- 消息列表 -->
		<scroll-view scroll-y class="message-list" @scrolltolower="loadMore" @refresherrefresh="refresh"
			:refresher-enabled="true" :refresher-triggered="isRefreshing">
			<view v-for="(msg,index) in flowList" :key="index" class="msg-item u-flex u-row-between" @click="viewMessage(msg)">
				<view class="u-flex">
					<image :src="staticHost + '/public' + msg.icon"></image>
					<view class="msg-content u-m-l-20">
						<view class="msg-title u-font-16">{{ msg.title }}</view>
						<view class="msg-desc u-tips-color u-font-12 u-line-2">{{ msg.desc }}</view>
					</view>
				</view>
				<view class="msg-right u-text-right">
					<view class="msg-time u-font-12 u-tips-color">{{ msg.time }}</view>
					<view v-if="!msg.read" class="unread-dot"></view>
				</view>
			</view>

			<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :nomore-text="'没有更多消息了'"></u-loadmore>
		</scroll-view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			flowList: [],
			pageNo:1,
			pageSize:10,
			isRefreshing: false,
			loadStatus: 'loadmore'
		}
	},
	onShow() {
		this.$checkToken(this.$getToken())
	},
	onload(){
		this.loadMore();
	},
	methods: {
		goBack() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
			  uni.navigateBack();
			} else {
			  uni.switchTab({
			  		url:'/pages/index/index'
			  	})
			}
		},
		getIconUrl(type) {
			if(type === 'BILL') {
				return  this.$config.staticUrl + '/static/icon/msg-1.png'
			}
			if(type === 'SIGN') {
				return this.$config.baseUrl + '/static/icon/msg-2.png'
			}
		},
		fetchMessageList(){
			if (this.loadStatus !== 'loadmore') return;
			this.loadStatus = 'loading';
			let url = '/message/queryPage'
			this.$u.post(url, {
				pageNo: this.pageNo,
				pageSize: this.pageSize
			}, {
				WT: this.$getToken()
			}).then(res => {
				const rows = res.data.result || [];
				console.log(rows)
				if (this.pageNo === 1) this.flowList = [];
				this.flowList = this.flowList.concat(rows);
				if (rows.length < this.pageSize) {
					this.loadStatus = 'nomore';
				} else {
					this.pageNo++;
					this.loadStatus = 'loadmore';
				}
			}).catch(err => {
				console.log("获取消息列表失败：", err)
				this.loadStatus = 'loadmore';
			})
		},
		loadMore() {
			// 只有在 loadStatus 为 'loadmore' 时才触发
			if (this.loadStatus !== 'loadmore') return;
			this.fetchMessageList()
		},
		viewMessage(msg) {
			this.$u.route({url:'/pages-biz/message/messageDetail',params:{
				id: msg.id,
				read: msg.read
			}});
		},
		refresh() {
			this.isRefreshing = true;
			setTimeout(() => {
				this.isRefreshing = false;
			}, 1000);
		}
	}
}
</script>

<style lang="scss" scoped>
.message-page {
	background-color: #ffffff;
	min-height: 100vh;
}

.message-list {
	padding: 20rpx;
	box-sizing: border-box;
}

.msg-item {
	padding: 20rpx;
	margin-bottom: 20rpx;
	align-items: flex-start;
	position: relative;
	border-bottom: 1px solid #E6E6E6;
	
	image{
		width: 88rpx;
		height: 88rpx;
	}
}

.msg-content {
	width: 500rpx;
}

.msg-title {
	font-weight: bold;
	color: #111;
	margin-bottom: 10rpx;
}

.msg-right {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.msg-time{
	position: absolute;
}

.unread-dot {
	width: 14rpx;
	height: 14rpx;
	background-color: #ff4d4f;
	border-radius: 50%;
	margin-top: 50rpx;
}
</style>