公告列表-查看详情页面

.env.development

@@ -1,4 +1,3 @@
-
 # 页面标题
 VUE_APP_TITLE = 若依管理系统
 
@@ -10,16 +9,4 @@ VUE_APP_BASE_API = 'http://103.150.181.107:8080/'
 
 # # 路由懒加载
 # VUE_CLI_BABEL_TRANSPILE_MODULES = true
-# =======
-# # 页面标题
-# VUE_APP_TITLE = 若依管理系统
-
-# # 开发环境配置
-ENV = 'development'
-
-# # 若依管理系统/开发环境
-VUE_APP_BASE_API = 'http://103.150.181.107:8080/'
-
-# # 路由懒加载
-VUE_CLI_BABEL_TRANSPILE_MODULES = true
 

src/router/index.js

@@ -106,6 +106,13 @@ export const constantRoutes = [
         component: () => import('@/views/notice/addNotice'),
         name: 'addNotice',
         meta: { title: '创建公告', icon: 'user' }
+      },
+      {
+        path:'noticeDetails',
+        component:() => import('@/views/notice/noticeDetails'),
+        name: 'noticeDetails',
+        meta: { title:'公告详情', icon:'user'},
+        hidden: true
       }
     ]
   },

src/views/notice/noticeDetails.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/notice/noticeList.vue

@@ -38,7 +38,7 @@
     <!-- 公告列表 -->
     <div class="notice-list">
       <i class="el-icon-tickets"> 公告列表</i>
-      <el-button id="addBtn" size="small">添加</el-button>
+      <el-button id="addBtn" size="small" @click="addNoticce">添加</el-button>
     </div>
     <!-- 数据栏 -->
     <div class="data-list">
@@ -48,7 +48,9 @@
         <el-table-column prop="publishTime" label="发布时间"> </el-table-column>
         <el-table-column prop="operation" label="操作">
           <template slot-scope="scope">
-            <el-button size="mini" type="text">查看详情</el-button>
+            <el-button size="mini" type="text" @click="viewDetails(scope.$index)"
+              >查看详情</el-button
+            >
             <el-button
               id="deleteBtn"
               size="mini"
@@ -181,16 +183,14 @@ export default {
       mockNoticeList: [],
       total: 0,
       pageSize: 5,
-      totalNum:"",
+      totalNum: "",
     };
   },
   mounted() {
     //获取总条目的id
-    this.totalNum = document.querySelector('#dataNum');
+    this.totalNum = document.querySelector("#dataNum");
     this.getMockNoticeList();
     this.getTableList();
-    
-    
   },
 
   methods: {
@@ -220,8 +220,23 @@ export default {
     },
     // 删除按钮
     deleteBtn(row) {
-      this.tableData.splice(this.tableData[row],1)
-      // console.log(this.tableData[row].id)
+      this.tableData.splice(this.tableData[row], 1);
+      // console.log(this.tableData[row].title)
+      // console.log(this.tableData[row].publishTime)
+    },
+    //添加公告 点击按钮跳转到添加公告页面
+    addNoticce() {
+      this.$router.push("/noticeList/addNotice");
+    },
+    //查看详情按钮 点击按钮跳转到公告详情页面
+    viewDetails(row) {
+      this.$router.push({
+        name: "noticeDetails",
+        query:{
+          publishTime:'时间',
+          title:'标题'
+        }
+      });
     },
   },
 };