帮我写一个客服页面的模版
时间: 2023-08-28 10:25:38 浏览: 46
好的,以下是一个简单的客服页面的模板,供你参考:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线客服</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f9f9f9;
}
#chat-container {
width: 800px;
margin: 20px auto;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
#chat-header {
height: 50px;
line-height: 50px;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
text-align: center;
font-size: 20px;
}
#chat-messages {
height: 400px;
overflow-y: scroll;
padding: 10px;
}
.message {
margin-bottom: 10px;
}
.message .username {
font-weight: bold;
color: #333;
}
.message .time {
font-size: 12px;
color: #999;
margin-left: 10px;
}
.message .content {
margin-top: 5px;
font-size: 14px;
color: #666;
}
#chat-input {
height: 50px;
padding: 10px;
border-top: 1px solid #ddd;
}
#chat-input input[type="text"] {
width: 100%;
height: 30px;
padding: 5px;
border: none;
border-radius: 3px;
outline: none;
}
#chat-input input[type="button"] {
height: 30px;
padding: 5px 10px;
margin-left: 10px;
border: none;
border-radius: 3px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
#chat-input input[type="button"]:hover {
background-color: #3E8E41;
}
</style>
</head>
<body>
<div id="chat-container">
<div id="chat-header">在线客服</div>
<div id="chat-messages"></div>
<div id="chat-input">
<input type="text" id="message-input" placeholder="请输入消息">
<input type="button" id="send-button" value="发送">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script>
var App = new Vue({
el: '#chat-container',
data: {
messages: [],
ws: null
},
methods: {
connect: function() {
this.ws = new WebSocket('ws://localhost:8080');
this.ws.onmessage = function(event) {
var message = JSON.parse(event.data);
App.messages.push(message);
};
},
send: function() {
var message = {
username: '客户',
content: document.getElementById('message-input').value,
time: new Date().toLocaleTimeString()
};
this.ws.send(JSON.stringify(message));
document.getElementById('message-input').value = '';
}
},
created: function() {
this.connect();
}
});
document.getElementById('send-button').addEventListener('click', function() {
App.send();
});
document.addEventListener('keyup', function(event) {
if(event.keyCode === 13) {
App.send();
}
});
</script>
</body>
</html>
```
说明:
- 页面包含一个聊天窗口和一个输入框。
- 使用 WebSocket 与服务端通讯,实现实时通讯功能。
- 使用 Vue.js 作为页面框架,实现数据绑定和事件处理。
- 发送消息时,将消息转换为 JSON 格式,发送给服务端。
- 接收到消息时,将消息解析为 JSON 格式,添加到消息列表中,使用 Vue.js 实现消息列表的动态更新。