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/new_logo.jpg"
        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: "/orderCenter",
          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: "/customerMan",
          unicon:
            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E7%94%A8%E6%88%B7%E7%B1%BB.png",
          icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E7%94%A8%E6%88%B7%E7%B1%BB%20%281%29.png",
        },
        {
          name: "付费客户",
          path: "/payUser",
          unicon:
            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E6%96%B0%E5%A2%9E%E4%BB%98%E8%B4%B9%E4%BA%BA%E6%95%B0%20%281%29.png",
          icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E6%96%B0%E5%A2%9E%E4%BB%98%E8%B4%B9%E4%BA%BA%E6%95%B0.png",
        },
        {
          name: "店铺排班",
          path: "/schedulingDetail",
          unicon:
            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E6%8E%92%E7%8F%AD%E6%A8%A1%E5%9D%97%20%281%29.png",
          icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E6%8E%92%E7%8F%AD%E6%A8%A1%E5%9D%97.png",
        },
        {
          name: "营收管理",
          path: "/revenueManage",
          unicon:
            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E8%B5%84%E4%BA%A7%E6%B8%85%E5%8D%95%20%281%29.png",
          icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/%E8%B5%84%E4%BA%A7%E6%B8%85%E5%8D%95.png",
        },
      ],
      nowIndex: 0,
    };
  },
  watch: {
    $route(to, from) {
      // console.log(to, "tootototo");
      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);
        }
      });
      // 客户管理详情跳转测肤记录修改返回键显示
      if (to.path == "/testSkin") {
        this.$emit("changeIsBack", this.$route.query.isback);
      }
    },
  },
  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: 50px;
    height: 50px;
    border-radius: 8px;
  }
}

.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;
    margin-right: 2px;
  }
}

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

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