bocai_supplyChain_pc/src/views/merchantBack.vue

<template>
  <div class>
    <div>
      <div class="topmenu" style="display: flex;justify-content: space-between;background-color: #fff; box-shadow: 1px 1px 2px #e8e8e8; position: fixed; top: 0; z-index: 100">
        <div style>
          <div class="logo" style="box-shadow: none; min-width: 160px; max-width: 160px; margin-left: -8px">
            <div @click.stop="clearOpenkey" style="cursor: pointer; border-right: 1px solid #eee;">
              <router-link to="/main">
                <img src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/daotianLogo.svg" alt />
                <!-- <router-link :to="{name:'home'}"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/adminLogo.svg" alt=""> -->
                <h1>商家管理后台</h1>
                <!-- style="position: relative;top: -1px;" -->
              </router-link>
            </div>
          </div>
          <a-menu :selectedKeys="[$route.name]" :openKeys.sync="openKeys" @click="handleClick" class mode="inline" style="overflow-y:scroll;height:calc(100vh - 49px);overflow-x:hidden">
            <template v-for="(item, index) in roles">
              <a-menu-item :key="item.name" v-if="item.path != '' && item.level < 3">
                <router-link :to="{ name: item.name }">
                  <i class="iconfont f12 mr8" :class="item.icon" />
                  <a-badge dot v-if="myStatisticRedDot && item.name == 'myStatistic'">
                    <span class="nav-text" v-text="item.title"></span>
                  </a-badge>
                  <span v-else class="nav-text" v-text="item.title"></span>
                </router-link>
              </a-menu-item>
              <a-sub-menu :key="item.name" v-if="item.path == ''">
                <span slot="title">
                  <i class="iconfont f12 mr8" :class="item.icon" />
                  <span v-text="item.title"></span>
                </span>
                <a-menu-item-group>
                  <a-menu-item class="f14" :key="child.name" v-for="(child, idx) in item.children">
                    <!-- <router-link :to="{name:child.name}" :target="child.title == '监控页' ? '_blank' : '_self'"> -->
                    <router-link :to="{ name: child.name }">{{ child.title }}</router-link>
                  </a-menu-item>
                </a-menu-item-group>
              </a-sub-menu>
            </template>
          </a-menu>
        </div>
        <div class="flex1" style="z-index: 999">
          <div class="logined mr24 fsa" style="height:48px;line-height:48px;">
            <div class="fl">
              <span class="f16 ml16 fw500 c085">{{ currentPage }}</span>
            </div>
            <a-dropdown overlayClassName="logindropdown" placement="bottomRight">
              <!-- <img :src="userbaseInfo.imgSrc" alt="" v-if="userbaseInfo.imgSrc !== ''" style="border-radius: 50%" />
              <span v-else><i class="iconfont icon-morentouxiang" style="color:#ff4400"></i></span>-->
              <span class="fsa f14">
                <span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
                <img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else />
                <div class="ml4">{{ userbaseInfo.userName }}</div>
              </span>
              <div class="loginbox backTable" slot="overlay">
                <router-link to="/accountsetting">
                  <div>
                    <span>
                      <i class="iconfont icon-gerenzhongxin"></i>个人中心
                    </span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                </router-link>
                <router-link to="/main">
                  <div>
                    <span>
                      <i class="iconfont icon-shangjiahoutai"></i>返回首页
                    </span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                </router-link>
                <button @click="logout">退出登录</button>
              </div>
            </a-dropdown>
          </div>
        </div>
      </div>
      <a-layout-content class="trans" style="padding-top: 64px;">
        <!-- <div id="littleUse" style="margin-top: 48px"> -->
        <router-view @setTitle="setTitle"></router-view>
        <!-- </div> -->
      </a-layout-content>

      <div class="backFooter" style="height: 64px;background-color: #f5f5f5;line-height: 64px;color: #999;font-size: 14px;text-align: center;padding-left: 152px;">Copyright © 2015 - 2021 Matripe. All Rights Reserved.</div>
    </div>
    <!-- <notice @parentPageCallBack="showMessageFromChild" ref="child"></notice> -->
  </div>
</template>

<script>
import { logoutApi } from '../api/login'

