增加全局通知功能

增加全局通知功能

src/layout/components/Navbar.vue

@@ -16,7 +16,156 @@
         </el-tooltip>
         <lang-select class="right-menu-item hover-effect" />
       </template> -->
-      
+      <div class="noticeIconBox">
+        <img src="@/assets/public/nav/notice1.png" class="noticeIconImg" @click="showTabs = !showTabs"/>
+        <span class="unreadCount">{{msg.count}}</span>
+        <!-- <img src="@/assets/public/nav/arrowDown.png" class="arrowDown" /> -->
+
+        <div class="noticeTabsBox" v-if="showTabs" ref="noticeTabsBox">
+          <div class="noticeTabsTitleBox">
+            <div :class="{'noticeTabs': true, 'active': tabsIndex == 1}" @click="changeTabs(1)">
+              <div class="noticeTabsItem">
+                资讯
+                <span class="noticeMessageNew" v-if="msg.apply_articale.length > 0"></span>
+              </div>
+            </div>
+            <div :class="{'noticeTabs': true, 'active': tabsIndex == 2}" @click="changeTabs(2)" v-if="msg.good">
+              <div class="noticeTabsItem">
+                商品
+                <span class="noticeMessageNew" v-if="msg.good.length > 0"></span>
+              </div>
+            </div>
+            <!-- <div :class="{'noticeTabs': true, 'active': tabsIndex == 3}" @click="changeTabs(3)">
+              <div class="noticeTabsItem">
+                求职招聘
+                <span class="noticeMessageNew"></span>
+              </div>
+            </div> -->
+          </div>
+          <div class="noticeTabsLinkLine">
+            <div v-if="userType == 10000">
+              <div v-if="tabsIndex == 1" @click="goToPath(1,0)">待审核列表</div>
+              <div v-if="tabsIndex == 2" @click="goToPath(2,0)">待审核列表</div>
+              <div v-if="tabsIndex == 3" @click="goToPath(3,0)">待审核列表</div>
+            </div>
+            <div v-else>
+              <div v-if="tabsIndex == 1" @click="goToPath(1,-1)">资讯列表</div>
+              <div v-if="tabsIndex == 2" @click="goToPath(2,-1)">商品列表</div>
+              <div v-if="tabsIndex == 3" @click="goToPath(3,-1)">求职招聘列表</div>
+            </div>
+          </div>
+          <div class="noticeTabsDataBox" v-if="tabsIndex==1">
+            <div v-if="msg.apply_articale && msg.apply_articale.length > 0">
+              <div class="noticeTabsDataItem" v-for="item in msg.apply_articale" :key="item.id" @click="goToPath(1,item.id)">
+                <div class="noticeTabsDataItemImg newsIcon">
+                  <img src="@/assets/public/nav/message-news.png">
+                </div>
+                <div class="noticeTabsDataItemContent">
+                  <div class="noticeNewsTitle">{{item.title}}</div>
+                  <div class="noticeNewsTime">{{item.updated_at}}</div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="noticeTabsDataItemEmpty">
+              <div class="noticeEmpty">
+                <img src="@/assets/public/nav/message-empty.png">
+              </div>
+              <div class="noticeEmptyText">
+                暂无消息
+              </div>
+            </div>
+          </div>
+          <div class="noticeTabsDataBox" v-if="tabsIndex==2">
+            <div v-if="msg.good && msg.good.length > 0">
+              <div class="noticeTabsDataItem" v-for="item in msg.good" :key="item.id" @click="goToPath(2,item.id)">
+                <div class="noticeTabsDataItemImg newsIcon">
+                  <img src="@/assets/public/nav/message-news.png">
+                </div>
+                <div class="noticeTabsDataItemContent">
+                  <div class="noticeNewsTitle">{{item.name}}</div>
+                  <div class="noticeNewsTime">{{item.updated_at}}</div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="noticeTabsDataItemEmpty">
+              <div class="noticeEmpty">
+                <img src="@/assets/public/nav/message-empty.png">
+              </div>
+              <div class="noticeEmptyText">
+                暂无消息
+              </div>
+            </div>
+          </div>
+          <!-- <div class="noticeTabsDataBox" v-if="tabsIndex==3">
+            
+          </div> -->
+        </div>
+      </div>
+
+      <!--刘剑 --> 
+      <!--<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+        <div class="avatar-wrapper">
+          <div class="avatar-wrapper">
+            <img src="@/assets/public/nav/notice1.png" class="user-notice" style="width:40px;height:40px;" />
+            <span class="unread-count">{{msg.count}}</span>
+            <img src="@/assets/public/nav/arrowDown.png" class="arrowDown" />
+          </div>
+        </div>
+        <el-dropdown-menu slot="dropdown" style="width: 200px;">
+          <router-link to="/examine" v-if="msg.apply_articale && msg.apply_articale.length > 0">
+            <div class="userMenuDownItem">
+              <el-dropdown-item>
+                <span style="display:block; text-align: center; width: 100%; color: #409EFF;">审核列表</span>
+              </el-dropdown-item>
+            </div>
+          </router-link>
+          <router-link :to="`/creatNews?id=${item.id}`" v-for="item in msg.apply_articale" :key="item.id">
+            <div class="userMenuDownItem" style="width: 200px;">
+              <el-dropdown-item divided style="width: 200px;">
+                <el-tooltip :content="item.title" effect="dark" placement="top">
+                  <span style="display:block;width: 150px;" :alt="item.title">{{ item.title.substring(0, 10) }}</span>
+                </el-tooltip>
+              </el-dropdown-item>
+            </div>
+          </router-link>
+          <router-link to="/hall" v-if="msg.chat && msg.chat.length > 0">
+            <div class="userMenuDownItem">
+              <el-dropdown-item>
+                <span style="display:block;  color: #409EFF;">未读单聊</span>
+              </el-dropdown-item>
+            </div>
+          </router-link>
+          <router-link to="/hall" v-for="item in msg.chat" :key="item.id">
+            <div class="userMenuDownItem" style="width: 200px;">
+              <el-dropdown-item divided style="width: 200px;">
+                <el-tooltip :content="item.content" effect="dark" placement="top">
+                  <span style="display:block;width: 150px;" :alt="item.content">{{ item.content.substring(0, 10)
+                  }}</span>
+                </el-tooltip>
+              </el-dropdown-item>
+            </div>
+          </router-link>
+          <router-link to="/hall" v-if="msg.chat_group && msg.chat_group.length > 0">
+            <div class="userMenuDownItem">
+              <el-dropdown-item>
+                <span style="display:block; color: #409EFF;">未读群聊</span>
+              </el-dropdown-item>
+            </div>
+          </router-link>
+          <router-link to="/hall" v-for="item in msg.chat_group" :key="item.id">
+            <div class="userMenuDownItem" style="width: 200px;">
+              <el-dropdown-item divided style="width: 200px;">
+                <el-tooltip :content="item.content" effect="dark" placement="top">
+                  <span style="display:block;width: 150px;" :alt="item.content">{{ item.content.substring(0, 10)
+                  }}</span>
+                </el-tooltip>
+              </el-dropdown-item>
+            </div>
+          </router-link>
+        </el-dropdown-menu>
+      </el-dropdown> -->
+
+      <!-- 用户头像和菜单 --> 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <!-- <img src="@/assets/public/nav/notice.png" class="user-notice"> -->
@@ -56,6 +205,7 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
+
     </div>
   </div>
 </template>
