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

<template>
  <el-menu :collapse="isCollapse"
           background-color="#FA7D22"
           text-color="#FFFFFF"
           active-text-color="#FA7D22"
           :default-active="$route.path"
           style="width: 115px;"
           router>
    <div class="logo">
      <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/logo.png"
           alt="">
    </div>
    <div v-for="(item,index1) in menu"
         :key="index1">
      <!--      <el-submenu :index="index1+'a'" v-if="item.children && item.children.length > 0">-->
      <!--        <template slot="title">-->
      <!--          <i :class="item.icon"></i>-->
      <!--          <span v-show="!isCollapse" slot="title">{{ item.name }}</span>-->
      <!--        </template>-->
      <!--        <div v-for="(child,index2) in item.children" :key="'second'+index2">-->
      <!--          <el-menu-item :index="child.path">-->
      <!--            <i :class="child.icon"></i>-->
      <!--            <span slot="title">{{ child.name }}</span>-->
      <!--          </el-menu-item>-->
      <!--        </div>-->
      <!--      </el-submenu>-->
      <div class="el-menu-item"
           @click="handleSelect(index1,item)"
           :index="item.path"
           :class="index1==nowIndex?'active':''"
           :style="index1+1==nowIndex?'padding-bottom:0px':index1-1==nowIndex?'padding-top:0px':''">
        <img :src="index1==nowIndex?item.icon:item.unicon"><span slot="title">{{ item.name }}</span>
      </div>
    </div>
  </el-menu>
</template>

<script>
// import memberLogic from '@/server/memberLogic.js'

export default {
  props: ['isCollapse'],
  data () {
    return {
      menu: [
        {
          name: "首页",
          path: "/home",
          unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unhome.png',
          icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/home.png'

        },
        {
          name: "测肤记录",
          path: "/testSkin",
          unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unskin.png',
          icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/Skin.png',
        },
        {
          name: "发券中心",
          path: "/coupon",
          unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/uncoupon.png',
          icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/coupon.png',
        }, {
          name: "历史订单",
          path: "/historicalOrder",
          unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unhistory.png',
          icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/history.png',
        }, {
          name: "确定订单",
          path: "/confirmOrder",
          unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unconfirmOrder.png',
          icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/confirmOrder.png'
        },
        //  {
        //   name: "门店检测",
        //   path: "/storeDetection",
        //   icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/testing.png',
        //   unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/untesting.png'
        // },   
        {
          name: "客户管理",
          path: "/customerMan",
          unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unskin.png',
          icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/Skin.png',
        }
      ],
      nowIndex: 0
    }
  },
  watch: {
    $route (to, from) {
      let patname = `/${to.path.split('/')[1]}`
      console.log(window.location, 'window.location.pathname', to);

      this.$emit('changeIsBack', to.meta.isback)
      this.menu.forEach((item, index) => {
        if (patname == item.path) {
          this.nowIndex = index
          this.$emit('changeMenu', index)
        }
      })
    }
  },
  mounted () {
    let patname = `/${window.location.hash.substr(1).split('/')[1]}`
    console.log(window.location, 'window.location.pathname', patname);
    this.menu.forEach((item, index) => {
      if (patname == item.path) {
        this.nowIndex = index
        this.$emit('changeMenu', index)
      }
    })
  },
  methods: {
    handleSelect (index, item) {
      this.nowIndex = index
      this.$router.push({
        path: item.path
      })
      this.$emit('changeMenu', index)
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
  margin-top: 22px;
  text-align: center;

  img {
    width: 60px;
    height: 60px;
  }
}

.active {
  line-height: 46px !important;
  background: url("https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/select_icon.png")
    no-repeat;
  margin-right: -2px;
  background-size: 100% 100%;
  background-color: #fa7d22 !important;
  color: #fa7d22 !important;
}

.el-menu-item {
  margin-left: 8px;
  padding-left: 9px !important;
  height: auto;
  line-height: initial;
  padding: 13px 0;
  cursor: none;
  color: #ffffff;

  img {
    width: 20px;
    height: 20px;
  }
}

/deep/ .el-menu-item:focus {
  background-color: transparent;
}

/deep/ .el-menu-item:hover {
  background-color: transparent;
}
</style>