client-base-v5/src/client/RetrievePasswordStep1.vue

<template>
  <a-form
    :model="userDto"
    name="basic"
    :label-col="{span: 6}"
    :wrapper-col="{ span: 14 }"
    @finish="onFinish"
    @finish-failed="onFinishFailed"
  >
    <a-form-item
      :label="$t('lang.RetrievePasswordStep1.yourEmail')"
      name="email"
      :rules="[{ required: true, message: $t('lang.RetrievePasswordStep1.pleaseEnterYourEmail') }]"
    >
      <a-input
        v-model:value="userDto.email"
        size="default"
        type="email"
        @input="inputName"
      />
    </a-form-item>

    <a-form-item
      :label="$t('lang.RetrievePasswordStep1.yourAccount')"
      name="loginName"
      :rules="[{ required: true, message: $t('lang.RetrievePasswordStep1.pleaseEnterYourAccount') }]"
    >
      <a-input
        v-model:value="userDto.loginName"
        size="default"
      />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 6, span: 14 }">
      <a-button
        v-if="disabledBtn == false"
        type="primary"
        size="default"
        @click="sendUserVerificationCode"
      >
        {{ btntxt }}
      </a-button>
      <a-button
        v-else
        type="primary"
        size="default"
      >
        {{ btntxt }}
      </a-button>
    </a-form-item>

    <a-form-item
      v-if="isVerificationCode == true "
      :label="$t('lang.RetrievePasswordStep1.verificationCode')"
      name="verificationCode"
      :rules="[{ required: true, message: $t('lang.RetrievePasswordStep1.pleaseEnterVerificationVode') }]"
    >
      <a-input
        v-model:value="userDto.verificationCode"
        size="default"
      />
    </a-form-item>

    <div style="text-align: center;">
      <a-button
        type="primary"
        html-type="submit"
      >
        {{ $t('lang.RetrievePasswordStep1.nextStep') }}
      </a-button>
    </div>
  </a-form>
</template>

<script>
import Common from '../common/Common.js';
import UserVerificationCodeResource from '../api/base/UserVerificationCodeResource.js';
import UserResource from '../api/base/UserResource.js';
import { message } from 'ant-design-vue';
export default {
  props: {
    userDtoProp: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  emits: ['updateUserDto', 'next'],

  // 定义抛出的事件名称

  data: function () {
    return {
      userDto: {},
      errorText: '',
      disabledBtn: false,
      time: 60,
      btntxt: this.$t('lang.RetrievePasswordStep1.getVerificationCode'),
      isVerificationCode: false,
    };
  },

  watch: {
    userDtoProp: {
      handler(newVal, oldVal) {
        if (newVal != null) {
          this.userDto = JSON.parse(JSON.stringify(newVal));
          console.log(this.userDto);
        }
      },
      immediate: true,
    },
  },

  methods: {

    inputName: function () {
      this.userDto.loginName = this.userDto.email;
    },

    onFinish: function (values) {
      let _self = this;
      console.log('Success: %o', values);
      let data = {
        currentStep: 1,
        showPage: 1,
      };
      UserVerificationCodeResource.forgetPasswordVerifyIdentity(
        _self.userDto.loginName, _self.userDto.email, _self.userDto.verificationCode,
      ).then(
        baseObjectResponse => {
          if (baseObjectResponse.errorCode === 0) {
            console.log(baseObjectResponse);
            this.$emit('next', data);
            this.$emit('updateUserDto', _self.userDto);
          } else {
            message.error(baseObjectResponse.data);
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },

    onFinishFailed: function (errorInfo) {
      console.log('Failed: %o', errorInfo);
    },


    /**
         * 发送验证码
         */
    sendUserVerificationCode: function (event) {
      var _self = this;
      if (_self.userDto.loginName == null) {
        message.error(_self.$t('lang.RetrievePasswordStep1.accountNumberCannotBeBlank'));
        return;
      }
      if (_self.userDto.email == null) {
        message.error(_self.$t('lang.RetrievePasswordStep1.mailboxCannotBeEmpty'));
        return;
      }
      UserVerificationCodeResource.retrievePasswordUserVerificationCode(
        _self.userDto.loginName, _self.userDto.email, '忘记密码',_self.$i18n.locale,
      ).then(
        baseObjectResponse => {
          if (baseObjectResponse.errorCode === 0) {
            message.success(baseObjectResponse.data);
            console.log(baseObjectResponse);
            _self.isVerificationCode = true;
            _self.timerStr();
          } else {
            message.error(baseObjectResponse.data);
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },

    timerStr: function () {
      if (this.time > 0) {
        this.disabledBtn = true;
        this.time--;
        this.btntxt = this.time + '秒';
        setTimeout(this.timerStr, 1000);
      } else {
        this.time = 60;
        this.btntxt = this.$t('lang.RetrievePasswordStep1.getVerificationCode');
        this.disabledBtn = false;
      }
    },



    emailValidator: function (rule, val, callback) {
      const idcardReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
      if (!idcardReg.test(val)) {
        callback(this.$t('lang.RetrievePasswordStep1.illegalFormat'));
      }
      callback();
    },



  },
};
</script>


<style scoped>
</style>