src/api/message/message.js

@@ -2,9 +2,38 @@
 import request from '@/utils/request'
 
 // 获取消息列表
-export function getMessage() {
+// export function getMessage() {
+//   return request({
+//     url: '/messageList/messageList',
+//     method: 'get'
+//   })
+// }
+
+export function getMessage(params) {
+  return request({
+    url: '/api/message/getMessage',
+    params
+  })
+}
+
+export function searchMessage(params) {
+  return request({
+    url: '/api/message/searchData',
+    params
+  })
+}
+
+export function detailMessage(params) {
+  return request({
+    url: '/api/message/detailMessage',
+    params
+  })
+}
+
+export function deleteMessage(data) {
   return request({
-    url: '/messageList/messageList',
-    method: 'get'
+    url: '/api/message/del',
+    method: 'post',
+    data
   })
 }

src/api/message/mock/message.js

@@ -1,10 +0,0 @@
-// mock版本
-import request from '@/utils/requestFastMock'
-
-// 获取消息列表
-export function getMessage() {
-  return request({
-    url: '/messageList/messageList',
-    method: 'get'
-  })
-}

src/api/mockServe/message.js

@@ -0,0 +1,86 @@
+import Mock from "mockjs";
+
+let List = [];
+const count = 200;
+const phonePrefix = ['155', '138', '166', '150', '188'];
+
+for (let i = 0; i < count; i++) {
+    let index = Math.floor(Math.random() * phonePrefix.length);
+    let phone = phonePrefix[index] + Mock.mock(/\d{8}/);
+    List.push(
+        Mock.mock({
+            id: Mock.Random.guid(),
+            "messageTitle": "@cword(4)",
+            phoneNumber: phone,
+            "publishTime": "@date('yy-MM-dd hh:mm:ss')",
+            content: "@cword(150)"
+        })
+    )
+}
+
+function paramObj(url) {
+    const search = url.split('?')[1];
+    if (!search) {
+        return {}
+    }
+    return JSON.parse(
+        '{"' +
+        decodeURIComponent(search)
+            .replace(/"/g, '\\"')
+            .replace(/&/g, '","')
+            .replace(/=/g, '":"') +
+        '"}'
+    )
+}
+
+export default {
+    getMessageList: config => {
+        const { name, page = 1, limit = 10 } = paramObj(config.url);
+        const mockList = List.filter(user => {
+            if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false;
+            return true;
+        })
+        const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1));
+        return {
+            code: 200,
+            count: mockList.length,
+            list: pageList
+        }
+    },
+    searchMessageList: config => {
+        const { name } = paramObj(config.url);
+        const searchList = List.filter(user => {
+            return user.messageTitle === name;
+        })
+        return {
+            code: 200,
+            count: searchList.length,
+            list: searchList
+        }
+    },
+    detailMessage: config => {
+        const { id } = paramObj(config.url);
+        const detail = List.filter(user => {
+            return user.id === id;
+        })
+        return {
+            code: 200,
+            data: detail
+        }
+    },
+    deleteMessage: config => {
+        const { id } = JSON.parse(config.body);
+        if (!id) {
+            return {
+                code: -999,
+                message: '参数不正确'
+            }
+        } else {
+            List = List.filter(u => u.id !== id)
+            return {
+                code: 200,
+                message: '删除成功'
+            }
+        }
+    },
+}

src/api/mockServe/mock.js

@@ -1,7 +1,13 @@
 import Mock from 'mockjs';
 
 import NoticeApi from './notice';
+import MessageApi from './message';
 
 Mock.mock(/api\/notice\/getData/, 'get', NoticeApi.getNoticList);
 Mock.mock(/api\/notice\/searchData/, 'get', NoticeApi.searchNoticList);
