From fa3ac93010bea3805438ee3ab0a182bfbf7423da Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期一, 27 五月 2024 16:19:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/system/loginmini/MiniForgotpad.vue | 282 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 282 insertions(+), 0 deletions(-)
diff --git a/src/views/system/loginmini/MiniForgotpad.vue b/src/views/system/loginmini/MiniForgotpad.vue
new file mode 100644
index 0000000..c19b508
--- /dev/null
+++ b/src/views/system/loginmini/MiniForgotpad.vue
@@ -0,0 +1,282 @@
+<template>
+ <div class="aui-content">
+ <div class="aui-container">
+ <div class="aui-form">
+ <div class="aui-image">
+ <div class="aui-image-text">
+ <img :src="adTextImg" alt="" />
+ </div>
+ </div>
+ <div class="aui-formBox">
+ <div class="aui-formWell">
+ <div class="aui-step-box">
+ <div class="aui-step-item" :class="activeKey === 1 ? 'activeStep' : ''">
+ <div class="aui-step-tags">
+ <em>1</em>
+ <p>{{t('sys.login.authentication')}}</p>
+ </div>
+ </div>
+ <div class="aui-step-item" :class="activeKey === 2 ? 'activeStep' : ''">
+ <div class="aui-step-tags">
+ <em>2</em>
+ <p>{{t('sys.login.resetLoginPassword')}}</p>
+ </div>
+ </div>
+ <div class="aui-step-item" :class="activeKey === 3 ? 'activeStep' : ''">
+ <div class="aui-step-tags">
+ <em>3</em>
+ <p>{{t('sys.login.resetSuccess')}}</p>
+ </div>
+ </div>
+ </div>
+ <div class="" style="height: 230px; position: relative">
+ <a-form ref="formRef" :model="formData" v-if="activeKey === 1">
+ <!-- 韬唤楠岃瘉 begin -->
+ <div class="aui-account aui-account-line aui-forgot">
+ <a-form-item>
+ <div class="aui-input-line">
+ <a-input type="text" :placeholder="t('sys.login.mobile')" v-model:value="formData.mobile" />
+ </div>
+ </a-form-item>
+ <div class="aui-input-line">
+ <a-form-item>
+ <a-input type="text" :placeholder="t('sys.login.smsCode')" v-model:value="formData.smscode" />
+ </a-form-item>
+ <div v-if="showInterval" class="aui-code-line" @click="getLoginCode">{{t('component.countdown.normalText')}}</div>
+ <div v-else class="aui-code-line">{{t('component.countdown.sendText',[unref(timeRuning)])}}</div>
+ </div>
+ </div>
+ <!-- 韬唤楠岃瘉 end -->
+ </a-form>
+ <a-form ref="pwdFormRef" :model="pwdFormData" v-else-if="activeKey === 2">
+ <!-- 閲嶇疆瀵嗙爜 begin -->
+ <div class="aui-account aui-account-line aui-forgot">
+ <a-form-item>
+ <div class="aui-input-line">
+ <a-input type="password" :placeholder="t('sys.login.passwordPlaceholder')" v-model:value="pwdFormData.password" />
+ </div>
+ </a-form-item>
+ <a-form-item>
+ <div class="aui-input-line">
+ <a-input type="password" :placeholder="t('sys.login.confirmPassword')" v-model:value="pwdFormData.confirmPassword" />
+ </div>
+ </a-form-item>
+ </div>
+ <!-- 閲嶇疆瀵嗙爜 end -->
+ </a-form>
+ <!-- 閲嶇疆鎴愬姛 begin -->
+ <div class="aui-success" v-else>
+ <div class="aui-success-icon">
+ <img :src="successImg"/>
+ </div>
+ <h3>鎭枩鎮紝閲嶇疆瀵嗙爜鎴愬姛锛�</h3>
+ </div>
+ <!-- 閲嶇疆鎴愬姛 end -->
+ </div>
+ <div class="aui-formButton" style="padding-bottom: 40px">
+ <div class="aui-flex" v-if="activeKey === 1 || activeKey === 2">
+ <a class="aui-link-login aui-flex-box" @click="nextStepClick">{{t('sys.login.nextStep')}}</a>
+ </div>
+ <div class="aui-flex" v-else>
+ <a class="aui-linek-code aui-flex-box" @click="toLogin">{{t('sys.login.goToLogin')}}</a>
+ </div>
+ <div class="aui-flex">
+ <a class="aui-linek-code aui-flex-box" @click="goBack"> {{ t('sys.login.backSignIn') }}</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts" name="mini-forgotpad" setup>
+ import { reactive, ref, toRaw, unref } from 'vue';
+ import { useI18n } from '/@/hooks/web/useI18n';
+ import { SmsEnum, useFormRules, useFormValid, useLoginState } from '/@/views/sys/login/useLogin';
+ import { useMessage } from '/@/hooks/web/useMessage';
+ import { getCaptcha, passwordChange, phoneVerify } from '/@/api/sys/user';
+ import logoImg from '/@/assets/loginmini/icon/lanpu_logo.png'
+ import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png'
+ import successImg from '/@/assets/loginmini/icon/icon-success.png'
+
+ //涓嬩竴姝ユ帶鍒�
+ const activeKey = ref<number>(1);
+ const { t } = useI18n();
+ const { handleBackLogin } = useLoginState();
+ const { notification, createMessage, createErrorModal } = useMessage();
+ //鏄惁鏄剧ず鑾峰彇楠岃瘉鐮�
+ const showInterval = ref<boolean>(true);
+ //60s
+ const timeRuning = ref<number>(60);
+ //瀹氭椂鍣�
+ const timer = ref<any>(null);
+ const formRef = ref();
+ const pwdFormRef = ref();
+ //璐﹀彿鏁版嵁
+ const accountInfo = reactive<any>({});
+ //鎵嬫満鍙疯〃鍗�
+ const formData = reactive({
+ mobile: '',
+ smscode: '',
+ });
+ //瀵嗙爜琛ㄥ崟
+ const pwdFormData = reactive<any>({
+ password: '',
+ confirmPassword: '',
+ });
+ const emit = defineEmits(['go-back', 'success', 'register']);
+
+ /**
+ * 涓嬩竴姝�
+ */
+ async function handleNext() {
+ if (!formData.mobile) {
+ createMessage.warn(t('sys.login.mobilePlaceholder'));
+ return;
+ }
+ if (!formData.smscode) {
+ createMessage.warn(t('sys.login.smsPlaceholder'));
+ return;
+ }
+ const resultInfo = await phoneVerify(
+ toRaw({
+ phone: formData.mobile,
+ smscode: formData.smscode,
+ })
+ );
+ if (resultInfo.success) {
+ Object.assign(accountInfo, {
+ username: resultInfo.result.username,
+ phone: formData.mobile,
+ smscode: formData.smscode,
+ });
+ activeKey.value = 2;
+ setTimeout(()=>{
+ pwdFormRef.value.resetFields();
+ },300)
+ } else {
+ notification.error({
+ message: '閿欒鎻愮ず',
+ description: resultInfo.message || t('sys.api.networkExceptionMsg'),
+ duration: 3,
+ });
+ }
+ }
+
+ /**
+ * 瀹屾垚淇敼瀵嗙爜
+ */
+ async function finishedPwd() {
+ if (!pwdFormData.password) {
+ createMessage.warn(t('sys.login.passwordPlaceholder'));
+ return;
+ }
+ if (!pwdFormData.confirmPassword) {
+ createMessage.warn(t('sys.login.confirmPassword'));
+ return;
+ }
+ if (pwdFormData.password !== pwdFormData.confirmPassword) {
+ createMessage.warn(t('sys.login.diffPwd'));
+ return;
+ }
+ const resultInfo = await passwordChange(
+ toRaw({
+ username: accountInfo.username,
+ password: pwdFormData.password,
+ smscode: accountInfo.smscode,
+ phone: accountInfo.phone,
+ })
+ );
+ if (resultInfo.success) {
+ accountInfo.password = pwdFormData.password;
+ //淇敼瀵嗙爜
+ activeKey.value = 3;
+ } else {
+ //閿欒鎻愮ず
+ createErrorModal({
+ title: t('sys.api.errorTip'),
+ content: resultInfo.message || t('sys.api.networkExceptionMsg'),
+ });
+ }
+ }
+ /**
+ * 涓嬩竴姝�
+ */
+ function nextStepClick() {
+ if (unref(activeKey) == 1) {
+ handleNext();
+ } else if (unref(activeKey) == 2) {
+ finishedPwd();
+ }
+ }
+
+ /**
+ * 鍘荤櫥褰�
+ */
+ function toLogin() {
+ emit('success', { username: accountInfo.username, password: accountInfo.password });
+ initForm();
+ }
+
+ /**
+ * 杩斿洖
+ */
+ function goBack() {
+ emit('go-back');
+ initForm();
+ }
+
+ /**
+ * 鑾峰彇鎵嬫満楠岃瘉鐮�
+ */
+ async function getLoginCode() {
+ if (!formData.mobile) {
+ createMessage.warn(t('sys.login.mobilePlaceholder'));
+ return;
+ }
+ const result = await getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.FORGET_PASSWORD });
+ if (result) {
+ const TIME_COUNT = 60;
+ if (!unref(timer)) {
+ timeRuning.value = TIME_COUNT;
+ showInterval.value = false;
+ timer.value = setInterval(() => {
+ if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
+ timeRuning.value = timeRuning.value - 1;
+ } else {
+ showInterval.value = true;
+ clearInterval(unref(timer));
+ timer.value = null;
+ }
+ }, 1000);
+ }
+ }
+ }
+
+ /**
+ * 鍒濆鍖栬〃鍗�
+ */
+ function initForm() {
+ activeKey.value = 1;
+ Object.assign(formData, { phone: '', smscode: '' });
+ Object.assign(pwdFormData, { password: '', confirmPassword: '' });
+ Object.assign(accountInfo, {});
+ if(unref(timer)){
+ clearInterval(unref(timer));
+ timer.value = null;
+ showInterval.value = true;
+ }
+ setTimeout(()=>{
+ formRef.value.resetFields();
+ },300)
+ }
+
+ defineExpose({
+ initForm,
+ });
+</script>
+<style lang="less" scoped>
+@import '/@/assets/loginmini/style/home.less';
+@import '/@/assets/loginmini/style/base.less';
+</style>
--
Gitblit v1.9.3