metaverse2024vue/src/views/user/index.vue

<template>
  <div class="w-full h-full flex">
    <div class="p-5 flex flex-col h-full border-r border-gray-200" style="width: 300px;">
      <div class=" text-xl py-3">
        账户
      </div>
      <div 
        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
        :class="active === '1' ? 'bg-gray-100' : ''"
        @click="menuClick('1')"
      >
        <i class="el-icon-user text-xl mr-2"></i>
        用户信息
      </div>
      <div 
        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
        :class="active === '2' ? 'bg-gray-100' : ''"
        @click="menuClick('2')"
      >
        <i class="el-icon-setting text-xl mr-2"></i>
        消费明细
      </div>
      <div 
        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
        :class="active === '3' ? 'bg-gray-100' : ''"
        @click="menuClick('3')"
      >
        <i class="el-icon-setting text-xl mr-2"></i>
        用户偏好设定
      </div>
      <div 
        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
        :class="active === '4' ? 'bg-gray-100' : ''"
        @click="menuClick('4')"
      >
        <i class="el-icon-medal text-xl mr-2"></i>
        会员
      </div>
      <div 
        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
        :class="active === '5' ? 'bg-gray-100' : ''"
        @click="menuClick('5')"
      >
        <i class="el-icon-present text-xl mr-2"></i>
        邀请有礼
      </div>
      <div 
        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
        :class="active === '6' ? 'bg-gray-100' : ''"
        @click="menuClick('6')"
      >
        <i class="el-icon-message text-xl mr-2"></i>
        意见反馈
      </div>
      <div 
        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
        :class="active === 'logOut' ? 'bg-gray-100' : ''"
        @click="menuClick('logOut')"
      >
        <i class="fa-solid fa-arrow-right-from-bracket text-xl mr-2"></i>
        退出登录
      </div>
      <div class=" text-gray-500 mt-2 text-sm">
        © 2024 Rochat
        <a :href="`${baseURL}/#/termOfUse`" target="_blank" class="underline mx-1">用户协议</a>
        &amp;
        <a :href="`${baseURL}/#/privacyPolicy`" target="_blank" class="underline mx-1">隐私政策</a>
        v1.8.1
      </div>
    </div>
    <div class=" flex-1 h-full bg-gray-50">
      <UserInfo v-if="active == 1" />
      <Consume  v-if="active == 2" />
    </div>
  </div>
</template>

<script>
import UserInfo from "./components/userInfo.vue"
import Consume from "./components/consume.vue"

export default {
  components: {
    UserInfo,
    Consume
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_URL,
      active: '1',
      userInfo: {
        name: '张三',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      }
    }
  },
  mounted() {
    console.log(process.env.VUE_APP_BASE_API, 'process.env.VUE_APP_BASE_API');
  },
  methods: {
    menuClick(i) {
      this.active = i
      switch (i) {
        case '1':
          // this.$router.push('/')
          break
        case 'logOut':
          this.$store.dispatch('FedLogOut').then(() => {
            this.$router.push('/')
          })
          break
      }
    }
  }
}
</script>

<style>

</style>