@@ -72,6 +222,7 @@ import Search from '@/components/HeaderSearch'
 import axios from 'axios';
 import router, { resetRouter } from '@/router'
 import BASEURL from '@/utils/baseUrl'
+import { getUseType } from '@/utils/auth'
 
 export default {
   components: {
@@ -85,7 +236,10 @@ export default {
   },
   data() {
     return {
-      msg: {}
+      msg: {},
+      userType: '', //用户类型
+      tabsIndex: 1, //显示哪个选项卡
+      showTabs: false //是否显示悬浮菜单
     }
   },
   computed: {
@@ -97,28 +251,27 @@ export default {
   },
   mounted() {
     this.getMsg();
+    //获得用户类型
+    this.userType = getUseType();
+
+    // 添加点击事件监听器
+    document.addEventListener('click', this.handleClickOutside);
+  },
+  beforeDestroy() {
+    // 组件销毁前移除事件监听器
+    document.removeEventListener('click', this.handleClickOutside);
   },
   methods: {
-    getMsg() {
-      this.$store.dispatch('news/getMSG').then(response => {
-        console.log(response);
-        this.msg = response.data;
-        console.log(this.msg);
-      }).catch(error => {
-        console.log(error);
-      });
-    },
+    //0.收缩菜单 start---------------------------------------->
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
-    // async logout() {
-    //   await this.$store.dispatch('user/logout')
-    //   this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-    // },
+    //0.收缩菜单 end---------------------------------------->
+
+    //1.退出登录 start---------------------------------------->
     logout() {
       //获取 token
       const token = this.getTokenFromCookie();
-
       // 新做的，待替换
       // this.$store.dispatch('user/logoutapi', {token: token}).then(response => {
       //   //重置访问过的路由
@@ -131,7 +284,6 @@ export default {
       //   this.$store.commit("user/LOGOUT");
       //   this.$router.push(`/login`);
       // });
-
       axios.get(BASEURL.WebCLogoutUrl, { params: { token: token } }).then(response => {
         console.log(response);
         this.$store.commit("user/LOGOUT");
@@ -143,6 +295,10 @@ export default {
         this.$message.error(response.message);
       });
     },
+    // async logout() {
+    //   await this.$store.dispatch('user/logout')
+    //   this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    // },
     getTokenFromCookie() {
       const name = "Admin-Token=";
       const decodedCookie = decodeURIComponent(document.cookie);
@@ -154,7 +310,65 @@ export default {
         }
       }
       return ""; // 如果没有找到 token，返回空字符串
-    }
+    },
+    //1.退出登录 end---------------------------------------->
+
+    //2.通知消息 start---------------------------------------->
+    //2.1 获取通知消息列表
+    getMsg() {
+      this.$store.dispatch('news/getMSG').then(response => {
+        console.log(response);
+        this.msg = response.data;
+        console.log(this.msg);
+      }).catch(error => {
+        console.log(error);
+      });
+    },
+    //2.2 切换
+    changeTabs(index) {
+      this.tabsIndex = index;
+    },
+    //2.3跳转方法
+    goToPath(type,id){
+      //如果id是0 跳转到列表
+      if(id==0){
+        if(type == 1){
+          this.$router.push(`/examine`);
+        }else if(type == 2){
+          this.$router.push(`/goodListApply`);
+        }else if(type == 3){
+          this.$router.push(`/jobHuntingList`);
+        }
+      }else if(id==-1){
+        if(type == 1){
+          this.$router.push(`/articleList`);
+        }else if(type == 2){
+          this.$router.push(`/goodList`);
+        }else if(type == 3){
+          this.$router.push(`/jobHuntingList`);
+        }
+      }else{
+        if(type == 1){
+          this.$router.push(`/creatNews?id=${id}`);
+        }else if(type == 2){
+          this.$router.push(`/addGood?id=${id}`);
+        }else if(type == 3){
+          this.$router.push(`/addJobHunting?id=${id}`);
+        }
+      }
+      this.showTabs = false;
+    },
+    // 添加处理点击外部的方法
+    handleClickOutside(event) {
+      const noticeTabsBox = this.$refs.noticeTabsBox;
+      const noticeIconImg = event.target.closest('.noticeIconImg');
+      
+      // 如果点击的不是通知图标，并且点击的区域不在通知框内，则关闭通知框
+      if (!noticeIconImg && noticeTabsBox && !noticeTabsBox.contains(event.target)) {
+        this.showTabs = false;
+      }
+    },
+    //2.通知消息 end---------------------------------------->
   }
 }
 </script>
@@ -162,7 +376,6 @@ export default {
 <style lang="scss" scoped>
 .navbar {
   height: 60px;
-  overflow: hidden;
   position: relative;
   display: flex;
   align-items: center;
@@ -212,6 +425,9 @@ export default {
     float: right;
     height: 100%;
     line-height: 50px;
+    display: flex;
+    align-items: center;
+    position: relative;
 
     &:focus {
       outline: none;
@@ -270,6 +486,149 @@ export default {
         }
       }
     }
+
+    //通知消息 图标
+    .noticeIconBox {
+      width: 45px;
+      height: 50px;
+      box-sizing: border-box;
+      padding-top: 8px;
+      position: relative;
+      .noticeIconImg {
+        width: 34px;
+        height: 34px;
+        cursor: pointer;
+      }
+      .unreadCount{
+        position: absolute;
+        top: 5px;
+        right: 10px;
+        width: 16px;
+        height: 16px;
+        background: #FF4E4E;
+        font-size: 12px;
+        line-height: 16px;
+        text-align: center;
+        color: #fff;
+        border-radius: 50%;
+      }
+      //通知消息 悬浮菜单
+      .noticeTabsBox {
+        position: absolute;
+        width: 380px;
+        height: 640px;
+        border-radius: 8px;
+        background: #fff;
+        z-index: 999;
+        right: 20px;
+        top: 50px;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+        padding:25px 20px;
+        box-sizing: border-box;
+        .noticeTabsTitleBox {
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid #E9EDF7;
+          .noticeTabs {
+            height: 41px;
+            border-bottom: 2px solid #fff;
+            margin-right: 40px;
+            display: flex;
+            cursor: pointer;
+            .noticeTabsItem {
+              height: 20px;
+              line-height: 20px;
+              font-size: 16px;
+              position: relative;
+              .noticeMessageNew {
+                width: 5px;
+                height: 5px;
+                border-radius: 50%;
+                background: #FF4E4E;
+                position: absolute;
+                right: -5px;
+                top: 0;
+              }
+            }
+          }
+          .active {
+            border-bottom: 2px solid #5570F1;
+          }
+        }
+        .noticeTabsLinkLine {
+          height: 38px;
+          box-sizing: border-box;
+          font-size: 14px;
+          cursor: pointer;
+          background: #F5F7FB;
+          border:1px solid #E3E8FA;
+          text-align: center;
+          line-height: 38px;
+          border-radius: 8px;
+          margin: 20px 0;
+        }
+        .noticeTabsDataBox {
+          .noticeTabsDataItem {
+            display: flex;
+            align-items: flex-start;
+            cursor: pointer;
+            border-radius: 8px;
+            box-sizing: border-box;
+            padding: 5px 10px;
+            &:hover {
+              background: #F5F7FB;
+            }
+            height: 95px;
+            .noticeTabsDataItemImg {
+              border-radius: 50%;
+              width: 26px;
+              height: 26px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-right: 15px;
+              margin-top: 6px;
+            }
+            .newsIcon{
+              background: #BAC5F8;
+            }
+            .noticeTabsDataItemContent{
+              flex: 1;
+              .noticeNewsTitle {
+                font-size: 14px;
+                line-height: 28px;
+                height: 56px;
+                color: #333;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+              }
+              .noticeNewsTime {
+                height: 30px;
+                line-height:30px;
+                font-size: 14px;
+                color:#999;
+              }
+            }
+          }
+          .noticeTabsDataItemEmpty {
+            .noticeEmpty {
+              text-align: center;
+              padding-top: 150px;
+              box-sizing: border-box;
+            }
+            .noticeEmptyText {
+              text-align: center;
+              color: #999;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+
   }
 }
 
@@ -284,4 +643,25 @@ export default {
   background: none;
   color: #606266;
 }
+
+.unread-count {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: red;
+  color: white;
+  font-size: 12px;
+  text-align: center;
+  line-height: 20px;
+  margin-left: -40px;
+  margin-top: -20px;
+  /* 调整位置，使其贴合通知图标 */
+}
+
+/* 如果未读数量为 0，则隐藏角标 */
+.unread-count:empty {
+  display: none;
+}
 </style>

src/views/news/creatNews.vue

@@ -452,7 +452,6 @@ export default {
       ]
       //表单项 end ------------------------------------------------------------>
     };
-
   },
   methods: {
     //1.提交表单 start ------------------------------------------------------------>
@@ -1039,6 +1038,15 @@ export default {
     // },
     //6.问卷 刘佳伟 end ------------------------------------------------------------>
   },
+  watch: {
+    '$route'(to, from) {
+      console.log(from, '---------------------------------------');
+      // 监听路由参数中的 id 变化，若变化则更新页面状态并获取数据
+      if (to.query.id) {
+        this.getMainData();
+      }
+    },
+  },
   mounted() {
     console.log("mounted")
     this.getNews()
@@ -1059,7 +1067,7 @@ export default {
       console.log("添加新闻！")
     }
   },
-};
+}
 </script>
 
 <style scoped lang="less">