Browse Source

refactor(联系表单): 优化邮件发送逻辑和表单提交处理

- 合并表单提交和邮件发送逻辑,减少嵌套,提高代码可读性。
- 添加邮件内容模板,包含用户输入的信息和提交时间,提升邮件的可读性。
master
lizhuang 4 weeks ago
parent
commit
83326a0d00
1 changed files with 31 additions and 13 deletions
  1. 31
    13
      pages/contact.vue

+ 31
- 13
pages/contact.vue View File

<div class="text-white text-3xl font-medium mb-6"> <div class="text-white text-3xl font-medium mb-6">
{{ t("contact.title") }} {{ t("contact.title") }}
</div> </div>
<form
@submit="handleSubmit"
class="flex flex-col gap-6"
>
<form @submit="handleSubmit" class="flex flex-col gap-6">
<div class="relative"> <div class="relative">
<input <input
v-model="form.name" v-model="form.name"
async function handleSubmit(event: Event) { async function handleSubmit(event: Event) {
// 阻止表单默认提交行为,防止重复提交 // 阻止表单默认提交行为,防止重复提交
event.preventDefault(); event.preventDefault();
if (isSubmitting.value) { if (isSubmitting.value) {
return; // 如果已经在提交中,不重复处理 return; // 如果已经在提交中,不重复处理
} }
isSubmitting.value = true; isSubmitting.value = true;
submitSuccess.value = false; submitSuccess.value = false;
try { try {
// 验证验证码 // 验证验证码
const isCaptchaValid = captcha.validateCaptcha(); const isCaptchaValid = captcha.validateCaptcha();
if (!isCaptchaValid) { if (!isCaptchaValid) {
isSubmitting.value = false; isSubmitting.value = false;
return; return;
} }
// 使用单独的异步函数发送邮件,减少嵌套 // 使用单独的异步函数发送邮件,减少嵌套
await sendEmail(); await sendEmail();
} catch (error) { } catch (error) {
console.error("Error during form submission:", error); console.error("Error during form submission:", error);
showFormStatus("error", t("contact.submitError")); showFormStatus("error", t("contact.submitError"));
async function sendEmail() { async function sendEmail() {
try { try {
const result = await wrapAsync(async () => { const result = await wrapAsync(async () => {
const message_template = `
📨 来自Hanye官网的联系表单

姓名:${form.value.name}
邮箱:${form.value.email}

消息内容:
${form.value.message}

提交时间:${new Date().toLocaleString()}
来源页面:${window.location.href}

---
此邮件由Hanye官网的联系表单自动发送,请勿回复。
`;
const title = `您有一封来自Hanye官网的联系表单`;
const receiveEmail = "hanye@hanye.cn";

// 对包含HTML标签的参数进行URL编码
const encodedMessage = encodeURIComponent(message_template);
const encodedTitle = encodeURIComponent(title);

// 发送邮件 // 发送邮件
const response = await fetch( const response = await fetch(
`https://digital.sohomall.jp/prod-api/system/zsEmail/sendEmailWeb?receiveEmail=${form.value.email}&context=${form.value.message}&title=[Hanye Website]${form.value.name}`,
`https://digital.sohomall.jp/prod-api/system/zsEmail/sendEmailWeb?receiveEmail=${receiveEmail}&context=${encodedMessage}&title=${encodedTitle}`,
{ {
method: "GET", method: "GET",
headers: { headers: {
email: "", email: "",
message: "", message: "",
}; };
captcha.state.userInput = ''; // 清空验证码输入
captcha.state.userInput = ""; // 清空验证码输入
captcha.generateCaptcha(); // 成功后刷新验证码 captcha.generateCaptcha(); // 成功后刷新验证码
submitSuccess.value = true; submitSuccess.value = true;
showFormStatus("success", t("contact.submitSuccess")); showFormStatus("success", t("contact.submitSuccess"));
throw new Error("Failed to send email"); throw new Error("Failed to send email");
} }
}); });
return result; return result;
} catch (error) { } catch (error) {
console.error("Error sending email:", error); console.error("Error sending email:", error);

Loading…
Cancel
Save