yos_web/src/SManagement/user/user-info/components/PassEdit.vue

<template>
  <div class="password">
    <span @click="onEdit">编辑</span>
    <el-dialog title="修改密码" append-to-body :visible.sync="dialogVisible" :before-close="handleClose">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="原密码" prop="pass">
          <el-input v-model="form.pass" placeholder="请输入原密码"  auto-complete="new-password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpass">
          <el-input placeholder="请输入新密码" v-model="form.newpass" show-password  auto-complete="new-password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkpass">
          <el-input v-model="form.checkpass" placeholder="请再次输入密码" show-password auto-complete="new-password"></el-input>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="passEdit()">提交</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import md5 from 'js-md5'
export default {
  name: 'PassEdit',
  data () {
    let checkPass = (rule,value,callback) => {
      if(this.form.newpass != this.form.checkpass) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      form: {
        pass:'',
        newpass:'',
        checkpass:''
      },
      rules:{
        pass:[
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        newpass:[
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        checkpass:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkPass, trigger: 'blur' },
        ]
      }
    };
  },
  props:['userInfo'],
  computed: {
  },
  watch: {
  },
  methods: {
    handleClose () {
      this.dialogVisible = false
      sessionStorage.setItem('isPassword','0')
    },
    onEdit(){
      this.dialogVisible = true
      this.form = {
        pass:'',
        newpass:'',
        checkpass:''
      }
    },
    passEdit() {
      this.$refs.form.validate(val => {
        if(val) {
          this.$api.requested({
            "classname": "common.usercenter.usercenter",
            "method": "changePassWord",
            "content": {
                "password":md5(this.form.pass),
                "newpassword":md5(this.form.checkpass)
            }
          }).then( res => {
            if(res.code == 1) {
              this.$notify({
                title:'提示',
                message:'密码修改成功',
                type:'success'
              })
              this.$refs.form.resetFields()
              this.dialogVisible = false
              sessionStorage.setItem('isPassword','0')
            } else {
              this.$notify({
                title:'提示',
                message:res.msg,
                type:'warning'
              })
              this.$refs.form.resetFields()
            }
          })
        } else {
          this.$notify({
            title:'提示',
            message:'请按照要求修改密码',
            type:'warning'
          })
        }
      })
    },
    onClose(){
      sessionStorage.setItem('isPassword','0')
      this.dialogVisible = false
      this.$refs.form.resetFields()
    }
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
/deep/ .el-dialog__title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
/deep/.el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0;
}
/deep/.el-dialog__body .el-form-item {
  margin-bottom: 30px;
}
.el-form {
  width: 450px;
}
/deep/.el-dialog {
  width: 864px;
  height: 422px;
  background: #ffffff;
}
  span {
    font-size: 14px;
    font-weight: 400;
    color: #3874F6;
    margin-left: 30px;
    cursor: pointer;
  }
</style>