export default {
  inject: ['reload'],

  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      roles: [
        {
          id: 294,
          parentId: '',
          name: 'dashboard',
          url: ' ',
          icon: 'icon-yibiaopan',
          component: '',
          path: '',
          title: '仪表盘',
          menuName: 'dashboard',
          level: 1,
          menuType: 1,
          children: [
            // {
            //   id: 295,
            //   parentId: 294,
            //   name: 'MemberInfo',
            //   url: '/memberInfo',
            //   icon: '',
            //   component: 'home',
            //   path: '/home',
            //   title: '我的团队',
            //   menuName: 'dashboard',
            //   level: 2,
            //   menuType: 1,
            //   children: '',
            // },
            {
              id: -110,
              parentId: 294,
              name: 'WorkBench',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '工作台',
              menuName: '工作台',
            },
            {
              id: -110,
              parentId: 294,
              name: 'BocaiTV',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '伯才TV',
              menuName: '伯才TV',
            },
            {
              id: 402,
              parentId: 294,
              name: 'DataScreen',
              url: '/statistics/dataScreen',
              icon: '',
              component: 'statistics/dataScreen',
              path: '/statistics/dataScreen',
              title: '数据大屏',
              menuName: 'dashboard',
              level: 2,
              menuType: 1,
              children: '',
            },
          ],
        },
        {
          id: 294,
          parentId: '',
          name: 'teammanagement',
          url: ' ',
          icon: 'icon-tuanduiguanli',

          component: '',
          path: '',
          title: '团队管理',
          menuName: 'teammanagement',
          level: 1,
          menuType: 1,
          children: [
            {
              id: 295,
              parentId: 294,
              name: 'MemberInfo',
              url: '/memberInfo',
              icon: '',
              component: 'home',
              path: '/home',
              title: '团队成员',
              menuName: 'teammanagement',
              level: 2,
              menuType: 1,
              children: '',
            },
            {
              id: 296,
              parentId: 294,
              name: 'RoleManagement',
              url: '/memberInfo',
              icon: '',
              component: 'home',
              path: '/home',
              title: '角色管理',
              menuName: 'teammanagement',
              level: 2,
              menuType: 1,
              children: '',
            },
          ],
        },
        {
          id: 294,
          parentId: '',
          name: 'group',
          url: ' ',
          icon: 'icon-shujutongji',
          component: '',
          path: '',
          title: '数据统计',
          menuName: 'group',
          level: 1,
          menuType: 1,
          children: [
            {
              id: 295,
              parentId: 294,
              name: 'DataStatistics',
              url: '/memberInfo',
              icon: '',
              component: 'home',
              path: '/home',
              title: '团队数据',
              menuName: 'group',
              level: 2,
              menuType: 1,
              children: '',
            },
          ],
        },
        {
          id: 294,
          parentId: '',
          name: 'container',
          url: ' ',
          icon: 'icon-neirongguanli',
          component: '',
          path: '',
          title: '内容管理',
          menuName: 'container',
          level: 1,
          menuType: 1,
          children: [
            {
              id: 295,
              parentId: 294,
              name: 'NotificationCenter',
              url: '/memberInfo',
              icon: '',
              component: 'home',
              path: '/home',
              title: '通知中心',
              menuName: 'container',
              level: 2,
              menuType: 1,
              children: '',
            },
          ],
        },
      ],
      openKeys: ['dashboard'],
      userbaseInfo: JSON.parse(localStorage.getItem('LOGIN_DATA')),
      currentPage: '',
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    handleClick(e) {
      console.log(e)
      this.openKeys = e.keyPath
      // console.log('click', e.key + "===" + this.sk)

      if (e.key == 13) {
        this.secondmenu = true
      } else {
        this.secondmenu = false
      }
    },
    async logout() {
      try {
        const data = await logoutApi()
        console.log(data)
        if (data.status === 200) {
          localStorage.removeItem('LOGIN_DATA')
          this.reload()
          this.$router.push('/main')
        } else {
          console.log(1)
        }
      } catch (error) {
        console.log(error)
        this.$message.warning(error.message)
      }
    },
    setTitle(e) {
      console.log(e)
      this.currentPage = e
    },
  },
}
</script>

<style scoped lang="less">
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/ant.css';
@import '//at.alicdn.com/t/c/font_3280016_tiqe2sb1q2.css';

