From 089bf5d2378b3c4a61d795b2a92bede2c193b771 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:22:58 +0800
Subject: [PATCH] 1
---
src/views/main-navbar.vue | 616 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 616 insertions(+), 0 deletions(-)
diff --git a/src/views/main-navbar.vue b/src/views/main-navbar.vue
new file mode 100644
index 0000000..581ab64
--- /dev/null
+++ b/src/views/main-navbar.vue
@@ -0,0 +1,616 @@
+<template>
+ <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
+ <div class="site-navbar__header">
+ <h1
+ style="float: left"
+ class="site-navbar__brand"
+ @click="$router.push({ name: 'home' })"
+ >
+ <img
+ src="../assets/img/logo.png"
+ alt=""
+ style="float: left; width: 54px; margin-left: 4px"
+ />
+ <a class="site-navbar__brand-lg" href="javascript:;"> 管理系统</a>
+ </h1>
+ </div>
+ <div class="site-navbar__body clearfix" style="height: auto;">
+ <el-menu class="site-navbar__menu" mode="horizontal">
+ <!-- 收缩菜单 -->
+ <!-- <el-menu-item
+ class="site-navbar__switch"
+ index="0"
+ @click="sidebarFold = !sidebarFold"
+ >
+ <icon-svg name="zhedie"></icon-svg>
+ </el-menu-item> -->
+
+ <!-- 顶部导航 -->
+
+ <!-- <el-menu-item index="1">处理中心</el-menu-item> -->
+ <!-- <el-submenu index="2">
+ <template slot="title">我的工作台</template>
+ <el-menu-item index="2-1">选项1</el-menu-item>
+ <el-menu-item index="2-2">选项2</el-menu-item>
+ <el-menu-item index="2-3">选项3</el-menu-item>
+ <el-submenu index="2-4">
+ <template slot="title">选项4</template>
+ <el-menu-item index="2-4-1">选项1</el-menu-item>
+ <el-menu-item index="2-4-2">选项2</el-menu-item>
+ <el-menu-item index="2-4-3">选项3</el-menu-item>
+ </el-submenu>
+ </el-submenu> -->
+ <!-- <el-menu-item index="3" disabled>消息中心</el-menu-item>
+ <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
+ <div
+ class="site-navbar__menu site-navbar__menu--right"
+ mode="horizontal"
+ style="display: flex"
+ >
+ <!-- 模糊搜索 -->
+ <el-autocomplete
+ v-model="state"
+ :fetch-suggestions="querySearchAsync"
+ placeholder="请输入菜单名称"
+ suffix-icon="el-icon-search"
+ clearable
+ @select="handleSelect"
+ class="searchInput"
+ ></el-autocomplete>
+ <!-- <el-menu-item class="site-navbar__avatar" index="3"> -->
+ <div v-if="!isShowKefu" style="width: 10px"></div>
+ <div
+ v-if="isShowKefu"
+ @click="showChat()"
+ class="isPng"
+ style="
+ width: 31px;
+ float: left;
+ padding: 10px 0px;
+ margin-right: 10px;
+ margin-left: 10px;
+ "
+ >
+ </div>
+ <el-badge
+ v-if="isShowKefu"
+ :value="countNum('.unread')"
+ v-show="countNum('.unread') > 0"
+ style="
+ align-items: center;
+ display: flex;
+ padding-top: 15px;
+ padding-right: 15px;
+ "
+ ></el-badge>
+ <!-- <el-button stype="info" icon="el-icon-s-comment" style="margin-right: 0px;border: none;" @click="showChat()"></el-button> -->
+ <div
+ style="width: 20px; display: flex; padding: 20px 5px"
+ v-if="kefuInfo.isOnline == true"
+ >
+ <img
+ src="~@/assets/image/online.png"
+ width="10px"
+ height="10px"
+ style="align-items: center; display: flex"
+ />
+ </div>
+ <div
+ style="width: 20px; display: flex; padding: 20px 5px"
+ v-if="kefuInfo.isOnline == false"
+ >
+ <div
+ style="
+ width: 10px;
+ height: 10px;
+ background: #dedede;
+ border-radius: 5px;
+ "
+ ></div>
+ </div>
+ <div style="align-items: center; display: flex">
+ <el-dropdown
+ :show-timeout="0"
+ placement="bottom"
+ class="ddd1"
+ @visible-change="visibleChange"
+ style="align-items: center"
+ >
+ <!-- <img src="~@/assets/image/online.png" width="10px" height="10px"/> -->
+ <span class="el-dropdown-link">
+ {{ userName }}
+ <i
+ class="el-icon-arrow-down el-icon--right"
+ v-show="!dropdownVisiable"
+ ></i>
+ <i
+ class="el-icon-arrow-up el-icon--right"
+ v-show="dropdownVisiable"
+ ></i>
+ </span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item @click.native="customerCentor()" v-show="isKeFu"
+ ><span class="el-icon-edit"></span> 客服中心</el-dropdown-item
+ >
+ <el-dropdown-item @click.native="updatePasswordHandle()"
+ ><span class="el-icon-edit"></span>
+ 修改登录密码</el-dropdown-item
+ >
+ <el-dropdown-item @click.native="updatePassmoneyHandle()"
+ ><span class="el-icon-coin"></span
+ >修改资金密码</el-dropdown-item
+ >
+ <!-- <el-dropdown-item v-if="isAuth('sys:user:update')" @click.native="message()">谷歌验证器</el-dropdown-item> -->
+ <el-dropdown-item @click.native="logoutHandle()"
+ ><span class="el-icon-switch-button"></span
+ >退出登录</el-dropdown-item
+ >
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
+
+ <!-- </el-menu-item> -->
+ </div>
+
+ <!-- 以下是顶部导航 -->
+ <main-navbar-sub-menu
+ v-for="item in menuListArr"
+ :key="item.menuId"
+ :menu="item"
+ :dynamicMenuRoutes="dynamicMenuRoutes"
+ :type="0"
+ >
+ </main-navbar-sub-menu>
+ </el-menu>
+
+ </div>
+ <!-- 弹窗, 修改密码，资金密码，谷歌验证器 main-navbar-update-googleAuthCode-->
+ <customer-centor
+ v-if="customerCentorVisible"
+ ref="customerCentor"
+ ></customer-centor>
+ <update-password
+ v-if="updatePassowrdVisible"
+ ref="updatePassowrd"
+ ></update-password>
+ <update-passmoney
+ v-if="updatePassmoneyVisible"
+ ref="updatePassmoney"
+ ></update-passmoney>
+ <update-Passgoogle
+ v-if="googleAuthCode"
+ ref="updatePassgoogle"
+ ></update-Passgoogle>
+ </nav>
+</template>
+
+<script>
+import CustomerCentor from "./main-navbar-customerCentor";
+import UpdatePassword from "./main-navbar-update-password";
+import UpdatePassmoney from "./main-navbar-update-passmoney";
+import UpdatePassgoogle from "./main-navbar-update-googleAuthCode";
+import MainNavbarSubMenu from "./main-navbar-sub-menu";
+import { clearLoginInfo } from "@/utils";
+import { unreadNewAdminOnlineChatAction } from "@/api/chat";
+export default {
+ data() {
+ return {
+ customerCentorVisible: false,
+ updatePassowrdVisible: false,
+ updatePassmoneyVisible: false,
+ googleAuthCode: false,
+ dynamicMenuRoutes: [],
+ dropdownVisiable: false,
+ isKeFu: false,
+ restaurants: [],
+ state: "",
+ timeout: null,
+ kefuInfo: {},
+ unreadNum: 0,
+ isShowKefu: false,
+ };
+ },
+ components: {
+ CustomerCentor,
+ UpdatePassword,
+ UpdatePassmoney,
+ UpdatePassgoogle,
+ MainNavbarSubMenu,
+ },
+ computed: {
+ navbarLayoutType: {
+ get() {
+ return this.$store.state.common.navbarLayoutType;
+ },
+ },
+ sidebarFold: {
+ get() {
+ return this.$store.state.common.sidebarFold;
+ },
+ set(val) {
+ this.$store.commit("common/updateSidebarFold", val);
+ },
+ },
+ mainTabs: {
+ get() {
+ return this.$store.state.common.mainTabs;
+ },
+ set(val) {
+ this.$store.commit("common/updateMainTabs", val);
+ },
+ },
+ userName: {
+ get() {
+ return this.$store.state.user.name;
+ },
+ },
+ googleAuthBind: {
+ get() {
+ return this.$store.state.user.googleAuthBind;
+ },
+ },
+ menuListArr: {
+ get() {
+ return this.$store.state.common.menuListArr;
+ },
+ set(val) {
+ this.$store.commit("common/updateMenuTopList", val);
+ }, //重新存过滤后的数组updateMenuTopList
+ },
+ // kefuInfo: {
+ // get () {
+ // return this.$store.state.common.kefuInfo
+ // },
+ // set (val) { this.$store.commit('common/updateKefuInfo', val) }
+ // },
+ },
+ created() {
+ let menuListArr = [];
+ if (
+ sessionStorage.getItem("menuList") &&
+ sessionStorage.getItem("menuList") != `"[]"`
+ ) {
+ menuListArr = JSON.parse(sessionStorage.getItem("menuList"));
+ }
+ if(menuListArr.length > 0){
+ this.menuListArr = menuListArr.filter(
+ (item) => item.orderNum < 24 && item.orderNum > 0
+ );
+ }
+
+ // console.log("menuListArr = " + JSON.stringify(this.menuListArr))
+ this.dynamicMenuRoutes = JSON.parse(
+ sessionStorage.getItem("dynamicMenuRoutes") || "[]"
+ );
+
+ // 获取当前管理员信息
+ this.$http({
+ url: this.$http.adornUrl("/sys/user/info"),
+ method: "get",
+ params: this.$http.adornParams(),
+ }).then(({ data }) => {
+ this.$login = true;
+ });
+ // if (!this.IS_DEBUG) {
+ // let timer = setTimeout(() => {
+ // clearTimeout(timer);
+ // this.unreadNumCall();
+ // }, 2000);
+ // }
+ },
+ mounted() {
+ //let searchAll = JSON.parse(sessionStorage.getItem("menuList") || "[]");
+ // this.restaurants = searchAll.filter(
+ // (item) => item.list
+ // );
+ //console.log(this.restaurants)
+ this.filterMenuList();
+
+ this.$bus.$on("updateKefuInfo", (data) => {
+ console.log("updateKefuInfo = " + JSON.stringify(data));
+ this.kefuInfo = data;
+ });
+
+ this.$bus.$on("isShowKefu", (data) => {
+ this.isShowKefu = data;
+ console.log("显示客服");
+ });
+ },
+ beforeDestroy() {
+ this.$bus.$off("updateKefuInfo");
+ this.$bus.$off("isShowKefu");
+ },
+ methods: {
+ countNum(name) {
+ let num = this.main.tips[name];
+ if (isNaN(num)) {
+ num = 0;
+ }
+ return num;
+ },
+ unreadNumCall() {
+ //
+ if (this.$login) {
+ unreadNewAdminOnlineChatAction(
+ {},
+ (data) => {
+ console.log(
+ "unreadNewAdminOnlineChatAction = " + JSON.stringify(data)
+ );
+ this.unreadNum = data.data;
+ },
+ (err) => {
+ console.log("err => " + JSON.stringify(err));
+ this.$login = false;
+ }
+ );
+ }
+ //
+ let timer = setTimeout(() => {
+ clearTimeout(timer);
+ this.unreadNumCall();
+ }, 5000);
+ //
+ },
+ // filterMenuList() {
+ // let searchAll = JSON.parse(sessionStorage.getItem("menuList") || "[]");
+ // // 过滤数组并生成新的数组对象
+ // this.restaurants = searchAll.flatMap(menuItem => {
+ // return menuItem.list?.map(item => ({
+ // value: item.name,
+ // url: item.url,
+ // })) || [];
+ // });
+ // },
+ // 路由操作
+ routeHandle(route) {
+ if (route.meta.isTab) {
+ // tab选中, 不存在先添加
+ var tab = this.mainTabs.filter((item) => item.name === route.name)[0];
+ if (!tab) {
+ if (route.meta.isDynamic) {
+ route = this.dynamicMenuRoutes.filter(
+ (item) => item.name === route.name
+ )[0];
+ if (!route) {
+ return console.error("未能找到可用标签页!");
+ }
+ }
+ tab = {
+ menuId: route.meta.menuId || route.name,
+ name: route.name,
+ title: route.meta.title,
+ type: isURL(route.meta.iframeUrl) ? "iframe" : "module",
+ iframeUrl: route.meta.iframeUrl || "",
+ };
+ this.mainTabs = this.mainTabs.concat(tab);
+ }
+ this.menuActiveName = tab.menuId + "";
+ this.mainTabsActiveName = tab.name;
+ }
+ },
+ // 客服中心
+ customerCentor() {
+ this.customerCentorVisible = true;
+ this.$nextTick(() => {
+ this.$refs.customerCentor.init();
+ });
+ },
+ // 修改密码
+ updatePasswordHandle() {
+ this.updatePassowrdVisible = true;
+ this.$nextTick(() => {
+ this.$refs.updatePassowrd.init();
+ });
+ },
+ // 修改资金密码
+ updatePassmoneyHandle() {
+ this.updatePassmoneyVisible = true;
+ this.$nextTick(() => {
+ this.$refs.updatePassmoney.init();
+ });
+ },
+ // 谷歌验证码绑定
+ updategoogleAuthCode() {
+ if (this.googleAuthBind) {
+ this.$confirm("谷歌验证器已绑定", "谷歌验证器", {
+ //是否已绑定
+ distinguishCancelAndClose: true,
+ confirmButtonText: "确定",
+ cancelButtonText: "解绑",
+ type: "success",
+ })
+ .then(() => {
+ this.$message({
+ type: "success",
+ });
+ })
+ .catch((action) => {
+ if (action === "cancel") {
+ this.googleAuthCode = true;
+ this.$nextTick(() => {
+ this.$refs.updatePassgoogle.init();
+ });
+ }
+ });
+ } else {
+ this.googleAuthCode = true;
+ this.$nextTick(() => {
+ this.$refs.updatePassgoogle.init();
+ });
+ }
+ },
+ // 退出
+ logoutHandle() {
+ this.$confirm(`确定进行[退出]操作?`, "提示", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
+ })
+ .then(() => {
+ this.$http({
+ url: this.$http.adornUrl("/logOut"),
+ method: "post",
+ data: this.$http.adornData(),
+ }).then(({ data }) => {
+ //
+ this.$login = false;
+ Vue.prototype.$login = false;
+ console.log("/logOut");
+ this.$bus.$emit("tabsCloseAllHandle", {});
+ this.$router.push({ path: "/login" });
+ clearLoginInfo();
+
+ console.log("this.$login = " + this.$login);
+ //this.$router.push({ name: 'login' })
+ });
+ })
+ .catch(() => {});
+ },
+ showChat() {
+ // this.main.isShowService = !this.main.isShowService;
+ //this.$router.push({ name: "message" });
+ if (this.$route.name !== "message") {
+ // 如果当前路由不是 "message"，则跳转到 "message" 路由
+ this.$router.push({ name: "message" });
+ } else {
+ // 如果当前路由已经是 "message"，则返回到上一个路由
+ this.$router.go(-1);
+ }
+ },
+ visibleChange(flag) {
+ this.isKeFu = Vue.prototype.$isKefu;
+ this.dropdownVisiable = flag;
+
+ console.log(" this.isKeFu= " + this.isKeFu);
+ },
+ message() {
+ this.$router.push({ name: "message" });
+ },
+ querySearchAsync(queryString, cb) {
+ // 模糊搜索
+ var restaurants = this.restaurants;
+ var results = queryString
+ ? restaurants.filter(this.createStateFilter(queryString))
+ : restaurants;
+
+ clearTimeout(this.timeout);
+ this.timeout = setTimeout(() => {
+ cb(results);
+ }, 2000 * Math.random());
+ },
+ createStateFilter(queryString) {
+ // 模糊搜索
+ return (state) => {
+ return (
+ state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+ );
+ };
+ },
+ handleSelect(item) {
+ // 模糊搜索
+ const modifiedUrl = item.url.replace(/\//g, "-");
+ this.$router.push({ path: modifiedUrl });
+ },
+ filterMenuList() {
+ let searchAll = [];
+
+ if (
+ sessionStorage.getItem("menuList") &&
+ sessionStorage.getItem("menuList") != `"[]"`
+ ) {
+ searchAll = JSON.parse(sessionStorage.getItem("menuList"));
+ }
+ // 过滤数组并生成新的数组对象
+ //console.log(searchAll);
+ if (searchAll.length > 0) {
+ this.restaurants = searchAll.flatMap((menuItem) => {
+ return menuItem.orderNum > 0 && menuItem.list
+ ? menuItem.list
+ .filter((item) => item.url.trim() !== "")
+ .map((item) => ({
+ value: item.name,
+ url: item.url,
+ }))
+ : [];
+ });
+ }
+ },
+ },
+};
+</script>
+<style scoped>
+::v-deep .el-menu-item {
+ background: none !important;
+}
+/* 顶部颜色 */
+::v-deep .site-navbar__body {
+ background: #263238 !important;
+ min-height: 100px;
+}
+::v-deep .el-submenu__title:hover {
+ background-color: #0030ff;
+}
+.site-navbar {
+ background-color: #263238;
+}
+.el-dropdown {
+ color: #fff;
+}
+::v-deep .el-menu--horizontal {
+ border: none !important;
+}
+.mnbuton {
+ width: 0px;
+ height: 0px;
+ border: none;
+}
+
+.el-dropdown-link {
+ cursor: pointer;
+ color: #fff;
+}
+.el-icon-arrow-down {
+ font-size: 12px;
+ color: #fff;
+}
+
+.el-icon-arrow-up {
+ font-size: 12px;
+ color: #fff;
+}
+</style>
+
+<style lang="scss" scoped>
+.ddd {
+ ::v-deep .el-submenu__title {
+ color: #fff;
+ }
+ ::v-deep .el-submenu__icon-arrow {
+ right: 5px;
+ top: 56%;
+ color: #fff;
+ }
+}
+.searchInput {
+ float: left;
+ width: 200px;
+ margin-top: 5px;
+}
+.el-popper[x-placement^="bottom"] .popper__arrow::after {
+ border-bottom-color: white !important;
+}
+.isPng{
+ background: url(../assets/img/Vector.png) center no-repeat;
+ background-size: 100%;
+ transition: background-image 0.3s ease-in-out,box-shadow 0.2s ease-in-out; /* 添加过渡效果 */
+ cursor: pointer;
+}
+.isPng:hover {
+ background-image: url(../assets/img/VectorM.png); /* 鼠标悬停时改变背景图片 */
+}
+.isImg:active {
+ background-image: url(../assets/img/VectorM.png); /* 点击时改变背景图片 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
+}
+</style>
--
Gitblit v1.9.3