-Mock.mock(/api\/notice\/detailNotic/, 'get', NoticeApi.detailNotic);
+Mock.mock(/api\/notice\/detailNotic/, 'get', NoticeApi.detailNotic);
+
+Mock.mock(/api\/message\/getMessage/, 'get', MessageApi.getMessageList);
+Mock.mock(/api\/message\/searchData/, 'get', MessageApi.searchMessageList);
+Mock.mock(/api\/message\/del/, 'post', MessageApi.deleteMessage);
+Mock.mock(/api\/message\/detailMessage/, 'get', MessageApi.detailMessage);

src/assets/styles/index.css

@@ -1,699 +0,0 @@
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
-:export {
-  menuColor: #bfcbd9;
-  menuLightColor: rgba(0, 0, 0, 0.7);
-  menuColorActive: #f4f4f5;
-  menuBackground: #304156;
-  menuLightBackground: #ffffff;
-  subMenuBackground: #1f2d3d;
-  subMenuHover: #001528;
-  sideBarWidth: 200px;
-  logoTitleColor: #ffffff;
-  logoLightTitleColor: #001529;
-}
-
-/* fade */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.28s;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-/* fade-transform */
-.fade-transform--move,
-.fade-transform-leave-active,
-.fade-transform-enter-active {
-  transition: all .5s;
-}
-
-.fade-transform-leave-active {
-  position: absolute;
-}
-
-.fade-transform-enter {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.fade-transform-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-/* breadcrumb transition */
-.breadcrumb-enter-active,
-.breadcrumb-leave-active {
-  transition: all .5s;
-}
-
-.breadcrumb-enter,
-.breadcrumb-leave-active {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-.breadcrumb-move {
-  transition: all .5s;
-}
-
-.breadcrumb-leave-active {
-  position: absolute;
-}
-
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
-.el-upload input[type="file"] {
-  display: none !important;
-}
-
-.el-upload__input {
-  display: none;
-}
-
-.cell .el-tag {
-  margin-right: 0px;
-}
-
-.small-padding .cell {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.fixed-width .el-button--mini {
-  padding: 7px 10px;
-  width: 60px;
-}
-
-.status-col .cell {
-  padding: 0 10px;
-  text-align: center;
-}
-
-.status-col .cell .el-tag {
-  margin-right: 0px;
-}
-
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
-
-.upload-container .el-upload {
-  width: 100%;
-}
-
-.upload-container .el-upload .el-upload-dragger {
-  width: 100%;
-  height: 200px;
-}
-
-.el-dropdown-menu a {
-  display: block;
-}
-
-.el-range-editor.el-input__inner {
-  display: inline-flex !important;
-}
-
-.el-range-separator {
-  box-sizing: content-box;
-}
-
-.el-menu--collapse
-> div
-> .el-submenu
-> .el-submenu__title
-.el-submenu__icon-arrow {
-  display: none;
-}
-
-#app .main-container {
-  min-height: 100%;
-  transition: margin-left .28s;
-  margin-left: 200px;
-  position: relative;
-}
-
-#app .sidebarHide {
-  margin-left: 0 !important;
-}
-
-#app .sidebar-container {
-  -webkit-transition: width .28s;
-  transition: width 0.28s;
-  width: 200px !important;
-  background-color: #304156;
-  height: 100%;
-  position: fixed;
-  font-size: 0px;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1001;
-  overflow: hidden;
-  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-}
-
-#app .sidebar-container .horizontal-collapse-transition {
-  transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
-}
-
-#app .sidebar-container .scrollbar-wrapper {
-  overflow-x: hidden !important;
-}
-
-#app .sidebar-container .el-scrollbar__bar.is-vertical {
-  right: 0px;
-}
-
-#app .sidebar-container .el-scrollbar {
-  height: 100%;
-}
-
-#app .sidebar-container.has-logo .el-scrollbar {
-  height: calc(100% - 50px);
-}
-
-#app .sidebar-container .is-horizontal {
-  display: none;
-}
-
-#app .sidebar-container a {
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-}
-
-#app .sidebar-container .svg-icon {
-  margin-right: 16px;
-}
-
-#app .sidebar-container .el-menu {
-  border: none;
-  height: 100%;
-  width: 100% !important;
-}
-
-#app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title {
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-}
-
-#app .sidebar-container .submenu-title-noDropdown:hover,
-#app .sidebar-container .el-submenu__title:hover {
-  background-color: rgba(0, 0, 0, 0.06) !important;
-}
-
-#app .sidebar-container .theme-dark .is-active > .el-submenu__title {
-  color: #f4f4f5 !important;
-}
-
-#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
-#app .sidebar-container .el-submenu .el-menu-item {
-  min-width: 200px !important;
-}
-
-#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover,
-#app .sidebar-container .el-submenu .el-menu-item:hover {
-  background-color: rgba(0, 0, 0, 0.06) !important;
-}
-
-#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title,
-#app .sidebar-container .theme-dark .el-submenu .el-menu-item {
-  background-color: #1f2d3d !important;
-}
-
-#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title:hover,
-#app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover {
-  background-color: #001528 !important;
-}
-
-#app .hideSidebar .sidebar-container {
-  width: 54px !important;
-}
-
-#app .hideSidebar .main-container {
-  margin-left: 54px;
-}
-
-#app .hideSidebar .submenu-title-noDropdown {
-  padding: 0 !important;
-  position: relative;
-}
-
-#app .hideSidebar .submenu-title-noDropdown .el-tooltip {
-  padding: 0 !important;
-}
-
-#app .hideSidebar .submenu-title-noDropdown .el-tooltip .svg-icon {
-  margin-left: 20px;
-}
-
-#app .hideSidebar .el-submenu {
-  overflow: hidden;
-}
-
-#app .hideSidebar .el-submenu > .el-submenu__title {
-  padding: 0 !important;
-}
-
-#app .hideSidebar .el-submenu > .el-submenu__title .svg-icon {
-  margin-left: 20px;
-}
-
-#app .hideSidebar .el-menu--collapse .el-submenu > .el-submenu__title > span {
-  height: 0;
-  width: 0;
-  overflow: hidden;
-  visibility: hidden;
-  display: inline-block;
-}
-
-#app .el-menu--collapse .el-menu .el-submenu {
-  min-width: 200px !important;
-}
-
-#app .mobile .main-container {
-  margin-left: 0px;
-}
-
-#app .mobile .sidebar-container {
-  transition: transform .28s;
-  width: 200px !important;
-}
-
-#app .mobile.hideSidebar .sidebar-container {
-  pointer-events: none;
-  transition-duration: 0.3s;
-  transform: translate3d(-200px, 0, 0);
-}
-
-#app .withoutAnimation .main-container,
-#app .withoutAnimation .sidebar-container {
-  transition: none;
-}
-
-.el-menu--vertical > .el-menu .svg-icon {
-  margin-right: 16px;
-}
-
-.el-menu--vertical .nest-menu .el-submenu > .el-submenu__title:hover,
-.el-menu--vertical .el-menu-item:hover {
-  background-color: rgba(0, 0, 0, 0.06) !important;
-}
-
-.el-menu--vertical > .el-menu--popup {
-  max-height: 100vh;
-  overflow-y: auto;
-}
-
-.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-track-piece {
-  background: #d3dce6;
-}
-
-.el-menu--vertical > .el-menu--popup::-webkit-scrollbar {
-  width: 6px;
-}
-
-.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-thumb {
-  background: #99a9bf;
-  border-radius: 20px;
-}
-
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
-:export {
-  menuColor: #bfcbd9;
-  menuLightColor: rgba(0, 0, 0, 0.7);
-  menuColorActive: #f4f4f5;
-  menuBackground: #304156;
-  menuLightBackground: #ffffff;
-  subMenuBackground: #1f2d3d;
-  subMenuHover: #001528;
-  sideBarWidth: 200px;
-  logoTitleColor: #ffffff;
-  logoLightTitleColor: #001529;
-}
-
-.blue-btn {
-  background: #324157;
-}
-
-.blue-btn:hover {
-  color: #324157;
-}
-
-.blue-btn:hover:before, .blue-btn:hover:after {
-  background: #324157;
-}
-
-.light-blue-btn {
-  background: #3A71A8;
-}
-
-.light-blue-btn:hover {
-  color: #3A71A8;
-}
-
-.light-blue-btn:hover:before, .light-blue-btn:hover:after {
-  background: #3A71A8;
-}
-
-.red-btn {
-  background: #C03639;
-}
-
-.red-btn:hover {
-  color: #C03639;
-}
-
-.red-btn:hover:before, .red-btn:hover:after {
-  background: #C03639;
-}
-
-.pink-btn {
-  background: #E65D6E;
-}
-
-.pink-btn:hover {
-  color: #E65D6E;
-}
-
-.pink-btn:hover:before, .pink-btn:hover:after {
-  background: #E65D6E;
-}
-
-.green-btn {
-  background: #30B08F;
-}
-
-.green-btn:hover {
-  color: #30B08F;
-}
-
-.green-btn:hover:before, .green-btn:hover:after {
-  background: #30B08F;
-}
-
-.tiffany-btn {
-  background: #4AB7BD;
-}
-
-.tiffany-btn:hover {
-  color: #4AB7BD;
-}
-
-.tiffany-btn:hover:before, .tiffany-btn:hover:after {
-  background: #4AB7BD;
-}
-
-.yellow-btn {
-  background: #FEC171;
-}
-
-.yellow-btn:hover {
-  color: #FEC171;
-}
-
-.yellow-btn:hover:before, .yellow-btn:hover:after {
-  background: #FEC171;
-}
-
-.pan-btn {
-  font-size: 14px;
-  color: #fff;
-  padding: 14px 36px;
-  border-radius: 8px;
-  border: none;
-  outline: none;
-  transition: 600ms ease all;
-  position: relative;
-  display: inline-block;
-}
-
-.pan-btn:hover {
-  background: #fff;
-}
-
-.pan-btn:hover:before, .pan-btn:hover:after {
-  width: 100%;
-  transition: 600ms ease all;
-}
-
-.pan-btn:before, .pan-btn:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 2px;
-  width: 0;
-  transition: 400ms ease all;
-}
-
-.pan-btn::after {
-  right: inherit;
-  top: inherit;
-  left: 0;
-  bottom: 0;
-}
-
-.custom-button {
-  display: inline-block;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  background: #fff;
-  color: #fff;
-  -webkit-appearance: none;
-  text-align: center;
-  box-sizing: border-box;
-  outline: 0;
-  margin: 0;
-  padding: 10px 15px;
-  font-size: 14px;
-  border-radius: 4px;
-}
-
-body {
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-}
-
-label {
-  font-weight: 700;
-}
-
-html {
-  height: 100%;
-  box-sizing: border-box;
-}
-
-#app {
-  height: 100%;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-.no-padding {
-  padding: 0px !important;
-}
-
-.padding-content {
-  padding: 4px 0;
-}
-
-a:focus,
-a:active {
-  outline: none;
-}
-
-a,
-a:focus,
-a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-}
-
-div:focus {
-  outline: none;
-}
-
-.fr {
-  float: right;
-}
-
-.fl {
-  float: left;
-}
-
-.pr-5 {
-  padding-right: 5px;
-}
-
-.pl-5 {
-  padding-left: 5px;
-}
-
-.block {
-  display: block;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.inlineBlock {
-  display: block;
-}
-
-.clearfix:after {
-  visibility: hidden;
-  display: block;
-  font-size: 0;
-  content: " ";
-  clear: both;
-  height: 0;
-}
-
-aside {
-  background: #eef1f6;
-  padding: 8px 24px;
-  margin-bottom: 20px;
-  border-radius: 2px;
-  display: block;
-  line-height: 32px;
-  font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  color: #2c3e50;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-aside a {
-  color: #337ab7;
-  cursor: pointer;
-}
-
-aside a:hover {
-  color: #20a0ff;
-}
-
-.app-container {
-  padding: 20px;
-}
-
-.components-container {
-  margin: 30px 50px;
-  position: relative;
-}
-
-.pagination-container {
-  margin-top: 30px;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.sub-navbar {
-  height: 50px;
-  line-height: 50px;
-  position: relative;
-  width: 100%;
-  text-align: right;
-  padding-right: 20px;
-  transition: 600ms ease position;
-  background: linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%);
-}
-
-.sub-navbar .subtitle {
-  font-size: 20px;
-  color: #fff;
-}
-
-.sub-navbar.draft {
-  background: #d0d0d0;
-}
-
-.sub-navbar.deleted {
-  background: #d0d0d0;
-}
-
-.link-type,
-.link-type:focus {
-  color: #337ab7;
-  cursor: pointer;
-}
-
-.link-type:hover,
-.link-type:focus:hover {
-  color: #20a0ff;
-}
-
-.filter-container {
-  padding-bottom: 10px;
-}
-
-.filter-container .filter-item {
-  display: inline-block;
-  vertical-align: middle;
-  margin-bottom: 10px;
-}
-
-.multiselect {
-  line-height: 16px;
-}
-
-.multiselect--active {
-  z-index: 1000 !important;
-}
-
-.build {
-  border-radius: 4px;
-}
-
-.list {
-  border-radius: 4px;
-}

src/views/message/addMessage.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="message-add" :style="{height:height,width:width}"  >
-    
+  <div class="message-add">
+
     <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
     <div class="message-add-box">
       <el-form :model="message" :rules="rules" ref="form" label-width="100px">

src/views/message/messageDetails.vue

@@ -1,84 +1,87 @@
 <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 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 id="noticeContent">
+        邮贝数字邮局，是由中国邮政集团有限公司北京市公司设立，同时使用人民日报全国党媒联盟链进行数字邮品和数字产品的登记、认证与确权，服务广大集邮用户和数字收藏爱好者的邮政官方数字邮品和数字产品发行平台。邮贝数字邮局由北京游贝数字科技有限公司负责运营。
       </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;
+  </div>
+</template>
+
+
+
+<style scoped>
+#returnBtn{
     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)
