燃气公司业务员前端示例

以下是一个燃气公司业务员前端示例的代码片段：

<!DOCTYPE html>
<html>
<head>
<title>燃气公司业务员前端示例</title>
<style>
.container {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.input {
  width: 100%;
  padding: 10px;
}

.button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #45a049;
}

.result {
  margin-top: 20px;
  font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
  <h2>燃气公司业务员前端示例</h2>
  
  <form id="salesForm">
    <div class="form-group">
      <label class="label" for="name">姓名:</label>
      <input class="input" type="text" id="name" name="name" required>
    </div>
    
    <div class="form-group">
      <label class="label" for="address">地址:</label>
      <input class="input" type="text" id="address" name="address" required>
    </div>
    
    <div class="form-group">
      <label class="label" for="phone">电话:</label>
      <input class="input" type="tel" id="phone" name="phone" required>
    </div>
    
    <div class="form-group">
      <label class="label" for="email">电子邮箱:</label>
      <input class="input" type="email" id="email" name="email" required>
    </div>
    
    <button class="button" type="submit">提交</button>
  </form>
  
  <div id="result" class="result"></div>
</div>

<script>
document.getElementById("salesForm").addEventListener("submit", function(event) {
  event.preventDefault();
  
  // 获取表单数据
  var name = document.getElementById("name").value;
  var address = document.getElementById("address").value;
  var phone = document.getElementById("phone").value;
  var email = document.getElementById("email").value;
  
  // 构造请求数据
  var requestData = {
    name: name,
    address: address,
    phone: phone,
    email: email
  };
  
  // 发送请求到后端
  // TODO: 使用适当的方式发送请求，例如 AJAX 或 Fetch API
  
  // 处理后端返回的结果
  // TODO: 根据后端返回的结果显示相应的信息
  
  document.getElementById("result").innerText = "提交成功！";
});
</script>
</body>
</html>

这个示例展示了一个简单的前端表单，其中包含姓名、地址、电话和电子邮箱等字段。当用户填写完表单并点击提交按钮时，通过 JavaScript 获取表单数据，并将数据发送到后端进行处理。在示例中，通过构造一个包含表单数据的 requestData 对象来模拟发送请求，并将结果显示在页面上。在实际应用中，你需要使用适当的方式发送请求到后端，并根据后端返回的结果进行相应的处理