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
<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>
原文地址: https://www.cveoy.top/t/topic/iBVw 著作权归作者所有。请勿转载和采集!