-      }
+    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: "",
+      noticeContent: ""
+    };
+  },
+  mounted() {
+    //获取到当前公告的标题和时间
+    this.noticeTitle = document.querySelector("#noticeTitle");
+    this.noticeTime = document.querySelector("#noticeTime");
+    this.noticeContent = document.querySelector("#noticeContent");
+    noticeTitle.innerHTML = this.$route.query.title;
+    noticeTime.innerHTML = this.$route.query.publishTime;
+    noticeContent.innerHTML = this.$route.query.content;
+  },
+  methods:{
+    //返回上一页
+    returnBtn(){
+        this.$router.go(-1)
     }
-  };
-  </script>
+  }
+};
+</script>

src/views/message/messageList.vue

@@ -1,281 +1,273 @@
 <template>
-    <div class="right" :style="{ height: height, width: width }">
-      <div class="up">
-        <div>
-          <div class="up-title"><i class="el-icon-search"></i>筛选搜索</div>
-          <div class="btn">
-            <el-button plain>重置</el-button>
-            <el-button type="primary" plain>查询列表</el-button>
-          </div>
-        </div>
-        <div class="left-up">
-          <div class="up-input-title">
-            消息标题:<el-input v-model="input" class="up-input" placeholder="请输入内容"></el-input>
-          </div>
-          <div class="up-input-title-right">
-            <span class="demonstration">发布时间:</span>
-            <el-date-picker v-model="value2" type="datetimerange" class="up-input-right" :picker-options="pickerOptions"
-              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
-            </el-date-picker>
-          </div>
+  <div class="right">
+    <div class="up">
+      <div>
+        <div class="up-title"><i class="el-icon-search"></i>筛选搜索</div>
+        <div class="btn">
+          <el-button plain @click="empty">重置</el-button>
+          <el-button type="primary" plain @click="check">查询列表</el-button>
         </div>
       </div>
