web-test/src/layout/adminCenter/menuInfo.vue

<template>
  <div id="menuInfo">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="top">
          <el-image :src="topUrl"></el-image>
          <span>个人中心</span>
        </el-col>
        <el-col :span="24">
          <el-menu :default-active="num" @select="selectMenu" text-color="#999" active-text-color="#044b79">
            <!-- <el-menu-item :index="index + ''" v-for="(item, index) in menu" :key="index">
              <template slot="title">
                <i class="el-icon-tickets"></i>
                <span>{{ item.title }}</span>
              </template>
            </el-menu-item> -->
            <el-menu-item index="1">
              <template slot="title">
                <i class="el-icon-pie-chart"></i>
                <span>绑定微信</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2">
              <template slot="title">
                <i class="el-icon-pie-chart"></i>
                <span>展会管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="3">
              <template slot="title">
                <i class="el-icon-pie-chart"></i>
                <span>申请管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="4">
              <template slot="title">
                <i class="el-icon-pie-chart"></i>
                <span>VIP用户</span>
              </template>
            </el-menu-item>
            <el-menu-item index="5">
              <template slot="title">
                <i class="el-icon-notebook-1"></i>
                <span>交易备案</span>
              </template>
            </el-menu-item>
            <el-menu-item index="6">
              <template slot="title">
                <i class="el-icon-notebook-1"></i>
                <span>嘉宾访谈</span>
              </template>
            </el-menu-item>
            <el-menu-item index="7">
              <template slot="title">
                <i class="el-icon-notebook-1"></i>
                <span>项目路演</span>
              </template>
            </el-menu-item>
            <el-menu-item index="8">
              <template slot="title">
                <i class="el-icon-notebook-1"></i>
                <span>统计报表</span>
              </template>
            </el-menu-item>
            <el-menu-item index="9">
              <template slot="title">
                <i class="el-icon-notebook-1"></i>
                <span>动态监测</span>
              </template>
            </el-menu-item>
            <el-menu-item index="10">
              <template slot="title">
                <i class="el-icon-refresh-right"></i>
                <span>返回</span>
              </template>
            </el-menu-item>
            <el-menu-item index="11">
              <template slot="title">
                <i class="el-icon-circle-close"></i>
                <span>退出登录</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: login } = createNamespacedHelpers('login');
const { mapActions: personalChat } = createNamespacedHelpers('personalchat');
const { mapActions: dock } = createNamespacedHelpers('dock');
export default {
  name: 'menuInfo',
  props: {},
  components: {},
  data: function() {
    return {
      topUrl: require('@/assets/live/square_big.png'),
      num: '1',
      haveMsg: false,
    };
  },
  created() {
    this.$set(this, `num`, this.$route.query.num);
  },
  mounted() {},
  methods: {
    ...login({ logout: 'logout', transactiondtetle: 'delete' }),
    ...dock(['fetch', 'query', 'delete', 'update', 'fetch']),
    // 菜单跳转
    async selectMenu(key) {
      if (key == '11') {
        this.logout();
        this.$message({
          message: '退出登录成功',
          type: 'success',
        });
        this.$router.push({ path: '/webLogin' });
      } else if (key == '10') {
        let res = await this.fetch(this.user.uid);
        this.$router.push({ path: '/hall/direct', query: { id: res.data.id, title: res.data.title } });
      } else {
        this.$router.push({ path: '/adminCenter/index', query: { num: key } });
      }
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.top {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #2d64b3;
  .el-image {
    float: left;
    padding: 10px 40px;
    width: 30px;
    height: 30px;
  }
  span {
    font-size: 24px;
    color: #92959a;
    font-weight: 600;
    float: left;
    text-align: left;
  }
}
/deep/.el-menu-item {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  border-bottom: 1px solid #2d64b3;
  margin: 0 20px;
}
</style>