消息中心暂时提交

pages/news/index.vue

@@ -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) {

pages/news/subpages/eventCenter/index.vue

@@ -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>

pages/news/subpages/sysNotice/index.vue

@@ -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">&nbsp; &nbsp;&nbsp; &nbsp;{{ 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() {

static/scss/index.scss

@@ -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;