-      <div class="down">
-        <div class="down-add">
-          <el-row :gutter="24">
-            <el-col :span="22" class="down-title"> <i class="el-icon-tickets">消息列表</i> </el-col>
-            <el-col :span="2"> <el-button id="addBtn" size="small" @click="addNoticce">添加</el-button> </el-col>
-          </el-row>
+      <div class="left-up">
+        <div class="up-input-title">
+          消息标题:<el-input v-model="input" class="up-input" placeholder="请输入内容"></el-input>
         </div>
-        <div class="down-table">
-          <el-table :data="tableData" 
-          order style="width: 100%" class="messagetable">
-            <el-table-column prop="id" label="ID">
-            </el-table-column>
-            <el-table-column :formatter="stateFormat" prop="messageTitle" label="消息标题">
-            </el-table-column>
-            <el-table-column prop="phoneNumber" label="手机号">
-            </el-table-column>
-            <el-table-column prop="publishTime" label="发布时间">
-            </el-table-column>
-            <el-table-column prop="operate" label="操作">
-              <template slot-scope="scope">
-                <el-button size="mini" type="text" @click="viewDetails(scope.$index)">查看详情</el-button>
-                <el-popconfirm title="你确定删除本条消息吗？" @confirm="deleteMessage(scope.$index)">
-                  <el-button class="btn-delete" size="mini" type="text" icon="el-icon-delete"
-                     slot="reference">删除</el-button>
-                </el-popconfirm>
-              </template>
-            </el-table-column>
-          </el-table>
+        <div class="up-input-title-right">
+          <span class="demonstration">发布时间:</span>
+          <el-date-picker v-model="value2" type="datetimerange" class="up-input-right" range-separator="至"
+            start-placeholder="开始日期" end-placeholder="结束日期" align="right">
+          </el-date-picker>
         </div>
       </div>
