文件
mashangyoujiu/Application/Retail/View/Menu/index-modern.html

1293 行
56 KiB
HTML
可执行文件

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>管理后台</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<!-- Font Awesome 4.7.0 CDN -->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<!-- Element UI (保持兼容性) -->
<link rel="stylesheet" type="text/css" href="/Public/vue/element-ui.css?v=2.13.2">
<link rel="stylesheet" type="text/css" href="/Public/layui-v2.4.3/layui/css/layui.css"/>
<!-- 原有必要的CSS文件 -->
<link rel="stylesheet" type="text/css" href="/Public/css/common-upload.css">
<link rel="stylesheet" type="text/css" href="/Public/css/system-gallery.css?v=1.0.6">
<link rel="stylesheet" type="text/css" href="/Public/css/page-common.css?v=1.0.2"/>
<!-- 现代化样式 -->
<style>
:root {
--primary-color: #2563eb;
--primary-dark: #1d4ed8;
--sidebar-bg: #1e293b;
--sidebar-hover: #334155;
--text-light: #64748b;
--border-color: #e2e8f0;
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f8fafc;
overflow: hidden;
}
.admin-container {
display: flex;
height: 100vh;
}
/* 侧边栏样式 */
.sidebar {
width: 260px;
background: linear-gradient(180deg, var(--sidebar-bg) 0%, #0f172a 100%);
color: white;
transition: all 0.3s ease;
box-shadow: var(--shadow-lg);
z-index: 1000;
}
.sidebar.collapsed {
width: 70px;
}
.sidebar-header {
padding: 1.5rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.sidebar-header img {
max-height: 40px;
max-width: 100%;
object-fit: contain;
}
.sidebar-menu {
padding: 1rem 0;
height: calc(100vh - 80px);
overflow-y: auto;
}
.sidebar-menu::-webkit-scrollbar {
width: 4px;
}
.sidebar-menu::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-menu::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
.menu-item {
margin: 0.25rem 0.75rem;
border-radius: 8px;
overflow: hidden;
}
.menu-link {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}
.menu-link:hover {
background: var(--sidebar-hover);
color: white;
transform: translateX(2px);
}
.menu-link.active {
background: var(--primary-color);
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.menu-icon {
width: 20px;
margin-right: 0.75rem;
text-align: center;
}
.menu-text {
flex: 1;
font-size: 0.9rem;
font-weight: 500;
}
.submenu {
background: rgba(0, 0, 0, 0.2);
margin-top: 0.25rem;
border-radius: 6px;
overflow: hidden;
}
.submenu-item {
padding: 0.5rem 1rem 0.5rem 3rem;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.85rem;
}
.submenu-item:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.submenu-item.active {
background: var(--primary-color);
color: white;
}
/* 主内容区域 */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 顶部导航栏 */
.top-navbar {
background: white;
border-bottom: 1px solid var(--border-color);
padding: 0 1.5rem;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--shadow);
}
.navbar-left {
display: flex;
align-items: center;
}
.sidebar-toggle {
background: none;
border: none;
font-size: 1.2rem;
color: var(--text-light);
cursor: pointer;
padding: 0.5rem;
border-radius: 6px;
margin-right: 1rem;
transition: all 0.2s ease;
}
.sidebar-toggle:hover {
background: #f1f5f9;
color: var(--primary-color);
}
.breadcrumb-nav {
display: flex;
align-items: center;
font-size: 0.9rem;
}
.breadcrumb-item {
color: var(--text-light);
cursor: pointer;
transition: color 0.2s ease;
}
.breadcrumb-item:hover {
color: var(--primary-color);
}
.breadcrumb-item.active {
color: #1f2937;
font-weight: 500;
}
.breadcrumb-separator {
margin: 0 0.5rem;
color: var(--text-light);
}
.navbar-right {
display: flex;
align-items: center;
gap: 1rem;
}
.refresh-btn {
background: none;
border: 1px solid var(--border-color);
padding: 0.5rem 1rem;
border-radius: 6px;
color: var(--text-light);
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.85rem;
}
.refresh-btn:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.user-menu {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.user-menu:hover {
background: #f8fafc;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border-color);
}
.user-info {
display: flex;
flex-direction: column;
}
.user-name {
font-size: 0.9rem;
font-weight: 500;
color: #1f2937;
}
.user-role {
font-size: 0.75rem;
color: var(--text-light);
}
/* 内容区域 */
.content-area {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
background: #f8fafc;
}
.content-frame {
background: white;
border-radius: 12px;
box-shadow: var(--shadow);
height: 100%;
overflow: hidden;
}
.content-frame iframe {
width: 100%;
height: 100%;
border: none;
}
/* 公告栏 */
.notice-bar {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
border-radius: 8px;
display: flex;
align-items: center;
cursor: pointer;
transition: all 0.2s ease;
}
.notice-bar:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.notice-icon {
margin-right: 0.75rem;
font-size: 1.1rem;
}
.notice-text {
flex: 1;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
position: fixed;
left: -260px;
z-index: 1050;
}
.sidebar.show {
left: 0;
}
.main-content {
margin-left: 0;
}
.user-info {
display: none;
}
}
/* 加载动画 */
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid #f3f4f6;
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Element UI 兼容性调整 */
.el-dialog {
border-radius: 12px;
}
.el-button--primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.el-button--primary:hover {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
}
</style>
<!-- 原有必要的JS文件 -->
<script type="text/javascript" charset="utf-8" src="/Public/vue/js/vue2.5.16.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/vue/element-ui.js?v=2.13.2"></script>
<script type="text/javascript" charset="utf-8" src="/Public/js/common.js?v=1.0.2"></script>
<script type="text/javascript" charset="utf-8" src="/Public/js/drawer.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/js/system-gallery.js?v=1.0.6"></script>
<script type="text/javascript" charset="utf-8" src="/Public/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/layui-v2.4.3/layui/layui.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/receipt/Qrcode.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/UEditor/ueditor.config.js?v=1.0.1"></script>
<script type="text/javascript" charset="utf-8" src="/Public/UEditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/js/select-pro-and-city.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/Retail/common/js/select-goods-category.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=ObMZWhkHzzF0zbnNgF72Bcws8GHqnya7"></script>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
var MenuApp;
</script>
</head>
<body>
<div id="MenuIndex" v-cloak>
<div class="admin-container">
<!-- 侧边栏 -->
<div class="sidebar" :class="{ collapsed: sidebarCollapsed }">
<div class="sidebar-header">
<img v-if="web_stage_url" :src="web_stage_url"
onerror="this.onerror=null,this.src='/Public/Retail/images/zhihuilogo4.png'"/>
</div>
<div class="sidebar-menu">
<template v-for="(item, index) in menuList">
<!-- 有子菜单的项目 -->
<div v-if="item.list" class="menu-item" :key="index">
<div class="menu-link" @click="toggleSubmenu(index)"
:class="{ active: activeSubmenu === index }">
<i :class="item.icon" class="menu-icon"></i>
<span class="menu-text" v-show="!sidebarCollapsed">{{item.name}}</span>
<i class="fas fa-chevron-down" v-show="!sidebarCollapsed"
:style="{ transform: activeSubmenu === index ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease' }"></i>
</div>
<div v-show="activeSubmenu === index && !sidebarCollapsed" class="submenu">
<template v-for="(list, i) in item.list">
<div v-if="list.path" class="submenu-item"
:class="{ active: actMenuIndex === index + '-' + i }"
@click="selectMenu(index + '-' + i)" :key="i">
{{list.name}}
</div>
<div v-else :key="i">
<div class="submenu-item" @click="toggleSubSubmenu(index + '-' + i)">
{{list.name}}
<i class="fas fa-chevron-right float-end"></i>
</div>
<div v-show="activeSubSubmenu === index + '-' + i" style="padding-left: 1rem;">
<div v-for="(li, j) in list.list" :key="j"
class="submenu-item"
:class="{ active: actMenuIndex === index + '-' + i + '-' + j }"
@click="selectMenu(index + '-' + i + '-' + j)">
{{li.name}}
</div>
</div>
</div>
</template>
</div>
</div>
<!-- 无子菜单的项目 -->
<div v-else class="menu-item" :key="index">
<div class="menu-link"
:class="{ active: actMenuIndex == index }"
@click="selectMenu(String(index))">
<i :class="item.icon" class="menu-icon"></i>
<span class="menu-text" v-show="!sidebarCollapsed">{{item.name}}</span>
</div>
</div>
</template>
</div>
</div>
<!-- 主内容区域 -->
<div class="main-content">
<!-- 顶部导航栏 -->
<div class="top-navbar">
<div class="navbar-left">
<button class="sidebar-toggle" @click="toggleSidebar">
<i class="fas fa-bars"></i>
</button>
<nav class="breadcrumb-nav">
<template v-for="(item, index) in pathData">
<span class="breadcrumb-item"
:class="{ active: index === pathData.length - 1 }"
@click="breadcrumbClick(index)" :key="index">
{{item.name}}
</span>
<span v-if="index < pathData.length - 1" class="breadcrumb-separator">
<i class="fas fa-chevron-right"></i>
</span>
</template>
<i v-if="loading" class="fas fa-spinner fa-spin ms-2"></i>
</nav>
</div>
<div class="navbar-right">
<!-- 公告栏 -->
<div v-if="notice" class="notice-bar" @click="noticeDetail" style="margin: 0; padding: 0.5rem 1rem;">
<i class="fas fa-bullhorn notice-icon"></i>
<div class="notice-text">{{notice}}</div>
</div>
<button class="refresh-btn" @click="refreshWindow(true)">
<i class="fas fa-sync-alt me-1"></i>
刷新
</button>
<!-- 用户菜单 -->
<div class="dropdown">
<div class="user-menu" data-bs-toggle="dropdown">
<img :src="user_avatar" class="user-avatar" alt="用户头像">
<div class="user-info">
<div class="user-name">{{username}}</div>
<div class="user-role" v-if="other_name">{{other_name}}</div>
</div>
<i class="fas fa-chevron-down ms-2"></i>
</div>
<ul class="dropdown-menu dropdown-menu-end">
<!-- 删除了软件下载选项 -->
<li><a class="dropdown-item" href="#" @click="swapUrl('{:U('Super/Helps/MetInfo')}?types=1',2)">
<i class="fas fa-question-circle me-2"></i>帮助中心</a></li>
<li><a class="dropdown-item" href="#" @click="showResetPassword=true">
<i class="fas fa-key me-2"></i>修改密码</a></li>
<li><a class="dropdown-item" href="#" @click="showSetUserAvatar=true">
<i class="fas fa-user-circle me-2"></i>设置头像</a></li>
<template v-if="openScan==1">
<li><hr class="dropdown-divider"></li>
<li v-if="isBinding">
<a class="dropdown-item" href="#" @click="relieveWx">
<i class="fab fa-weixin me-2"></i>解绑微信</a>
</li>
<li v-else>
<a class="dropdown-item" href="#" @click="getTokenUrl">
<i class="fab fa-weixin me-2"></i>绑定微信</a>
</li>
</template>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="#" @click="loginOutBefore">
<i class="fas fa-sign-out-alt me-2"></i>退出登录</a></li>
</ul>
</div>
</div>
</div>
<!-- 内容区域 -->
<div class="content-area">
<div class="content-frame" v-loading="loading">
<div v-if="iframeSrc!=''" style="height: 100%;">
<iframe :src="iframeSrc" id="secondIframe" style="width: 100%; height: 100%; border: none;"></iframe>
</div>
<div v-else id="myInclude" style="height: 100%;">
<div class="include-page" style="height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 修改密码对话框 -->
<el-dialog title="修改密码" :visible.sync="showResetPassword" width="400px" :close-on-click-modal="false">
<div style="padding: 0 20px">
<el-form :model="passwordForm" :rules="rules" ref="passwordForm" label-width="68px">
<el-form-item label="旧密码" prop="oldPass">
<el-input type="password" v-model="passwordForm.oldPass" auto-complete="off" placeholder="请输入旧密码"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPass">
<el-input type="password" v-model="passwordForm.newPass" auto-complete="off" placeholder="请输入新密码"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newRePass">
<el-input type="password" v-model="passwordForm.newRePass" auto-complete="off" placeholder="再次输入新密码"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="showResetPassword = false">取 消</el-button>
<el-button type="primary" @click="sureResetPassword('passwordForm')">确 定</el-button>
</div>
</el-dialog>
<!-- 设置头像对话框 -->
<el-dialog title="设置头像" :visible.sync="showSetUserAvatar" width="400px" :close-on-click-modal="false">
<div class="menu-index-list">
<el-form>
<el-form-item label="头像图片" label-width="80px">
<choose-one-file :file-url.sync="avatar" :file-id.sync="avatar_id"></choose-one-file>
<p class="menu-index-tips">建议大小100*100</p>
</el-form-item>
</el-form>
</div>
<div class="menu-index-center">
<el-button type="primary" size="medium" @click="setUserAvatar">保存</el-button>
</div>
</el-dialog>
<!-- 绑定微信对话框 -->
<el-dialog title="绑定微信" :visible.sync="showUserAuthCode" width="400px" :close-on-click-modal="false" :before-close="closeCode">
<div class="menu-index-code-big-box">
<div class="menu-index-code-title">
<span>{{scan_title}}<el-tooltip class="item" effect="dark" content="请在扫码之前关注该公众号" placement="top-start">
<i class="el-icon-question"></i>
</el-tooltip></span>
</div>
<div class="menu-index-code-box-con">
<div class="menu-index-code-box" v-qrcode="{'value':code}"></div>
<div class="menu-index-code-timeout" v-if="isTimeOut">
<span>二维码过期</span>
<div class="menu-index-refresh" @click="getTokenUrl">点击刷新</div>
</div>
<div class="menu-index-code-timeout" v-if="isScanCode">
<div class="menu-index-item-suc-one-1">
<img src="/Public/login/images/success.png" class="menu-index-item-suc-done-img">
<span>成功扫码,等待确认</span>
</div>
</div>
</div>
</div>
</el-dialog>
<!-- 退出登录确认对话框 -->
<template v-if="showLoginOut">
<div role="dialog" aria-modal="true" aria-label="温馨提示" class="el-message-box__wrapper" style="z-index: 10000000000;">
<div class="el-message-box login-out">
<div class="el-message-box__header">
<div class="el-message-box__title">
<span>温馨提示</span>
</div>
<button type="button" @click="showLoginOut=false" aria-label="Close" class="el-message-box__headerbtn">
<i class="el-message-box__close el-icon-close"></i>
</button>
</div>
<div class="el-message-box__content">
<div class="el-message-box__container">
<div class="el-message-box__status el-icon-warning"></div>
<div class="el-message-box__message">
<p>确定退出登录?</p>
</div>
</div>
</div>
<div class="el-message-box__btns">
<button type="button" @click="showLoginOut=false" class="el-button el-button--default el-button--small">
<span>取消</span>
</button>
<button type="button" @click="sureLoginOut" class="el-button el-button--default el-button--small el-button--primary">
<span>退出</span>
</button>
</div>
</div>
</div>
<div class="v-modal" tabindex="0" style="z-index: 999999999;"></div>
</template>
</div>
<script type="text/javascript">
// 注册二维码组件
Vue.directive('qrcode', function (el, binding) {
el.innerHTML = "";
var text = binding.value.value;
if (text) {
new QRCode(el, {
text: text,
width: 200,
height: 200,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}
});
layui.use('layer', function () {
MenuApp = new Vue({
el: "#MenuIndex",
data() {
return {
// 现代化UI状态
sidebarCollapsed: false,
activeSubmenu: null,
activeSubSubmenu: null,
// 原有数据结构
web_stage_url: '',
notice: '',
openScan: 0,//是否开启扫码绑定微信
rightMenuRow: false,//是否横向展示顶部菜单导航
manageName: '',//角色名称
username: '',//用户名称
other_name: '',//其他名称
menuList: [],//用户权限菜单列表
actMenuIndex: -1,//当前点击的菜单下标
menuLoading: true,//菜单加载状态
user_avatar: '',//右上角显示的用户头像
avatar: '',//修改时显示的用户头像
avatar_id: '',//修改时显示的用户头像ID
showUserAuthCode: false,//是否显示绑定微信弹框
code: '',//二维码内容
isTimeOut: false,//二维码是否过期
isScanCode: false,//是否扫码成功
scan_title: false,//公众号名称
showSetUserAvatar: false,//是否显示修改用户头像
isBinding: false,//是否已经绑定微信
check_scan: null,//微信扫码时间计时器
check_auth: null,//微信确认绑定时间计时器
showResetPassword: false,//是否显示修改密码弹框
showLoginOut: false,//是否显示退出登录
passwordForm: {
oldPass: '',
newPass: '',
newRePass: '',
},//修改密码表单信息
rules: {
oldPass: [{message: '请输入原密码', required: true, trigger: 'blur'}, {
validator: function (rule, value, callback) {
var reg = /^[a-zA-Z0-9.+*-/<>?!@#$%^&*():'"";]{1,}$/;
if (!value) {
callback(new Error('请输入原密码'));
} else if (reg.test(value) == false) {
callback(new Error('只支持数字字母及字符.+*-/<>?!@#$%^&*():\'\"";'));
} else {
callback();
}
}, trigger: 'blur'
}],
newPass: [{message: '请输入新密码', required: true, trigger: 'blur'}, {
validator: function (rule, value, callback) {
var reg = /^[a-zA-Z0-9.+*-/<>?!@#$%^&*():'"";]{1,}$/;
if (!value) {
callback(new Error('请输入新密码'));
} else if (reg.test(value) == false) {
callback(new Error('只支持数字字母及字符.+*-/<>?!@#$%^&*():\'\"";'));
} else if (MenuApp.passwordForm.newRePass && MenuApp.passwordForm.newRePass != value) {
callback(new Error('新旧密码不一致'));
} else {
callback();
}
}, trigger: 'blur'
}],
newRePass: [{message: '请再次输入新密码', required: true, trigger: 'blur'}, {
validator: function (rule, value, callback) {
var reg = /^[a-zA-Z0-9.+*-/<>?!@#$%^&*():'"";]{1,}$/;
if (!value) {
callback(new Error('请再次输入新密码'));
} else if (reg.test(value) == false) {
callback(new Error('只支持数字字母及字符.+*-/<>?!@#$%^&*():\'\"";'));
} else if (MenuApp.passwordForm.newPass && MenuApp.passwordForm.newPass != value) {
callback(new Error('新旧密码不一致'));
} else {
callback();
}
}, trigger: 'blur'
}],
},//修改密码规则
pathData: [],//页面路由数组
loading: false,//页面是否正在加载中
iframeSrc: '',
iframeUrlList: [
'/index.php/Retail/Diy/index',
'/index.php/Retail/Diy/mer_index',
],
pathList: [],//实际含有路径的列表
pagePathList: [],//在实际含有路径的列表中并且已经渲染路径的页面
is_back_preview: false,//是否是返回之前的页面
pageEndCallback: null,//页面结束的回调函数
}
},
methods: {
// 现代化UI方法
toggleSidebar() {
this.sidebarCollapsed = !this.sidebarCollapsed;
},
toggleSubmenu(index) {
this.activeSubmenu = this.activeSubmenu === index ? null : index;
},
toggleSubSubmenu(index) {
this.activeSubSubmenu = this.activeSubSubmenu === index ? null : index;
},
// 原有业务逻辑方法
//选择菜单
selectMenu(val) {
if (this.loading) {
//如果上一次点击的菜单没有渲染完成直接return
return;
}
this.actMenuIndex = val;
var arr = val.split('-');
var index = parseInt(arr[0]);
var item = this.menuList[index];
let pathData;
if (item.type) {
if (item.reBack) {
this.sendRequest('Retail/Menu/reBack', {
success: () => {
location.href = item.path;
}
})
} else {
location.href = item.path;
}
return;
} else if (item.path) {
pathData = [item];
} else if (arr.length == 2) {
pathData = [{name: item.name}, item.list[parseInt(arr[1])]];
} else if (arr.length == 3) {
let _i = parseInt(arr[1]);
let __i = parseInt(arr[2]);
pathData = [{name: item.name}, {name: item.list[_i].name}, item.list[_i].list[__i]];
} else {
}
this.pathData = JSON.parse(JSON.stringify(pathData));
},
//直接替换菜单
swapUrl(url, type, _name = '') {
if (type == 1) {
this.pathData = [{name: _name, path: url}];
} else {
window.open(url);
}
},
//确认修改密码
sureResetPassword(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.sendRequest('Retail/Menu/resetPassword', {
data: {
oldPass: this.passwordForm.oldPass,
newPass: this.passwordForm.newPass,
newRePass: this.passwordForm.newRePass
},
success: (res) => {
if (res.status == 1) {
this.$message.success(res.message);
this.showResetPassword = false;
this.passwordForm = {
oldPass: '',
newPass: '',
newRePass: '',
};
} else {
this.$message.error(res.message);
}
}
})
}
});
},
//保存头像设置
setUserAvatar() {
if (!this.avatar_id || !this.avatar) {
return this.$message.warning('您未修改头像');
}
this.sendRequest('Retail/Menu/setUserImage', {
data: {
avatar: this.avatar,
avatar_id: this.avatar_id,
},
success: (res) => {
if (res.status == 1) {
this.user_avatar = this.avatar;
this.$message.success(res.message);
this.showSetUserAvatar = false;
} else {
this.$message.error(res.message);
}
}
})
},
//解绑微信
relieveWx() {
this.$confirm('您确认解绑微信吗?', '温馨提示', {
confirmButtonText: '解绑',
cancelButtonText: '取消'
}).then(() => {
this.sendRequest('Retail/Menu/relieveWx', {
data: {},
success: (res) => {
if (res.status == 1) {
this.isBinding = false;
this.$message.success(res.message);
} else {
this.$message.error(res.message);
}
}
})
}).catch(() => {
});
},
//微信扫码绑定---关闭授权
closeCode() {
clearTimeout(this.check_scan);
clearTimeout(this.check_auth);
this.showUserAuthCode = false;
},
//微信扫码绑定---刷新token
getTokenUrl() {
this.sendRequest('Retail/Menu/random', {
data: {},
success: (res) => {
if (res.status == 1) {
this.code = res.data.url;
this.scan_title = res.data.title;
this.check(res.data.token, 0);
this.showUserAuthCode = true;
this.isTimeOut = false;
this.isScanCode = false;
} else {
this.$message.error(rea.message);
}
}
})
},
/* 判断二维码过期时间 */
check(token, time) {
if (time >= 30) {
//显示刷新按钮
this.isTimeOut = true;
clearTimeout(this.check_scan);
return false;
} else {
this.check_scan = setTimeout(() => {
this.sendRequest('Retail/Menu/check', {
data: {
token: token,
},
success: (res) => {
if (res.status == 1) {
//显示扫面成功
clearTimeout(this.check_scan);
this.isScanCode = true;
this.auth(token, 0); // 调起授权计时器
} else if (res.status == 2) {
clearTimeout(this.check_scan);
this.showUserAuthCode = false;
this.isBinding = true;
this.$message.success(res.message);
} else if (res.status == 3) {
clearTimeout(this.check_scan);
this.$message.error(res.message);
} else if (res.status == 4) {
this.isTimeOut = true;
clearTimeout(this.check_scan);
this.$message.error(res.message);
} else {
time++;
this.check(token, time);
}
}
})
}, 1000)
}
},
/* 判断授权过期时间 */
auth(token, time) {
if (time >= 30) {
//显示刷新二维码按钮
clearTimeout(this.check_auth);
this.isTimeOut = true;
this.isScanCode = false;
return false;
} else {
this.check_auth = setTimeout(() => {
this.sendRequest('Retail/Menu/auth', {
data: {token: token},
success: (res) => {
if (res.status == 1) { // 授权
//用户授权成功
clearTimeout(this.check_scan);
this.showUserAuthCode = false;
this.isBinding = true;
this.$message.success(res.message);
} else if (res.status == 2) { // 取消授权
clearTimeout(this.check_scan);
this.showUserAuthCode = false;
this.$message.error(res.message);
} else if (res.status == 3) {
this.isTimeOut = true;
clearTimeout(this.check_scan);
this.$message.error(res.message);
} else {
time++;
this.auth(token, time);
}
}
})
}, 1000)
}
},
//退出登录
loginOutBefore() {
this.showLoginOut = true;
},
//确认退出登录
sureLoginOut() {
localStorage.removeItem('thisPath');
window.location.href = "{:U('loginOut')}";
},
//点击导航栏路由
breadcrumbClick(index) {
if (index < this.pathData.length - 1 && this.pathData[index].path) {
if (typeof this.pathData[index + 1].onClose == "function") {
this.pathData[index + 1].onClose();
}
this.pathData = this.pathData.slice(0, index + 1);
this.is_back_preview = true;
}
},
//返回上一页,仅针对子菜单返回上一级菜单
backPreview() {
try {
if (this.pathData[this.pathData.length - 2] && this.pathData[this.pathData.length - 2].path) {
this.breadcrumbClick(MenuApp.pathData.length - 2);
}
} catch (e) {
console.error('The page is already a level one page, and cannot be returned to the previous level');
}
},
//载入页面、刷新页面
refreshWindow(pathData = null) {
this.loading = true;
if (pathData && typeof pathData == "object") {
//重新设置路由
this.pathData = pathData;
return;
} else if (typeof pathData == "string") {
//直接替换为固定地址
this.pathData[this.pathData.length - 1].path = pathData;
return;
}
top.layer.closeAll();
let index = this.pathData.length - 1;
let path = this.pathData[index].path;
if (this.iframeUrlList.indexOf(path) >= 0) {
this.iframeSrc = path;
let _iframe = document.getElementById('secondIframe');
if (_iframe) {
_iframe.contentWindow.location.reload(true);
}
this.loading = false;
} else {
let _i = this.pagePathList.indexOf(path);
if (_i == -1 || typeof pathData == "boolean" && pathData && !this.is_back_preview) {
$.get(path, (data) => {
let f = document.getElementById('myInclude');
if (_i >= 0) {
f.removeChild(f.childNodes[_i]);
}
let _page = document.createElement('div');
_page.className = 'include-page';
_page.setAttribute('data-i', index);
_page.setAttribute('data-p', path);
_page.style.zIndex = this.pagePathList.length + 1;
f.appendChild(_page);
this.pagePathList.push(path);
$(".include-page[data-i='" + index + "']").html(data);
this.loading = false;
});
} else {
this.is_back_preview = false;
this.loading = false;
}
}
localStorage.thisPath = JSON.stringify(this.pathData);
},
//获取可用区域宽高
getWindowsClient() {
let client = $(this.$refs.MenuIndexContainer)[0].getBoundingClientRect();
return {
width: client.width - 200,
height: client.height - 145,
}
},
getContainerClientHeight() {
return this.getWindowsClient().height;
},
getContainerClientWidth() {
return this.getWindowsClient().width;
},
//根据路径获取页面导航
getActMenuIndex(path, menuList) {
if (this.actMenuIndex != -1 && this.actMenuIndex) {
let arr = this.actMenuIndex.split('-')
let menu = [...this.menuList];
let _path = ''
for (let k in arr) {
if (menu[arr[k]]) {
if (menu[arr[k]].path) {
_path = menu[arr[k]].path;
break;
}
menu = menu[arr[k]].list
} else {
break
}
}
if (_path == path) {
return this.actMenuIndex;
}
} else {
for (let i = 0; i < menuList.length; i++) {
if (menuList[i]['list']) {
let list_i = this.getActMenuIndex(path, menuList[i]['list']);
if (list_i === false) {
continue;
} else {
return i + '-' + list_i;
}
} else if (menuList[i]['path'] == path) {
return i + '';
}
}
}
return false;
},
//获取当前页面url携带的某个参数
getQueryVariable(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(MenuApp.pathData[MenuApp.pathData.length - 1].path) || [, ""])[1].replace(/\+/g, '%20')) || null
},
//公告详情
noticeDetail() {
this.swapUrl('/index.php/Retail/StoreNotice/index', 1, '门店公告');
},
//初始化菜单栏
unitMenu() {
let thisPath = localStorage.thisPath;
try {
thisPath = JSON.parse(thisPath);
} catch (e) {
}
if (thisPath && typeof thisPath == "object") {
let actMenuIndex = '';
for (let i = 0; i < thisPath.length; i++) {
let index = this.getActMenuIndex(thisPath[i].path, this.menuList);
if (index) {
actMenuIndex = index;
}
}
if (actMenuIndex) {
this.actMenuIndex = actMenuIndex;
this.selectMenu(actMenuIndex);
return;
}
}
let pathData;
if (!this.menuList[0].path && !this.menuList[0].type) {
this.actMenuIndex = '0';
if (!this.menuList[0].list[0].path) {
//三级菜单
pathData = [this.menuList[0], [this.menuList[0].list[0]], this.menuList[0].list[0].list[0]]
} else {
//二级菜单
pathData = [this.menuList[0], this.menuList[0].list[0]];
}
} else if (this.menuList[0].type) {
if (this.menuList[1].path) {
this.actMenuIndex = '1';
pathData = [this.menuList[1]];
} else {
this.actMenuIndex = '1';
pathData = [this.menuList[1], this.menuList[1].list[0]];
}
} else {
this.actMenuIndex = '0';
pathData = [this.menuList[0]];
}
this.pathData = JSON.parse(JSON.stringify(pathData));
},
},
mounted() {
},
created() {
let web_ico_url = localStorage.getItem('web_ico_url');
let web_system_name = localStorage.getItem('web_system_name');
web_ico_url && $('head').append(`<link rel='icon' type="image/x-icon" href='${web_ico_url}'>`);
web_system_name && $('head').append(`<title>${web_system_name}后台管理系统</title>`);
window.onload = window.onresize = () => {
let width = this.$refs.titleRight ? this.$refs.titleRight.offsetWidth : window.innerWidth;
if (width < 1020) {
this.rightMenuRow = false;
} else {
this.rightMenuRow = true;
}
};
this.sendRequest('Retail/Menu/getMenuData', {
success: (res) => {
if (res.status == 1) {
this.menuLoading = false;
this.menuList = res.data.menu;
this.$nextTick(() => {
if (this.menuList.length) {
$('head').append(`<link rel='icon' type="image/x-icon" href='${res.data.logo.icourl}'>`);
$('head').append(`<title>${res.data.logo.name ? res.data.logo.name : ''}后台管理系统</title>`);
localStorage.setItem('web_ico_url', res.data.logo.icourl ? res.data.logo.icourl : '');
localStorage.setItem('web_system_name', res.data.logo.name ? res.data.logo.name : '');
this.unitMenu();
this.avatar = res.data.user.avatar;
this.user_avatar = res.data.user.avatar;
this.isBinding = res.data.user.isBinding;
this.web_stage_url = res.data.logo.stageurl ? res.data.logo.stageurl : '/Public/Retail/images/zhihuilogo4.png';
this.username = res.data.user.name;
this.other_name = res.data.user.other_name;
this.manageName = res.data.manageName;
this.notice = res.data.notice;
this.openScan = res.data.openScan;
//门店权限
Vue.prototype.storeAuth = res.data.store_id ? res.data.store_auth : {};
localStorage.store_auth = JSON.stringify(Vue.prototype.storeAuth);
//商户、门店信息
localStorage.merchant_id = res.data.merchant_id ? res.data.merchant_id : '';
localStorage.store_id = res.data.store_id ? res.data.store_id : '';
localStorage.industry_id = res.data.industry_id ? res.data.industry_id : '';
localStorage.store_name = res.data.store_name ? res.data.store_name : '';
} else {
this.$alert('当前用户暂无后台的操作权限', '提示', {
confirmButtonText: '退出登录',
showClose: false,
callback: action => {
this.sureLoginOut();
}
});
}
})
} else {
this.$message.error(res.message);
}
}
});
},
watch: {
//监听菜单栏变化
pathData: {
deep: true, //深度监听设置为 true
handler(n, o) {
// console.log('menu发生变化:当前页面:' + n[n.length - 1].path);
if (this.iframeUrlList.indexOf(n[n.length - 1].path) >= 0) {
this.refreshWindow(true);
} else {
this.pathList = [];
this.pagePathList = [];
n.forEach((item) => {
if (item.path) this.pathList.push(item.path);
});
let f = document.getElementById('myInclude');
if (f && f.childNodes) {
for (let i = f.childNodes.length - 1; i >= 0; i--) {
let path = f.childNodes[i].getAttribute('data-p');
if (!path || this.pathList.indexOf(path) == -1) {
f.removeChild(f.childNodes[i]);
} else if (path) {
this.pagePathList.push(path);
}
}
}
this.iframeSrc = '';
this.refreshWindow(true);
let index = this.getActMenuIndex(n[n.length - 1].path, this.menuList);
if (index !== false) {
this.actMenuIndex = index;
}
}
}
}
}
});
})
</script>
</body>
</html>