From c8d1a9b68c3f05e0c7aff134893bcdab03053225 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Fri, 13 Jan 2023 17:20:20 +0800
Subject: [PATCH] 2023-1-11

---
 src/api/notice/index.js          |  17 +++
 src/layout/components/Navbar.vue | 213 +++++++++++++++++++++++++++----
 2 files changed, 203 insertions(+), 27 deletions(-)
 create mode 100644 src/api/notice/index.js

diff --git a/src/api/notice/index.js b/src/api/notice/index.js
new file mode 100644
index 0000000..d0fece3
--- /dev/null
+++ b/src/api/notice/index.js
@@ -0,0 +1,17 @@
+import request from "@/utils/request";
+
+export function getNotice(params){
+  return request({
+    url:'/api/admin/home/get-notice',
+    method:'get',
+    params
+  })
+}
+
+export function toggleRead(data){
+  return request({
+    url:'/api/admin/home/toggle-read',
+    method:"post",
+    data
+  })
+}
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index e9ea249..eca6cfa 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,56 +1,196 @@
 <template>
   <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
 
     <breadcrumb class="breadcrumb-container" />
 
     <div class="right-menu">
+      <el-dropdown
+        class="message-container"
+        trigger="click"
+        :hide-on-click="false"
+      >
+        <div class="message-wrapper">
+          <i class="el-icon-chat-dot-square" />
+          <span>消息中心</span>
+        </div>
+        <template v-slot:dropdown>
+          <el-dropdown-menu class="message-dropdown">
+            <el-dropdown-item>
+              <Button
+                :ghost="messageStatus !== 2"
+                type="error"
+                size="small"
+                shape="circle"
+                icon="ios-close"
+                @click.native="messageStatus = 2,getNotice()"
+                >未读</Button
+              >
+              <Button
+                :ghost="messageStatus !== 1"
+                type="success"
+                size="small"
+                shape="circle"
+                icon="ios-checkmark"
+                style="margin-left: 10px"
+                @click.native="messageStatus = 1,getNotice()"
+                >已读</Button
+              >
+            </el-dropdown-item>
+            <template v-for="(item, index) in noticeData">
+              <el-dropdown-item :divided="!index">
+                <div style="display: flex; align-items: center">
+                  <div v-for="(value, key) in item.data">
+                    {{ key }} : {{ value }}
+                  </div>
+                  <Button
+                    style="margin-left: 10px;"
+                    size="small"
+                    :type="item.read_at ? 'success' : 'primary'"
+                    :icon="item.read_at ? 'md-checkmark' : 'ios-create-outline'"
+                    >{{ item.read_at ? "已读" : "标为已读" }}</Button
+                  >
+                </div>
+              </el-dropdown-item>
+            </template>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <img src="../../assets/face.jpg" class="user-avatar">
+          <img src="../../assets/face.jpg" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <router-link to="/">
-            <el-dropdown-item>
-              系统首页
-            </el-dropdown-item>
+            <el-dropdown-item> 系统首页 </el-dropdown-item>
           </router-link>
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">退出</span>
+            <span style="display: block">退出</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+
+    <!--    <el-drawer-->
+    <!--      size="36%"-->
+    <!--      append-to-body-->
+    <!--      :visible.sync="showDrawer"-->
+    <!--      direction="rtl">-->
+    <!--      <Table size="small" :loading="isLoading" :columns="columns" :data="noticeData"></Table>-->
+    <!--    </el-drawer>-->
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import Hamburger from "@/components/Hamburger";
 
+import { getNotice, toggleRead } from "@/api/notice";
 export default {
   components: {
     Breadcrumb,
-    Hamburger
+    Hamburger,
+  },
+  data() {
+    return {
+      //   showDrawer:false,
+      // //   messageType:'',
+      //   message: {
+      //     余额不足: "MerchantBalance",
+      //     用户取消单: "OrderItemMemberCancel",
+      //     分发48小时未接收退回: "OrderItemMerchantAutoRecover",
+      //     商家取消订单: "OrderItemMerchantCancel",
+      //     商家退回订单: "OrderItemMerchantReturn",
+      //   },
+
+      //isLoading:false,
+      noticeData: [],
+      messageStatus: 2,
+      // columns:[
+      //   {
+      //     width: 160,
+      //     title:"阅读时间",
+      //     key:"read_at"
+      //   },
+      //   {
+      //     title:"内容",
+      //     render:(h,{row,column,index}) => {
+      //       let getContent = () => {
+      //         let keys = []
+      //         if(row?.data  && typeof row.data === 'object') keys = Object.keys(row?.data)
+      //         return keys.map(item => {
+      //           return h('span',{},`${item}:${row.data[item]}`)
+      //         })
+      //         console.log(keys)
+      //       }
+      //       return h('div',{},getContent())
+      //     }
+      //   },
+      //   {
+      //     title:"操作",
+      //     width:120,
+      //     render:(h,{row,column,index}) => {
+      //       return h('Button',{
+      //         props:row?.read_at ? {
+      //           size:"small",
+      //           type:'success',
+      //           icon:'md-checkmark'
+      //         } : {
+      //           size:"small",
+      //           type:'primary',
+      //           icon:'ios-create-outline'
+      //         },
+      //         on:{
+      //           ['click']:async () => {
+      //             if(row?.read_at) return
+      //
+      //             const res = await toggleRead({
+      //               id:row.id
+      //             })
+      //             this.$message({
+      //               type:'success',
+      //               message:res?.msg || "成功"
+      //             })
+      //             this.messageClick(this.messageType)
+      //           }
+      //         }
+      //       },row?.read_at ? '已读' : '标为已读')
+      //     }
+      //   },
+      // ]
+    };
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar'
-    ])
+    ...mapGetters(["sidebar", "avatar"]),
   },
   methods: {
+    async getNotice() {
+      let res = await getNotice({
+        read_state: this.messageStatus,
+      });
+      console.log(res);
+      this.noticeData = res.data;
+    },
+
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-    }
-  }
-}
+      await this.$store.dispatch("user/logout");
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+    },
+  },
+  mounted() {
+    this.getNotice();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -59,18 +199,18 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -79,7 +219,8 @@ export default {
   }
 
   .right-menu {
-    float: right;
+    display: flex;
+    justify-content: flex-end;
     height: 100%;
     line-height: 50px;
 
@@ -97,10 +238,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
@@ -128,6 +269,24 @@ export default {
         }
       }
     }
+
+    .message-container {
+      margin-right: 20px;
+
+      .message-wrapper {
+        height: 100%;
+
+        padding: 0 6px;
+        & > i {
+          font-weight: 600;
+        }
+        & > span {
+          font-weight: 600;
+
+          padding-left: 6px;
+        }
+      }
+    }
   }
 }
 </style>