ngfrontend/src/views/profile/index.vue

<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20" class="el_c">

        <el-col :span="8" :xs="24">
          <user-card :user="user" />

          <account :user="user" />

          <login-password />

          <payment-password />
        </el-col>

        <!--        <el-col :span="8" :xs="24">-->
        <!--          <el-card style="margin: 2px 1px;">-->
        <!--            <el-tabs v-model="activeTab">-->
        <!--              <el-tab-pane :label="$t('profile.account')" name="account">-->
        <!--                <account :user="user" />-->
        <!--              </el-tab-pane>-->
        <!--              <el-tab-pane :label="$t('profile.loginPassword')" name="loginPassword">-->
        <!--                <login-password />-->
        <!--              </el-tab-pane>-->
        <!--              <el-tab-pane :label="$t('profile.paymentPassword')" name="paymentPassword">-->
        <!--                <payment-password />-->
        <!--              </el-tab-pane>-->
        <!--            </el-tabs>-->
        <!--          </el-card>-->
        <!--        </el-col>-->

      </el-row>
    </div>
  </div>
</template>

<script>
import usersInfo from '@/utils/usersInfo'
import LoginPassword from '@/views/profile/components/LoginPassword'
import PaymentPassword from '@/views/profile/components/PaymentPassword'
import { mapGetters } from 'vuex'
import Account from './components/Account'
import Activity from './components/Activity'
import Timeline from './components/Timeline'
import UserCard from './components/UserCard'

export default {
  name: 'Profile',
  components: { PaymentPassword, LoginPassword, UserCard, Activity, Timeline, Account },
  data() {
    return {
      user: {},
      activeTab: 'account'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles',
      'email',
      'mobile',
      'realName',
      'decLv',
      'crownLv'
    ])

  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        role: this.roles.join(' | '),
        name: usersInfo.userName(),
        email: usersInfo.userEmail(),
        mobile: usersInfo.baseData().MOBILE,
        realName: usersInfo.baseData().REAL_NAME,
        // avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        decLv: usersInfo.getBaseInfo().decLevels[usersInfo.baseData().DEC_LV].LEVEL_NAME,
        empLv: usersInfo.getBaseInfo().empLevels[usersInfo.baseData().EMP_LV].LEVEL_NAME,
        periodNum: usersInfo.getBaseInfo().periodNum,
        eliteLv: usersInfo.getBaseInfo().eliteLevels[usersInfo.baseData().ELITE_LV].LEVEL_NAME,
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el_c{
  display: flex;
  justify-content: center;
}
</style>