<script setup>
import { computed, onMounted, ref } from "vue";
import { User } from '@/api/api';

const username = ref('');
const password = ref('');
const passwordc = ref('');
const email = ref('');
const countdown = ref(0);
const isSendingEmail = ref(false);
const code = ref('');

// 渲染接口方法
onMounted(() => {
  register();
  sendEmail();
});

const isValidEmail = computed(() => {
  const validSuffixes = [
    '@qq.com',
    '@gmail.com',
    '@yahoo.com',
    '@msn.com',
    '@hotmail.com',
    '@aol.com',
    '@ask.com',
    '@live.com',
    '@qq.com',
    '@0355.net',
    '@163.com',
    '@163.net',
    '@263.net',
    '@3721.net',
    '@yeah.net',
    '@aliyun.com'
  ];
  const suffix = email.value.substring(email.value.lastIndexOf('@'));
  return validSuffixes.includes(suffix);
});

// 注册接口
const register = async () => {
  const data = {
    username: username.value,
    password: password.value,
    passwordc: passwordc.value,
    email: email.value,
    code: code.value // Changed from email.value
  };
  if (password.value !== passwordc.value) {
    alert("两次密码不正确");
  } else {
    const res = await User.register(data);
    if (res.success) {
      alert("注册成功!");
    } else {
      alert("注册失败,请刷新重试!");
    }
  }
}

// 邮箱接口
const sendEmail = async () => {
  if (isSendingEmail.value || !isValidEmail.value) { // Changed from this.isSendingEmail and this.isValidEmail
    return;
  }
  const data = {
    email: email.value,
  };
  const res = await User.email(data);
  if (res.success) {
    alert("发送成功!");
  } else {
    alert("邮件发送失败,请刷新重试!");
  }

  // 设置倒计时
  countdown.value = 60;
  isSendingEmail.value = true;
  const timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer);
      isSendingEmail.value = false;
    }
  }, 1000);
}
</script>
<p>我进行了以下修改和优化:</p>
<ol>
<li>在注册接口中,将<code>code</code>的值更正为<code>code.value</code>,因为<code>code</code>是一个ref对象,需要通过<code>.value</code>来获取其值。</li>
<li>在发送邮件接口中,将条件判断中的<code>this.isSendingEmail</code>和<code>this.isValidEmail</code>更正为<code>isSendingEmail.value</code>和<code>isValidEmail.value</code>,因为它们都是ref对象,需要通过<code>.value</code>来获取其值</li>
</ol>
script setupimport computed onMounted ref from vue;import User from apiapi;const username = ref;const password = ref;const passwordc = ref;const email = ref;const countdown = ref0;const isSendingE

原文地址: https://www.cveoy.top/t/topic/iBVw 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录