proginn-frontend/components/ws/menu.vue

<template>
  <section class="tech-menu">
    <ul class="menu-item-box">
      <li
        class="menu-item"
        :class="{'menu-item-selected': index === menuIndex}"
        v-for="(item, index) of items"
        :key="item + index"
        @click="clickItem(item, index)"
      >{{item.label}}</li>
    </ul>
    <button class="go-btn" @click="clickGo">{{goTitle}}</button>
  </section>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  props: {
    menuIndex: {
      type: Number,
      default() {
        return 0;
      }
    }
  },
  data() {
    return {
      ///wo/work_todo
      items: [
        {
          label: "我的工作",
          link: "/wo/work_todo"
        },
        {
          label: "协作群组",
          link: "/group"
        },
        // {
        //   label: "财务详情new",
        //   link: "/paysdetail"
        // },
        {
          label: "资金账户",
          link: "/wo/account"
        },
        {
          label: "信息设置",
          link: "/setting"
        },
        {
          label: "更多服务",
          link: "/wo/services"
        },
        {
          label: "代码托管GitInn",
          link: "https://www.gitinn.com/proginn/login?token=" + Cookies.get('x_access_token')
        },
        {
          label: "其他",
          link: "/wo/other"
        }
      ],
      homepageType: null
    };
  },
  computed: {
    goTitle() {
      if (this.homepageType)
        return this.homepageType === `1` ? `前往个人版` : `前往企业版`;
      else return ``;
    }
  },
  mounted() {
    this.homepageType = this.userinfo.home_page_type;
  },
  methods: {
    clickItem(item, index) {
      console.log(item.link);
      location.href = item.link;
    },
    /**
     * 点击前往
     */
    async clickGo() {
      let type = this.homepageType === `1` ? `2` : `1`;
      let res = await this.$axios.$post(`/api/user/update_info`, {
        home_page_type: type || `1`
      });
      this.$message({
        message: `更新成功, 即将刷新`,
        type: `success`
      });
      setTimeout(() => {
        location.reload();
      }, 1500);
    }
  }
};
</script>

<style scoped>
.tech-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 174px;
  height: 402px;
  background: white;
}
.menu-item-box {
  width: 100%;
  padding-top: 20px;
}
.menu-item {
  line-height: 40px;
  font-size: 15px;
  color: #333;
  padding-left: 40px;
  cursor: pointer;
}
.menu-item-selected {
  background: #f7f7f7;
}
.go-btn {
  width: 122px;
  height: 34px;
  background: #0093fd;
  color: white;
  border-radius: 17px;
  margin-top: 30px;
}
</style>