-      <div class="bottom">
-        <div class="bottom-page">
-          <el-pagination  layout="prev, pager, next" :total="mockMessageList.length"  @size-change="handleSizeChange"
-        @current-change="handleCurrentChange">
-          </el-pagination>
-        </div>
-        <span class="bottom-number">共{{ mockMessageList.length }}条 </span>
+    </div>
+    <div class="down">
+      <div class="down-add">
+        <el-row :gutter="24">
+          <el-col :span="22" class="down-title"> <i class="el-icon-tickets">消息列表</i> </el-col>
+          <el-col :span="2"> <el-button id="addBtn" size="small" @click="addNoticce">添加</el-button> </el-col>
+        </el-row>
       </div>
+      <div class="down-table">
+        <el-table :data="tableData" order style="width: 100%" class="messagetable">
+          <el-table-column type="index" label="ID" align="center">
+          </el-table-column>
+          <el-table-column :formatter="stateFormat" prop="messageTitle" label="消息标题" align="center">
+          </el-table-column>
+          <el-table-column prop="phoneNumber" label="手机号" align="center">
+          </el-table-column>
+          <el-table-column prop="publishTime" label="发布时间" align="center">
+          </el-table-column>
+          <el-table-column prop="operate" label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="viewDetails(scope.row)">查看详情</el-button>
+              <el-popconfirm title="你确定删除本条消息吗？" @confirm="deleteM(scope.row)">
+                <el-button class="btn-delete" size="mini" type="text" icon="el-icon-delete"
+                  slot="reference">删除</el-button>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="bottom">
+      <el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next" :total="total"
+        id="page">
+      </el-pagination>
     </div>
