邮件模板管理

默认设置

模板列表

欢迎邮件 启用
welcome_email
新用户注册时发送
服务到期提醒 启用
service_expiry_reminder
服务到期前发送提醒
营销推广邮件 启用
marketing_promotion
用于营销活动推广
HTML 内容
|
实时预览
`; // 模板数据存储 const templates = { 1: { id: 1, name: '欢迎邮件', code: 'welcome_email', type: 'notification', status: true, subject: '欢迎加入电信人才网 - 开启您的招聘之旅', sender: '电信人才网', html: welcomeTemplate, description: '新用户注册时发送' }, 2: { id: 2, name: '服务到期提醒', code: 'service_expiry_reminder', type: 'notification', status: true, subject: '您的服务即将到期 - 请及时续费', sender: '电信人才网', html: '...', description: '服务到期前发送提醒' }, 3: { id: 3, name: '营销推广邮件', code: 'marketing_promotion', type: 'marketing', status: true, subject: '专属优惠 - 限时特惠活动', sender: '电信人才网', html: '...', description: '用于营销活动推广' } }; let currentTemplateId = 1; // 页面加载时初始化 document.addEventListener('DOMContentLoaded', function() { // 加载欢迎模板 document.getElementById('html-editor').value = welcomeTemplate; updatePreview(); // 监听编辑器变化，实时更新预览 document.getElementById('html-editor').addEventListener('input', function() { updatePreview(); }); // 监听默认设置变化，更新预览 ['default-site-name', 'default-service-email', 'default-service-phone', 'default-site-domain'].forEach(id => { document.getElementById(id).addEventListener('input', updatePreview); }); }); // 获取默认变量值 function getDefaultVariables() { return { site_name: document.getElementById('default-site-name').value || '电信人才网', service_email: document.getElementById('default-service-email').value || 'service@telecomhr.com', service_phone: document.getElementById('default-service-phone').value || '400-888-6688', site_domain: document.getElementById('default-site-domain').value || 'telecomhr.com', current_year: new Date().getFullYear().toString() }; } // 更新预览 function updatePreview() { const html = document.getElementById('html-editor').value; const previewFrame = document.getElementById('preview-frame'); const defaults = getDefaultVariables(); // 替换变量为默认值或示例值 let previewHtml = html .replace(/\{\{site_name\}\}/g, defaults.site_name) .replace(/\{\{service_email\}\}/g, defaults.service_email) .replace(/\{\{service_phone\}\}/g, defaults.service_phone) .replace(/\{\{site_domain\}\}/g, defaults.site_domain) .replace(/\{\{current_year\}\}/g, defaults.current_year) .replace(/\{\{company_name\}\}/g, '示例科技有限公司') .replace(/\{\{contact_name\}\}/g, '张经理') .replace(/\{\{login_url\}\}/g, 'https://www.' + defaults.site_domain + '/login'); previewFrame.innerHTML = previewHtml; } // 切换默认设置显示 function toggleDefaultSettings() { const settings = document.getElementById('default-settings'); const icon = document.getElementById('settings-toggle-icon'); if (settings.style.display === 'none') { settings.style.display = 'block'; icon.classList.remove('fa-chevron-right'); icon.classList.add('fa-chevron-down'); } else { settings.style.display = 'none'; icon.classList.remove('fa-chevron-down'); icon.classList.add('fa-chevron-right'); } } // 选择模板 function selectTemplate(id) { currentTemplateId = id; const template = templates[id]; // 更新UI选中状态 document.querySelectorAll('.template-item').forEach(item => { item.classList.remove('active', 'bg-blue-50'); }); document.querySelector(`.template-item[data-id="${id}"]`).classList.add('active', 'bg-blue-50'); // 加载模板数据到编辑器 document.getElementById('template-name').value = template.name; document.getElementById('template-code').value = template.code; document.getElementById('template-type').value = template.type; document.getElementById('template-status').checked = template.status; document.getElementById('template-subject').value = template.subject; document.getElementById('template-sender').value = template.sender; document.getElementById('html-editor').value = template.html; updatePreview(); } // 创建新模板 function createNewTemplate() { const newId = Object.keys(templates).length + 1; currentTemplateId = newId; templates[newId] = { id: newId, name: '新模板', code: 'new_template_' + newId, type: 'notification', status: true, subject: '邮件主题', sender: '电信人才网', html: '\n\n\n \n\n\n

尊敬的 {{contact_name}}，您好！

\n

这是邮件内容...

\n \n', description: '新创建的模板' }; // 添加到列表 const listHtml = `
新模板 启用
new_template_${newId}
新创建的模板
`; document.getElementById('template-list').insertAdjacentHTML('afterbegin', listHtml); selectTemplate(newId); } // 插入变量 function insertVariable(varName) { const editor = document.getElementById('html-editor'); const pos = editor.selectionStart; const text = editor.value; const insertText = `{{${varName}}}`; editor.value = text.slice(0, pos) + insertText + text.slice(pos); editor.focus(); updatePreview(); } // 显示变量帮助 function showVariableHelp() { alert('可用变量：\n\n【默认变量 - 在左侧"默认设置"中配置】\n{{site_name}} - 网站名称\n{{service_email}} - 客服邮箱\n{{service_phone}} - 客服电话\n{{site_domain}} - 网站域名\n{{current_year}} - 当前年份\n\n【动态变量 - 发送时替换】\n{{company_name}} - 企业名称\n{{contact_name}} - 联系人姓名\n{{login_url}} - 登录链接\n{{expire_date}} - 到期日期\n{{service_type}} - 服务类型'); } // 筛选模板 function filterTemplates() { const type = document.getElementById('filter-type').value; document.querySelectorAll('.template-item').forEach(item => { const id = item.dataset.id; if (!type || templates[id].type === type) { item.style.display = ''; } else { item.style.display = 'none'; } }); } // 保存模板 function saveTemplate() { const template = templates[currentTemplateId]; template.name = document.getElementById('template-name').value; template.code = document.getElementById('template-code').value; template.type = document.getElementById('template-type').value; template.status = document.getElementById('template-status').checked; template.subject = document.getElementById('template-subject').value; template.sender = document.getElementById('template-sender').value; template.html = document.getElementById('html-editor').value; // TODO: 调用API保存到数据库 alert('模板保存成功！'); console.log('保存模板:', template); } // 预览模板 function previewTemplate() { const html = document.getElementById('html-editor').value; const previewHtml = html .replace(/\{\{company_name\}\}/g, '示例科技有限公司') .replace(/\{\{contact_name\}\}/g, '张经理') .replace(/\{\{login_url\}\}/g, 'https://www.telecomhr.com/login'); const win = window.open('', '_blank'); win.document.write(previewHtml); win.document.close(); } // 发送测试邮件 function sendTestEmail() { const email = prompt('请输入接收测试邮件的邮箱地址：', 'test@example.com'); if (email) { // TODO: 调用API发送测试邮件 alert('测试邮件已发送至: ' + email); } }