message

src/api/message/message.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 获取消息列表
+export function getMessage() {
+  return request({
+    url: '/monitor/cache',
+    method: 'get'
+  })
+}

src/router/index.js

@@ -133,7 +133,15 @@ export const constantRoutes = [
         component: () => import('@/views/message/addMessage'),
         name: 'addMessage',
         meta: { title: '创建消息', icon: 'build' }
+      },
+      {
+        path:'messageDetails',
+        component:() => import('@/views/message/messageDetails'),
+        name: 'messageDetails',
+        meta: { title:'公告详情', icon:'user'},
+        hidden: true
       }
+      // messageDetails
     ]
   }
   

src/views/message/messageDetails.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="app">
+    <el-button id="returnBtn" @click="returnBtn">返回</el-button>
+    <div class="noticeDetails">
+      <div class="title">消息详情</div>
+      <h3 id="noticeTitle">数字邮局正式上线，创世版首发!</h3>
+      <!-- <div class="noticeTitle">数字邮局正式上线，创世版首发!</div> -->
+      <h4 id="noticeTime">2023-01-13 11:46:38</h4>
+      <div class="noticeContent">
+        邮贝数字邮局，是由中国邮政集团有限公司北京市公司设立，同时使用人民日报全国党媒联盟链进行数字邮品和数字产品的登记、认证与确权，服务广大集邮用户和数字收藏爱好者的邮政官方数字邮品和数字产品发行平台。邮贝数字邮局由北京游贝数字科技有限公司负责运营。
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<style scoped>
+#returnBtn{
+    margin-top: 10px;
+    margin-left: 10px;
+}
+.noticeDetails {
+  width: 800px;
+  height: 300px;
+  /* background: red; */
+  margin: 50px auto;
+  border: 1px solid #ebeef5;
+}
+.title {
+  font-size: 30px;
+  font-family: PingFang SC;
+  color: #333333;
+  text-align: center;
+  font-weight: bolder;
+  margin-top: 10px;
+}
+#noticeTitle {
+  /* font-size: 18px; */
+  font-family: PingFang SC;
+  color: #333333;
+  margin-left: 30px;
+  margin-top: 20px;
+  font-weight: bolder;
+}
+#noticeTime {
+  font-family: PingFang SC;
+  margin-left: 30px;
+  color: #333333;
+}
+.noticeContent {
+  font-family: PingFang SC;
+  color: #333333;
+  width: 700px;
+  /* background: red; */
+  margin: 0 auto;
+  text-indent: 2em;
+}
+</style>
+
+
+<script>
+export default {
+  data() {
+    return {
+      noticeTitle: "",
+      noticeTime: "",
+    };
+  },
+  mounted() {
+    //获取到当前公告的标题和时间
+    this.noticeTitle = document.querySelector("#noticeTitle");
+    this.noticeTime = document.querySelector("#noticeTime");
+    noticeTitle.innerHTML = this.$route.query.title;
+    noticeTime.innerHTML = this.$route.query.publishTime;
+  },
+  methods:{
+    //返回上一页
+    returnBtn(){
+        this.$router.go(-1)
+    }
+  }
+};
+</script>

src/views/message/messageList.vue

@@ -39,7 +39,7 @@
           </el-table-column>
           <el-table-column prop="operate" label="操作">
             <template slot-scope="scope">
-              <el-button size="mini" type="text" icon="el-icon-edit">修改</el-button>
+              <el-button size="mini" type="text" @click="viewDetails(scope.$index)">查看详情</el-button>
               <el-popconfirm title="你确定删除本条消息吗？">
                 <el-button class="btn-delete" size="mini" type="text" icon="el-icon-delete"
                   @click="deleteMessage(scope.$index)" slot="reference">删除</el-button>
@@ -103,6 +103,16 @@ export default {
     //删除列表
     deleteMessage(row) {
       console.log(row);
+    },
+    //查看详情
+    viewDetails(row) {
+      this.$router.push({
+        name: "messageDetails",
+        query: {
+          publishTime: '时间',
+          title: '标题'
+        }
+      });
     }
   }
 }