init

pages/message/message.vue

@@ -0,0 +1,122 @@
+<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' : '#ff8c00'"></u-icon>
+					<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: 'file-text',
+					read: false
+				},
+				{
+					title: '系统通知',
+					desc: '恭喜您成功升级为魔力会员，快来看看新增的特权吧！',
+					time: '2025-10-28 18:46',
+					icon: 'bell',
+					read: true
+				},
+				{
+					title: '活动优惠',
+					desc: '限时会员活动，租惠卡用户房租95折，快来参与！',
+					time: '2025-10-27 14:03',
+					icon: 'gift',
+					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: #f7f8fa;
+	min-height: 100vh;
+}
+
+.message-list {
+	padding: 20rpx;
+	box-sizing: border-box;
+}
+
+.msg-item {
+	background: #fff;
+	border-radius: 16rpx;
+	padding: 30rpx 20rpx;
+	margin-bottom: 20rpx;
+	align-items: flex-start;
+	position: relative;
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+
+.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;
+}
+
+.unread-dot {
+	width: 14rpx;
+	height: 14rpx;
+	background-color: #ff4d4f;
+	border-radius: 50%;
+	margin-top: 10rpx;
+}
+</style>

pages/message/messageDetail.vue

@@ -0,0 +1,47 @@
+<template>
+	<view class="msg-detail-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>
+
+		<view class="msg-detail u-p-40">
+			<view class="msg-title u-font-20 u-m-b-20">{{ title }}</view>
+			<view class="msg-desc u-font-14 u-tips-color">{{ desc }}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			title: '',
+			desc: ''
+		}
+	},
+	onLoad(e) {
+		this.title = decodeURIComponent(e.title || '')
+		this.desc = decodeURIComponent(e.desc || '')
+	},
+	methods: {
+		goBack() {
+			uni.navigateBack()
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.msg-detail-page {
+	background: #fff;
+	min-height: 100vh;
+}
+.msg-detail {
+	line-height: 1.8;
+}
+.msg-title {
+	font-weight: bold;
+}
+</style>