公告消息列表

src/components/MainLayout/MainLayout.vue

@@ -61,28 +61,33 @@
       <img src="./qm-logo.png" class="qm-logo" />
       <ul>
         <li>
-          <router-link class="link" to="/online-exam"
-            >在线考试&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</router-link
-          >
+          <router-link class="link" to="/online-exam">
+            在线考试
+          </router-link>
         </li>
         <li>
-          <router-link class="link" to="/online-practice"
-            >在线练习&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</router-link
-          >
+          <router-link class="link" to="/online-practice">
+            在线练习
+          </router-link>
         </li>
         <li>
-          <router-link class="link" to="/offline-exam"
-            >离线考试&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</router-link
-          >
+          <router-link class="link" to="/offline-exam">
+            离线考试
+          </router-link>
         </li>
         <li>
-          <router-link class="link" to="/password"
-            >修改密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</router-link
-          >
+          <router-link class="link" to="/site-message">
+            公告通知
+          </router-link>
+        </li>
+        <li>
+          <router-link class="link" to="/password">
+            修改密码
+          </router-link>
         </li>
       </ul>
     </nav>
-    <footer class="footer">©️2018 启明泰和</footer>
+    <footer class="footer">©️2019 启明泰和</footer>
   </div>
 </template>
 
@@ -193,6 +198,7 @@ export default {
   background-repeat: no-repeat;
   background-position: 30px 50%;
   /* margin-left: -40px; */
+  padding-right: 20px;
   line-height: 40px;
   width: 100%;
   display: inline-block;

src/features/SiteMessage/SiteMessageHome.vue

@@ -0,0 +1,158 @@
+<template>
+  <main-layout>
+    <i-breadcrumb
+      style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px;
+                         background-color: #fafafa;"
+    >
+      当前所在位置：
+      <i-breadcrumb-item>公告消息</i-breadcrumb-item>
+    </i-breadcrumb>
+
+    <div class="home">
+      <div style="font-size: 18px; font-weight: 500; color: #222C32;">
+        公告通知
+      </div>
+      <i-button>
+        <div class="mark-read-block">
+          <img src="./svgs/sms-read.svg" /> &nbsp;标记为已读
+        </div>
+      </i-button>
+    </div>
+    <div class="site-message-container">
+      <Table
+        border
+        ref="selection"
+        :columns="columns"
+        :data="messageList"
+      ></Table>
+    </div>
+  </main-layout>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+  name: "SiteMessageHome",
+  data() {
+    return {
+      columns: [
+        {
+          type: "selection",
+          width: 60,
+          align: "center",
+        },
+        {
+          title: "标题",
+          key: "title",
+          render: (h, params) => {
+            // return h("div", [
+            //   h("Icon", {
+            //     props: {
+            //       type: "person",
+            //     },
+            //   }),
+            //   h("strong", params.row.title),
+            // ]);
+            return (
+              <router-link
+                to={"/site-message/" + params.row.id}
+                style="display: flex"
+              >
+                <img
+                  class={
+                    params.row.hasRead
+                      ? "mhome-message-read"
+                      : "mhome-message-unread"
+                  }
+                />
+                <span class="mhome-message-title">{params.row.title}</span>
+              </router-link>
+            );
+          },
+        },
+        {
+          title: "发送时间",
+          key: "publishTime",
+          width: "150",
+        },
+      ],
+      messageList: [],
+    };
+  },
+  async created() {
+    try {
+      const noticeRes = (await this.$http.get(
+        "/api/ecs_exam_work/notice/getUserNoticeList"
+      )).data;
+      // const noticeRes = [
+      //   {
+      //     content: "<div>公告<img src='./svgs/sms-read.svg' /></div>",
+      //     hasRead: true,
+      //     id: 0,
+      //     publishTime: "2019-07-08T11:23:34.646Z",
+      //     publisher: "string",
+      //     title: "string",
+      //   },
+      // ];
+      // noticeRes.forEach(
+      //   v =>
+      //     (v.publishTime = moment(v.publishTime).format("YYYY-MM-DD hh:mm:ss"))
+      // );
+      this.messageList = noticeRes;
+    } catch (error) {
+      this.$Message.error({
+        content: "获取公告通知异常",
+        duration: 15,
+        closable: true,
+      });
+      return true;
+    }
+  },
+};
+</script>
+
+<style scoped>
+.home {
+  margin: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.mark-read-block {
+  line-height: 16px;
+  /* border-radius: 6px;
+  border: 1px solid rgba(238, 238, 238, 1); */
+
+  /* padding: 0 10px; */
+
+  display: flex;
+  align-items: center;
+}
+
+.site-message-container {
+  display: flex;
+  flex-direction: column;
+  margin: 20px;
+  padding: 20px;
+  border: 1px solid #eeeeee;
+  border-radius: 6px;
+}
+</style>
+
+<style>
+.mhome-message-read {
+  width: 16px;
+  height: 14px;
+  background-image: url(./svgs/sms-read.svg);
+}
+.mhome-message-unread {
+  width: 16px;
+  height: 14px;
+  background-image: url(./svgs/sms-unread.svg);
+}
+.mhome-message-title {
+  line-height: 14px;
+  margin-left: 8px;
+}
+</style>

src/features/SiteMessage/svgs/back.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>返回</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="9-管理端-公告详情" transform="translate(-1327.000000, -120.000000)">
+            <g id="返回" transform="translate(1327.000000, 120.000000)">
+                <polyline id="Path-2" stroke="#CCCCCC" stroke-width="2" transform="translate(4.500000, 6.000000) scale(-1, 1) translate(-4.500000, -6.000000) " points="2 1 7 6 2 11"></polyline>
+                <rect id="Rectangle-8" fill="#CCCCCC" x="2" y="5" width="12" height="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

src/features/SiteMessage/svgs/sms-unread.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>sms-未读</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="8-考生端-公告列表" transform="translate(-260.000000, -235.000000)" fill="#FDAD08">
+            <g id="sms-未读" transform="translate(260.000000, 235.000000)">
+                <path d="M10.2612161,6.01241042 L15.9078877,0.460631922 C15.7791453,0.191589577 15.5045861,0.00576547231 15.1865006,0.00576547231 L0.799296703,0.00576547231 C0.481230769,0.00576547231 0.206652015,0.191589577 0.07798779,0.460631922 L5.7245812,6.01241042 C6.97732845,6.80249511 9.00846886,6.80249511 10.2612161,6.01241042 Z M0,1.563557 L0,10.4731661 L4.69352869,6.00699674 L0,1.563557 Z M11.2922686,6.00699674 L15.9857973,10.4731661 L15.9857973,1.563557 L11.2922686,6.00699674 Z M10.5570891,6.70301629 C9.14094261,7.60211726 6.8448547,7.60211726 5.42872772,6.70301629 L5.21726984,6.50284691 L0.0903540904,11.569544 C0.223746032,11.8252964 0.490998779,11.9999609 0.799296703,11.9999609 L15.1865006,11.9999609 C15.4948181,11.9999609 15.7621294,11.8252964 15.8954432,11.569544 L10.768547,6.50284691 L10.5570891,6.70301629 Z" id="Fill-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/plugins/iview.js

@@ -19,6 +19,7 @@ import {
   Option,
   Progress,
   Alert,
+  Table,
 } from "iview";
 Vue.component("Button", Button);
 Vue.component("Form", Form);
@@ -37,6 +38,7 @@ Vue.component("Notice", Notice);
 Vue.component("Option", Option);
 Vue.component("Progress", Progress);
 Vue.component("Alert", Alert);
+Vue.component("Table", Table);
 
 Vue.prototype.$Message = Message;
 Vue.prototype.$Modal = Modal;

src/router.js

@@ -11,6 +11,7 @@ import OnlinePracticeHome from "./features/OnlinePractice/OnlinePracticeHome.vue
 import OnlinePracticeRecordList from "./features/OnlinePractice/OnlinePracticeRecordList.vue";
 import OnlinePracticeRecordDetail from "./features/OnlinePractice/OnlinePracticeRecordDetail.vue";
 import Login from "./features/Login/Login.vue";
+import SiteMessageHome from "./features/SiteMessage/SiteMessageHome.vue";
 import Password from "./features/Password/Password.vue";
 
 Vue.use(Router);
@@ -69,6 +70,11 @@ let router = new Router({
       name: "OfflineExamHome",
       component: OfflineExamHome,
     },
+    {
+      path: "/site-message",
+      name: "SiteMessageHome",
+      component: SiteMessageHome,
+    },
     {
       path: "/password",
       name: "Password",