RentWeAppFront/pages/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">
			<view v-for="(msg,index) in messages" :key="index" class="msg-item u-flex u-row-between" @click="viewMessage(msg)">
				<view class="u-flex">
					<!-- <u-icon :name="msg.icon" size="48" :color="msg.read ? '#ccc' : 'cornflowerblue'"></u-icon> -->
					<image :src="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 {
			messages: [
				{
					title: '账单提醒',
					desc: '您的本月房租账单已生成，请在到期日前完成支付。',
					time: '2025-10-29 09:12',
					icon: '/static/icon/msg-1.png',
					read: false
				},
				{
					title: '系统通知',
					desc: '恭喜您成功升级为魔力会员，快来看看新增的特权吧！',
					time: '2025-10-28 18:46',
					icon: '/static/icon/msg-2.png',
					read: true
				},
				{
					title: '活动优惠',
					desc: '限时会员活动，租惠卡用户房租95折，快来参与！',
					time: '2025-10-27 14:03',
					icon: '/static/icon/msg-3.png',
					read: false
				}
			],
			loadStatus: 'nomore'
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		viewMessage(msg) {
			msg.read = true
			uni.navigateTo({
				url: `/pages/message/detail?title=${encodeURIComponent(msg.title)}&desc=${encodeURIComponent(msg.desc)}`
			})
		}
	}
}
</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>