<template>
|
<div class="forget_password_container">
|
<el-form :model="forgetpasswordFormData" label-position="right" label-width="100px">
|
<el-form-item :label="$t('login.forgetPwd.form.account')">
|
<el-input v-model="forgetpasswordFormData.userPhone" :placeholder="$t('login.forgetPwd.placeholder.account')" />
|
</el-form-item>
|
<el-form-item :label="$t('login.forgetPwd.form.code')">
|
<el-input v-model="forgetpasswordFormData.validateCode" :placeholder="$t('login.forgetPwd.placeholder.code')">
|
<template #suffix>
|
<el-button type="primary" link @click="getCode" :disabled="codeBtnDisabled" :loading="isLoading">{{ codeBtnText }}</el-button>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item :label="$t('login.forgetPwd.form.pwd')">
|
<el-input v-model="forgetpasswordFormData.pass" :placeholder="$t('login.forgetPwd.placeholder.pwd')" show-password type="password"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('login.forgetPwd.form.newPwd')">
|
<el-input
|
v-model="forgetpasswordFormData.newPassword"
|
:placeholder="$t('login.forgetPwd.placeholder.newPwd')"
|
show-password
|
type="password"
|
></el-input>
|
</el-form-item>
|
<div class="btn_box">
|
<el-button type="" @click="close">{{ $t("login.forgetPwd.btn.cancel") }}</el-button>
|
<el-button type="primary" :loading="isSubmitLoading" @click="submit">{{ $t("login.forgetPwd.btn.submit") }}</el-button>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script lang="ts" setup name="Forgetpassword" >
|
import { ref, reactive, computed, defineEmits } from "vue";
|
import { ElMessage } from "element-plus";
|
import { useI18n } from "vue-i18n";
|
import { validatePhoneNumber, validatePassword } from "/@/utils/verification";
|
import { api_sned_sms_code, api_forget_pwd } from "/@/api/login";
|
|
const i18n = useI18n();
|
const emit = defineEmits(["close"]);
|
|
const forgetpasswordFormData: IForgetpasswordForm = reactive({
|
userPhone: "",
|
validateCode: "",
|
pass: "",
|
newPassword: "",
|
});
|
|
const isLoading = ref<boolean>(false);
|
const isSubmitLoading = ref<boolean>(false);
|
const codeNum = ref<number>(60);
|
const interval = ref<null | any>(null);
|
const codeBtnDisabled = ref<boolean>(false);
|
|
const codeBtnText = computed(() => {
|
return codeNum.value === 60 ? i18n.t("login.forgetPwd.btn.codeDefault") : `${codeNum.value}${i18n.t("login.forgetPwd.btn.codeSend")}`;
|
});
|
|
const getCode = async () => {
|
if (!forgetpasswordFormData.userPhone) return ElMessage.error(i18n.t("login.forgetPwd.msg.err.account"));
|
if (!validatePhoneNumber(forgetpasswordFormData.userPhone)) return ElMessage.error(i18n.t("login.forgetPwd.msg.err.account1"));
|
|
if (codeNum.value < 60) return false;
|
|
isLoading.value = true;
|
|
try {
|
await api_sned_sms_code(forgetpasswordFormData.userPhone);
|
ElMessage.success(i18n.t("login.forgetPwd.msg.success.code"));
|
isLoading.value = false;
|
interval.value = setInterval(() => {
|
if (codeNum.value <= 0) {
|
codeNum.value = 60;
|
codeBtnDisabled.value = false;
|
clearInterval(interval.value);
|
return false;
|
} else {
|
codeNum.value--;
|
codeBtnDisabled.value = true;
|
}
|
}, 1000);
|
} catch (error) {
|
isLoading.value = false;
|
}
|
};
|
|
const submit = async () => {
|
if (!forgetpasswordFormData.userPhone) return ElMessage.error(i18n.t("login.forgetPwd.msg.err.account"));
|
if (!validatePhoneNumber(forgetpasswordFormData.userPhone)) return ElMessage.error(i18n.t("login.forgetPwd.msg.err.account1"));
|
if (!forgetpasswordFormData.validateCode) return ElMessage.error(i18n.t("login.forgetPwd.msg.err.code"));
|
if (!forgetpasswordFormData.pass) return ElMessage.error(i18n.t("login.forgetPwd.msg.err.pwd"));
|
if (!validatePassword(forgetpasswordFormData.pass)) return ElMessage.error(i18n.t("login.forgetPwd.msg.err.pwd1"));
|
if (!forgetpasswordFormData.newPassword) return ElMessage.error(i18n.t("login.forgetPwd.msg.err.pwd2"));
|
if (forgetpasswordFormData.pass !== forgetpasswordFormData.newPassword) return ElMessage.error(i18n.t("login.forgetPwd.msg.err.pwd3"));
|
isSubmitLoading.value = true;
|
try {
|
await api_forget_pwd(forgetpasswordFormData);
|
isSubmitLoading.value = false;
|
// 请求成功后关闭弹出层
|
close();
|
ElMessage.success(i18n.t("login.forgetPwd.msg.success.submit"));
|
} catch (error) {
|
isSubmitLoading.value = false;
|
}
|
};
|
|
const close = () => {
|
forgetpasswordFormData.userPhone = "";
|
forgetpasswordFormData.validateCode = "";
|
forgetpasswordFormData.pass = "";
|
forgetpasswordFormData.newPassword = "";
|
emit("close");
|
};
|
|
defineExpose({
|
close,
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.forget_password_container {
|
.btn_box {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
</style>
|
