联系表单 EmailJS 配置指南

📋 完成内容

1. 已创建文件

✅ src/view/ContactUs/Index.vue - 新的联系我们页面（含表单）
✅ 安装 EmailJS 依赖

2. 表单功能

✅ 联系人姓名
✅ 联系电话（11 位手机号验证）
✅ 邮箱地址（邮箱格式验证）
✅ 企业名称
✅ 咨询主题（下拉选择）
✅ 留言内容
✅ 隐私政策同意
✅ 表单验证
✅ 提交状态提示
✅ 成功/失败通知

🔧 EmailJS 配置步骤

第一步：注册 EmailJS 账号

访问 https://www.emailjs.com/
点击 "Sign Up Free" 免费注册
使用邮箱注册并验证

第二步：添加 Email Service

登录后进入 Dashboard
点击 "Add New Service"
选择 Gmail（推荐）或 Outlook
连接您的邮箱账号（用于发送邮件）
创建成功后，记录 Service ID（如 service_abc123）

第三步：创建 Email Template

在 Dashboard 点击 "Email Templates"
点击 "Create New Template"
使用以下模板内容：

邮件模板内容

主题：新联系表单提交 - {{subject}}

发件人：{{from_name}} <{{from_email}}>
回复至：{{reply_to}}

=====================================
联系表单提交信息
=====================================

【联系人】{{from_name}}
【联系电话】{{from_phone}}
【邮箱】{{from_email}}
【企业名称】{{from_company}}
【咨询主题】{{subject}}
【留言内容】
{{message}}

=====================================
提交时间：{{date}}
=====================================

此邮件由网站联系表单自动发送
收件邮箱：{{to_email}}

保存模板，记录 Template ID（如 template_xyz789）

第四步：获取 Public Key

点击右上角账号名称
选择 "Account"
在 API Keys 部分找到 Public Key
记录 Public Key（如 user_abc123xyz）

第五步：配置前端代码

打开 src/view/ContactUs/Index.vue，找到以下代码（约第 225 行）：

emailjsConfig: {
  serviceId: 'YOUR_SERVICE_ID',      // 替换为您的 Service ID
  templateId: 'YOUR_TEMPLATE_ID',    // 替换为您的 Template ID
  publicKey: 'YOUR_PUBLIC_KEY'       // 替换为您的 Public Key
}

替换为您的实际配置：

emailjsConfig: {
  serviceId: 'service_abc123',      // 您的 Service ID
  templateId: 'template_xyz789',    // 您的 Template ID
  publicKey: 'user_abc123xyz'       // 您的 Public Key
}

📧 接收邮件配置

默认接收邮箱

在代码中已设置固定接收邮箱：

to_email: 'zhanyuhangkong@163.com'  // 接收邮件的固定邮箱

如需修改，请编辑 src/view/ContactUs/Index.vue 第 268 行。

多邮箱接收

如需多人接收，可修改模板或使用多个 Service。

🎯 测试步骤

启动项目
```
npm run dev
```
访问页面
- 导航到 "联系我们"
- 或直接访问 http://localhost:8888/#/contactus
填写表单
- 填写所有必填字段
- 点击 "提交留言"
验证结果
- 看到 "提交成功" 提示
- 检查邮箱是否收到邮件

📊 EmailJS 免费额度

项目	免费额度	说明
邮件发送	200 封/月	足够小型企业使用
存储	50MB	存储邮件历史
附件	不支持	免费版不支持附件

升级方案

如需要更多额度：

Basic: $15/月 - 2000 封邮件
Professional: $30/月 - 10000 封邮件
Enterprise: 定制方案

🔒 安全建议

1. 隐藏 Public Key

虽然 Public Key 是公开的，但建议：

不要提交到 Git 仓库
使用环境变量存储

2. 添加验证码

防止恶意提交，可添加：

Google reCAPTCHA
图形验证码
短信验证

3. 频率限制

在 EmailJS Dashboard 设置：

每小时发送限制
每日发送限制

⚠️ 常见问题

Q1: 邮件发送失败？

A: 检查以下几点：

Service ID、Template ID、Public Key 是否正确
邮箱账号是否已验证
浏览器控制台是否有错误信息

Q2: 收不到邮件？

A: 检查：

垃圾邮件文件夹
EmailJS Dashboard 的发送日志
邮箱是否已满

Q3: 表单验证不通过？