xinkeaboard/xinkeaboard-web/components/MemberLeftNav.vue

<!--个人中心左侧公共导航 @zjf-2020-12-26-->
<template>
  <div class="sld_member_left_nav">
    <template v-for="(item, index) in leftNavMenu" :key="index">
      <router-link :to="{ path: item.path }" class="menu">
        <i :class="{ iconfont: true, [item.icon]: true }"></i>
        {{ item.name }}
      </router-link>
      <template v-if="item.child.length">
        <template
          v-for="(item_child, index_child) in item.child"
          :key="index_child"
        >
          <router-link
            v-if="testIfShow(item_child)"
            :to="{ path: item_child.path, query: item_child.query }"
            :class="{
              submenu: true,
              cur_code_active: curCode == item_child.code,
            }"
            >{{ item_child.name }}</router-link
          >
        </template>
      </template>
    </template>
  </div>
</template>

<script setup>
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
import { useFiltersStore } from "@/store/filter.js";
const filtersStore = useFiltersStore();
// const L = lang_zn;
const L = getCurLanguage();
const router = useRouter();
const { proxy } = getCurrentInstance();
const curCode = ref("");
const memberInfo = filtersStore.getMemberInfo;
watchEffect(() => {
  let tmpPath = router.currentRoute.value.fullPath;

  if (
    router.currentRoute.value.name != undefined &&
    router.currentRoute.value.name
  ) {
    curCode.value = router.currentRoute.value.name;
    if (tmpPath == "/member/collect?type=store") {
      curCode.value = "memberCollectStore"; //关注店铺
    } else if (
      tmpPath == "/member/order/aftersales?type=return" ||
      tmpPath.indexOf("/member/order/refund/detail?curTitleId=2") > -1
    ) {
      curCode.value = "AfterSalesListReturn"; //我的退货
    } else if (
      tmpPath == "/member/order/aftersales" ||
      tmpPath.indexOf("/member/order/refund/detail?curTitleId=1") > -1
    ) {
      curCode.value = "AfterSalesList"; //我的退款
    }
  }

});
const leftNavMenu = [

  {
    code: "collect",
    icon: "icon-gerenzhongxinguanzhu",
    name: L["关注中心"],
    path: "/member/home",
    child: [
      {
        code: "member-collect",
        name: L["我的收藏"],
        path: "/member/collect",
      },
      {
        code: "memberCollectStore",
        query: { type: "store" },
        name: L["店铺收藏"],
        path: "/member/collect",
      },
      {
        code: "member-footprint",
        name: L["我的足迹"],
        path: "/member/footprint",
      },
    ],
  },

  {
    code: "member",
    icon: "icon-gerenzhongxinhuiyuanzhongxin",
    name: L["会员中心"],
    path: "/member/home",
    child: [
      {
        code: "member-info",
        name: L["会员信息"],
        path: "/member/info",
      },
      {
        code: "member-account",
        name: L["账号安全"],
        path: "/member/account",
      },

      // {
      //   code: "member-email",
      //   name: L["邮箱管理"],
      //   path: "/member/email",
      // },
      // {
      //   code: "member-pwd-login",
      //   name: L["登录密码"],
      //   path: "/member/pwd/login",
      // },
      {
        code: "member-enquiry-list",
        name: L["我的询盘"],
        path: "/member/enquiry/list"
      },
      {
        code: "member-download-center",
        name: L["下载中心"],
        path: "/member/download/center"
      },
      // {
      //   code: "member-address-list",
      //   name: L["收货地址"],
      //   path: "/member/address/list",
      // },

    ],
  },

];
const testIfShow = (nav_info) => {
  if (nav_info.code == "MemberResetPassword") {
    if (filtersStore.getMemberInfo.hasPayPassword == 1) {
      return true;
    } else {
      return false;
    }
  } else {
    return true;
  }
};
</script>

<style lang="scss" scoped>
@use "@/assets/style/theme.scss" as *;
.sld_member_left_nav {
  float: left;
  width: 240px;
  color: #666;
  font-size: 12px;
  /*font-family: MicrosoftYaHei;*/
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-top: 1px solid #fff;
  margin-top: -1px;
  margin-bottom: 20px;
  padding-bottom: 40px;

  .menu {
    display: block;
    color: #333333;
    font-size: 16px;
    /*font-family: Microsoft YaHei;*/
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 10px;
    padding-left: 15px;
    padding-top: 22px;
    border-top: 1px solid #ebebeb;

    &:nth-child(1) {
      margin-top: 0;
      border-top: none;
    }

    i {
      color: #888;
      font-size: 16px;
      font-weight: 400;
      margin-right: 5px;
    }
  }

  .submenu {
    display: block;
    line-height: 30px;
    color: #777777;
    font-size: 14px;
    /*font-family: Microsoft YaHei;*/
    font-weight: 400;
    padding-left: 41px;

    &:hover {
      font-weight: bold;
      color: $colorMain2;
    }

    &.cur_code_active {
      font-weight: bold;
      color: $colorMain2;
    }
  }
}
</style>