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: 'more', // ✅ 修复为官方正确值
		}
	},
	onLoad() { // ✅ 修复生命周期拼写
		this.fetchMessageList();
	},
	onShow() {
		this.$checkToken(this.$getToken())
		this.checkOaAuth()
	},
	// ✅ 删除和 scroll-view 冲突的 onReachBottom
	computed: {
		staticHost() {
			return this.$config.staticUrl;
		}
	},
	methods: {
		checkOaAuth() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo || !userInfo.oaAuth) {
				uni.showModal({
					title: '提示',
					content: '您还未实名认证，请先完成实名认证',
					showCancel: false,
					confirmText: '去认证',
					success: () => {
						uni.redirectTo({ url: '/pages-biz/profile/profile' })
					}
				})
			}
		},
		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 !== 'more') 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 || [];
				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 = 'more';
				}
			}).catch(err => {
				console.log("获取消息列表失败：", err)
				this.loadStatus = 'more'; // ✅ 异常恢复
			})
		},
		loadMore() {
			this.fetchMessageList()
		},
		viewMessage(msg) {
			this.$u.route({
				url:'/pages-biz/message/messageDetail',
				params:{
					id: msg.id,
					read: msg.read
				}
			});
		},
		// ✅ 修复下拉刷新（重置数据）
		refresh() {
			this.isRefreshing = true;
			this.pageNo = 1;
			this.flowList = [];
			this.loadStatus = 'more';
			this.fetchMessageList();
			
			setTimeout(() => {
				this.isRefreshing = false;
			}, 800);
		}
	}
}
</script>

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

/* ✅ 修复滚动区域高度 */
.message-list {
	height: calc(100vh - var(--window-top));
	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>