增加客服聊天的手机页面

pull/30/head
taoshihan1991 4 years ago
parent 1fcefcad3d
commit beb562b131

@ -224,3 +224,86 @@
.chatLeft .el-tabs__nav,.chatRight .el-tabs__nav {
margin-left: 20px;
}
.onlineUsers {
padding: 5px;
height: 40px;
line-height: 40px;
font-size: 14px;
border-bottom: solid 1px #e6e6e6;
}
.onlineUsers a{
color: #333;
}
.onlineUsers:hover,.onlineUsers.cur{background-color: #f0f9eb;color: #67C23A;}
.imgGray {-webkit-filter: grayscale(100%);-ms-filter: grayscale(100%);filter: grayscale(100%);filter: gray;color:#888;}
/*客服页*/
.chatKfPageApp{
max-width: 800px;
margin:0 auto;
}
.chatCenter{background: #fff;max-width: 800px;margin: 0 auto;}
.chatContext{
padding:0 10px;
width: 100%;
text-align: left;
position: relative;
margin-bottom: 86px;
}
.chatBox{
/*max-height: 600px;*/
/*overflow-y: auto;*/
/*overflow-x: hidden;*/
/*margin-bottom: 80px;*/
}
.chatBox .el-col{margin:10px 0;}
.chatUser{
line-height: 24px;
font-size: 12px;
white-space: nowrap;
color: #999;
text-align: left;
}
.chatContent{
background-color: rgb(166,212,242);
color: #000;
border: 1px solid rgb(152, 199, 230);
padding: 8px 15px;
word-break: break-all;
position: relative;
border-radius: 5px;
display: inline-block;
margin-left: 6px;
}
.chatContent:after {
content: '';
position: absolute;
left: -10px;
top: 13px;
width: 0;
height: 0;
border-style: dashed;
border-color: transparent;
overflow: hidden;
border-width: 10px;
border-top-style: solid;
border-top-color: rgb(166,212,242);
}
.chatBoxMe .chatContent{float: right;background-color: rgb(152,225,101);border: 1px solid rgb(145, 215, 96);}
.chatBoxMe .chatContent:after{border-top-color: rgb(152,225,101);}
.chatBoxMe .el-col-3{float: right;text-align: right;}
.chatBoxMe .chatUser{text-align: right}
.chatBoxMe .chatContent:after{left:auto;right: -10px;}
.chatArea{float: left;width: 85%;margin: 4px 0 0 4px;}
.btnArea{width: 10%;float: right;}
@media screen and (max-width: 500px) {
body{background: #fff}
.chatArea {width: 70%;}
.btnArea{width: 20%;}
}
.chatTitle{height: 30px;line-height: 30px;color: #1989fa}
.chatBoxSend{background: #f5f5f5;position: fixed;bottom: 0;width: 100%;height: 86px;max-width: 800px;}
.chatBoxSendBtn{float: right;margin: 12px 4px 0 0;}
.chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
.chatTimeHide{display: none;}
.clear{clear:both;}

@ -8,10 +8,9 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
<script src="/static/js/functions.js?v=0.1.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/common.css?v=0.1.1" />
<style>
html,
@ -19,88 +18,30 @@
height: 100%;
background: #fff;
}
.chatCenter{background: #fff;max-width: 800px;margin: 0 auto;}
.chatContext{
padding:0 10px;
width: 100%;
text-align: left;
position: relative;
margin-bottom: 86px;
}
.chatBox{
/*max-height: 600px;*/
/*overflow-y: auto;*/
/*overflow-x: hidden;*/
/*margin-bottom: 80px;*/
}
.chatBox .el-col{margin:10px 0;}
.chatUser{
line-height: 24px;
font-size: 12px;
white-space: nowrap;
color: #999;
text-align: left;
}
.chatContent{
background-color: rgb(166,212,242);
color: #000;
border: 1px solid rgb(152, 199, 230);
padding: 8px 15px;
min-height: 35px;
word-break: break-all;
position: relative;
border-radius: 5px;
display: inline-block;
margin-left: 6px;
}
.chatContent:after {
content: '';
position: absolute;
left: -10px;
top: 13px;
width: 0;
height: 0;
border-style: dashed;
border-color: transparent;
overflow: hidden;
border-width: 10px;
border-top-style: solid;
border-top-color: rgb(166,212,242);
}
.chatBoxMe .chatContent{float: right;background-color: rgb(152,225,101);border: 1px solid rgb(145, 215, 96);}
.chatBoxMe .chatContent:after{border-top-color: rgb(152,225,101);}
.chatBoxMe .el-col-3{float: right;text-align: right;}
.chatBoxMe .chatUser{text-align: right}
.chatBoxMe .chatContent:after{left:auto;right: -10px;}
.chatArea{float: left;width: 85%;margin: 4px 0 0 4px;}
.btnArea{width: 10%;float: right;}
@media screen and (max-width: 500px) {
body{background: #fff}
.chatArea {width: 70%;}
.btnArea{width: 20%;}
}
.chatTitle{height: 30px;line-height: 30px;color: #1989fa}
.chatBoxSend{background: #f5f5f5;position: fixed;bottom: 0;width: 100%;height: 86px;max-width: 800px;}
.chatBoxSendBtn{float: right;margin: 12px 4px 0 0;}
.chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
.chatTimeHide{display: none;}
.clear{clear:both;}
</style>
</head>
<body>
<div id="app" class="chatCenter">
<template>
<!--客服代码-->
<div id="app" class="chatKfPageApp">
<router-view></router-view>
</div>
<template id="chatKfIndex">
<el-row>
<div style="cursor:pointer" v-for="item in visitors" :key="item.uid" class="onlineUsers">
<router-link :to="'/chatKfBox/'+item.uid">
<el-col :span="6">
<el-avatar :size="40" :src="item.avator"></el-avatar>
</el-col>
<el-col :span="18">
<{item.username}>
</el-col>
</router-link>
</div>
</el-row>
</template>
<template id="chatBox">
<div>
<div class="chatContext">
<div class="chatBox">
<el-alert
style="margin-bottom: 10px;"
:title="chatTitle"
:closable="false"
type="success">
</el-alert>
<el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
<div class="chatTime" v-bind:class="{'chatTimeHide': v.show_time==false}"><{v.time}></div>
<el-col :span="3"><el-avatar :src="v.avator"></el-avatar></el-col>
@ -130,38 +71,12 @@
</div>
<div class="clear"></div>
</div>
<!--//客服代码-->
</template>
</div>
</div>
</template>
</body>
<script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
<script>
new Vue({
el: '#app',
delimiters:["<{","}>"],
data: {
window:window,
server:getWsBaseUrl()+"/chat_server",
socket:null,
msgList:[],
messageContent:"",
chatTitle:"正在连接...",
visitor:{},
face:[],
kfConfig:{
id : "",
name : "",
avator : "",
to_id : "",
},
},
methods: {
},
created: function () {
}
})
var TOKEN='{{.Token}}';
</script>
<script src="/static/js/chat-kf-page.js?v=0.1.1"></script>
</html>

@ -58,9 +58,6 @@
.chatBoxMe .chatContent:after{left:auto;right: -10px;}
.chatArea{margin: 10px 0;}
.chatBox{max-height: 350px;overflow-y: auto;overflow-x: hidden;}
.onlineUsers{padding: 5px;height: 40px;line-height: 40px;font-size: 14px;border-bottom: solid 1px #e6e6e6;}
.onlineUsers:hover,.onlineUsers.cur{background-color: #f0f9eb;color: #67C23A;}
.imgGray {-webkit-filter: grayscale(100%);-ms-filter: grayscale(100%);filter: grayscale(100%);filter: gray;color:#888;}
.chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
</style>
</head>

@ -0,0 +1,198 @@
//首页组件
var chatKfIndex = {
delimiters:["<{","}>"],
data: function(){
return {
visitors: [],
}
},
methods: {
init(){
this.getKefuInfo();
},
kfOnline() {
let messsage = {}
messsage.type = "kfOnline";
messsage.data = this.$parent.kefuInfo;
this.$parent.socket.send(JSON.stringify(messsage));
},
receiveMessage(e) {
const retData = JSON.parse(e.data);
switch (retData.type) {
case "allUsers":
this.visitors = retData.data;
break;
case "userOnline":
this.visitors.push(retData.data);
break;
}
},
//初始化websocket
initConn() {
if(this.$parent.socket==null){
this.$parent.socket = new ReconnectingWebSocket(this.$parent.server);
}
this.$parent.socket.onopen=this.kfOnline;
this.$parent.socket.onmessage = this.receiveMessage;
},
//获取客服信息
getKefuInfo(){
let _this=this;
$.ajax({
type:"get",
url:"/kefuinfo",
headers:{
"token":TOKEN
},
success: function(data) {
if(data.code==200 && data.result!=null){
_this.$parent.kefuInfo.id=data.result.id;
_this.$parent.kefuInfo.name=data.result.name;
_this.$parent.kefuInfo.avator=data.result.avator;
_this.initConn();
}
if(data.code!=200){
_this.$message({
message: data.msg,
type: 'error'
});
}
}
});
},
},
created: function () {
this.init();
},
template:$("#chatKfIndex").html()
};
//详情组件
var chatKfBox = {
delimiters:["<{","}>"],
data: function(){
return {
visitorId:null,
msgList: [],
messageContent: "",
face: [],
}
},
methods: {
receiveMessage(e) {
const retData = JSON.parse(e.data);
switch (retData.type) {
case "message":
alert(e.data);
break;
}
},
init(){
//获取当前客户消息
this.visitorId=this.$route.params.visitorId;
this.getMesssagesByVisitorId(this.$route.params.visitorId);
this.$parent.socket.onmessage = this.receiveMessage;
},
//获取信息列表
getMesssagesByVisitorId(visitorId) {
let _this = this;
$.ajax({
type: "get",
url: "/messages?visitorId=" + visitorId,
headers: {
"token": TOKEN
},
success: function (data) {
if (data.code == 200 && data.result != null) {
let msgList = data.result;
_this.msgList = [];
for (let i = 0; i < msgList.length; i++) {
let visitorMes = msgList[i];
let content = {}
if (visitorMes["mes_type"] == "kefu") {
content.is_kefu = true;
content.avator = visitorMes["kefu_avator"];
content.name = visitorMes["kefu_name"];
} else {
content.is_kefu = false;
content.avator = visitorMes["visitor_avator"];
content.name = visitorMes["visitor_name"];
}
content.content = replaceContent(visitorMes["content"]);
content.time = visitorMes["time"];
_this.msgList.push(content);
_this.scrollBottom();
}
}
if (data.code != 200) {
_this.$message({
message: data.msg,
type: 'error'
});
}
}
});
},
//发送给客户
chatToUser() {
this.messageContent=this.messageContent.trim("\r\n");
if(this.messageContent==""||this.messageContent=="\r\n"||this.currentGuest==""){
return;
}
let _this=this;
let mes = {};
mes.type = "kefu";
mes.content = this.messageContent;
mes.from_id = _this.$parent.kefuInfo.id;
mes.to_id = this.visitorId;
mes.content = this.messageContent;
$.post("/message",mes,function(){
_this.messageContent = "";
});
let content = {}
content.avator = _this.$parent.kefuInfo.avator;
content.name = _this.$parent.kefuInfo.name;
content.content = replaceContent(this.messageContent);
content.is_kefu = true;
content.time = '';
this.msgList.push(content);
this.scrollBottom();
},
//滚到底部
scrollBottom(){
this.$nextTick(() => {
debugger;
$('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
});
},
},
created: function () {
this.init();
},
template:$("#chatBox").html()
};
var routes = [
{ path: '/',component:chatKfIndex}, // 这个表示会默认渲染
{path:'/chatKfBox/:visitorId',component:chatKfBox},
];
var router = new VueRouter({
routes: routes
})
new Vue({
router,
el: '#app',
data: function(){
return{
server:getWsBaseUrl()+"/chat_server",
socket:null,
kefuInfo:{},
}
},
methods:{
},
created: function () {
},
})
Loading…
Cancel
Save