shenze-sysMan/src/views/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">
        <van-field v-model="username" name="username" :placeholder="$t('forgetPassword.usernamePlaceholder')"
          :rules="[{ required: true, message: $t('forgetPassword.usernameRequired') }]" />
        <span class="word1">{{ $t('forgetPassword.selectForgetPassword') }}</span>
        <div class="van-cell van-field">
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="ifForeign" direction="horizontal">
              <van-radio name="0" icon-size="18px">{{ $t('forgetPassword.phone') }}</van-radio>
              <van-radio name="2" icon-size="18px">{{ $t('forgetPassword.emailChina') }}</van-radio>
              <van-radio name="1" icon-size="18px">{{ $t('forgetPassword.emailAbroad') }}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div v-if="ifForeign === '0'">
          <span class="word2">{{ $t('forgetPassword.phoneWordSpan') }}</span>
          <van-field v-model="phone" name="phone" type="tel" :placeholder="$t('forgetPassword.phonePlaceholder')"
            :rules="[{ required: true, message: $t('forgetPassword.phoneRequired') }]" />
        </div>
        <div v-if="ifForeign === '2'">
          <span class="word2">{{ $t('forgetPassword.emailWordSpanChina') }}</span>
          <van-field v-model="email" name="email" :placeholder="$t('forgetPassword.emailPlaceholder')"
            :rules="[{ required: true, message: $t('forgetPassword.emailRequired') }]" />
        </div>
        <div v-if="ifForeign === '1'">
          <span class="word2">{{ $t('forgetPassword.emailWordSpan') }}</span>
          <van-field v-model="email" name="email" :placeholder="$t('forgetPassword.emailPlaceholder')"
            :rules="[{ required: true, message: $t('forgetPassword.emailRequired') }]" />
        </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">{{ time === 0 ?
              $t('forgetPassword.seedVerCode') : time + '秒后可重发' }}</van-button>
          </template>
        </van-field>
        <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/forgetPassword';

export default {
  setup() {
    const username = ref(''); // 用户名
    const ifForeign = ref('0'); // 手机号&邮箱状态
    const email = ref(''); // 邮箱
    const phone = ref(''); // 手机号
    const code = ref(''); // 验证码
    const verCodeTime = reactive({
      time: 0
    }); // 验证码间隔时间及状态
    const router = useRouter();
    // 发送验证码
    const seedVerCode = async () => {
      const { data } = await sentForgetCode({
        username: username.value,
        ifForeign: ifForeign.value,
        phoneOrEmail: ifForeign.value === '0' ? phone.value : email.value,
        hostName: 'Sunzee'
      });
      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 () => {
      const { data } = await checkForgetCode({
        ifForeign: ifForeign.value,
        phoneOrEmail: ifForeign.value === '0' ? phone.value : email.value,
        code: code.value
      });
      if (data.code === '00000') {
        showToast('校验成功');
        router.push({ path: '/changepassword', query: { name: username.value } });
      } 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),
      username,
      ifForeign,
      phone,
      email,
      code,
      seedVerCode,
      forgetPasswordSubmit
    };
  },
  components: { sHeader },
};
</script>

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