Faster.Zheng.Winin/Code/Fe/src/views/profileuser/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px">个人信息</span>
          </div>
          <!-- <div>
            {{ $t("wms20.itemCode") }}
          </div> -->
          <div style="padding-bottom:70px">
            <!-- <div class="text-center">
              <img src="../../../static/image/common/f778738c-e4f8-4870-b634-56703b4acafe.gif" title="点击上传头像" class="img-circle img-lg" />
            </div> -->
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <div class="left"><i class="icon el-icon-user-solid"></i></div>
                <!-- <div class="title-row"><svg-icon icon-class="user" /> 账号</div> -->
                <div class="pull-right">
                  <p class="title">用户名</p>
                  <p class="name">{{ user.userName }}</p>
                </div>
              </li>
              <li class="list-group-item">
                <div class="left"><i class="icon el-icon-user-solid"></i></div>
                <!-- <div class="title-row"><svg-icon icon-class="user" /> 账号</div> -->
                <div class="pull-right">
                  <p class="title">姓名</p>
                  <p class="name">{{ user.name }}</p>
                </div>
              </li>
              <!-- <li class="list-group-item">
                <div class="left"><i class="icon el-icon-phone"></i></div>
                <div class="pull-right">
                  <p class="title">手机号码</p>
                  <p class="name">{{ user.phoneNumber }}</p>
                </div>
              </li>
              <li class="list-group-item">
                <div class="left"><i class="icon el-icon-platform-eleme" style="font-size:20px"></i></div>
                <div class="pull-right">
                  <p class="title">用户邮箱</p>
                  <p class="name">{{ user.email }}</p>
                </div>
              </li> -->
              <!-- <li class="list-group-item">
                <svg-icon icon-class="tree" /> 所属部门
                <div class="pull-right" v-if="user.dept"> / </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" /> 所属角色
                <div class="pull-right"></div>
              </li> -->
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span style="font-size: 18px">基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <!-- <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane> -->
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd :user="user" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { loadLoginUserInfo } from "@/api/wms-auth";

export default {
  name: "Profileuser",
  components: { userInfo, resetPwd },
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "resetPwd",
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      loadLoginUserInfo(this.$store.getters.name.id).then((response) => {
        this.user = response;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.list-group-striped{
  list-style: none;
  padding-left: 10px;
  li{
    display: flex;
    padding-bottom: 15px;
    background: #e9f6ff;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 18px;
  }
  .icon{
    font-size: 22px;
    padding-right: 5px;
    vertical-align: top;
    color: #49a4f7;
    width: 24px;
    flex-shrink: 0;
    padding-top: 8px;
  }
  .pull-right{
    padding-left: 10px;
    color: #999;
    p{
      margin: 0;
    }

    .title{
      padding-bottom: 5px;
      color: #333;
    }
  }
}
</style>