消息中心暂时提交
parent
6d228f20f8
commit
072adeaa9a
|
|
@ -1,38 +1,66 @@
|
|||
<template>
|
||||
<view >
|
||||
<!-- <view class="nav-list">
|
||||
<view class="nav-item" v-for="(item, index) in navItems" :key="index" @tap="switchTab(index)">
|
||||
<image :src="item.icon" mode="aspectFit" class="nav-icon"></image>
|
||||
<text :class="['nav-text', { 'active': currentTab === index }]">{{ item.title }}</text>
|
||||
<view v-if="item.count > 0" class="nav-badge">{{ item.count }}</view>
|
||||
<view class="message-center-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-left" @click="navBack">
|
||||
<text class="nav-title">小策技术</text>
|
||||
<text class="arrow">▶</text>
|
||||
</view>
|
||||
</view>-->
|
||||
|
||||
<scroll-view scroll-y class="message-list" @scrolltolower="loadMore">
|
||||
<view v-for="(msg, index) in filteredMessages" :key="index" class="message-item" @tap="onMessageTap(msg)">
|
||||
<image :src="msg.avatar" class="avatar" mode="aspectFill"></image>
|
||||
<view class="message-content">
|
||||
<view class="message-header">
|
||||
<text class="sender">{{ msg.sender }}</text>
|
||||
<text class="time">{{ msg.time }}</text>
|
||||
</view>
|
||||
<text class="preview" :class="{ 'unread': msg.unread }">{{ msg.preview }}</text>
|
||||
</view>
|
||||
<view v-if="msg.unread" class="unread-badge">
|
||||
<text>{{ msg.unreadCount }}</text>
|
||||
</view>
|
||||
<view class="nav-right">
|
||||
<text class="nav-btn" @click="clearUnread">清除未读</text>
|
||||
<text class="divider">|</text>
|
||||
<text class="nav-btn" @click="openSetting">通知设置</text>
|
||||
</view>
|
||||
<view v-if="isLoading" class="loading">
|
||||
<uni-icons type="spinner-cycle" size="24" color="#007AFF"></uni-icons>
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<view v-if="filteredMessages.length === 0" class="empty-state">
|
||||
<uni-icons type="inbox" size="64" color="#999"></uni-icons>
|
||||
<text>暂无消息</text>
|
||||
</view>
|
||||
|
||||
<!-- 系统通知提示条 -->
|
||||
<view class="notice-bar" @click="goToOpen">
|
||||
<view class="notice-left">
|
||||
<text class="notice-icon">✕</text>
|
||||
<text class="notice-text">系统通知未开启，报警消息无法通知</text>
|
||||
</view>
|
||||
<view class="notice-btn">去开启</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能入口区 -->
|
||||
<view class="func-wrap">
|
||||
<view class="func-item" @click="goToSubscribe">
|
||||
<view class="func-icon">🗨️</view>
|
||||
<view class="func-title">消息订阅</view>
|
||||
<view class="func-desc">成员收不到设备/应用消息?</view>
|
||||
</view>
|
||||
<view class="func-item" @click="goToAI">
|
||||
<view class="func-icon">🤖</view>
|
||||
<view class="func-title">AI识别</view>
|
||||
<view class="func-desc">AI识别精准过滤无效报警</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<view class="message-list">
|
||||
<view
|
||||
v-for="(item, index) in messageList"
|
||||
:key="index"
|
||||
class="message-item"
|
||||
@click="handleItemClick(item)"
|
||||
>
|
||||
<view class="item-icon-wrap">
|
||||
<view class="item-icon" :style="{ backgroundColor: item.iconBg }">
|
||||
<text class="icon-text">{{ item.icon }}</text>
|
||||
</view>
|
||||
<view v-if="item.badge" class="item-badge"></view>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<view class="item-title">{{ item.title }}</view>
|
||||
<view class="item-desc">{{ item.desc }}</view>
|
||||
</view>
|
||||
<view class="item-time">{{ item.time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<view class="bottom-tip">只展示最近7天的消息</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -40,260 +68,232 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0,
|
||||
navItems: [{
|
||||
title: '评论',
|
||||
icon: 'https://www.zenkuai.com/attachment/demo/1.png',
|
||||
count: 5
|
||||
},
|
||||
messageList: [
|
||||
{
|
||||
title: '粉丝',
|
||||
icon: 'https://www.zenkuai.com/attachment/demo/2.png',
|
||||
count: 2
|
||||
icon: '🎬',
|
||||
iconBg: '#4285F4',
|
||||
title: '视频中心',
|
||||
desc: '[画面变化] DS-2DE4423DW-D/GLT/XM(FW1167...',
|
||||
time: '11:51',
|
||||
badge: true
|
||||
},
|
||||
{
|
||||
title: '点赞',
|
||||
icon: 'https://www.zenkuai.com/attachment/demo/2.png',
|
||||
count: 10
|
||||
icon: '🖥️',
|
||||
iconBg: '#4285F4',
|
||||
title: '设备状态',
|
||||
desc: '[设备在线] 十方',
|
||||
time: '26/03/21',
|
||||
badge: true
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
iconBg: '#FFA726',
|
||||
title: '系统通知',
|
||||
desc: '没有新的消息',
|
||||
time: '',
|
||||
badge: false
|
||||
}
|
||||
],
|
||||
searchText: '',
|
||||
messages: [
|
||||
{
|
||||
id: 1,
|
||||
sender: '系统通知',
|
||||
avatar: 'https://img.xiaoces.com/photos/news.png',
|
||||
preview: '您有一条新的系统通知，请查看',
|
||||
time: '10:30',
|
||||
unread: true,
|
||||
unreadCount: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
sender: '告警中心',
|
||||
avatar: 'https://img.xiaoces.com/photos/alarm.png',
|
||||
preview: '您有一条新告警->',
|
||||
time: '昨天',
|
||||
unread: false,
|
||||
unreadCount: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
sender: '客服小美',
|
||||
avatar: 'https://img.xiaoces.com/photos/cs.png',
|
||||
preview: '您好，请问有什么可以帮到您的吗？',
|
||||
time: '昨天',
|
||||
unread: false,
|
||||
unreadCount: 0
|
||||
},
|
||||
// 可以添加更多消息数据
|
||||
],
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredMessages() {
|
||||
return this.messages.filter(msg =>
|
||||
msg.sender.toLowerCase().includes(this.searchText.toLowerCase()) ||
|
||||
msg.preview.toLowerCase().includes(this.searchText.toLowerCase())
|
||||
)
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.currentTab = index;
|
||||
// 这里可以根据选中的标签加载相应的消息数据
|
||||
console.log('Switched to tab:', this.navItems[index].title);
|
||||
navBack() {
|
||||
console.log('返回上一页')
|
||||
},
|
||||
onMessageTap(msg) {
|
||||
console.log('Message tapped:', msg)
|
||||
uni.navigateTo({
|
||||
url: `/pages/message-detail/message-detail?id=${msg.id}`
|
||||
})
|
||||
clearUnread() {
|
||||
console.log('清除未读')
|
||||
},
|
||||
loadMore() {
|
||||
if (this.isLoading) return
|
||||
this.isLoading = true
|
||||
// 模拟加载更多消息
|
||||
setTimeout(() => {
|
||||
// 这里应该是从服务器加载更多消息的逻辑
|
||||
this.messages.push(...[{
|
||||
id: this.messages.length + 1,
|
||||
sender: '新消息',
|
||||
avatar: 'https://www.zenkuai.com/attachment/demo/1.png',
|
||||
preview: '这是一条新加载的消息',
|
||||
time: '刚刚',
|
||||
unread: true,
|
||||
unreadCount: 1
|
||||
}])
|
||||
this.isLoading = false
|
||||
}, 1000)
|
||||
openSetting() {
|
||||
console.log('打开通知设置')
|
||||
},
|
||||
goToOpen() {
|
||||
console.log('去开启系统通知')
|
||||
},
|
||||
goToSubscribe() {
|
||||
console.log('进入消息订阅')
|
||||
},
|
||||
goToAI() {
|
||||
console.log('进入AI识别')
|
||||
},
|
||||
handleItemClick(item) {
|
||||
console.log('点击消息:', item.title)
|
||||
},
|
||||
switchTab(tab) {
|
||||
console.log('切换到:', tab)
|
||||
// 实际项目中用 uni.switchTab 跳转对应页面
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.msg-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
<style lang="scss" scoped>
|
||||
.message-center-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
padding-bottom: 120rpx; /* 给底部Tab栏预留位置 */
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
background-color: #ffffff;
|
||||
padding: 40rpx 20rpx 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.nav-text.active {
|
||||
color: #007AFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
background-color: #FF3B30;
|
||||
color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
flex: 1;
|
||||
margin: 30rpx 20rpx;
|
||||
}
|
||||
.message-item {
|
||||
/* 顶部导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
width: 94%;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.message-item:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 44rpx 30rpx 20rpx;
|
||||
// #ifdef MP-WEIXIN
|
||||
padding-top: var(--status-bar-height);
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
padding-top: 44px;
|
||||
// #endif
|
||||
background-color: #fff;
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.arrow {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nav-btn {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
padding: 0 12rpx;
|
||||
}
|
||||
.divider {
|
||||
font-size: 28rpx;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sender {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.preview {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.preview.unread {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.unread-badge {
|
||||
background-color: #007AFF;
|
||||
color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-state text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
.loading {
|
||||
/* 系统通知提示条 */
|
||||
.notice-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
margin: 20rpx 30rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #FFF3E0;
|
||||
border-radius: 12rpx;
|
||||
.notice-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.notice-icon {
|
||||
font-size: 24rpx;
|
||||
color: #FF6D00;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.notice-text {
|
||||
font-size: 28rpx;
|
||||
color: #E65100;
|
||||
}
|
||||
}
|
||||
.notice-btn {
|
||||
padding: 8rpx 20rpx;
|
||||
background-color: #FF9800;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loading text {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #007AFF;
|
||||
/* 功能入口区 */
|
||||
.func-wrap {
|
||||
display: flex;
|
||||
margin: 0 30rpx 20rpx;
|
||||
gap: 20rpx;
|
||||
.func-item {
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
.func-icon {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.func-title {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.func-desc {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 消息列表 */
|
||||
.message-list {
|
||||
background-color: #fff;
|
||||
.message-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
.item-icon-wrap {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
.item-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon-text {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.item-badge {
|
||||
position: absolute;
|
||||
top: -6rpx;
|
||||
right: -6rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background-color: #f5222d;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #fff;
|
||||
}
|
||||
}
|
||||
.item-content {
|
||||
flex: 1;
|
||||
.item-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.item-desc {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
.item-time {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部提示 */
|
||||
.bottom-tip {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue