消息中心暂时提交

pages/news/index.vue

@@ -1,38 +1,66 @@
 <template>
-  <view >
+  <view class="message-center-page">
-<!--    <view class="nav-list">
+    <!-- 顶部导航栏 -->
-      <view class="nav-item" v-for="(item, index) in navItems" :key="index" @tap="switchTab(index)">
+    <view class="nav-bar">
-        <image :src="item.icon" mode="aspectFit" class="nav-icon"></image>
+      <view class="nav-left" @click="navBack">
-        <text :class="['nav-text', { 'active': currentTab === index }]">{{ item.title }}</text>
+        <text class="nav-title">小策技术</text>
-        <view v-if="item.count > 0" class="nav-badge">{{ item.count }}</view>
+        <text class="arrow">▶</text>
       </view>
-    </view>-->
+      <view class="nav-right">
-
+        <text class="nav-btn" @click="clearUnread">清除未读</text>
-    <scroll-view scroll-y class="message-list" @scrolltolower="loadMore">
+        <text class="divider">|</text>
-      <view v-for="(msg, index) in filteredMessages" :key="index" class="message-item" @tap="onMessageTap(msg)">
+        <text class="nav-btn" @click="openSetting">通知设置</text>
-        <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>
-      <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,
+      messageList: [
-      navItems: [{
-        title: '评论',
-        icon: 'https://www.zenkuai.com/attachment/demo/1.png',
-        count: 5
-      },
         {
-          title: '粉丝',
+          icon: '🎬',
-          icon: 'https://www.zenkuai.com/attachment/demo/2.png',
+          iconBg: '#4285F4',
-          count: 2
+          title: '视频中心',
+          desc: '[画面变化] DS-2DE4423DW-D/GLT/XM(FW1167...',
+          time: '11:51',
+          badge: true
         },
         {
-          title: '点赞',
+          icon: '🖥️',
-          icon: 'https://www.zenkuai.com/attachment/demo/2.png',
+          iconBg: '#4285F4',
-          count: 10
+          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) {
+    navBack() {
-      this.currentTab = index;
+      console.log('返回上一页')
-      // 这里可以根据选中的标签加载相应的消息数据
-      console.log('Switched to tab:', this.navItems[index].title);
     },
-    onMessageTap(msg) {
+    clearUnread() {
-      console.log('Message tapped:', msg)
+      console.log('清除未读')
-      uni.navigateTo({
-        url: `/pages/message-detail/message-detail?id=${msg.id}`
-      })
     },
-    loadMore() {
+    openSetting() {
-      if (this.isLoading) return
+      console.log('打开通知设置')
-      this.isLoading = true
+    },
-      // 模拟加载更多消息
+    goToOpen() {
-      setTimeout(() => {
+      console.log('去开启系统通知')
-        // 这里应该是从服务器加载更多消息的逻辑
+    },
-        this.messages.push(...[{
+    goToSubscribe() {
-          id: this.messages.length + 1,
+      console.log('进入消息订阅')
-          sender: '新消息',
+    },
-          avatar: 'https://www.zenkuai.com/attachment/demo/1.png',
+    goToAI() {
-          preview: '这是一条新加载的消息',
+      console.log('进入AI识别')
-          time: '刚刚',
+    },
-          unread: true,
+    handleItemClick(item) {
-          unreadCount: 1
+      console.log('点击消息:', item.title)
-        }])
+    },
-        this.isLoading = false
+    switchTab(tab) {
-      }, 1000)
+      console.log('切换到:', tab)
+      // 实际项目中用 uni.switchTab 跳转对应页面
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-
+.message-center-page {
-.msg-center {
+  min-height: 100vh;
-  display: flex;
+  background-color: #f5f7fa;
-  flex-direction: column;
+  padding-bottom: 120rpx; /* 给底部Tab栏预留位置 */
-  height: 100vh;
-  background-color: #f5f5f5;
 }
 
-
+/* 顶部导航栏 */
-.header {
+.nav-bar {
-  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 {
   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;
+  padding: 44rpx 30rpx 20rpx;
-  margin-bottom: 10rpx;
+  // #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;
+.notice-bar {
-  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 {
   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;
+.func-wrap {
-  font-size: 28rpx;
+  display: flex;
-  color: #007AFF;
+  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>