|
@@ -1,134 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <div>
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <el-col :md="4">
|
|
|
|
|
- <el-menu
|
|
|
|
|
- :default-active="this.$route.path"
|
|
|
|
|
- router
|
|
|
|
|
- class="el-menu-vertical-demo"
|
|
|
|
|
- >
|
|
|
|
|
- <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
|
|
|
|
|
- <i :class="item.icon" />
|
|
|
|
|
- <span slot="title">{{ item.name }}</span>
|
|
|
|
|
- </el-menu-item>
|
|
|
|
|
- </el-menu>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :md="20">
|
|
|
|
|
- <el-row style="position: center">
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <h2>当前头像</h2>
|
|
|
|
|
- <el-avatar>
|
|
|
|
|
- <el-image :src="userInfo.avatarUrl" />
|
|
|
|
|
- </el-avatar>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <h2>修改头像</h2>
|
|
|
|
|
- <el-upload
|
|
|
|
|
- class="avatar-uploader"
|
|
|
|
|
- action="https://oss.reghao.cn/"
|
|
|
|
|
- name="file"
|
|
|
|
|
- :data="{
|
|
|
|
|
- channelId: 4,
|
|
|
|
|
- sha256sum: sha256sum
|
|
|
|
|
- }"
|
|
|
|
|
- :show-file-list="false"
|
|
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
|
|
- <img v-if="imageUrl" :src="imageUrl" class="avatar">
|
|
|
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
|
- </el-upload>
|
|
|
|
|
- <el-button type="primary" @click="onSubmit">更新</el-button>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- </div>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script>
|
|
|
|
|
-import { getUserInfo } from '@/utils/auth'
|
|
|
|
|
-import { hashFile } from '@/utils/hash'
|
|
|
|
|
-import { updateAvatar } from '@/api/user'
|
|
|
|
|
-
|
|
|
|
|
-export default {
|
|
|
|
|
- name: 'Profile',
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- userInfo: null,
|
|
|
|
|
- navList: [
|
|
|
|
|
- { path: '/u/profile', name: '我的信息', icon: 'el-icon-user' },
|
|
|
|
|
- { path: '/u/avatar', name: '我的头像', icon: 'el-icon-user' },
|
|
|
|
|
- { path: '/u/vip', name: '我的会员', icon: 'el-icon-user' }
|
|
|
|
|
- ],
|
|
|
|
|
- imageUrl: '',
|
|
|
|
|
- coverUrl: '',
|
|
|
|
|
- sha256sum: null
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- created() {
|
|
|
|
|
- this.userInfo = getUserInfo()
|
|
|
|
|
- if (this.userInfo != null) {
|
|
|
|
|
- document.title =this.userInfo.screenName + '的头像'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- beforeAvatarUpload(file) {
|
|
|
|
|
- return hashFile(file).then(res => {
|
|
|
|
|
- this.sha256sum = res.sha256sum
|
|
|
|
|
- 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) {
|
|
|
|
|
- this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
|
|
- this.coverUrl = res.url;
|
|
|
|
|
- },
|
|
|
|
|
- onSubmit() {
|
|
|
|
|
- const data = {
|
|
|
|
|
- userId: this.userInfo.userId,
|
|
|
|
|
- coverUrl: this.coverUrl
|
|
|
|
|
- }
|
|
|
|
|
- updateAvatar(data).then(res => {
|
|
|
|
|
- if (res.code === 0) {
|
|
|
|
|
- console.log('更新头像')
|
|
|
|
|
- this.userInfo.avatarurl = this.coverUrl
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style>
|
|
|
|
|
-.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: 178px;
|
|
|
|
|
- height: 178px;
|
|
|
|
|
- line-height: 178px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
-}
|
|
|
|
|
-.avatar {
|
|
|
|
|
- width: 178px;
|
|
|
|
|
- height: 178px;
|
|
|
|
|
- display: block;
|
|
|
|
|
-}
|
|
|
|
|
-</style>
|
|
|