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() { // ✅ 修复生命周期拼写
		// fetchMessageList 移到 onShow 中，等 token 校验通过后再加载
	},
	async onShow() {
		try {
			// await this.$checkToken(this.$getToken())
			// this.checkOaAuth()
			// this.fetchMessageList()
		} catch (e) {
			return
		}
	},
	// ✅ 删除和 scroll-view 冲突的 onReachBottom
	computed: {
		staticHost() {
			return this.$config.staticUrl;
		}
	},
	methods: {
		checkOaAuth() {
			const token = this.$getToken()
			if (!token) return
			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';

			// TODO: 接口联调时取消注释，删除 mock 数据
			// 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';
			// })

			// Mock 静态数据
			const mockData = [
				{
					id: '1',
					icon: '/static/icon/msg-1.png',
					title: '账单提醒',
					desc: '您有一笔租金待支付，请及时处理',
					time: '2026-06-27 10:30',
					read: false
				},
				{
					id: '2',
					icon: '/static/icon/msg-2.png',
					title: '合同签署',
					desc: '您的租赁合同已生成，请尽快签署',
					time: '2026-06-26 14:20',
					read: false
				},
				{
					id: '3',
					icon: '/static/icon/msg-1.png',
					title: '缴费成功',
					desc: '您已成功缴纳5月份租金2500元',
					time: '2026-06-25 09:15',
					read: true
				},
				{
					id: '4',
					icon: '/static/icon/msg-2.png',
					title: '预约确认',
					desc: '您预约的看房申请已确认，管家将联系您',
					time: '2026-06-24 16:45',
					read: true
				}
			];

			if (this.pageNo === 1) this.flowList = [];
			this.flowList = this.flowList.concat(mockData);
			this.loadStatus = 'nomore';
		},
		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>