bill-fontend/src/views/user/setting/components/password-reset.vue

<template>
  <a-form
    ref="formRef"
    :model="formData"
    class="form"
    :label-col-props="{ span: 8 }"
    :wrapper-col-props="{ span: 16 }"
  >
    <a-form-item
      field="newPassword"
      :label="$t('userSetting.passwordReset.form.label.newPassword')"
      :rules="[{ required: true, message: $t('login.form.password.errMsg') }]"
      :validate-trigger="['change', 'blur']"
    >
      <a-input-password
        v-model="formData.newPassword"
        placeholder="请输入新密码"
        allow-clear
      >
      </a-input-password>
    </a-form-item>
    <a-form-item
      field="confirmPassword"
      :label="$t('userSetting.passwordReset.form.label.confirmPassword')"
      :rules="[{ required: true, validator: checkEquals }]"
      :validate-trigger="['change', 'blur']"
    >
      <a-input-password
        v-model="formData.confirmPassword"
        placeholder="请确认新密码"
        allow-clear
      >
      </a-input-password>
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="primary" @click="validate">
          {{ $t('userSetting.save') }}
        </a-button>
        <a-button type="secondary" @click="reset">
          {{ $t('userSetting.reset') }}
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { PasswordReSetModel, resetPassword } from '@/api/user';
  import { Message } from '@arco-design/web-vue';
  import useUser from "@/hooks/user";

  const { t } = useI18n();

  const formRef = ref<FormInstance>();
  const formData = ref<PasswordReSetModel>({
    newPassword: '',
    confirmPassword: '',
  });
  const checkEquals = (
    value: string | undefined,
    callback: (error?: string) => void
  ) => {
    if (!value) {
      callback(t('userSetting.passwordReset.form.validate.blank'));
    } else if (formData.value.newPassword !== formData.value.confirmPassword) {
      callback(t('userSetting.passwordReset.form.validate.noEquals'));
    }
  };

  const user = useUser();
  const validate = async () => {
    const vali = await formRef.value?.validate();
    if (!vali) {
      // do some thing
      // you also can use html-type to submit
      const res = await resetPassword(formData.value);
      if (res.status === 200) {
        Message.success({
          content: res.data,
          duration: 5 * 1000,
        });
        await user.logout();
      }
    }
  };
  const reset = async () => {
    await formRef.value?.resetFields();
  };
</script>

<style scoped lang="less">
  .form {
    width: 540px;
    margin: 20px auto;
  }
</style>