优化消息通知页面

client/src/pages/other/message.vue

 <template>
   <div>
-    <div class="con-title">消息通知</div>
+    <div class="con-title">通知</div>
     <div class="con-box">
-      <el-collapse accordion v-model="activeNames" @change="handleChange">
+      <el-collapse accordion v-model="activeName" @change="handleChange" v-if="msgList.length">
         <template v-for="(item, index) in msgList">
           <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>
+              <el-badge :is-dot="!item.isShow" class="item">系统通知</el-badge>
             </template>
             <div v-html="item.text"></div>
           </el-collapse-item>
         </template>
       </el-collapse>
-      <div style="height: 0.3rem;"></div>
+      <div class="empty" v-else>您没有收到任何通知</div>
       <el-pagination
+        background
+        layout="prev, pager, next"
         :current-page.sync="page.currentPage"
         :page-size="page.limit"
-        layout="total, prev, pager, next, jumper"
         :total="page.total"
+        :hide-on-single-page="true"
         @current-change="handleCurrentChange"
+        style="margin:0 auto;padding:40px 0;text-align:center;"
       ></el-pagination>
     </div>
   </div>
@@ -33,10 +31,9 @@
 import cAction from '@action'
 
 export default {
-  components: { },
-  data () {
+  data() {
     return {
-      activeNames: ['1'],
+      activeName: null,
       msgList: [],
       page: {
         offset: 0,
@@ -46,29 +43,26 @@ export default {
       }
     }
   },
-  mounted () {
+  beforeMount() {
     this.getData()
   },
   methods: {
-    handleChange (val) {
+    handleChange(val) {
       if (typeof val === 'number' && this.msgList[val].isShow === 0) {
         cAction.Other.setMyMsg(this.msgList[val].id).then(json => {
           this.getData()
           cAction.Other.getNavMsg().then(data => {
             this.$store.commit('myMsg', data.num)
-          }).catch(e => { this.$message.error(e.message) }).finally(() => { })
-        }).catch(e => { this.$message.error(e.message) }).finally(() => { })
+          })
+        })
       }
     },
-    getData () {
-      const pageParam = {
-        offset: this.page.offset,
-        limit: this.page.limit
-      }
-      cAction.Other.getMyMsg(pageParam).then(json => {
-        this.msgList = json.list
-        this.page.total = parseInt(json.count)
-      }).catch(e => { this.$message.error(e.message) }).finally(() => { })
+    getData() {
+      const params = { offset: this.page.offset, limit: this.page.limit }
+      cAction.Other.getMyMsg(params).then(response => {
+        this.msgList = response.list
+        this.page.total = parseInt(response.count)
+      })
     },
     handleCurrentChange() {
       this.page.offset = (this.page.currentPage - 1) * this.page.limit
@@ -79,37 +73,13 @@ export default {
 </script>
 
 <style lang="scss">
-.el-collapse-item__header{
+.el-collapse-item__header {
   line-height: 15px;
 }
-.total-core, .compulsory-core, .elective-core {
-  margin-top: 0.1rem;
-  font-size: 16px;
-  line-height: 36px;
-  .title {
-    float: left;
-    // margin-left: 5px;
-  }
-  .core {
-    float: right;
-    margin-right: 3px;
-    font-size: 12px;
-  }
-}
-.color-box {
-  padding: 0.1rem 0 0.2rem 0;
-  text-align: right;
-  .color {
-    display: inline-block;
-    vertical-align: text-bottom;
-    width: 14px;
-    height: 14px;
-  }
-  .txt {
-    display: inline-block;
-    padding: 0 0.2rem 0 0.1rem;
-    font-size: 14px;
-    line-height: 36px;
-  }
+.empty {
+  padding: 100px;
+  font-size: 18px;
+  color: #5f6368;
+  text-align: center;
 }
 </style>