# 联系表单 EmailJS 配置指南

## 📋 完成内容

### 1. 已创建文件
- ✅ `src/view/ContactUs/Index.vue` - 新的联系我们页面（含表单）
- ✅ 安装 EmailJS 依赖

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

---

## 🔧 EmailJS 配置步骤

### 第一步：注册 EmailJS 账号

1. 访问 [https://www.emailjs.com/](https://www.emailjs.com/)
2. 点击 **"Sign Up Free"** 免费注册
3. 使用邮箱注册并验证

### 第二步：添加 Email Service

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

### 第三步：创建 Email Template

1. 在 Dashboard 点击 **"Email Templates"**
2. 点击 **"Create New Template"**
3. 使用以下模板内容：

#### 邮件模板内容

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

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

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

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

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

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

4. 保存模板，记录 **Template ID**（如 `template_xyz789`）

### 第四步：获取 Public Key

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

### 第五步：配置前端代码

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

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

替换为您的实际配置：

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

---

## 📧 接收邮件配置

### 默认接收邮箱

在代码中已设置固定接收邮箱：
```javascript
to_email: 'zhanyuhangkong@163.com'  // 接收邮件的固定邮箱
```

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

### 多邮箱接收

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

---

## 🎯 测试步骤

1. **启动项目**
   ```bash
   npm run dev
   ```

2. **访问页面**
   - 导航到 "联系我们"
   - 或直接访问 `http://localhost:8888/#/contactus`

3. **填写表单**
   - 填写所有必填字段
   - 点击 "提交留言"

4. **验证结果**
   - 看到 "提交成功" 提示
   - 检查邮箱是否收到邮件

---

## 📊 EmailJS 免费额度

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

### 升级方案

如需要更多额度：
- **Basic**: $15/月 - 2000 封邮件
- **Professional**: $30/月 - 10000 封邮件
- **Enterprise**: 定制方案

---

## 🔒 安全建议

### 1. 隐藏 Public Key

虽然 Public Key 是公开的，但建议：
- 不要提交到 Git 仓库
- 使用环境变量存储

### 2. 添加验证码

防止恶意提交，可添加：
- Google reCAPTCHA
- 图形验证码
- 短信验证

### 3. 频率限制

在 EmailJS Dashboard 设置：
- 每小时发送限制
- 每日发送限制

---

## ⚠️ 常见问题

### Q1: 邮件发送失败？
**A**: 检查以下几点：
1. Service ID、Template ID、Public Key 是否正确
2. 邮箱账号是否已验证
3. 浏览器控制台是否有错误信息

### Q2: 收不到邮件？
**A**: 检查：
1. 垃圾邮件文件夹
2. EmailJS Dashboard 的发送日志
3. 邮箱是否已满

### Q3: 表单验证不通过？
**A**: 检查：
1. 手机号是否为 11 位
2. 邮箱格式是否正确
3. 是否同意隐私政策

---

## 📞 技术支持

如遇到问题：
1. 查看 [EmailJS 官方文档](https://www.emailjs.com/docs/)
2. 检查浏览器控制台错误
3. 联系 EmailJS 支持团队

---

## ✅ 配置检查清单

- [ ] 注册 EmailJS 账号
- [ ] 添加 Email Service
- [ ] 创建 Email Template
- [ ] 获取 Service ID
- [ ] 获取 Template ID
- [ ] 获取 Public Key
- [ ] 配置前端代码
- [ ] 测试表单提交
- [ ] 验证邮件接收

完成以上步骤后，联系表单即可正常工作！