|
|
@@ -1,430 +1,76 @@
|
|
|
<template>
|
|
|
- <div :class="NavsideClass">
|
|
|
- <div class="logoContainer">
|
|
|
- <img src="../assets/img/nav/logo.png" height="40" width="180" />
|
|
|
- <i :class="[{ 'el-icon-s-unfold left_hide_icon': left_panel_state }, { 'el-icon-s-fold left_show_icon': !left_panel_state }]"
|
|
|
- @click="left_hide"></i>
|
|
|
- </div>
|
|
|
- <div class="userContainer">
|
|
|
- <!-- <img src="../assets/img/nav/head.png" height="51" width="51" /> -->
|
|
|
- <!-- <span>{{ ShopName }}</span>
|
|
|
- <em>{{ userLevelText }}</em>-->
|
|
|
- </div>
|
|
|
- <el-row :class="[{ 'shortnav': isCollapse }, { 'longNav': !isCollapse }]">
|
|
|
- <el-col :span="24">
|
|
|
- <el-menu :default-active="userLevelDeafult" class="el-menu-vertical-demo" @open="handleOpen"
|
|
|
- @close="handleClose" @select="handleSelect" :collapse="isCollapse" background-color="#ffffff"
|
|
|
- text-color="#777777" active-text-color="#fff"
|
|
|
-
|
|
|
- router>
|
|
|
- <el-menu-item :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs"
|
|
|
- popper-append-to-body="false"
|
|
|
- v-if="nav.show == userLevel">
|
|
|
- <i :class="nav.icon"></i>
|
|
|
- <span slot="title">{{ nav.clmname }}</span>
|
|
|
- </el-menu-item>
|
|
|
- </el-menu>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <div class="navSide">
|
|
|
+ <img class="logo" src="../assets/img/nav/logo.png"/>
|
|
|
+ <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
|
|
|
+ :collapse="isCollapse">
|
|
|
+ <el-submenu index="1" v-for="nav in navs">
|
|
|
+ <template slot="title">
|
|
|
+ <i :class="nav.icon"></i>
|
|
|
+ <span slot="title">{{ nav.clmname }}</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item-group>
|
|
|
+ <el-menu-item index="1-1">选项1</el-menu-item>
|
|
|
+ </el-menu-item-group>
|
|
|
+ </el-submenu>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import Navs from '../api/Navs';
|
|
|
- import {
|
|
|
- ManagerSelfQuery,
|
|
|
- ShopListQuery
|
|
|
- } from '../api/getApiRes.js'
|
|
|
-
|
|
|
- let qs = require('qs');
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isCollapse: document.body.clientWidth < 1366,
|
|
|
- left_panel_state: true,
|
|
|
- wildState: 0,
|
|
|
- navs: [],
|
|
|
- ShopName: '',
|
|
|
- userLevelText: '',
|
|
|
- NavsideClass: 'Navside',
|
|
|
- userLevel: 0,
|
|
|
- userLevelDeafult: "",
|
|
|
- }
|
|
|
- },
|
|
|
- // props: ['isCollapse'],
|
|
|
- mounted() {
|
|
|
- this.userLevelDeafult = this.$route.meta.clmid;
|
|
|
- this.getTableQuery();
|
|
|
- this.getManagerSelfQuery();
|
|
|
- if (document.body.clientWidth < 1024) {
|
|
|
- this.NavsideClass = 'NavsideShort'
|
|
|
- } else {
|
|
|
- this.NavsideClass = 'Navside'
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route(to, from) {
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 隐藏左侧和显示
|
|
|
- left_hide: function () {
|
|
|
- let that = this;
|
|
|
- that.left_panel_state = !that.left_panel_state;
|
|
|
- that.isCollapse = !that.isCollapse;
|
|
|
- this.$emit('lefthide');
|
|
|
-
|
|
|
- // if (!that.left_panel_state) {
|
|
|
- // this.$emit('left_hide_func');
|
|
|
- // } else {
|
|
|
- // this.$emit('right_hide_func');
|
|
|
- // }
|
|
|
- },
|
|
|
- handleSelect(i, s, t) {
|
|
|
- // this.$emit('TabsAdd', i);//触发事件
|
|
|
- },
|
|
|
- getTableQuery() {
|
|
|
- // 菜单
|
|
|
- this.navs = Navs;
|
|
|
- },
|
|
|
- getManagerSelfQuery() {
|
|
|
- let that = this;
|
|
|
- let param = {
|
|
|
- token: localStorage.token,
|
|
|
- };
|
|
|
- let postdata = qs.stringify(param);
|
|
|
- ManagerSelfQuery(postdata).then(res => {
|
|
|
- let json = res;
|
|
|
- if (json.Code == 0) {
|
|
|
- that.userLevelText = json.Rs.Role.Name;
|
|
|
- // 1 会员 2 系统 3 店铺 4 教练
|
|
|
- switch (parseInt(json.Rs.Role.Id)) {
|
|
|
- case 1:
|
|
|
- that.userLevel = 1;
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- that.userLevel = 2;
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- that.userLevel = 3;
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- that.userLevel = 4;
|
|
|
- break;
|
|
|
- }
|
|
|
- localStorage.shopId = json.Rs.ShopId;
|
|
|
- this.panelSelect(json.Rs.ShopId);
|
|
|
- } else {
|
|
|
- if (json.Code == 1010) {
|
|
|
- that.$message.error(json.Memo + ' 错误码：' + json.Code);
|
|
|
- that.$router.push({ path: '/login', query: { status: 1 } });
|
|
|
- return false
|
|
|
- } else {
|
|
|
- that.$message.error(json.Memo + ' 错误码：' + json.Code);
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取所属店铺
|
|
|
- panelSelect(ShopId) {
|
|
|
- let that = this;
|
|
|
- let param = {
|
|
|
- token: localStorage.token,
|
|
|
- };
|
|
|
- let postdata = qs.stringify(param);
|
|
|
- ShopListQuery(postdata).then(res => {
|
|
|
- let json = res;
|
|
|
- if (json.Code == 0) {
|
|
|
- json.Rs.map(function (item) {
|
|
|
- if (item.ShopID == ShopId) {
|
|
|
- that.ShopName = item.ShopName;
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- that.$message.error(json.Memo + ' 错误码：' + json.Code);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- handleOpen(key, keyPath) {
|
|
|
- // console.log(key, keyPath);
|
|
|
- },
|
|
|
- handleClose(key, keyPath) {
|
|
|
- // console.log(key, keyPath);
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
+import {
|
|
|
+ getNavListQuery,
|
|
|
+} from '../api/getApiRes.js'
|
|
|
+
|
|
|
+let qs = require('qs');
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isCollapse: true,
|
|
|
+ navs: [],
|
|
|
+ NavsideClass: 'Navside',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.userLevelDeafult = this.$route.meta.clmid;
|
|
|
+ if (document.body.clientWidth < 1024) {
|
|
|
+ this.NavsideClass = 'NavsideShort'
|
|
|
+ } else {
|
|
|
+ this.NavsideClass = 'Navside'
|
|
|
+ }
|
|
|
+ this.getTableQuery();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleOpen(key, keyPath) {
|
|
|
+ console.log(key, keyPath);
|
|
|
+ },
|
|
|
+ handleClose(key, keyPath) {
|
|
|
+ console.log(key, keyPath);
|
|
|
+ },
|
|
|
+ getTableQuery() {
|
|
|
+ // 菜单
|
|
|
+ this.navs = Navs;
|
|
|
+ console.log(Navs);
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
-<style scoped>
|
|
|
- /*注释*/
|
|
|
- .Navside {
|
|
|
- width: 100%;
|
|
|
- /* height: 910px; */
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- overflow-y: scroll;
|
|
|
- /*overflow-y: hidden;*/
|
|
|
- background-color: #fff;
|
|
|
- z-index: 4444;
|
|
|
- }
|
|
|
-
|
|
|
- .NavsideShort {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- /*height: 710px;*/
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- /*overflow-y: scroll;*/
|
|
|
- overflow-y: scroll;
|
|
|
- background-color: #fff;
|
|
|
- z-index: 4444;
|
|
|
- }
|
|
|
-
|
|
|
- .Navside::-webkit-scrollbar {
|
|
|
- /*滚动条整体样式*/
|
|
|
-
|
|
|
- width: 3px;
|
|
|
- /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
-
|
|
|
- height: 1px;
|
|
|
- }
|
|
|
-
|
|
|
- .Navside::-webkit-scrollbar-thumb {
|
|
|
- /*滚动条里面小方块*/
|
|
|
-
|
|
|
- border-radius: 3px;
|
|
|
-
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
-
|
|
|
- background: #f5f5f5;
|
|
|
- }
|
|
|
-
|
|
|
- .Navside::-webkit-scrollbar-track {
|
|
|
- /*滚动条里面轨道*/
|
|
|
-
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
-
|
|
|
- border-radius: 3px;
|
|
|
-
|
|
|
- background: #f5f5f5;
|
|
|
- }
|
|
|
-
|
|
|
- .NavsideShort::-webkit-scrollbar {
|
|
|
- /*滚动条整体样式*/
|
|
|
-
|
|
|
- width: 3px;
|
|
|
- /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
-
|
|
|
- height: 1px;
|
|
|
- }
|
|
|
-
|
|
|
- .NavsideShort::-webkit-scrollbar-thumb {
|
|
|
- /*滚动条里面小方块*/
|
|
|
-
|
|
|
- border-radius: 3px;
|
|
|
-
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
-
|
|
|
- background: #f5f5f5;
|
|
|
- }
|
|
|
-
|
|
|
- .NavsideShort::-webkit-scrollbar-track {
|
|
|
- /*滚动条里面轨道*/
|
|
|
-
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
-
|
|
|
- border-radius: 3px;
|
|
|
-
|
|
|
- background: #f5f5f5;
|
|
|
- }
|
|
|
-
|
|
|
- .logoContainer {
|
|
|
- width: 256px;
|
|
|
- height: 72px;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- background: #3799ff;
|
|
|
- }
|
|
|
-
|
|
|
- .logoContainer img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 1px;
|
|
|
- }
|
|
|
-
|
|
|
- .userContainer {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- margin-bottom: 16px;
|
|
|
- padding-top: 19px;
|
|
|
- padding-bottom: 19px;
|
|
|
- border-bottom: 1px solid #f0f2f5;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .userContainer img {
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- margin-bottom: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .userContainer span {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- color: #565656;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .userContainer em {
|
|
|
- width: 125px;
|
|
|
- height: 26px;
|
|
|
- line-height: 26px;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- background: #e75296;
|
|
|
- border-radius: 250px;
|
|
|
- font-style: normal;
|
|
|
- margin-top: 8px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-menu {
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-menu-item {}
|
|
|
-
|
|
|
- /deep/ .el-menu-item span {
|
|
|
- text-align: left;
|
|
|
- float: left;
|
|
|
- margin-left: 70px;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-menu-item.is-active {
|
|
|
- background-color: #3799ff !important;
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-menu-item:hover {
|
|
|
- background-color: #3799ff !important;
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-menu-item:hover i {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-menu-item i {
|
|
|
- position: inherit;
|
|
|
- float: left;
|
|
|
- line-height: 25px;
|
|
|
- margin-top: 15px;
|
|
|
- left: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- @media (min-width: 960px) and (max-width: 1367px) {
|
|
|
- .left_hide_icon {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-top: 8px;
|
|
|
- float: left;
|
|
|
- margin-left: 10px;
|
|
|
- cursor: pointer;
|
|
|
- color: #badcff;
|
|
|
- font-size: 22px;
|
|
|
- /*background: url("../assets/img/header/right.png")top center no-repeat;*/
|
|
|
- }
|
|
|
-
|
|
|
- /*.left_hide_icon:hover {*/
|
|
|
- /* background: #ccc;*/
|
|
|
- /* color: #fff;*/
|
|
|
- /*}*/
|
|
|
-
|
|
|
- .left_show_icon {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-top: 8px;
|
|
|
- float: left;
|
|
|
- margin-left: 10px;
|
|
|
- cursor: pointer;
|
|
|
- color: #badcff;
|
|
|
- font-size: 22px;
|
|
|
- /*background: url("../assets/img/header/left.png")top center no-repeat;*/
|
|
|
- }
|
|
|
-
|
|
|
- .logoContainer {
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-container.is-vertical {
|
|
|
- left: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu-item span {
|
|
|
- text-align: left;
|
|
|
- float: left;
|
|
|
- margin-left: 5px;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 12px;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .userContainer em {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu-item {
|
|
|
- padding: 0 !important;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-tooltip {
|
|
|
- padding: 0 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .userContainer span {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu-item,
|
|
|
- .el-submenu__title {
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .userContainer img {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-tooltip i {
|
|
|
- float: left;
|
|
|
- left: 10px;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-menu-item i {
|
|
|
- position: inherit;
|
|
|
- float: left;
|
|
|
- margin-top: 3px;
|
|
|
- left: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
+<style lang="scss" scoped>
|
|
|
+.navSide {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 60px;
|
|
|
+ height: 100%;
|
|
|
+ background: white;
|
|
|
+ box-shadow: #2c2e2f;
|
|
|
+}
|
|
|
+
|
|
|
+.logo {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ box-shadow: #2c2e2f;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-menu-vertical-demo {
|
|
|
+ width: 60px;
|
|
|
+}
|
|
|
</style>
|
