345 lines
12 KiB
Vue
345 lines
12 KiB
Vue
<template>
|
|
<div class="container">
|
|
<select-file title="选择头像" @select="selectedFile" :visible.sync="dialogSelectFile"></select-file>
|
|
<el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogAvatar" @close="handleCloseDialogAvatar">
|
|
<cropper-dialog
|
|
ref="cropperDialog"
|
|
:file-img="fileImg"
|
|
:select-img="selectedImgRow"
|
|
:avatar="userInfo.avatar"
|
|
@noCropSave="saveNoCropAvatar"
|
|
@croppedCanvas="saveAvatar">
|
|
</cropper-dialog>
|
|
</el-dialog>
|
|
<el-dialog class="dialog-cm" width="400px" :title="passwordFormTitle" :visible.sync="dialogChangePassword">
|
|
<el-form ref="passwordForm" size="medium" :model="passwordForm" :rules="rules" label-width="100px" @submit.native.prevent>
|
|
<el-form-item v-show="!validOldPass" label="旧密码" prop="oldPassword">
|
|
<el-input type="password" v-model="passwordForm.oldPassword" @keyup.enter.native="onSavePassword" show-password />
|
|
</el-form-item>
|
|
<el-form-item v-show="validOldPass" label="新密码" prop="password">
|
|
<el-input ref="newPasswordInput" type="password" v-model="passwordForm.password" show-password/>
|
|
</el-form-item>
|
|
<el-form-item v-show="validOldPass" label="确认新密码" prop="checkPass">
|
|
<el-input type="password" v-model="passwordForm.checkPass" @keyup.enter.native="onSavePassword" show-password/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<a class="forget-password" @click="forget">忘记密码?</a>
|
|
<el-button round size="small" @click="dialogChangePassword = false">取 消</el-button>
|
|
<el-button round size="small" :loading="userUpdateLoading" type="primary" @click="onSavePassword">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="80px">
|
|
<el-form-item label="头像" class="form-item-avatar">
|
|
<div style="height: 100px; width: 100px;">
|
|
<el-avatar icon="el-icon-user-solid" class="avatar-value" shape="circle" :size="100" fit="fit" :src="srcImage" ></el-avatar>
|
|
</div>
|
|
<div class="avatar-button">
|
|
<el-button round title="选择文件" type="primary" icon="el-icon-folder" circle @click="selectImg"></el-button>
|
|
<el-button round title="上传" type="primary" icon="el-icon-upload2" circle @click="uploadImg"></el-button>
|
|
<input ref="selectImg" type="file" style="display: none;" accept="image/*" @change="changImg"></input>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-button round size="mini" @click="changePassword">修改密码</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="用户名">
|
|
<el-input v-model="cusomerInfoForm.showName" class="input-none-width"/>
|
|
</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 class="form-slogan" type="textarea" v-model="cusomerInfoForm.introduction"></el-input>
|
|
</el-form-item>
|
|
<el-form-item v-show="percentage > 0" label="使用情况">
|
|
<el-progress class="quota-space" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button round type="primary" size="medium" :loading="userUpdateLoading" @click="onSubmit">保 存</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getInfo, userUpdate, validOldPass, updatePass} from '@/api/user'
|
|
import { formatSize } from '@/utils/number'
|
|
import CropperDialog from '@/components/Cropper/dialog'
|
|
import SelectFile from "@/components/ShowFile/SelectFile"
|
|
import fileConfig from "@/utils/file-config";
|
|
|
|
export default {
|
|
name: 'cusomerInfo',
|
|
components: {
|
|
CropperDialog, SelectFile
|
|
},
|
|
props: {
|
|
},
|
|
data() {
|
|
let validatePass = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('请再次输入密码'));
|
|
} else if (value !== this.passwordForm.password) {
|
|
callback(new Error('两次输入密码不一致!'));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
return {
|
|
imageUrl: `${process.env.VUE_APP_BASE_API}/view/thumbnail?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
|
|
title: "个人信息",
|
|
userUpdateLoading: false,
|
|
dialogAvatar: false,
|
|
dialogChangePassword: false,
|
|
cropper:'',
|
|
percentage: 0,
|
|
userInfo: {},
|
|
customColors: [
|
|
{color: '#f56c6c', percentage: 100},
|
|
{color: '#e6a23c', percentage: 80},
|
|
{color: '#5cb87a', percentage: 60},
|
|
{color: '#1989fa', percentage: 40},
|
|
{color: '#6f7ad3', percentage: 20}
|
|
],
|
|
cusomerInfoForm: {
|
|
},
|
|
passwordForm: {
|
|
oldPassword: '',
|
|
password: '',
|
|
checkPass: '',
|
|
},
|
|
srcImage: '',
|
|
fileImg: new Blob(),
|
|
selectedImgRow: {},
|
|
rules: {
|
|
oldPassword: [
|
|
{ required: true, message: '请输入旧密码', trigger: 'blur' },
|
|
{ min: 6, message: '密码不能小于6个字符', trigger: 'blur' }
|
|
],
|
|
password: [
|
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
|
{ min: 6, message: '密码不能小于6个字符', trigger: 'blur' }
|
|
],
|
|
checkPass: [
|
|
{ required: true, validator: validatePass, trigger: 'blur' }
|
|
],
|
|
},
|
|
validOldPass: false,
|
|
passwordFormTitle: '',
|
|
dialogSelectFile: false,
|
|
}
|
|
},
|
|
computed: {
|
|
},
|
|
mounted() {
|
|
this.getInfo()
|
|
},
|
|
methods: {
|
|
uploadImg() {
|
|
this.$refs.selectImg.click()
|
|
},
|
|
selectImg() {
|
|
this.dialogSelectFile = true
|
|
},
|
|
selectedFile(row) {
|
|
this.dialogAvatar = true
|
|
this.selectedImgRow = row
|
|
if(this.$refs.cropperDialog){
|
|
this.$refs.cropperDialog.setSelectImg(this.selectedImgRow)
|
|
}
|
|
},
|
|
handleCloseDialogAvatar() {
|
|
this.$refs.selectImg.value = ''
|
|
},
|
|
changImg(e) {
|
|
const files = e.target.files
|
|
if(files.length < 1){
|
|
return
|
|
}
|
|
if(files[0].size/1024/1024 > 5){
|
|
this.$message({
|
|
message: '选择的图片不能超过5M',
|
|
type: 'warning'
|
|
});
|
|
return
|
|
}
|
|
this.fileImg = files[0]
|
|
this.dialogAvatar = true
|
|
this.selectedImgRow = {}
|
|
if(this.$refs.cropperDialog){
|
|
this.$refs.cropperDialog.changImg(files[0])
|
|
}
|
|
},
|
|
getInfo(){
|
|
getInfo().then(async res => {
|
|
this.userInfo = res.data
|
|
if (this.userInfo.roles && this.userInfo.roles.includes('admin')) {
|
|
this.$emit('isAdmin', true)
|
|
}
|
|
await this.$nextTick()
|
|
this.cusomerInfoForm = this.userInfo
|
|
this.srcImage = this.userInfo.avatar ? this.imageUrl + this.userInfo.avatar : require('../../../assets/img/default-avatar.png')
|
|
})
|
|
},
|
|
async changePassword() {
|
|
this.validOldPass = false
|
|
this.dialogChangePassword = true
|
|
await this.$nextTick()
|
|
this.passwordFormTitle = '旧密码'
|
|
this.$refs.passwordForm.resetFields()
|
|
},
|
|
onSubmit() {
|
|
this.userUpdate(this.setFormData())
|
|
},
|
|
// 忘记密码
|
|
forget() {
|
|
this.$alert('请联系管理员重置密码', '提示', {
|
|
confirmButtonText: '确定',
|
|
});
|
|
},
|
|
// 确认密码
|
|
onSavePassword() {
|
|
if(this.validOldPass){
|
|
this.$refs.passwordForm.validate((valid) => {
|
|
this.valid = valid
|
|
if (valid) {
|
|
if(this.validOldPass){
|
|
// 修改密码
|
|
this.userUpdateLoading = true
|
|
let data = new FormData()
|
|
data.append("id",this.$store.state.user.userId)
|
|
data.append("password",this.passwordForm.password)
|
|
updatePass(data).then(() => {
|
|
this.userUpdateLoading = false
|
|
this.dialogChangePassword = false
|
|
}).catch(()=>{
|
|
this.userUpdateLoading = false
|
|
})
|
|
}
|
|
return true
|
|
}
|
|
return false
|
|
});
|
|
} else {
|
|
// 验证旧密码
|
|
this.userUpdateLoading = true
|
|
validOldPass({
|
|
id: this.$store.state.user.userId,
|
|
password: this.passwordForm.oldPassword
|
|
}).then(() => {
|
|
this.userUpdateLoading = false
|
|
this.validOldPass = true
|
|
this.passwordFormTitle = '新密码'
|
|
let that = this
|
|
setTimeout(function (){
|
|
that.$refs.newPasswordInput.focus()
|
|
})
|
|
}).catch(()=>{
|
|
this.userUpdateLoading = false
|
|
})
|
|
}
|
|
},
|
|
progressFormat() {
|
|
const spaceBytes = this.userInfo.takeUpSpace;
|
|
const quotaBytes = this.userInfo.quota * 1024 * 1024 * 1024;
|
|
|
|
if (spaceBytes && quotaBytes > 0) {
|
|
const percentage = Number((spaceBytes / quotaBytes * 100).toFixed(1));
|
|
this.percentage = percentage > 100 ? 100 : percentage;
|
|
return `${this.percentage}% (${formatSize(spaceBytes)}/${formatSize(quotaBytes)})`;
|
|
}
|
|
},
|
|
// 设置formData
|
|
setFormData() {
|
|
let data = new FormData();
|
|
for (let formKey in this.cusomerInfoForm) {
|
|
if(this.cusomerInfoForm.hasOwnProperty(formKey)){
|
|
if(formKey !== 'avatar'){
|
|
data.append(formKey,this.cusomerInfoForm[formKey])
|
|
}
|
|
}
|
|
}
|
|
data.delete("createTime")
|
|
data.delete("updateTime")
|
|
return data
|
|
},
|
|
// 保存头像
|
|
saveAvatar(dataURL, blob) {
|
|
this.dialogAvatar = false
|
|
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)
|
|
},
|
|
blobToFile(blob){
|
|
return new window.File(
|
|
[blob],
|
|
blob.name,
|
|
{ type: blob.type }
|
|
)
|
|
},
|
|
// 保存不剪裁的头像
|
|
saveNoCropAvatar(fileId) {
|
|
this.dialogAvatar = false
|
|
let data = new FormData();
|
|
data.append('id', this.$store.state.user.userId)
|
|
data.append('avatar', fileId)
|
|
this.userUpdate(data)
|
|
},
|
|
// 修改用户信息操作
|
|
userUpdate(data, dataURL){
|
|
this.userUpdateLoading = true
|
|
userUpdate(data).then((res) => {
|
|
this.userUpdateLoading = false
|
|
this.$message({
|
|
message: '保存成功!',
|
|
type: 'success',
|
|
duration: 1000
|
|
})
|
|
if(dataURL || res.data){
|
|
this.srcImage = this.imageUrl + res.data
|
|
this.$store.state.user.avatar = res.data
|
|
}
|
|
if(data.get('showName') != null){
|
|
this.$store.state.user.showName = data.get('showName')
|
|
}
|
|
}).catch(() => {
|
|
this.userUpdateLoading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!--<style src="@styles/cropper.css"></style>-->
|
|
<style lang="scss" scoped>
|
|
@import "src/styles/setting";
|
|
.forget-password {
|
|
font-size: 12px;
|
|
margin-left: 10px;
|
|
color: #409eff;;
|
|
}
|
|
>>>.form-item-avatar {
|
|
.el-form-item__content {
|
|
display: flex;
|
|
.avatar-button {
|
|
padding: 30px 12px;
|
|
}
|
|
}
|
|
.el-button+.el-button {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
>>> .el-divider--vertical {
|
|
display: none;
|
|
}
|
|
.avatar-preview {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|