first commit

src/views/sys/forget-password/step1.vue

@@ -0,0 +1,96 @@
+<template>
+  <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+    <FormItem name="mobile" class="enter-x">
+      <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
+    </FormItem>
+    <FormItem name="sms" class="enter-x">
+      <CountdownInput size="large" v-model:value="formData.sms" :placeholder="t('sys.login.smsCode')" :sendCodeApi="sendCodeApi" />
+    </FormItem>
+    <FormItem class="enter-x">
+      <Button type="primary" size="large" block @click="handleNext" :loading="loading"> 下一步 </Button>
+      <Button size="large" block class="mt-4" @click="handleBackLogin">
+        {{ t('sys.login.backSignIn') }}
+      </Button>
+    </FormItem>
+  </Form>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, ref, computed, unref, toRaw } from 'vue';
+
+  import { Form, Input, Button, steps } from 'ant-design-vue';
+  import { CountdownInput } from '/@/components/CountDown';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useLoginState, useFormRules, useFormValid, LoginStateEnum, SmsEnum } from '../login/useLogin';
+  import { phoneVerify, getCaptcha } from '/@/api/sys/user';
+
+  export default defineComponent({
+    name: 'step1',
+    components: {
+      Button,
+      Form,
+      FormItem: Form.Item,
+      Input,
+      CountdownInput,
+    },
+    emits: ['nextStep'],
+    setup(_, { emit }) {
+      const { t } = useI18n();
+      const { handleBackLogin } = useLoginState();
+      const { notification } = useMessage();
+
+      const formRef = ref();
+      const { validForm } = useFormValid(formRef);
+      const { getFormRules } = useFormRules();
+
+      const loading = ref(false);
+      const formData = reactive({
+        mobile: '',
+        sms: '',
+      });
+
+      /**
+       * 下一步
+       */
+      async function handleNext() {
+        const data = await validForm();
+        if (!data) return;
+        const resultInfo = await phoneVerify(
+          toRaw({
+            phone: data.mobile,
+            smscode: data.sms,
+          })
+        );
+        if (resultInfo.success) {
+          let accountInfo = {
+            username: resultInfo.result.username,
+            phone: data.mobile,
+            smscode: resultInfo.result.smscode,
+          };
+          emit('nextStep', accountInfo);
+        } else {
+          notification.error({
+            message: t('sys.api.errorTip'),
+            description: resultInfo.message || t('sys.api.networkExceptionMsg'),
+            duration: 3,
+          });
+        }
+      }
+      //倒计时执行前的函数
+      function sendCodeApi() {
+        return getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.FORGET_PASSWORD });
+      }
+      return {
+        t,
+        formRef,
+        formData,
+        getFormRules,
+        handleNext,
+        loading,
+        handleBackLogin,
+        sendCodeApi,
+      };
+    },
+  });
+</script>

src/views/sys/forget-password/step2.vue

@@ -0,0 +1,103 @@
+<template>
+  <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+    <FormItem name="username" class="enter-x">
+      <Input size="large" v-model:value="formData.username" :placeholder="t('sys.login.userName')" disabled />
+    </FormItem>
+
+    <FormItem name="password" class="enter-x">
+      <StrengthMeter size="large" v-model:value="formData.password" :placeholder="t('sys.login.password')" />
+    </FormItem>
+
+    <FormItem name="confirmPassword" class="enter-x">
+      <InputPassword size="large" visibilityToggle v-model:value="formData.confirmPassword" :placeholder="t('sys.login.confirmPassword')" />
+    </FormItem>
+
+    <FormItem class="enter-x">
+      <Button type="primary" size="large" block @click="handlePrev"> 上一步 </Button>
+      <Button size="large" block class="mt-4" @click="handleNext"> 下一步 </Button>
+    </FormItem>
+  </Form>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, ref, computed, unref, toRaw, toRefs } from 'vue';
+  import { Form, Input, Button } from 'ant-design-vue';
+  import { StrengthMeter } from '/@/components/StrengthMeter';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useFormRules, useFormValid } from '../login/useLogin';
+  import { passwordChange } from '/@/api/sys/user';
+
+  export default defineComponent({
+    name: 'step2',
+    components: {
+      Button,
+      Form,
+      FormItem: Form.Item,
+      InputPassword: Input.Password,
+      Input,
+      StrengthMeter,
+    },
+    props: {
+      accountInfo: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+    emits: ['prevStep', 'nextStep'],
+    setup(props, { emit }) {
+      const { t } = useI18n();
+      const { createErrorModal } = useMessage();
+      const { accountInfo } = props;
+      const formRef = ref();
+      const formData = reactive({
+        username: accountInfo.obj.username || '',
+        password: '',
+        confirmPassword: '',
+      });
+      const { getFormRules } = useFormRules(formData);
+      const { validForm } = useFormValid(formRef);
+
+      /**
+       * 上一步
+       */
+      function handlePrev() {
+        emit('prevStep', accountInfo.obj);
+      }
+
+      /**
+       * 下一步
+       */
+      async function handleNext() {
+        const data = await validForm();
+        if (!data) return;
+        const resultInfo = await passwordChange(
+          toRaw({
+            username: data.username,
+            password: data.password,
+            smscode: accountInfo.obj.smscode,
+            phone: accountInfo.obj.phone,
+          })
+        );
+        if (resultInfo.success) {
+          //修改密码
+          emit('nextStep', accountInfo.obj);
+        } else {
+          //错误提示
+          createErrorModal({
+            title: t('sys.api.errorTip'),
+            content: resultInfo.message || t('sys.api.networkExceptionMsg'),
+          });
+        }
+      }
+
+      return {
+        t,
+        formRef,
+        formData,
+        getFormRules,
+        handleNext,
+        handlePrev,
+      };
+    },
+  });
+</script>

src/views/sys/forget-password/step3.vue

@@ -0,0 +1,71 @@
+<template>
+  <Result status="success" title="更改密码成功" :sub-title="getSubTitle">
+    <template #extra>
+      <a-button key="console" type="primary" @click="finish"> 返回登录 </a-button>
+    </template>
+  </Result>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref, onMounted, watchEffect, watch } from 'vue';
+  import { Form, Input, Button, Result } from 'ant-design-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState } from '../login/useLogin';
+  import { useCountdown } from '/@/components/CountDown/src/useCountdown';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'step3',
+    components: {
+      Button,
+      Form,
+      FormItem: Form.Item,
+      Input,
+      Result,
+    },
+    props: {
+      accountInfo: {
+        type: Object,
+        default: () => ({}),
+      },
+      count: propTypes.number.def(5),
+    },
+    emits: ['finish'],
+    setup(props, { emit }) {
+      const { t } = useI18n();
+      const { accountInfo } = props;
+      const { handleBackLogin } = useLoginState();
+
+      const { currentCount, start } = useCountdown(props.count);
+      const getSubTitle = computed(() => {
+        return t('sys.login.subTitleText', [unref(currentCount)]);
+      });
+      /**
+       * 倒计时
+       */
+      watchEffect(() => {
+        if (unref(currentCount) === 1) {
+          setTimeout(() => {
+            finish();
+          }, 500);
+        }
+      });
+
+      /**
+       * 结束回调
+       */
+      function finish() {
+        handleBackLogin();
+        emit('finish');
+      }
+
+      onMounted(() => {
+        start();
+      });
+
+      return {
+        getSubTitle,
+        finish,
+      };
+    },
+  });
+</script>