tnbapp/src/views/my/MyProfile.vue

<template>
  <el-row class="movie-list">
    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>我的资料</span>
          </div>
          <div class="text item">
            <el-form ref="form" :model="loginUser" label-width="80px">
              <el-form-item label="用户 ID">
                <el-input v-model="loginUser.userId" style="padding-right: 1px" readonly />
              </el-form-item>
              <el-form-item label="用户名">
                <el-input v-model="loginUser.username" style="width: 70%; padding-right: 10px" readonly />
                <el-button size="mini" type="info" @click="showUpdateDialog(1)">更新</el-button>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="loginUser.email" style="width: 70%; padding-right: 10px" readonly />
                <el-button size="mini" type="info" @click="showUpdateDialog(2)">更新</el-button>
              </el-form-item>
              <el-form-item label="手机">
                <el-input v-model="loginUser.mobile" style="width: 70%; padding-right: 10px" readonly />
                <el-button size="mini" type="info" @click="showUpdateDialog(3)">更新</el-button>
              </el-form-item>
              <el-form-item label="显示名">
                <el-input v-model="loginUser.screenName" style="width: 70%; padding-right: 10px" readonly />
                <el-button size="mini" type="info" @click="showUpdateDialog(4)">更新</el-button>
              </el-form-item>
              <el-form-item label="签名">
                <el-input v-model="loginUser.signature" type="textarea" style="width: 70%; padding-right: 10px" readonly />
                <el-button size="mini" type="info" @click="showUpdateDialog(5)">更新</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-row>
    </el-col>
    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>更新我的头像</span>
          </div>
          <div class="text item">
            <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
              <el-upload
                class="avatar-uploader"
                :action="imgOssUrl"
                :headers="imgHeaders"
                :data="imgData"
                :with-credentials="true"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-tooltip>
          </div>
        </el-card>
      </el-row>
    </el-col>

    <el-dialog
      :title="updateTitle"
      append-to-body
      :visible.sync="updateDialog"
      width="30%"
      center
    >
      <el-row>
        <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
          <el-row>
            <el-form :inline="true" :model="updateForm">
              <el-form-item>
                <el-input
                  v-model="updateForm.value"
                  type="textarea"
                  :rows="3"
                  placeholder="添加留言..."
                />
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="warning" @click="onUpdate">更新</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </el-row>
</template>

<script>
import { updateAvatar } from '@/api/account'
import { getAuthedUser, updateAuthedUser } from '@/utils/auth'
import { getAvatarChannelInfo } from '@/api/file'

export default {
  name: 'MyProfile',
  data() {
    return {
      imgOssUrl: '',
      imgHeaders: {
        Authorization: ''
      },
      imgData: {
        channelId: 0
      },
      coverUrl: null,
      // ****************************************************************************************************************
      loginUser: null,
      updateDialog: false,
      updateType: 1,
      updateTitle: '',
      updateForm: {
        type: 1,
        value: null
      }
    }
  },
  created() {
    this.loginUser = getAuthedUser()
    getAvatarChannelInfo().then(res => {
      if (res.code === 0) {
        const resData = res.data
        this.imgData.channelId = resData.channelId
        this.imgOssUrl = resData.ossUrl
        this.imgHeaders.Authorization = 'Bearer ' + resData.token
      } else {
        this.$notify({
          title: '提示',
          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
          type: 'error',
          duration: 3000
        })
      }
    }).catch(error => {
      this.$notify({
        title: '提示',
        message: error.message,
        type: 'warning',
        duration: 3000
      })
    })
  },
  mounted() {
  },
  methods: {
    // ****************************************************************************************************************
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('头像文件只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('头像文件大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess(res, file) {
      if (res.code === 0) {
        const resData = res.data
        this.coverUrl = URL.createObjectURL(file.raw)

        const avatar = {}
        avatar.channelId = this.imgData.channelId
        avatar.uploadId = resData.uploadId
        updateAvatar(avatar).then(resp => {
          if (resp.code === 0) {
            this.loginUser.avatarUrl = resp.data.url
            updateAuthedUser(this.loginUser)
          } else {
            this.$notify({
              title: '头像更新失败',
              message: resp.msg,
              type: 'warning',
              duration: 3000
            })
          }
        })
      } else {
        this.$notify({
          title: '提示',
          message: '头像上传失败，请重试！' + res.msg,
          type: 'warning',
          duration: 3000
        })
      }
    },
    // ****************************************************************************************************************
    showUpdateDialog(type) {
      if (type === 1) {
        this.updateType = 1
        this.updateTitle = '更新用户名'
      } else if (type === 2) {
        this.updateType = 2
        this.updateTitle = '更新用户邮箱'
      } else if (type === 3) {
        this.updateType = 3
        this.updateTitle = '更新用户手机号'
      } else if (type === 4) {
        this.updateType = 4
        this.updateTitle = '更新用户显示名'
      } else if (type === 5) {
        this.updateType = 5
        this.updateTitle = '更新用户签名'
      }
      this.updateDialog = true
    },
    onUpdate() {
      this.$message.info('更新用户资料')
      this.updateDialog = false
    }
  }
}
</script>

<style>
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 256px;
  height: 256px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 256px;
  height: 256px;
  display: block;
}
</style>