pad_spa/src/components/common/layout/layout.vue

<template>
  <div class="layout">
    <div class="menu-wrapper">
      <left-menu :isCollapse='isFold'
                 @changeMenu="changeMenu"
                 @changeIsBack="changeIsBack"></left-menu>
    </div>
    <div class="content">
      <header :style="menuIndex==0?'justify-content: space-between;':''">
        <div class="back-icon"
             v-if="isback"
             @click="goBack"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/back.png"
               alt=""></div>
        <div class="left"
             v-if="menuIndex==0">
          <div class="address">{{userInfo.store_name}}</div>
        </div>
        <div class="right">
          <div class="news"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png"></div>
          <div class="head-img"><img :src="userInfo.avatar_url"></div>
          <el-dropdown trigger="click"
                       placement="top"
                       @command="loginOut">
            <span class="el-dropdown-link">
              <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/logOut.png"
                   alt="">
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </header>
      <div class="main-wrapper">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import leftMenu from './leftMenu'
import api from '@/server/home'


export default {
  data () {
    return {
      isFold: false,    //导航菜单面板是否折叠
      userId: 0,
      menuIndex: 0,
      isback: false,
      userInfo: {
        name: '333'
      }
    }
  },
  created () {
    this.getUserInfo()
  },
  components: {
    leftMenu,
  },
  methods: {
    getUserInfo () {
      let that = this
      api.getUserInfo().then(res => {
        if (res.code == 200) {
          this.userInfo = res.data

        }
      })
    },
    loginOut () {
      localStorage.removeItem('token');
      location.reload();
    },
    changeMenu (index) {
      this.menuIndex = index
    },
    changeIsBack (isback) {
      this.isback = isback
    },
    goBack () {
      this.$router.back()
    }
  },
  computed: {
    routerItems () {
      let resultArr = [];
      let routeNow = this.$route;
      let RootName = routeNow.matched[0].name; //当前路由的根路由name
      resultArr.push({
        name: RootName,
        path: ''
      })
      if (routeNow.matched[0].path !== '' && RootName !== routeNow.name) {
        if (RootName !== routeNow.name) {
          resultArr.push({
            name: routeNow.matched[1].name,
            path: routeNow.matched[1].path
          })
        }
      }
      return resultArr;
    }
  },
}

</script>

<style lang="less" scoped>
@import url(../../../style/root.less);

.layout {
  height: 100vh;
  display: flex;
}

.menu-wrapper {
  height: 100%;
  text-align: center;
  overflow: auto;
  background-color: #fa7d22;

  .el-menu {
    background-color: #fa7d22;

    .el-menu-item {
      color: #eee;
    }
  }
}

.content {
  background-color: #fff;
  flex: 1;
  overflow: hidden;

  header {
    line-height: 50px;
    font-size: 16px;
    color: #409eff;
    padding: 0 28px 0 13px;
    border-bottom: 1px solid #e5e5e5;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: right;

    position: relative;
    .back-icon {
      position: absolute;
      left: 19px;
      img {
        width: 16px;
      }
    }
    .left {
      font-size: 14px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #333333;
      line-height: 21px;
    }
    .right {
      float: right;
      display: flex;
      align-items: center;

      .news {
        width: 24px;
        height: 24px;

        img {
          width: 100%;
          display: block;
        }
      }
      .head-img {
        margin-left: 19px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        img {
          width: 100%;
          display: block;
        }
      }
      .el-dropdown-link {
        img {
          width: 28px;
          height: 28px;
          display: block;
        }
      }
    }
  }

  .main-wrapper {
    height: calc(100% - 51px);
    width: 100%;
    overflow: auto;
    padding: 20px;
    background-color: #f7f8fa;
  }
}
</style>