站内消息详情显示

src/features/OnlineExam/OnlineExamHome.vue

@@ -19,6 +19,7 @@
 <script>
 import EcsOnlineList from "./OnlineExamList.vue";
 import PhoneVerifyForDD from "./PhoneVerifyForDD.vue";
+import { mapMutations, mapState } from "vuex";
 
 export default {
   name: "OnlineExamHome",
@@ -79,10 +80,46 @@ export default {
     );
 
     this.courses = res.data;
+
+    try {
+      const noticeRes = (await this.$http.get(
+        "/api/ecs_exam_work/notice/getUserNoticeList?" +
+          this.user.id +
+          this.siteMessagesTimeStamp
+      )).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.updateSiteMessages(noticeRes);
+    } catch (error) {
+      console.log(error);
+      this.$Message.error({
+        content: "获取公告通知异常",
+        duration: 15,
+        closable: true,
+      });
+    }
   },
   beforeDestroy() {
     clearInterval(this.interval);
   },
+  computed: {
+    ...mapState(["user", "siteMessagesTimeStamp"]),
+  },
+  methods: {
+    ...mapMutations(["updateSiteMessages"]),
+  },
   components: {
     "ecs-online-list": EcsOnlineList,
     PhoneVerifyForDD,

src/features/SiteMessage/SiteMessageDetail.vue

@@ -0,0 +1,87 @@
+<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 style="display: flex; flex-direction: row-reverse;">
+      <div style=" margin-top: 20px; margin-right: 20px;">
+        <i-button>
+          <div class="back-block" @click="() => this.$router.back()">
+            <img src="./svgs/back.svg" /> &nbsp;返回列表
+          </div>
+        </i-button>
+      </div>
+    </div>
+
+    <div class="site-message-container">
+      <h3
+        style="font-size:24px;font-weight:500;color:rgba(34,34,34,1);line-height:33px;"
+      >
+        {{ message.title }}
+      </h3>
+      <h5
+        style="font-size:13px;font-weight:400;color:rgba(153,153,153,1);line-height:18px;margin-top: 16px;margin-bottom: 40px;"
+      >
+        发布时间: {{ message.publishTime }}
+      </h5>
+      <div class="site-message-content" v-html="message.content"></div>
+    </div>
+  </main-layout>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  name: "SiteMessageDetail",
+  async mounted() {
+    if (!this.message.hasRead) {
+      await this.$http.post(
+        "/api/ecs_exam_work/notice/updateNoticeReadStatus?noticeId=" +
+          this.message.id
+      );
+      window._hmt.push(["_trackEvent", "站内消息详情页面", "发送已读成功"]);
+      this.updateSiteMessagesTimeStamp(Date.now());
+    }
+  },
+  methods: {
+    ...mapMutations(["updateSiteMessagesTimeStamp"]),
+  },
+  computed: {
+    ...mapState(["siteMessages"]),
+    message() {
+      if (this.siteMessages) {
+        return this.siteMessages.find(v => v.id === +this.$route.params.id);
+      }
+      return null;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.back-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>

src/features/SiteMessage/SiteMessageHome.vue

@@ -13,7 +13,7 @@
         公告通知
       </div>
       <i-button>
-        <div class="mark-read-block">
+        <div class="mark-read-block" @click="markRead">
           <img src="./svgs/sms-read.svg" /> &nbsp;标记为已读
         </div>
       </i-button>
@@ -23,14 +23,15 @@
         border
         ref="selection"
         :columns="columns"
-        :data="messageList"
+        :data="siteMessages"
       ></Table>
     </div>
   </main-layout>
 </template>
 
 <script>
-import moment from "moment";
+// import moment from "moment";
+import { mapState, mapMutations } from "vuex";
 
 export default {
   name: "SiteMessageHome",
@@ -46,14 +47,6 @@ export default {
           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}
@@ -77,37 +70,46 @@ export default {
           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;
-    }
+  async mounted() {
+    window._hmt.push(["_trackEvent", "站内消息列表页面", "进入页面"]);
+    await this.getList();
+  },
+  methods: {
+    ...mapMutations(["updateSiteMessages", "updateSiteMessagesTimeStamp"]),
+    async getList() {
+      try {
+        const noticeRes = (await this.$http.get(
+          "/api/ecs_exam_work/notice/getUserNoticeList?" +
+            this.user.id +
+            this.siteMessagesTimeStamp
+        )).data;
+        this.updateSiteMessages(noticeRes);
+      } catch (error) {
+        console.log(error);
+        this.$Message.error({
+          content: "获取公告通知异常",
+          duration: 15,
+          closable: true,
+        });
+      }
+    },
+    async markRead() {
+      // console.log(this.$refs.selection.getSelection());
+      const selectIds = this.$refs.selection.getSelection().map(v => v.id);
+
+      await this.$http.post(
+        "/api/ecs_exam_work/notice/updateNoticeReadStatus?noticeId=" +
+          selectIds.join(",")
+      );
+      window._hmt.push(["_trackEvent", "站内消息详情页面", "发送已读成功"]);
+      this.updateSiteMessagesTimeStamp(Date.now());
+      await this.getList();
+    },
+  },
+  computed: {
+    ...mapState(["user", "siteMessages", "siteMessagesTimeStamp"]),
   },
 };
 </script>

src/router.js

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

src/store.js

@@ -192,6 +192,8 @@ export default new Vuex.Store({
   state: {
     user: initUser,
     timeDifference: 0,
+    siteMessages: [],
+    siteMessagesTimeStamp: Date.now(),
   },
   mutations: {
     updateUser(state, payload) {
@@ -200,6 +202,12 @@ export default new Vuex.Store({
     updateTimeDifference(state, payload) {
       state = Object.assign(state, { timeDifference: payload });
     },
+    updateSiteMessages(state, payload) {
+      state = Object.assign(state, { siteMessages: payload });
+    },
+    updateSiteMessagesTimeStamp(state, payload) {
+      state = Object.assign(state, { siteMessagesTimeStamp: payload });
+    },
   },
   actions: {},
   modules: {

vue.config.js

@@ -133,7 +133,7 @@ module.exports = {
         },
         {
           // Match any same-origin request that contains 'api'.
-          // 产品名称有可能每分钟都更新
+          // 客观分10分钟更新一次
           urlPattern: /\/api\/ecs_oe_student\/examScore\/queryObjectiveScoreList\?examStudentId=/,
           handler: "cacheFirst",
           options: {
@@ -146,6 +146,20 @@ module.exports = {
             },
           },
         },
+        {
+          // 站内消息3分钟获取一次
+          urlPattern: /\/api\/ecs_exam_work\/notice\/getUserNoticeList\?/,
+          handler: "cacheFirst",
+          options: {
+            cacheableResponse: {
+              statuses: [0, 200],
+            },
+            cacheName: "site-messages-list-cache",
+            expiration: {
+              maxAgeSeconds: 3 * 60,
+            },
+          },
+        },
       ],
     },
   },