hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-15 22:06:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

2022年5月29日从svn移到git

Browse Source
This commit is contained in:
daihh
2022-05-29 18:56:34 +08:00
commit b050613020
488 changed files with 68444 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
src/views/user/Setting.vue Normal file
View File

@@ -0,0 +1,309 @@
<template>
<div class="personSetting">
<div class="avatar">
<el-avatar :src="avatar" :size="80" alt=""></el-avatar>
<span>{{userInfo.name}}</span>
<el-button type="primary" @click="openAvatar">修改头像</el-button>
</div>
<el-form :model="form" label-position="right" label-width="80px">
<div class="informationItem">
<div class="information-header">
<h4>基础信息</h4>
<el-button type="primary" @click="openPassword">修改密码</el-button>
</div>
<el-form-item label="姓名">
<el-input v-model="form.name" disabled></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="form.gender" disabled>
<el-option label="男" :value="1"></el-option>
<el-option label="女" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Email地址">
<el-input v-model="form.account.email" disabled></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="form.account.mobile" disabled></el-input>
</el-form-item>
<el-form-item label="生日">
<el-input v-model="form.birthday" disabled></el-input>
</el-form-item>
</div>
</el-form>
<el-dialog
title="上传头像"
:visible.sync="dialogVisibleAvatar"
:close-on-click-modal="false"
center
width="30%"
custom-class="g-dialog">
<div>
<p>图片尺寸建议在：宽100px,高100px</p>
<p>图片大小不超过：500KB</p>
<p>图片类型：.jpg.gif.png.jpeg.bmp</p>
<imageUpload width="240px" height="240px" :value="avatarUrl" fileSizeLimit="500KB" :compress="0.7" :compressAccurately="20" @success="handleUploadSuccess" @remove="removeHandle"></imageUpload>
<div class="dialog-btn">
<el-button type="primary" @click="updateAvatar">确定</el-button>
<el-button @click="dialogVisibleAvatar=false">取消</el-button>
</div>
</div>
</el-dialog>
<el-dialog
title="设置密码"
:visible.sync="dialogVisiblePassword"
:close-on-click-modal="false"
center
width="30%"
custom-class="g-dialog">
<el-form ref="form" :model="passwordForm" :rules="rules" status-icon label-position="right" label-width="80px">
<p>规则：密码由8-16位大写字母，小写字母，数字或符号</p>
<p>任意三种的组合密码，不能单独使用字母、数字或符号</p>
<el-form-item style="margin-top: 22px" label="旧密码">
<el-input show-password type="password" placeholder="请输入旧密码" v-model="passwordForm.oldPass"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPass">
<el-input show-password type="password" placeholder="请输入新密码" v-model="passwordForm.newPass"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPass">
<el-input show-password type="password" placeholder="请再次确认新密码" v-model="passwordForm.confirmPass"></el-input>
</el-form-item>
<div class="dialog-btn">
<el-button type="primary" @click="updatePassword">提交</el-button>
<el-button @click="dialogVisiblePassword=false">取消</el-button>
</div>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import userApi from "@/api/system/user";
import accountApi from "@/api/account";
import apiPassword from '@/api/boe/login.js'
import imageUpload from '@/components/ImageUpload/index.vue';
export default{
components:{imageUpload},
data(){
var testPassword =/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,16}$/;
var validatePass = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入旧密码'));
} else if(!testPassword.test(value)){
callback(new Error('请输入由8-16位大写字母、小写字母、数字或符号任意三种的组合密码'));
}else{
if (this.passwordForm.newPass !== '') {
this.$refs.form.validateField('newPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入新密码'));
} else if(!testPassword.test(value)){
callback(new Error('请输入由8-16位大写字母、小写字母、数字或符号任意三种的组合密码'));
} else {
if (this.passwordForm.confirmPass !== '') {
this.$refs.form.validateField('confirmPass');
}
callback();
}
};
var validatePass3 = (rule, value, callback) => {
if (!value) {
callback(new Error('请再次输入新密码'));
} else if(!testPassword.test(value)){
callback(new Error('请输入由8-16位大写字母、小写字母、数字或符号任意三种的组合密码'));
} else if(value!=this.passwordForm.newPass){
callback(new Error('新密码和再次确认密码不一致!'));
}else{
callback();
}
};
return {
form:{
account:{}
},
dialogVisibleAvatar:false,
dialogVisiblePassword:false,
avatarUrl:'',
passwordForm:{},
rules:{
newPass: [
{ validator: validatePass2, trigger: 'blur' }
],
confirmPass: [
{ validator: validatePass3, trigger: 'blur' }
]
}
}
},
computed: {
...mapGetters(['userInfo']),
avatar(){
console.log(this.userInfo,'this.userInfo')
if(this.userInfo.avatar){
if(this.userInfo.avatar.indexOf('http')==-1){
return this.baseUrl+this.userInfo.avatar
}else{
return this.userInfo.avatar
}
}else{
if(this.userInfo.sex==2){
return this.webBaseUrl + '/images/Avatarwoman.png'
}else{
return this.webBaseUrl + '/images/Avatarman.png'
}
}
}
},
watch:{
dialogVisiblePassword(val) {
if(!val) {
this.passwordForm={};
}
}
},
mounted(){
//console.log(this.userInfo,'this.userInfo')
if(this.userInfo.avatar){
this.avatarUrl = this.avatar;
}
this.load();
},
methods:{
load(){
userApi.detail(this.userInfo.aid).then(res=>{
//console.log(res)
if(res.status==200){
//console.log(res)
//console.log(res.result,'res.result')
this.form=res.result
}
});
},
openAvatar(){
// this.avatarUrl=''
this.dialogVisibleAvatar=true
},
openPassword(){
this.dialogVisiblePassword=true
},
handleUploadSuccess(res){
this.form.account.avatar = res.result.filePath;
this.avatarUrl= res.result.httpPath;
},
removeHandle(){
this.avatarUrl='';
this.form.account.avatar = '';
},
updateAvatar(){
// if(!this.avatarUrl){
// return this.$message.error('请上传图片')
// }
accountApi.updateAvatar({id:this.form.id,avatar:this.form.account.avatar}).then(res=>{
if(res.status==200){
this.$store.dispatch('InitData');
this.$message.success("保存图片成功")
this.dialogVisibleAvatar=false;
}else{
this.$message.error("保存图片失败")
}
})
},
updatePassword(){
this.$refs.form.validate((valid) => {
if (valid) {
apiPassword.modifyPassword({oldPassword:this.passwordForm.oldPass,newPassword:this.passwordForm.newPass,confirmPassword:this.passwordForm.confirmPass}).then(res=>{
if(res.status==200){
this.$message.success('修改密码成功')
}else{
this.$message.error(res.message);
}
})
} else {
return false;
}
});
}
}
}
</script>
<style lang="scss" scoped>
.personSetting{
padding: 0 20px;
.avatar{
display:flex;
align-items: center;
span{
margin-left: 10px;
}
.el-button{
margin-left: auto;
}
}
.informationItem{
&:first-of-type{
margin-top: 10px;
}
.information-header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
margin-bottom: 22px;
}
::v-deep .el-form-item{
font-size: 12px;
.el-form-item__label{
color: #bbbbbb;
font-weight: 400;
}
.el-form-item__content{
.el-input__inner{
background: #ffffff;
width: 336px;
height: 34px;
cursor: text;
color:#343434;
border-radius:6px;
}
.el-input__suffix{
display: none;
}
}
}
}
::v-deep .el-dialog{
.el-dialog__body{
display: flex;
justify-content: center;
align-items: center;
p{
line-height: 24px;
}
.component-upload-image{
margin: 20px 0;
}
.dialog-btn{
display: flex;
justify-content: space-evenly;
align-items: center;
.el-button{
width: 102px;
height: 36px;
}
}
.el-form-item{
margin-bottom: 36px;
}
}
}
}
</style>