web-test/src/layout/live/head.vue

<template>
  <div id="heads">
    <div class="w_0100">
      <div class="superbanner">
        <img :src="top_bg" />
      </div>
      <div class="supertop">
        <div class="w_1200">
          <p>
            欢迎来到中科在线（长春）技术交易平台
          </p>
          <p class="username">
            <span v-if="user.uid">
              {{ user.name }}
              <button
                type="text"
                class="userCenter"
                @click="stnmae"
                v-if="user.role == '2' || user.role == '3' || user.role == '4' || user.role == '6' || user.role == '7'"
              >
                个人中心
              </button>
              <button type="button" class="logininfo" @click="zhuxiao">注销</button>
            </span>
            <span v-else>
              {{ user.name }}
              <button type="button" class="logininfo" @click="btnLogin">登录</button>
              <button type="button" class="logininfo" @click="btnLogin">注册</button>
            </span>
          </p>
        </div>
      </div>
      <div class="superlogo">
        <div class="w_1200">
          <a href="/platlive">
            <img :src="logo" />
            <span>
              中科在线（长春）技术交易平台
            </span>
          </a>
        </div>
      </div>
      <div class="supermenu">
        <div class="w_1200">
          <div class="info">
            <ul>
              <li :class="isTab('hallList') ? 'active' : ''">
                <a @click="turnTo('hallList')" target="">直播大厅</a>
                <span></span>
              </li>
              <li :class="isTab('market') ? 'active' : ''">
                <a @click="turnTo('market')" target="">科技超市</a>
                <span></span>
              </li>
              <li :class="isTab('service') ? 'active' : ''">
                <a @click="fuwu()" target="">创新服务</a>
                <span></span>
              </li>
              <li :class="isTab('dynamic') ? 'active' : ''">
                <a @click="turnTo('dynamic')" target="">动态监测</a>
                <span></span>
              </li>
              <li :class="isTab('technical') ? 'active' : ''">
                <a @click="turnTo('technical')" target="">技术交流</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: login } = createNamespacedHelpers('login');
export default {
  name: 'heads',
  props: {},
  components: {},
  data: () => {
    return {
      top_bg: require('@/assets/live/top_bg.png'),
      logo: require('@/assets/live/logo.png'),
    };
  },
  created() {
    console.log(this.user);
  },
  methods: {
    ...login({ logout: 'logout', transactiondtetle: 'delete' }),
    fuwu() {
      this.$router.push({ path: '/live/service' });
    },
    turnTo(type) {
      if (type == 'index') {
      } else if (type == 'hall_index') this.$router.push({ path: '/live/hall/index' });
      else this.$router.push({ path: `/${type}/index` });
    },
    isTab(type) {
      if (type == 'index') return this.$route.path.includes('/live/index');
      else return this.$route.path.includes(`/${type}`);
    },
    btnLogin() {
      this.$router.push({ path: '/newlogin' });
    },
    stnmae() {
      if (this.user.role == '2' || this.user.role == '3' || this.user.role == '6' || this.user.role == '7') {
        this.$router.push({ path: '/userCenter/index', query: { num: '1' } });
      } else if (this.user.role == '5') {
        this.$router.push('/hallList/index');
      } else if (this.user.role == '4') {
        this.$router.push({ path: '/adminCenter/index', query: { num: '1' } });
      } else {
        this.$router.push('/market/index');
      }
    },
    async zhuxiao() {
      this.logout();
      this.$message({
        message: '注销成功',
        type: 'success',
      });
      window.location.reload();
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
@import '~@/style/style.css';
.logininfo {
  font-size: 20px;
  margin: 0 0 0 5px;
}
.username span {
  cursor: pointer;
}
/deep/ button {
  cursor: pointer;
}
.userCenter {
  font-size: 16px;
  color: #fff;
  padding: 3px 10px;
  border-radius: 5px;
  font-weight: bold;
  border: 2px solid transparent;
}
.userCenter:hover {
  color: #fe950e;
  // border-color: #fe950e;
}
</style>