phaten-audio/zh/docs/common/customer_form.md

<style>
.message-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.message-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 400px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.message-content h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 18px;
}

.message-content p {
    margin: 15px 0;
    color: #666;
    line-height: 1.5;
    white-space: pre-line;
}

.message-content .success {
    color: #27ae60;
}

.message-content .error {
    color: #e74c3c;
}

.message-btn {
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.message-btn:hover {
    background-color: #2980b9;
}

.close-message {
    float: right;
    cursor: pointer;
    font-size: 24px;
    color: #666;
    transition: color 0.3s ease;
}

.close-message:hover {
    color: #333;
}
</style>

<!-- 消息弹出框 -->
<div id="messageModal" class="message-modal">
    <div class="message-content">
        <span class="close-message">&times;</span>
        <h3 id="messageTitle">提示</h3>
        <p id="messageText"></p>
        <button id="messageBtn" class="message-btn">确定</button>
    </div>
</div>

<div class="custForm">
<form id="customerForm">
<div>
<h4>公司名:</h4>
<input type="input" id="company" name='company' placeholder="公司名" />
</div>
<div>
<h4>邮箱地址:</h4>
<input type="email" id="email" name='email' placeholder="邮箱地址" />
</div>
<div>
<h4>主旨:</h4>
<select id="topic" name='topic'>
<option value="">请选择主旨</option>
<option value="获取产品固件">获取产品固件</option>
<option value="咨询方案">咨询方案</option>
<option value="获得报价">获得报价</option>
</select>
</div>
<div>
<h4>正文:</h4>
<textarea id="content" name="content" rows="8" placeholder="请详细描述问题">
</textarea>
</div>
<div style="text-align: right;">
<input class="button" type="submit" value="发送" id="submitBtn" />
</div>
</form>
</div>

<script>
// 定义API的基础URL
const baseUrl = 'https://api.phaten-audio.com/api';

// 获取表单元素
const customerForm = document.getElementById("customerForm");
const submitBtn = document.getElementById("submitBtn");
const companyInput = document.getElementById("company");
const emailInput = document.getElementById("email");
const topicSelect = document.getElementById("topic");
const contentTextarea = document.getElementById("content");

// 获取消息弹出框元素
const messageModal = document.getElementById("messageModal");
const messageTitle = document.getElementById("messageTitle");
const messageText = document.getElementById("messageText");
const messageBtn = document.getElementById("messageBtn");
const closeMessage = document.getElementsByClassName("close-message")[0];

// 显示自定义消息弹出框
function showMessage(title, text, type = 'info') {
    messageTitle.textContent = title;
    messageText.textContent = text;
    
    // 根据类型设置样式
    messageText.className = type === 'success' ? 'success' : (type === 'error' ? 'error' : '');
    
    messageModal.style.display = "block";
}

// 关闭消息弹出框
function closeMessageModal() {
    messageModal.style.display = "none";
}

// 绑定关闭事件
closeMessage.onclick = closeMessageModal;
messageBtn.onclick = closeMessageModal;

// 点击模态框外部关闭
window.onclick = function(event) {
    if (event.target == messageModal) {
        closeMessageModal();
    }
}

// 验证邮箱格式
function validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

// 验证表单字段
function validateForm() {
    let isValid = true;
    let errorMessage = "";

    // 验证公司名
    if (!companyInput.value.trim()) {
        errorMessage += "请输入公司名\n";
        isValid = false;
    }

    // 验证邮箱
    if (!emailInput.value.trim()) {
        errorMessage += "请输入邮箱地址\n";
        isValid = false;
    } else if (!validateEmail(emailInput.value.trim())) {
        errorMessage += "请输入有效的邮箱地址\n";
        isValid = false;
    }

    // 验证主旨
    if (!topicSelect.value) {
        errorMessage += "请选择主旨\n";
        isValid = false;
    }

    // 验证正文
    if (!contentTextarea.value.trim()) {
        errorMessage += "请填写正文内容\n";
        isValid = false;
    }

    if (!isValid) {
        showMessage('输入错误', errorMessage, 'error');
    }

    return isValid;
}

// 处理表单提交
customerForm.onsubmit = function(event) {
    // 阻止默认的表单提交行为
    event.preventDefault();
    
    // 验证表单
    if (!validateForm()) {
        console.log('表单验证失败');
        return false;
    }

    // 禁用提交按钮
    submitBtn.disabled = true;
    submitBtn.value = "提交中...";

    // 准备提交数据
    const formData = {
        company: companyInput.value.trim(),
        email: emailInput.value.trim(),
        topic: topicSelect.value,
        content: contentTextarea.value.trim()
    };

    // 发送AJAX请求
    fetch(`${baseUrl}/fty/addNewConsult`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json()) // 先解析JSON
    .then(data => {
        if (data.code && data.code === 2000) {
            showMessage('提交成功', '提交成功！我们会尽快与您联系。', 'success');
            customerForm.reset(); // 清空表单
            topicSelect.value = ""; // 重置下拉框
        } else {
            showMessage('提交失败', data.msg || '提交失败，请稍后重试！', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showMessage('网络错误', '提交请求失败，请稍后重试！', 'error');
    })
    .finally(() => {
        // 恢复提交按钮
        submitBtn.disabled = false;
        submitBtn.value = "发送";
    });
    
    return false;
}
</script>