燃气公司业务员前端代码

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

// HTML部分
<!DOCTYPE html>
<html>
<head>
    <title>燃气公司业务员</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>燃气公司业务员</h1>

    <div id="customerList">
        <h2>客户列表</h2>
        <ul id="customers"></ul>
    </div>

    <div id="customerDetails">
        <h2>客户详情</h2>
        <div id="details"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

// CSS部分 (styles.css)
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

h1, h2 {
    margin-bottom: 10px;
}

#customerList {
    float: left;
    width: 40%;
}

#customerDetails {
    float: right;
    width: 60%;
}

#customers li {
    cursor: pointer;
    margin-bottom: 5px;
}

#customers li:hover {
    background-color: #eee;
}

// JavaScript部分 (script.js)
window.onload = function() {
    var customers = [
        { id: 1, name: "张三", address: "北京市海淀区" },
        { id: 2, name: "李四", address: "上海市浦东新区" },
        { id: 3, name: "王五", address: "广州市天河区" },
        { id: 4, name: "赵六", address: "深圳市福田区" }
    ];

    var customersList = document.getElementById("customers");
    var customerDetails = document.getElementById("details");

    // 渲染客户列表
    customers.forEach(function(customer) {
        var li = document.createElement("li");
        li.textContent = customer.name;
        li.addEventListener("click", function() {
            showCustomerDetails(customer);
        });
        customersList.appendChild(li);
    });

    // 展示客户详情
    function showCustomerDetails(customer) {
        customerDetails.innerHTML = `
            <p><strong>姓名:</strong> ${customer.name}</p>
            <p><strong>地址:</strong> ${customer.address}</p>
        `;
    }
};

这个代码示例中，我们使用了HTML、CSS和JavaScript来实现燃气公司业务员的前端界面。其中，HTML部分包含了客户列表和客户详情的容器，CSS部分定义了一些样式，JavaScript部分通过使用window.onload事件来在页面加载完成后执行相应的代码。

在JavaScript部分，我们定义了一个包含客户信息的customers数组。然后，通过使用forEach方法将每个客户的姓名渲染到客户列表中，并为每个列表项添加了点击事件，当用户点击某个客户时，会调用showCustomerDetails函数来展示客户的详细信息。

showCustomerDetails函数接收一个客户对象作为参数，并将客户的姓名和地址渲染到客户详情容器中