stock-front/src/views/login/ForgetPassword.vue

<template>
  <!-- 找回密码 -->
  <div class="forgetPassword flex-col">
    <s-header :name="$t('forgetPassword.header')" :noback="false"></s-header>
    <div class="forgetPasswordFormBox">
      <van-form @submit="forgetPasswordSubmit">
        <div>
          <span class="word2">{{ $t('forgetPassword.phoneWordSpan') }}</span>
          <van-field v-model="phone" name="phone" type="tel" :placeholder="$t('forgetPassword.phonePlaceholder')"
            :rules="[{ required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' }]" />
        </div>

        <van-field v-model="code" name="code" :placeholder="$t('forgetPassword.codePlaceholder')"
          :rules="[{ required: true, message: $t('forgetPassword.codeRequired') }]">
          <template #button>
            <van-button size="small" type="primary" @click="seedVerCode()" 
            :disabled="time !== 0  || phone.length === 0" 
            :loading-text="$t('register.sending')">
              {{ time === 0 ?
              $t('forgetPassword.seedVerCode') : time + '秒后可重发' }}
              </van-button>
          </template>
        </van-field>

        <van-field v-model="password" name="password" type="password" placeholder="输入新密码"
          :rules="[{ required: true, message: $t('changePassword.passwordRequired') }]" />

        <van-field v-model="passwordCheck" name="passwordCheck" type="password" placeholder="确认新密码"
          :rules="[{ required: true, message: $t('changePassword.passwordCheckRequired') }]" />

        <van-button round type="primary" class="register" native-type="submit">{{ $t('forgetPassword.registerButton')
          }}</van-button>

      </van-form>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { showToast, showFailToast } from 'vant';
import { setLocal, getLocal, styleUrl } from '@/common/js/utils';
import sHeader from "@/components/SimpleHeader";
import { useRouter } from "vue-router";
import { sentForgetCode, checkForgetCode } from '@/service/login/forget-password';
import md5 from 'js-md5';

export default {
  setup() {
    const phone = ref(''); // 手机号
    const code = ref(''); // 验证码
    const verCodeTime = reactive({
      time: 0
    }); // 验证码间隔时间及状态

    const password = ref('');
    const passwordCheck = ref('');

    const router = useRouter();
    // 发送验证码
    const seedVerCode = async () => {
      const { data } = await sentForgetCode({
        phone: phone.value,
      });
      if (data.code === '00000') {
        showToast('验证码发送成功');
        verCodeTime.time = 3 * 60;
        verCodeTimeInterval();
      } else { showFailToast(data.message); }
    }
    // 验证码发送成功开始3分钟倒计时
    const verCodeTimeInterval = () => {
      verCodeTime.time--;
      setLocal('forgetVerCodeTime', verCodeTime.time)
      if (verCodeTime.time !== 0) { setTimeout(() => { verCodeTimeInterval(); }, 1000); }
    }
    // 验证-表单
    const forgetPasswordSubmit = async () => {
      if (password.value !== passwordCheck.value) {
        showFailToast('两次密码不一致,请确认密码正确');
        return false;
      }
      const { data } = await checkForgetCode({
        phone: phone.value,
        code: code.value,
        password: md5(password.value)
      });

      if (data.code === '00000') {
        showToast('修改成功');
        setTimeout(() => {
          // router.push({ path: '/changepassword', query: { name: username.value } });
          router.push({ path: '/login' });
        }, 1500);
      } else {
        showFailToast(data.message);
      }
    };

    // 初始化页面获取验证码倒计时
    onMounted(async () => {
      styleUrl('forgetPassword');
      verCodeTime.time = getLocal('forgetVerCodeTime');
      if (verCodeTime.time && verCodeTime.time !== '') {
        verCodeTime.time = parseInt(verCodeTime.time);
        if (verCodeTime.time > 0) {
          verCodeTimeInterval();
        }
      } else {
        verCodeTime.time = 0;
      }
    });

    return {
      ...toRefs(verCodeTime),
      phone,
      password,
      passwordCheck,
      code,
      seedVerCode,
      forgetPasswordSubmit
    };
  },
  components: { sHeader },
};
</script>

<style lang="less" scoped>
@import "@/common/style/mixin";
</style>