站内信

src/api/message.js

@@ -0,0 +1,32 @@
+// 站内信
+import http from '@/utils/request'
+
+// 删除
+export function deleteMessage (data) {
+  return http.post('/authentication/message/website/del', data)
+}
+
+// 删除已读
+export function deleteMessageRead (data) {
+  return http.post('/authentication/message/website/read/del', data)
+}
+
+// 全部已读
+export function setMessageAllRead (data) {
+  return http.post('/authentication/message/website/read/all', data)
+}
+
+// 设置已读
+export function setMessageRead (data) {
+  return http.post('/authentication/message/website/read', data)
+}
+
+// 列表
+export function getMessage (data) {
+  return http.post('/authentication/message/website/list', data)
+}
+
+// 发送
+export function sendMessage (data) {
+  return http.post('/authentication/message/website/send', data)
+}

src/layout/components/LayoutNotification.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-popover
+    placement="bottom"
+    width="400"
+    trigger="click"
+  >
+    <div>
+      <div class="top">
+        通知
+      <div class="tool">
+        <m-button type="primary" size="mini" text class="pa-0">查看全部信息</m-button>
+        <m-button type="primary" size="mini" text class="pa-0">全部标记为已读</m-button>
+      </div>
+      </div>
+      <div class="message">
+        <div v-for="item in items" :key="item.id" class="message-box" :class="{ disabled: item.status === 0 }" @click="onTo(item)">
+          <div class="message-box-title">{{ item.title }}</div>
+          <div class="message-box-content">{{ item.content }}</div>
+          <div class="message-box-footer">
+            <div class="message-box-footer-time">{{ item.time }}</div>
+            <div v-if="item.status === 1" class="message-box-footer-actions">
+              <m-button text type="primary" size="mini" @click.stop="onSet(item)">标记为已读</m-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <el-divider v-if="items.length > 0 && items.length >= total">没有更多消息了</el-divider>
+      <el-empty v-if="items.length === 0" description="暂无通知"></el-empty>
+    </div>
+    <el-badge class="cursor-pointer" slot="reference" :value="badgeValue" :max="99" :hidden="badgeValue === 0">
+      <span class="el-icon-bell"></span>
+    </el-badge>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: 'LayoutNotification',
+  data () {
+    return {
+      activeName: 'inform',
+      total: 0,
+      items: [
+        {
+          title: '您有新的审核提醒',
+          content: '通知内容1',
+          time: '2020-01-01 12:00:00',
+          status: 1,
+          id: '1'
+        },
+        {
+          title: '您有新的审核提醒',
+          content: '通知内容1',
+          time: '2020-01-01 12:00:00',
+          status: 1,
+          id: '2'
+        }
+      ]
+    }
+  },
+  computed: {
+    badgeValue () {
+      return this.items.filter(item => item.status === 1).length
+    }
+  },
+  methods: {
+    onSet (item) {
+      item.status = 0
+    },
+    onTo (item) {
+      this.$message('开发中，敬请期待')
+      // console.log(2)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tool {
+  text-align: right;
+  font-size: 0;
+}
+.top {
+  padding:  10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  border-bottom: 1px solid #eee;
+  color: $theme-color;
+}
+.message {
+  max-height: 600px;
+  overflow: auto;
+  &-box {
+    &.disabled {
+      opacity: .5;
+    }
+    &:hover {
+      background-color: #f5f7fa;
+    }
+    &:not(:last-child) {
+      border-bottom: 1px solid #eee;
+    }
+    cursor: pointer;
+    padding: 10px;
+    &-title {
+      font-size: 14px;
+      font-weight: bold;
+    }
+    &-content {
+      font-size: 12px;
+      color: #999;
+    }
+    &-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 30px;
+      &-time {
+        font-size: 12px;
+        color: #999;
+      }
+      &-actions {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+</style>

src/layout/index.vue

@@ -15,9 +15,7 @@
         </div>
         <div class="layout-body-header-right">
           <div class="navBtn">
-            <el-badge :value="3">
-              <span class="el-icon-bell"></span>
-            </el-badge>
+            <LayoutNotification></LayoutNotification>
           </div>
           <el-dropdown @command="handleCommand">
             <div class="cursor-pointer username btn">
@@ -50,9 +48,10 @@
 <script>
 import { mapGetters } from 'vuex'
 import MenuSide from './components/MenuSide'
+import LayoutNotification from './components/LayoutNotification.vue'
 export default {
   name: 'layoutIndex',
-  components: { MenuSide },
+  components: { MenuSide, LayoutNotification },
   data () {
     return {
       collapse: false,
@@ -164,12 +163,11 @@ export default {
   padding: 0 15px;
   display: flex;
   align-items: center;
-  cursor: pointer;
   font-size: 24px;
   color: #333;
-  &:hover {
-    background: #f5f7f9;
-  }
+  // &:hover {
+  //   background: #f5f7f9;
+  // }
 }
 
 ::v-deep .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {