index.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <div class="app-container" v-loading="loading">
  3. <el-row :gutter="20">
  4. <el-col :span="6" :xs="24">
  5. <user-card :dataForm="dataForm" @onUploadHeader="onUploadHeader" />
  6. </el-col>
  7. <el-col :span="18" :xs="24">
  8. <el-card>
  9. <el-tabs v-model="activeTab">
  10. <el-tab-pane label="基本信息" name="account">
  11. <account :dataForm="dataForm" />
  12. </el-tab-pane>
  13. <el-tab-pane label="修改密码" name="pasword">
  14. <PasswordConfirm />
  15. </el-tab-pane>
  16. </el-tabs>
  17. </el-card>
  18. </el-col>
  19. </el-row>
  20. </div>
  21. </template>
  22. <script>
  23. import { mapGetters } from "vuex";
  24. import UserCard from "./components/UserCard";
  25. import PasswordConfirm from "./components/PasswordConfirm";
  26. import Account from "./components/Account";
  27. import { getCurrentUserInfo } from "@/api/api";
  28. import { updateProfile } from "@/api/admin";
  29. export default {
  30. name: "Profile",
  31. components: { UserCard, PasswordConfirm, Account },
  32. data() {
  33. return {
  34. loading: false,
  35. user: {},
  36. activeTab: "account",
  37. dataForm: {
  38. header: this.avatar,
  39. code: "",
  40. },
  41. };
  42. },
  43. created() {
  44. this.initUser();
  45. },
  46. methods: {
  47. initUser() {
  48. let _this = this;
  49. this.loading = true;
  50. getCurrentUserInfo({})
  51. .then((res) => {
  52. if (res.status != 200) return;
  53. _this.dataForm = res.data;
  54. })
  55. .finally(() => {
  56. this.loading = false;
  57. });
  58. },
  59. onUploadHeader(e) {
  60. this.dataForm.header = e;
  61. this.loading = true;
  62. updateProfile(this.dataForm)
  63. .then((res) => {
  64. if (res.status != 200) {
  65. this.$message(res.message);
  66. return;
  67. }
  68. this.$message("用户头像更新成功");
  69. location.reload();
  70. })
  71. .finally(() => {
  72. this.loading = false;
  73. });
  74. },
  75. },
  76. };
  77. </script>