消息中心暂时提交
parent
48940feeda
commit
65cbbdf1dc
|
|
@ -199,6 +199,8 @@ export default {
|
|||
console.log('点击消息:', item.title)
|
||||
if (item.title === '系统通知') {
|
||||
this.$tab.navigateTo('/pages/news/subpages/sysNotice/index');
|
||||
} else if (item.title === '活动中心') {
|
||||
this.$tab.navigateTo('/pages/news/subpages/eventCenter/index');
|
||||
}
|
||||
},
|
||||
deleteItem(event, index) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<view class="message-page">
|
||||
<!-- 消息列表 -->
|
||||
<scroll-view scroll-y class="message-list">
|
||||
<view
|
||||
v-for="(item, index) in messageList"
|
||||
:key="index"
|
||||
class="message-item"
|
||||
>
|
||||
<!-- 图片区域（带未读角标） -->
|
||||
<view class="img-box">
|
||||
<image class="bg-img" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="unread-tag" v-if="item.unread">未读</view>
|
||||
<text class="img-title">{{ item.title }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 底部信息栏 -->
|
||||
<view class="info-bar">
|
||||
<view class="sender-info">
|
||||
<image class="sender-icon" src="https://picsum.photos/32/32" mode="aspectFill"></image>
|
||||
<text class="sender-name">{{ item.sender }}</text>
|
||||
</view>
|
||||
<text class="send-time">{{ item.time }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 额外描述文本（仅第三条有） -->
|
||||
<view class="desc-text" v-if="item.desc">
|
||||
<text>{{ item.desc }}</text>
|
||||
<text class="link-btn" @click="handleLink">立即认证✅</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
messageList: [
|
||||
{
|
||||
image: "https://picsum.photos/id/1031/800/400", // 城市建筑图
|
||||
title: "下班时间到了，勿浪费公司水电，请滚",
|
||||
sender: "图鸟官方团队",
|
||||
time: "2024-02-28 18:00",
|
||||
unread: true,
|
||||
desc: ""
|
||||
},
|
||||
{
|
||||
image: "https://picsum.photos/id/1059/800/400", // 新年装饰图
|
||||
title: "新年新气象，除夕快乐",
|
||||
sender: "图鸟官方团队",
|
||||
time: "2024-02-09 16:28",
|
||||
unread: false,
|
||||
desc: ""
|
||||
},
|
||||
{
|
||||
image: "https://picsum.photos/id/180/800/400", // 紫色沙漏图
|
||||
title: "企业认证，到期后企业使用将受限",
|
||||
sender: "图鸟官方团队",
|
||||
time: "2024-01-22 16:28",
|
||||
unread: false,
|
||||
desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLink() {
|
||||
// 点击"立即认证"的跳转逻辑
|
||||
uni.showToast({ title: "跳转到认证页" })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面容器 */
|
||||
.message-page {
|
||||
height: 100vh;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/* 消息列表 */
|
||||
.message-list {
|
||||
height: 100vh;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.message-item {
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 图片区域 */
|
||||
.img-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
}
|
||||
.bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.unread-tag {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
color: #fff;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.img-title {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
left: 30rpx;
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* 底部信息栏 */
|
||||
.info-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
.sender-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sender-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 12rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.sender-name {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
.send-time {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 描述文本（仅第三条） */
|
||||
.desc-text {
|
||||
padding: 0 30rpx 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.link-btn {
|
||||
color: #007bff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
v-for="(item, index) in noticeList"
|
||||
:key="index"
|
||||
class="notice-item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<!-- 状态点 + 标题 -->
|
||||
<view class="notice-header">
|
||||
|
|
@ -49,6 +50,25 @@
|
|||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<uni-popup ref="showNotice" mode="center" >
|
||||
<!-- 新增：修改运行时间的弹窗 -->
|
||||
<view class="modal-container">
|
||||
<view class="modal-title">{{ notice.title }}</view>
|
||||
<view class="modal-content"> {{ notice.content }}</view>
|
||||
<view class="modal-remark">
|
||||
<view class="remark">
|
||||
发布人：{{ notice.author }}
|
||||
</view>
|
||||
<view class="remark">
|
||||
发布时间：{{ notice.time }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-btn-wrap">
|
||||
<button class="modal-btn confirm" @click="closeShowNotice">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -146,6 +166,13 @@ export default {
|
|||
}
|
||||
],
|
||||
noticeList: [],
|
||||
notice: {
|
||||
title:null,
|
||||
content:null,
|
||||
author:null,
|
||||
avatar:null
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -153,6 +180,13 @@ export default {
|
|||
this.currentTab = currentTab;
|
||||
this.noticeList = this.contentList.filter(item =>
|
||||
item.isRead===currentTab);
|
||||
},
|
||||
handleClick(item) {
|
||||
this.notice = item;
|
||||
this.$refs.showNotice.open();
|
||||
},
|
||||
closeShowNotice() {
|
||||
this.$refs.showNotice.close();
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,18 @@
|
|||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
line-height: 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.modal-remark {
|
||||
text-align: right;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
line-height: 30rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.modal-label {
|
||||
width: 160rpx;
|
||||
color: #666;
|
||||
|
|
|
|||
Loading…
Reference in New Issue