SEEC-Portal-Front/components/Navi.vue

<template>
  <nav class="nav">
    <div class="nav__body">
      <router-link to="/"><img src="/image/seec-logo--full.png" class="nav__logo" /></router-link>
      <ul class="nav__list nav__list-left">
        <li class="nav__item nav__item-left" id="v-step-0"><a href="http://helper.seecoder.cn" target="_self">HELPER</a></li>
        <li class="nav__item nav__item-left" id="v-step-1"><a :href="coder" target="_self">CODER</a></li>
        <li class="nav__item nav__item-left" id="v-step-2"><a :href="eval" target="_self">EVALUATOR</a></li>
        <li class="nav__item nav__item-left" id="v-step-3"><a :href="devcloud" target="_self">DEVCLOUD</a></li>
      </ul>
<!--      <el-input placeholder="搜索课程" class="nav__search" disabled>-->
<!--        <el-button slot="append" icon="el-icon-search" disabled></el-button>-->
<!--      </el-input>-->
      <ul class="nav__list nav__list-right" v-if="isLogin">
        <li class="nav__item">
          <router-link to="/person/info" v-if="!isAdmin" id="v-step-3">个人中心</router-link>
          <router-link to="/admin/checkApplications" v-else>平台管理</router-link>
        </li>
<!--        <li class="nav__item">-->
<!--          <router-link to="/rookie/first" v-if="!isAdmin" id="v-step-4">通关模式</router-link>-->
<!--        </li>-->
        <li class="nav__item">
          <el-popover
            placement="bottom-start"
            width="120"
            trigger="hover"
            popper-class="drop-container">
            <div class="drop-info">
              <div class="drop-info__item drop-info__name">{{userName}}</div>
              <div class="drop-info__item">({{userPhone}})</div>
            </div>
            <el-menu
              class="el-menu-vertical-demo drop-list">
              <el-menu-item index="2" v-if="isTeacher" disabled>
                教师界面
              </el-menu-item>
              <el-menu-item index="3" @click="logout">
                退出登录
              </el-menu-item>
            </el-menu>
            <img slot="reference" class="nav__photo" src="/image/default-photo.jpg"/>
          </el-popover>
        </li>
      </ul>
      <ul class="nav__list nav__list-right" v-else>
        <li class="nav__item"><router-link to="/login">登录</router-link></li>
        <li class="nav__item"><router-link to="/register">注册</router-link></li>
      </ul>
<!--      <v-tour class="v-tour-style" name="myTour" :steps="steps" :options="myOptions"></v-tour>-->
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Navi',
  data () {
    return {
      isLogin: !!this.$store.state.token,
      isTeacher: this.$store.state.user.role === 'TEACHER',
      isAdmin: this.$store.state.user.role === 'ADMIN',
      userName: this.$store.state.user.name,
      userPhone: this.$store.state.user.phone,
      myOptions: {
        useKeyboardNavigation: false, // 不使用←、→和ESC键来导航tour
        startTimeout: 1000, // 1秒后执行
        labels: {
          buttonSkip: '跳过',
          buttonPrevious: '上一步',
          buttonNext: '下一步',
          buttonStop: '关闭'
        }
      },
      steps: [
        {
          target: '#v-step-0', // We're using document.querySelector() under the hood
          content: '这里是帮助，里面会有一些帮助你的文档'
        },
        {
          target: '#v-step-1',
          content: '这里是做题系统，可以在上面进行做题编程'
        },
        {
          target: '#v-step-2',
          content: '这里是开发平台'
        },
        {
          target: '#v-step-3',
          content: '这里是个人中心，里面会有你的基本信息、学习数据等'
        },
        {
          target: '#v-step-4',
          content: '这里是通关模式，你可以获取题库的推荐，进行每日一题的训练'
        }
      ]
    }
  },
  // mounted () {
  //   this.$tours.myTour.start()
  // },

  methods: {
    logout () {
      this.$store.commit('saveToken', null)
      this.$store.commit('saveUser', {})
      this.$cookies.remove('token', { maxAge: 24 * 60 * 60 })
      this.$cookies.remove('user', { maxAge: 24 * 60 * 60 })
      this.refresh()
      this.$router.push('/')
    },
    refresh () {
      this.isLogin = !!this.$store.state.token
      this.isTeacher = this.$store.state.user.role === 'TEACHER'
      this.isAdmin = this.$store.state.user.role === 'ADMIN'
      this.userName = this.$store.state.user.name
      this.userPhone = this.$store.state.user.phone
    }
  },
  computed: {
    coder () {
      return this.$store.state.token ? 'https://coder.seec.seecoder.cn?id_token=' + this.$store.state.token : 'https://coder.seec.seecoder.cn'
    },
    eval () {
      return this.$store.state.token ? 'https://eval.seec.seecoder.cn?id_token=' + this.$store.state.token : 'https://eval.seec.seecoder.cn'
    },
    devcloud () {
      return this.$store.state.token ? 'https://devcloud.seec.seecoder.cn?id_token=' + this.$store.state.token : 'https://devcloud.seec.seecoder.cn'
    }
  }
}
</script>

<style scoped>

</style>