hemall.terabimsoft.com.cn/plugins/shop_server/components/default/menu.vue

<template>
  <div class="left_nav">
    <div class="nav_title flex flex-a-c ">
      个人中心
    </div>
    <div class="nav flex flex-a-c " v-for="(item,index) in menu" :key="index" :class="[item.name==name?'color_red':'']"
         @click="toUrl(item.name)">
      {{item.text}}
    </div>
    <div class="nav flex flex-a-c " @click="toUrl('market')"
         :class="[
             name=='application_market'||
             name=='member-workerOrderlist'||
             name=='member-workerOrderDetail-id'||
             name=='member-userOrderDetail-id'||
             name=='member-userOrderlist'||
             name=='member-workerApply'||
             name=='market'?'color_red':''
         ]">
      营销互动
    </div>
    <div class="nav flex flex-a-c " @click="toUrl('member-extension')"
         :class="[name=='member-extension'?'color_red':'']">
      推广中心
    </div>
    <div class="nav flex flex-a-c " @click="toSet">
      个人资料
    </div>
  </div>

</template>

<script>
  import {mapState} from "vuex";

  export default {
    data() {
      return {
        name: "",
        menu: [
          {
            name: "order",
            text: "我的订单"
          },
          {
            name: "cart",
            text: "购物车"
          },
          {
            name: "member-collection",
            text: "我的收藏"
          },
          {
            name: "coupon-coupon_index",
            text: "优惠券"
          },
          {
            name: "coupon-coupon_store",
            text: "领券中心"
          },
          {
            name: "member-balance",
            text: ""
          },
          {
            name: "member-integral_v2",
            text: ""
          },
          {
            name: "member-address",
            text: "收件人管理"
          }
        ]
      };
    },
    components: {},
    mounted() {
      this.menu[5].text = this.basic_info.balance && this.basic_info.balance.balance ? this.basic_info.balance.balance : '余额';
      this.menu[6].text = this.basic_info.home && this.basic_info.home.mailInfo && this.basic_info.home.mailInfo.credit1 ? this.basic_info.home.mailInfo.credit1 : '积分';
      this.name = this.$route.name;
    },
    computed: {
      ...mapState(["basic_info"])
    },
    methods: {
      toSet() {
        window.location.href = this.fun.toRealURl(`member/info`);
      },
      toUrl(url) {
        this.$router.push(this.fun.getUrl(url));
      }
    }
  };
</script>
<style lang="scss" scoped>
  .left_nav {
    width: 236px;
    box-sizing: border-box;
    min-height: 600px;
    .nav {
      border: solid 1px #f0f0f0;
      border-bottom: none;
      border-top: none;
      width: 234px;
      height: 60px;
      box-sizing: border-box;
      padding-left: 36px;
      color: #999999;
      font-size: 16px;
      cursor: pointer;
    }
    .nav:last-child {
      border-bottom: solid 1px #f0f0f0;
    }
    .nav_title {
      width: 236px;
      height: 60px;
      box-sizing: border-box;
      padding-left: 36px;
      background-color: #f5f5f5;
      color: #202020;
      font-size: 16px;
    }
    .color_red {
      color: $red !important;
    }
  }
</style>