2025-11-14 11:39:33 +08:00
|
|
|
|
<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">
|
2025-12-25 08:26:09 +08:00
|
|
|
|
<u-icon :name="msg.icon" size="48" :color="msg.read ? '#ccc' : 'cornflowerblue'"></u-icon>
|
2025-11-14 11:39:33 +08:00
|
|
|
|
<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>
|