-  </template>
-  <script>
-  // mock 版本
-  import { getMessage } from '../../api/message/mock/message.js'
-  
-  
-  
-  //非mock版本
-  
-  
-  export default {
-    props: {
-  
+  </div>
+</template>
+<script>
+import { getMessage, searchMessage, deleteMessage } from '../../api/message/message'
+export default {
+  data() {
+    return {
+      tableData: [],
+      pageData: {
+        page: 1,
+        limit: 10
+      },
+      total: 1,
+      input: "",
+      value2: ""
+    }
+  },
+  mounted() {
+    this.getMockMessageList();
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    getMockMessageList() {
+      getMessage(this.pageData).then((res) => {
+        this.tableData = res.list
+        this.total = res.count;
+      })
+    },
+    handleCurrentChange(newPage) {
+      this.pageData.page = newPage;
+      this.getMockMessageList();
     },
-    data() {
-      return {
-        tableData: [],
-        input: "",
-        value2: "",
-        mock: "",
-        mockMessageList: [],
-        currentPage : 1,
-        pagesize : 10 
+    /**搜索按钮 */
+    check() {
+      if (this.input) {
+        let con = {
+          name: this.input
+        }
+        searchMessage(con).then((data) => {
+          this.tableData = data.list;
+          this.total = data.count;
+        })
+      } else {
+        this.getMockMessageList();
       }
     },
-    mounted() {
+    empty() {
+      this.input = "";
       this.getMockMessageList();
-    
     },
-    beforeDestroy() {
+    stateFormat(row, column, cellValue) {
+      if (!cellValue) return ''
+      if (cellValue.length > 15) {       //最长固定显示10个字符
+        return cellValue.slice(0, 15) + '...'
+      }
+      return cellValue
     },
-    methods: {
-      getMockMessageList() {
-        getMessage().then((res) => {
-          this.mockMessageList = res.data.list
-          this.getPageData()
-        })
-      },
-      //分页功能
-      getPageData(){
-        console.log(this.mockMessageList);
-        let start = (this.currentPage - 1) * this.pagesize;
-        let end = start + this.pagesize;
-        this.tableData = this.mockMessageList.slice(start, end);
-      },
-      handleSizeChange(val) {
-        this.pagesize = val;
-        this.getPageData();
-      },
-      handleCurrentChange(val) {
-        this.currentPage = val;
-        this.getPageData();
-      },
-      stateFormat(row, column, cellValue) {
-        if (!cellValue) return ''
-        if (cellValue.length > 15) {       //最长固定显示10个字符
-          return cellValue.slice(0, 15) + '...'
+    //删除列表
+    deleteM(row) {
+      deleteMessage({ id: row.id }).then(() => {
+        this.getMockMessageList();
+      })
+    },
+    //查看详情
+    viewDetails(row) {
+      this.$router.push({
+        name: "messageDetails",
+        query: {
+          publishTime: row.publishTime,
+          title: row.messageTitle,
+          content: row.content
         }
-        return cellValue
-      },
-      //删除列表
-      deleteMessage(row) {
-        console.log(row);
-         //console.log(this.tableData[index]);
-          if (this.mockMessageList.length == 0) {
-          
-          } else {
-            this.tableData.splice(row, 1);
-          }
-      },
-      //查看详情
-      viewDetails(row) {
-        this.$router.push({
-          name: "messageDetails",
-          query: {
-            publishTime: '时间',
-            title: '标题'
-          }
-        });
-      },
-      //添加跳转
-      addNoticce() {
-        this.$router.push("/messageList/addMessage");
-      }
+      });
+    },
+    //添加跳转
+    addNoticce() {
+      this.$router.push("/messageList/addMessage");
     }
   }
-  
-  
-  </script>
-  
-  <style scoped>
-  .up {
-    width: 96%;
-    height: 170px;
-    margin-top: 20px;
-    margin-left: 2%;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  
-  }
-  
-  .up-title {
-    font-size: 20px;
-    width: 20%;
-    margin-left: 20px;
-    margin-top: 20px;
-    float: left;
-  }
-  
-  .btn {
-    float: right;
-    padding-right: 3%;
-    margin-top: 2.5%;
-  }
-  
-  .up-input {
-    width: 250px;
-    margin-left: 15px;
-  }
-  
-  .up-input-title {
-  
-    margin-left: 40px;
-  
-    float: left;
-  }
-  
-  .up-input-right {
-    margin-left: 15px;
-    width: 500px;
-  }
-  
-  .up-input-title-right {
-    width: 800px;
-    margin-left: 450px;
-  
-  
-  }
-  
-  .left-up {
-    width: 80%;
-    float: left;
-    height: 37px;
-    margin-top: 50px;
-  }
-  
-  .right-up {
-    width: 16%;
-    margin-top: 2%;
-    float: right;
-  
-  }
-  
-  .anniu {
-    padding-right: 5%;
-  }
-  
-  .down {
-    margin-top: 40px;
-  }
-  
-  .down-add {
-    padding: 10px;
-    margin: 0 27px;
-    border: 1px solid #ccc;
-    border-radius: 2px
-  }
-  
-  .down-title {
-    padding-top: 10px;
-    color: #303133;
-  }
-  
-  .down-table {
-    margin-top: 15px;
-    text-align: center;
-    margin: 35px 27px;
-  }
-  
-  .el-table .el-table__header-wrapper th,
-  .el-table .el-table__fixed-header-wrapper th {
-    word-break: break-word;
-    /* background-color: #f8f8f9; */
-    color: #515a6e;
-    height: 40px;
-    font-size: 13px;
-    text-align: center;
-  }
-  
-  .bottom-number {
-    padding-top: 5px;
-    color: #303133;
-    float: right;
-  }
-  
-  .bottom-page {
-    float: right;
-  }
-  
-  .el-icon-search {
-    padding-right: 10px;
-  }
-  
-  .btn-delete {
-    margin-left: 20px;
-  }
-  
-  /**
-  自适应
-  */
-  /* .demonstration{
-    width: 50%;
-  } */
-  .right {
-    float: none;
-    width: 100%;
-    height: 100%;
-    /* background-color: #9dc3e6; */
-  }
-  </style>
+}
+</script>
+
+<style scoped>
+.up {
+  width: 96%;
+  height: 170px;
+  margin-top: 20px;
+  margin-left: 2%;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+
+}
+
+.up-title {
+  font-size: 20px;
+  width: 20%;
+  margin-left: 20px;
+  margin-top: 20px;
+  float: left;
+}
+
+.btn {
+  float: right;
+  padding-right: 3%;
+  margin-top: 2.5%;
+}
+
+.up-input {
+  width: 250px;
+  margin-left: 15px;
+}
+
+.up-input-title {
+
+  margin-left: 40px;
+
+  float: left;
+}
+
+.up-input-right {
+  margin-left: 15px;
+  width: 500px;
+}
+
+.up-input-title-right {
+  width: 800px;
+  margin-left: 450px;
+
+
+}
+
+.left-up {
+  width: 80%;
+  float: left;
+  height: 37px;
+  margin-top: 50px;
+}
+
+.right-up {
+  width: 16%;
+  margin-top: 2%;
+  float: right;
+
+}
+
+.anniu {
+  padding-right: 5%;
+}
+
+.down {
+  margin-top: 40px;
+}
+
+.down-add {
+  padding: 10px;
+  margin: 0 27px;
+  border: 1px solid #ccc;
+  border-radius: 2px
+}
+
+.down-title {
+  padding-top: 10px;
+  color: #303133;
+}
+
+.down-table {
+  margin-top: 15px;
+  text-align: center;
+  margin: 35px 27px;
+}
+
+.el-table .el-table__header-wrapper th,
+.el-table .el-table__fixed-header-wrapper th {
+  word-break: break-word;
+  /* background-color: #f8f8f9; */
+  color: #515a6e;
+  height: 40px;
+  font-size: 13px;
+  text-align: center;
+}
+
+.bottom-number {
+  padding-top: 5px;
+  color: #303133;
+  float: right;
+}
+
+.bottom-page {
+  float: right;
+}
+
+.el-icon-search {
+  padding-right: 10px;
+}
+
+.btn-delete {
+  margin-left: 20px;
+}
+
+/**
+自适应
+*/
+/* .demonstration{
+  width: 50%;
+} */
+.right {
+  float: none;
+  width: 100%;
+  height: 100%;
+  /* background-color: #9dc3e6; */
+}
+
+.bottom {
+  float: right;
+}
+</style>

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://39.105.160.25:10991`,
+        target: `http://39.105.160.25:10996`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''