learning-system-portal/src/views/user/Setting.vue

<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(){
        //console.log(this.avatarUrl,'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('修改密码成功')
                this.dialogVisiblePassword = false;
              }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>