办事大厅

client/package-lock.json

@@ -10460,6 +10460,11 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vuex": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.3.tgz",
+      "integrity": "sha512-k8vZqNMSNMgKelVZAPYw5MNb2xWSmVgCKtYKAptvm9YtZiOXnRXFWu//Y9zQNORTrm3dNj1n/WaZZI26tIX6Mw=="
+    },
     "watchpack": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",

client/package.json

@@ -75,6 +75,7 @@
     "vue-loader": "^15.9.1",
     "vue-meta-info": "^0.1.7",
     "vue-router": "^3.1.6",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "vuex": "^3.1.3"
   }
 }

client/src/action/OtherAction.js

@@ -11,13 +11,18 @@ export default class OtherAction extends BaseACTION {
           id: _.id,
           text: _.message_body,
           time: _.created_time,
-          isShow: false // 该字段用来做 每条信息的打开、关闭
+          isShow: _.status // 该字段用来做 每条信息的打开、关闭
         }
       })
       return json
     })
   }
 
+  getNavMsg () { return Other.getNavMsg().then(res => res) }
+  /**
+   * 设置消息已读未读
+   */
+  setMyMsg (rid) { return Other.setMyMsg(rid).then(res => res) }
   /**
    * 当前登录用户，检测是否该系统有权限
    */

client/src/action/index.js

@@ -41,7 +41,6 @@ const cAction = {
  * @param {[function]} obj.finallyCallback 最终finally回调，必传
  */
 export const request = (obj) => {
-  console.log(obj, '===========')
   cAction[obj.actionName][obj.functionName](obj.data).then(res => {
     obj.thenCallback(res)
   }).catch(e => {

client/src/api/other_api.js

@@ -5,11 +5,16 @@ export default class OtherAPI extends BaseAPI {
   /**
   * 当前登录用户，检测是否该系统有权限
   */
- getInfo = () => this.post('/user_center/get_user_info', {}, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+  getInfo = () => this.post('/user_center/get_user_info', {}, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
   /**
    * 获取我的消息信息
    */
   getMyMsg = () => this.get('/v2/education/message/my', {})
+  /**
+   * 标记已读未读
+   */
+  setMyMsg = (rid) => this.post(`/v2/education/message/${rid}`, {})
+  getNavMsg = (rid) => this.get('/v2/education/message/num', {})
   /**
    * 调用退出登录
    */

client/src/components/learnSysLayout/navigation.vue

@@ -6,34 +6,37 @@
     </div>
     <!-- <s-language></s-language> -->
     <div class="notify" @click="goNotify()">{{ $t('components.learnSysLayout.navigation.tip') }}
-      <div class="num" v-if="num">{{num}}</div>
+      <div class="num" v-if="this.$store.getters.myMsg">{{ this.$store.getters.myMsg }}</div>
     </div>
   </div>
 </template>
 
 <script>
 // import sLanguage from '@/components/languageSwitch/index.vue'
-// import cAction from '@action'
+import cAction from '../../action'
 
 export default {
   components: {},
   data () {
     return {
-      num: 0
+      num: this.$store.getters.myMsg
     }
   },
   mounted () {
     // request({
     //   component: this,
-    //   actionName: 'msgAction',
-    //   functionName: 'getMyMsg',
+    //   actionName: 'Other',
+    //   functionName: 'getNavMsg',
     //   data: {},
     //   thenCallback: data => {
-    //     this.num = data.length
+    //     this.$store.commit('myMsg', data.num)
     //   },
     //   catchCallback: () => {},
     //   finallyCallback: () => {}
     // })
+    cAction.Other.getNavMsg().then(data => {
+      this.$store.commit('myMsg', data.num)
+    }).catch(e => { this.$message.error(e.message) }).finally(() => { })
   },
   methods: {
     goNotify () {

client/src/main.js

@@ -11,6 +11,7 @@ import Element from 'element-ui'
 import modules from './modules'
 
 import createBefore from './components/beforeEnter'
+import store from './store'
 
 /* 兼容处理 start */
 /* 处理低版本浏览器支持axios finally问题 */
@@ -44,4 +45,4 @@ router.beforeEach((to, from, next) => {
   next()
 })
 
-window.G.$instance_vue = new Vue({ router, i18n, render: (h) => h(App) }).$mount('#app')
+window.G.$instance_vue = new Vue({ router, i18n, store, render: (h) => h(App) }).$mount('#app')

client/src/pages/other/message.vue

@@ -2,9 +2,17 @@
   <div>
     <div class="con-title">消息通知</div>
     <div class="con-box">
-      <el-collapse v-model="activeNames" @change="handleChange">
+      <el-collapse accordion v-model="activeNames" @change="handleChange">
         <template v-for="(item, index) in msgList">
-          <el-collapse-item v-bind:key="index" title="系统通知" :name="index">
+          <el-collapse-item v-bind:key="index" :name="index">
+            <template slot="title">
+              <template v-if="!item.isShow">
+                <el-badge is-dot class="item">系统通知</el-badge>
+              </template>
+              <template v-if="item.isShow">
+                系统通知
+              </template>
+            </template>
             <div v-html="item.text"></div>
           </el-collapse-item>
         </template>
@@ -26,19 +34,32 @@ export default {
     }
   },
   mounted () {
-    cAction.Other.getMyMsg().then(json => {
-      this.msgList = json
-    }).catch(e => { this.$message.error(e.message) }).finally(() => { })
+    this.getData()
   },
   methods: {
     handleChange (val) {
-      console.log(val)
+      if (typeof val === 'number' && this.msgList[val].isShow === 0) {
+        cAction.Other.setMyMsg(this.msgList[val].id).then(json => {
+          this.getData()
+        }).catch(e => { this.$message.error(e.message) }).finally(() => { })
+        cAction.Other.getNavMsg().then(data => {
+          this.$store.commit('myMsg', data.num)
+        }).catch(e => { this.$message.error(e.message) }).finally(() => { })
+      }
+    },
+    getData () {
+      cAction.Other.getMyMsg().then(json => {
+        this.msgList = json
+      }).catch(e => { this.$message.error(e.message) }).finally(() => { })
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+.el-collapse-item__header{
+  line-height: 15px;
+}
 .total-core, .compulsory-core, .elective-core {
   margin-top: 0.1rem;
   font-size: 16px;

client/src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+const state = {
+  myMsg: 111
+}
+const getters = {
+  myMsg (state) {
+    return state.myMsg
+  }
+}
+const mutations = {
+  myMsg(state, sum) {
+    state.myMsg = sum
+  }
+}
+const store = new Vuex.Store({
+  state,
+  getters,
+  mutations
+})
+
+export default store

package-lock.json

@@ -11,6 +11,11 @@
       "version": "0.7.3",
       "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
       "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
+    },
+    "vuex": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.3.tgz",
+      "integrity": "sha512-k8vZqNMSNMgKelVZAPYw5MNb2xWSmVgCKtYKAptvm9YtZiOXnRXFWu//Y9zQNORTrm3dNj1n/WaZZI26tIX6Mw=="
     }
   }
 }