修改个人信息设置页面
This commit is contained in:
jmal
parent
aed0856ceb
commit
7ad3765bec
@ -7,7 +7,8 @@
|
||||
<div class="right-menu">
|
||||
<el-dropdown class="avatar-container" trigger="click">
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="avatar" class="user-avatar">
|
||||
<!--<img :src="avatar" class="user-avatar">-->
|
||||
<el-avatar :src="imageUrl+avatar" icon="el-icon-user-solid"></el-avatar>
|
||||
<i class="el-icon-caret-bottom" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
||||
@ -41,6 +42,7 @@ import Hamburger from '@/components/Hamburger'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
||||
@ -1,46 +1,49 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container" v-wechat-title="title">
|
||||
<el-tabs type="border-card" :value="tabsDefault" @tab-click="tabClick">
|
||||
<el-tab-pane name="1">
|
||||
<span slot="label"><i class="el-icon-user"></i> 个人信息</span>
|
||||
<el-tab-pane
|
||||
:key="item.name"
|
||||
v-for="item in tabs"
|
||||
:label="item.label"
|
||||
:name="item.name"
|
||||
lazy
|
||||
>
|
||||
<span v-if="item.name === 'cusomerInfo'" slot="label"><i class="el-icon-user"></i>{{item.label}}</span>
|
||||
<div v-if="item.name === 'cusomerInfo'">
|
||||
<el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogVisible">
|
||||
<cropper-dialog :src="srcImage" @croppedCanvas="saveAvatar"></cropper-dialog>
|
||||
</el-dialog>
|
||||
<el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="120px">
|
||||
<el-form-item label="头像" class="form-item-avatar">
|
||||
<el-avatar class="avatar-value" shape="circle" :size="100" fit="fit" :src="srcImage" ></el-avatar>
|
||||
<el-avatar class="avatar-overlay" shape="circle" :size="100" @click.native="dialogVisible=true"> 修改头像 </el-avatar>
|
||||
</el-form-item>
|
||||
<el-form-item label="username">
|
||||
<el-input readonly="readonly" v-model="cusomerInfoForm.username" />
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="cusomerInfoForm.showName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标语">
|
||||
<el-input class="form-slogan" v-model="cusomerInfoForm.slogan" />
|
||||
</el-form-item>
|
||||
<el-form-item label="个人简介">
|
||||
<el-input type="textarea" v-model="cusomerInfoForm.introduction"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用情况">
|
||||
<el-progress class="quota-space" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="userUpdateLoading" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span v-if="item.name === 'cusomerManager'" slot="label"><i class="el-icon-user-solid"></i>{{item.label}}</span>
|
||||
<div v-if="item.name === 'cusomerManager'">
|
||||
<el-table>
|
||||
|
||||
<!--<div class="img-dialog" :v-show="dialogVisible">-->
|
||||
<!--<img id="image" :src="userInfo.avatar"/>-->
|
||||
<!--</div>-->
|
||||
|
||||
<el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogVisible">
|
||||
<cropper-dialog :src="userInfo.avatar" @croppedCanvas="saveAvatar"></cropper-dialog>
|
||||
</el-dialog>
|
||||
|
||||
<el-form ref="form" :model="form" label-width="120px">
|
||||
<el-form-item label="头像" class="form-item-avatar">
|
||||
<el-avatar class="avatar-value" shape="circle" :size="100" fit="fit" :src="userInfo.avatar" ></el-avatar>
|
||||
<el-avatar class="avatar-overlay" shape="circle" :size="100" @click.native="dialogVisible = true"> 修改头像 </el-avatar>
|
||||
</el-form-item>
|
||||
<el-form-item label="username">
|
||||
<el-input readonly="readonly" v-model="form.username" />
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="form.showName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标语">
|
||||
<el-input class="form-slogan" v-model="form.slogan" />
|
||||
</el-form-item>
|
||||
<el-form-item label="个人简介">
|
||||
<el-input type="textarea" v-model="form.introduction"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用情况">
|
||||
<el-progress class="quota-space" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="3" label="消息中心">
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="4" label="角色管理">
|
||||
</el-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -58,8 +61,17 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabsDefault: '1',
|
||||
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
|
||||
title: "设置",
|
||||
tabs: [
|
||||
{name: 'cusomerInfo', label:'个人信息'},
|
||||
],
|
||||
adminTabs: [
|
||||
{name: 'cusomerManager', label:'用户管理'}
|
||||
],
|
||||
tabsDefault: 'cusomerInfo',
|
||||
userInfo: {},
|
||||
userUpdateLoading: false,
|
||||
dialogVisible:false,
|
||||
cropper:'',
|
||||
percentage: 0,
|
||||
@ -70,10 +82,9 @@
|
||||
{color: '#1989fa', percentage: 40},
|
||||
{color: '#6f7ad3', percentage: 20}
|
||||
],
|
||||
form: {
|
||||
avatar: '',
|
||||
showName: '',
|
||||
}
|
||||
cusomerInfoForm: {
|
||||
},
|
||||
srcImage: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -92,37 +103,42 @@
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
this.userInfo = res.data
|
||||
this.srcImage = this.imageUrl + this.userInfo.avatar
|
||||
if(this.userInfo.roles.includes('admin')){
|
||||
this.adminTabs.forEach(tab => {
|
||||
this.tabs.push(tab)
|
||||
})
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.form = this.userInfo
|
||||
this.cusomerInfoForm = this.userInfo
|
||||
})
|
||||
})
|
||||
},
|
||||
tabClick(tab) {
|
||||
if(tab.name === 'cusomerManager'){
|
||||
// 用户管理
|
||||
|
||||
}
|
||||
this.$router.push({path: this.$route.path, query: {tab: tab.name}})
|
||||
},
|
||||
onSubmit() {
|
||||
this.userUpdate(this.setFormData())
|
||||
// this.$message('submit!')
|
||||
},
|
||||
onCancel() {
|
||||
this.$message({
|
||||
message: 'cancel!',
|
||||
type: 'warning'
|
||||
})
|
||||
},
|
||||
progressFormat() {
|
||||
const space = this.userInfo.takeUpSpace/1024/1024/1024
|
||||
const quota = this.userInfo.quota
|
||||
if(space && quota > 0){
|
||||
this.percentage = (space/quota * 100).toFixed(1)
|
||||
this.percentage = Number((space/quota * 100).toFixed(1))
|
||||
return `${this.percentage}% (${formatSize(this.userInfo.takeUpSpace)}/${quota}GB)`;
|
||||
// return `${this.percentage}%`;
|
||||
}
|
||||
},
|
||||
// 设置formData
|
||||
setFormData() {
|
||||
let data = new FormData();
|
||||
for (let formKey in this.form) {
|
||||
if(this.form.hasOwnProperty(formKey)){
|
||||
if(this.cusomerInfoForm.hasOwnProperty(formKey)){
|
||||
if(formKey !== 'avatar'){
|
||||
console.log(formKey,this.form[formKey])
|
||||
data.append(formKey,this.form[formKey])
|
||||
@ -132,23 +148,28 @@
|
||||
return data
|
||||
},
|
||||
// 保存头像
|
||||
saveAvatar(dataURL) {
|
||||
saveAvatar(dataURL,blob) {
|
||||
this.dialogVisible = false
|
||||
this.userInfo.avatar = dataURL
|
||||
this.srcImage = dataURL
|
||||
let data = new FormData();
|
||||
data.append('id', this.$store.state.user.userId)
|
||||
data.append('avatar', dataURL)
|
||||
data.append('blobAvatar',blob)
|
||||
this.userUpdate(data,dataURL)
|
||||
},
|
||||
// 修改用户信息操作
|
||||
userUpdate(data, dataURL){
|
||||
userUpdate(data).then(() => {
|
||||
this.userUpdateLoading = true
|
||||
userUpdate(data).then((res) => {
|
||||
this.userUpdateLoading = false
|
||||
this.$message({
|
||||
message: '保存成功!',
|
||||
type: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
if(dataURL){
|
||||
this.$store.state.user.avatar = dataURL
|
||||
this.srcImage = this.imageUrl + res.data
|
||||
this.$store.state.user.avatar = res.data
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user