wvp/web_src/src/components/u_page/u_info.vue

<template>
  <div class="w-full">
    <div class="page-header">
      <div class="page-title flex align-center">
        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="toBack" ></el-button>
        <el-divider direction="vertical"></el-divider>
        个人信息管理
      </div>
      <div class="page-header-btn">
        <el-button  @click="logout">注销</el-button>
      </div>
    </div>
    <div class="u-container">
      <div class="u-i-info">
        <h2>欢迎回来
          <span class="text-ornament">【</span>
          <span class="text-user">{{username}}</span>
          <span class="text-ornament">】</span>
        </h2>
      </div>
      <div class="u-i-info">
        <el-button @click="changePassword">修改密码</el-button>
      </div>
    </div>
    <change-password ref="changePasswordDialog"></change-password>
  </div>
</template>

<script>
import api_user from "@/apiStore/api_user";
import handle from "@/until/handle";
import ChangePassword from "@/components/dialog/changePassword";
import userService from "@/components/service/UserService";

export default {
  name: "u_info",
  components: {ChangePassword},
  data(){
    return {
      username: ""
    }
  },
  beforeMount() {
    let u = userService.getUser();
    this.username = u.username;
  },
  methods:{
    toBack(){
      this.$router.back();
      // if (this.alarmId === "") {
      //   this.beforeUrl = "/"
      // }
    },
    async logout() {
      console.log('----------')
      await handle(api_user.logout(this))
    },
    changePassword() {
      this.$refs.changePasswordDialog.openDialog()
    },
  }
}
</script>

<style scoped>

.u-container{
  background: #fff;
  width: 100%;
  text-align: left;
  padding:  5px;
  box-sizing: border-box;
}
</style>