JeecgBoot/ant-design-vue-jeecg/src/views/user/alteration/Step3.vue

<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item
        label="账号名"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
      >
        <a-input
          type="text"
          autocomplete="false" :value="accountName" disabled>
        </a-input>
      </a-form-item>
      <a-form-item
        label="新密码"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
        class="stepFormText">
        <a-input
          v-decorator="['password',validatorRules.password]"
          type="password"
          autocomplete="false">
        </a-input>
      </a-form-item>
      <a-form-item
        label="确认密码"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
        class="stepFormText">
        <a-input
          v-decorator="['confirmPassword',validatorRules.confirmPassword]"
          type="password"
          autocomplete="false">
        </a-input>
      </a-form-item>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
        <a-button :loading="loading" type="primary" @click="nextStep" style="margin-left:20px">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import { putAction,getAction } from '@/api/manage'
  export default {
    name: "Step3",
//    components: {
//      Result
//    },
    props: ['userList'],
    data () {
      return {
        loading: false,
        form: this.$form.createForm(this),
        accountName: this.userList.username,
        validatorRules: {
          username: {rules: [{required: true, message: '用户名不能为空!'}]},
          password: {
            rules: [{
              required: true,
              pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{8,}$/,
              message: '密码由8位数字、大小写字母和特殊符号组成!!'
            }, {validator: this.handlePasswordLevel}]
          },
          confirmPassword: {rules: [{required: true, message: '密码不能为空!'}, {validator: this.handlePasswordCheck}]},
        },
      }
    },
    methods: {
      nextStep () {
        let that = this
        that.loading = true
        this.form.validateFields((err, values) => {
          if ( !err ){
          var params={}
          params.username=this.userList.username;
          params.password=values.password;
          params.smscode=this.userList.smscode;
          params.phone= this.userList.phone;
          getAction("/sys/user/passwordChange", params).then((res) => {
            if(res.success){
            var userList = {
              username: this.userList.username
            }
            console.log(userList);
            setTimeout(function () {
              that.$emit('nextStep', userList)
            }, 1500)
          }else{
            this.passwordFailed(res.message);
            that.loading = false
          }
        })
        } else{
          that.loading = false
        }
      })

      },
      prevStep () {
        this.$emit('prevStep', this.userList)
      },

      handlePasswordCheck (rule, value, callback) {
        let password = this.form.getFieldValue('password')
        if (value && password && value.trim() !== password.trim()) {
          callback(new Error('两次密码不一致'))
        }
        callback()
      },
      passwordFailed(err){
        this.$notification[ 'error' ]({
          message: "更改密码失败",
          description:err,
          duration: 4,
        });
      },
    }
  }
</script>
<style lang="less" scoped>
  .stepFormText {
    margin-bottom: 24px;
  }

  .ant-form-item-label,
  .ant-form-item-control {
    line-height: 22px;
  }

</style>