body {
  margin: 0;
  padding: 0;
  background: #f0f2f5;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.ant-menu {
  border-right: 1px solid #eee !important;
  &::-webkit-scrollbar {
    width: 0 !important;
  }
}
header.header,
.left-sider {
  font-size: 14px;
}

#littleUse {
  min-height: calc(100vh - 118px);
  min-width: 1080px;
}

.trans {
  -webkit-transition: all 0.2s;
  // height: calc(100vh - 64px);
  min-height: calc(100vh - 64px);
  overflow: auto;
  background-color: #f5f5f5;
  transition: all 0.2s;
  padding: 18px;
  padding-right: 36px;
  padding-bottom: 0;
  // padding-right: 32px;
  margin-left: 152px !important;
}

.header {
  background-color: #fff;
  padding: 0;
  width: 100%;
  z-index: 90;
  /*box-shadow: 1px 1px 2px #ddd;*/
  border-bottom: 1px solid #e8e8e8;
}
.logo {
  background: #fff;
  /*border-right: 1px solid #e8e8e8;*/
  border-bottom: 1px solid #e8e8e8;
  position: relative;
  height: 49px;
  overflow: hidden;
  line-height: 48px;
  background: #fff;
  margin-left: -8px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
}

.logo img,
.topLogo {
  height: 18px;
  width: 18px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  margin-bottom: 3px;
}

.logo h1 {
  font-size: 16px;
  margin: 0 0 0 4px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  font-weight: 500;
  vertical-align: middle;
  display: inline-block;
}

#components-layout-demo-top-side-2 .logo {
  width: 130px !important;
  background: url(http://matripe.oss-cn-beijing.aliyuncs.com/adminlogo.png) !important;
}

.breadcrumb {
  .breadcrumb-menu {
    margin-top: 16px;
  }

  h2 {
    margin-bottom: 0;
    font-size: 20px;
    float: left;
  }
}

.breadcrumb {
  background-color: #fff;
  padding: 16px 24px;
}

.sm-breadcrumb {
  padding: 0 16px;

  .ant-tabs .ant-tabs-small-bar .ant-tabs-nav-container {
    font-size: 12px;
  }

  .breadcrumb-menu.pb0 {
    padding-bottom: 0;
  }

  .ant-tabs-bar {
    border-bottom: 0;
  }

  .breadcrumb h2 {
    margin-bottom: 0;
    font-size: 20px;
    float: left;
  }

  .ant-tabs-bar.ant-tabs-top-bar {
    margin-bottom: 0;
  }
}

.sm-breadcrumb .breadcrumb-menu {
  margin-top: 0px;
  padding: 16px 0;
}

.p30.sm-p30 {
  padding: 16px;
}

/*.ant-modal-body .ant-table-tbody > tr > td,.ant-modal-body .ant-table-thead > tr > th {
   white-space: initial;
}
*/

.ant-table-tbody > tr > td:first-child {
  overflow: initial;
  white-space: initial;
  text-overflow: initial;
}

.specialNullA:empty:before {
  content: '-';
  color: #333;
  cursor: pointer;
}

.header,
.left-sider {
  position: fixed;
  font-size: 12px;
  /*-webkit-box-shadow: 1px 1px 2px #ddd;
    box-shadow: 1px 1px 2px #ddd;*/
}

/deep/.ant-menu-item-group-title {
  padding: 0 !important;
}

.topmenu {
  width: 100%;
  height: 48px;
}

.ant-layout-header {
  height: 49px;
  line-height: 49px;
}
.logined {
  overflow: hidden;
  // border: 1px solid #eee;
  line-height: 38px;
  font-size: 14px;
  cursor: default;
  &:hover {
    // color: #ff4400;
  }
  img {
    width: 24px;
    height: 24px;
  }
}
.loginbox {
  > div:first-child {
    text-align: left;
    padding-left: 0;
  }
}
/deep/.ant-tag {
  &.ant-tag-checkable:hover {
    // color: #ff4400;
    cursor: pointer;
  }
  &.ant-tag-checkable:active {
    // color: #ff4400;
    background-color: transparent;
  }
  &.ant-tag-checkable-checked {
    background-color: transparent;
    color: #1890ff;
  }
}
/deep/.spinstyle {
  .ant-spin-dot-item {
    background-color: #1890ff !important;
  }
  .ant-spin-text {
    color: #1890ff !important;
  }
}
.backFooter {
  position: unset;
  // bottom: 0;
}
</style>