pxx-pc/src/views/User.vue

<template>
  <div style="width: 100vw;">
    <div class="content flex">
      <div class="left-nav">
        <div class="nav-item hand" v-for="(item,index) in navList" @click="navto(item.path)"
          :class="{'action-item':currentUrl.indexOf(item.path) !=-1}">
          {{item.tit}}
        </div>
      </div>
      <div class="right-body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex';
  export default {
    name: 'user',
    data() {
      return {
        navList: [{
            tit: '基本信息',
            path: '/user/setUserinfo'
          },
          {
            tit: '资金流水',
            path: '/user/money'
          },
          {
            tit: '充值记录',
            path: '/user/rechangeList'
          },
          {
            tit: '提现记录',
            path: '/user/takingList'
          },
          {
            tit: '转账记录',
            path: '/user/transferList'
          }
        ]
      }
    },
    computed: {
      ...mapState(['userInfo', 'baseInfo']),
      currentUrl() {
        return this.$route.path
      },
    },
    methods: {
      navto(path) {
        this.$router.push(path)
      }
    },
    mounted() {
      if (this.userInfo.agent_id == 1) {

        this.navList.splice(1, 0, {
          tit: '注册码',
          path: '/user/regList'
        }, );
		this.navList.splice(1, 0, {
		  tit: '用户管理',
		  path: '/user/userAdmin'
		}, );
      } else {
        this.navList.splice(1, 0, {
          tit: 'Token',
          path: '/user/tokenOrderList'
        }, );
        this.navList.splice(2, 0, {
          tit: '结算申请',
          path: '/user/jssq'
        }, );
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    width: 1425px;
    max-width: 1425px;
    margin: auto;
  }

  .left-nav {
    padding-top: 25px;
    width: 120px;
    height: 710px;
    flex-shrink: 0;

    .nav-item {
      height: 50px;
      line-height: 50px;
      margin-bottom: 20px;
      text-align: center;
    }

    .action-item {
      color: #007aff;
      border-right: #007aff 2px solid;
      font-weight: bold;
    }

  }

  .right-body {
    flex-grow: 1;
    max-width: 1240px;
    margin-left: 25px;
  }
</style>