yos_web/src/SManagement/user/user-info/UserInfo.vue

<template>
  <div class="user-info-panl">
      <div class="top">
        <div class="avatar">
          <img :src="getAvatar || require('@/assets/normal_avatar.png')" alt="">
            <up-load target="avatar" @onSuccess="onSuccess" classType="1"></up-load>
        </div>
      </div>
      <base-info :userInfo="userInfo" ref="userInfo">
          <phone-edit slot="phoneEdit" :userInfo="userInfo" @phoneChange="phoneChange"></phone-edit>
          <pass-edit slot="passEdit" :userInfo="userInfo"></pass-edit>
      </base-info>
      <wx-bind :userInfo="userInfo">
      </wx-bind>
    </div>
</template>

<script>

import upLoad from '@/SManagement/archives_upload/components/upload'
import baseInfo from '@/SManagement/user/user-info/components/baseInfo'
import phoneEdit from '@/SManagement/user/user-info/components/PhoneEdit'
import passEdit from '@/SManagement/user/user-info/components/PassEdit'
import logOut from '@/SManagement/user/user-info/components/LogOut'
import wxBind from '@/SManagement/user/user-info/components/wxBind'
import wxPanl from '@/SManagement/user/user-info/components/wxPanl'

import removeFile from '@/utils/removeFile'
export default {
  name: 'UserInfo',
  data() {
    return {
      param: {
        "classname": "common.usercenter.usercenter",
        "method": "queryUserMsg",
        "content": {
        }
      },
      userInfo:''
    };
  },
  components: {
    upLoad,
    baseInfo,
    phoneEdit,
    passEdit,
    wxBind,
    wxPanl,
    logOut
  },
  computed:{
    getAvatar() {
      if(this.userInfo && this.userInfo.attinfos.length > 0) return this.userInfo.attinfos[0].url
    },
  },
  watch:{
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    //获取用户信息
    async getUserInfo() {
      let res = await this.$api.requested(this.param)
      this.userInfo = res.data
      console.log(this.userInfo);
      
    },
    //上传头像成功
    onSuccess(id) {
      //如果图片存在进行删除
      let isUp = true
      if(this.userInfo.attinfos.length > 0) {
        isUp = false
        removeFile.removeFileList(this.userInfo.attinfos).then( res => {
          this.bindFile(id)
        })
      }
      if(isUp) this.bindFile(id)

    },
    //文件绑定
    async bindFile(id) {
      let res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "createFileLink",
        "content": {
          "ownertable": "sys_users",
          "ownerid": JSON.parse(window.sessionStorage.getItem('active_account')).userid,
          "usetype": "defaultheadportrait",
          "attachmentids": [
            id
          ]
        }
      })
      this.tool.showMessage(res,() => {
        this.getUserInfo()    
      })
    },
    phoneChange(phone) {
      this.$refs.userInfo.ruleForm.phonenumber = phone
    },
  },
};
</script>

<style scoped>
*{
  box-sizing: border-box;
}
  .user-info-panl {
    width: 100%;
    min-height: 100%;
    background: #ffffff;
    padding: 50px 60px 0 60px;
  }
  .user-info-panl .top {
    
  }
  .user-info-panl .top .avatar {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }
  .user-info-panl .top .avatar img {
    margin-right: 20px;
  }
  .user-info-panl .top .avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-bottom: 16px;
  }
  .user-info-panl .top .avatar .el-button {
    width: 120px;
    height: 36px;
  }
  .user-info-panl .info1 .vx img {
    vertical-align: middle;
  }
  .user-info-panl .info1 .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 30px;
  }
  .user-info-panl .info1 .info-item .left {
    
  }
  .user-info-panl .info1 .info-item .left p:first-child {
    margin-bottom: 20px;
  }
  .user-info-panl .info1 .info-item .right {

  }
  .user-info-panl .logout {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0 90px 0;
  }

</style>