web-test/src/layout/userCenter/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-tickets"></i>
                <span>基本信息</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2">
              <template slot="title">
                <i class="el-icon-chat-dot-square"></i>
                <span :style="`color:${haveMsg ? 'red' : ''}`">消息管理</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-notebook-1"></i>
                <span>事项管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="5">
              <template slot="title">
                <i class="el-icon-video-camera"></i>
                <span>展会管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="6">
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>调研调查</span>
              </template>
            </el-menu-item>
            <el-menu-item index="7">
              <template slot="title">
                <i class="el-icon-edit"></i>
                <span>修改密码</span>
              </template>
            </el-menu-item>
            <el-menu-item index="8">
              <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');
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);
    this.onMessage();
  },
  async mounted() {
    this.channel();
  },
  methods: {
    ...login({ logout: 'logout', transactiondtetle: 'delete' }),
    ...personalChat({ getChatList: 'query' }),
    // 查询是否新消息
    async onMessage(message) {
      let res = await this.getChatList({ status: 0, receiver_id: this.user.uid });
      console.log(res.data);
      if (this.$checkRes(res)) {
        this.$set(this, `haveMsg`, res.data.length > 0);
      }
    },
    channel() {
      this.$stomp({
        [`/exchange/chat_message/${this.user.uid}`]: this.onMessage,
      });
    },
    // 菜单跳转
    selectMenu(key) {
      if (key == '8') {
        this.logout();
        this.$message({
          message: '退出登录成功',
          type: 'success',
        });
        this.$router.push({ path: '/webLogin' });
      } else {
        this.$router.push({ path: '/userCenter/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>