< html lang = "cn" >
< head >
< meta charset = "utf-8" >
< meta name = "description" content = "" >
< meta name = "author" content = "陶士涵" >
< title > 聊天界面< / title >
< link rel = "stylesheet" href = "/static/css/common.css?v=0.3.8" >
< 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" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.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 >
< script src = "https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js" > < / script >
< style >
html, body {overflow:hidden;height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;}
.el-row{width:100%}
.chatBg{background: #fff;border: solid 1px #e6e6e6;overflow: hidden;}
.chatLeft{height:100%;margin-left: 4px;}
.sw-bg{background: #fff;border: solid 1px #e6e6e6;boder-top:none;padding:5px 10px;}
.chatBgContext .el-row{margin-bottom: 5px;}
.chatBgContext{position: relative;height: 100%;}
.chatUser{
line-height: 24px;
font-size: 12px;
white-space: nowrap;
color: #999;
}
.chatContent{
text-align: left;
background-color: rgb(166,212,242);
color: #000;
border: 1px solid rgb(152, 199, 230);
padding: 8px 15px;
min-height: 26px;
word-break: break-all;
position: relative;
border-radius: 5px;
display: inline-block;
}
.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;}
.chatBox{max-height: 340px;overflow-y: auto;overflow-x: hidden;}
.chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
.funcBtns{margin: 2px 0px;color: #7f7f7f;border-bottom: 1px solid #e6e6e6;font-size: 12px;padding: 5px 0px;}
< / style >
< / head >
< body >
< div id = "app" >
< template >
< el-row :gutter = "2" >
< el-col :span = "6" >
< div class = "chatBg chatLeft" >
< el-tabs v-model = "leftTabActive" @ tab-click = "handleTabClick" >
< el-tab-pane label = "在线用户" name = "first" >
< el-row v-for = "item in users" :key = "item.uid" class = "" >
< div :title = "item.last_message" style = "cursor:pointer" class = "onlineUsers hasLastMsg" v-bind:class = "{'cur': item.uid==currentGuest }" v-on:click = "talkTo(item.uid,item.username)" >
< el-col :span = "4" >
< el-avatar :size = "40" :src = "item.avator" > < / el-avatar >
< / el-col >
< el-col :span = "16" >
< div > < {item.username}>< / div >
< div class = "lastNewMsg" > < {item.last_message}>< / div >
< / el-col >
< / div >
< / el-row >
< / el-tab-pane >
< el-tab-pane label = "已接访客" name = "second" >
< el-row v-for = "item in visitors" :key = "item.uid" class = "" >
< div style = "cursor:pointer" class = "onlineUsers" v-bind:class = "{'cur': item.visitor_id==currentGuest }" v-on:click = "talkTo(item.visitor_id,item.name)" >
< el-col :span = "4" >
< el-avatar v-bind:class = "{'imgGray': item.status==0 }" :size = "40" :src = "item.avator" > < / el-avatar >
< / el-col >
< el-col :span = "16" v-bind:class = "{'imgGray': item.status==0 }" >
< {item.name}>
< / el-col >
< / div >
< / el-row >
< el-pagination
v-show="visitorCount>visitorPageSize"
background
@current-change="visitorPage"
:current-page="visitorCurrentPage"
layout="prev,pager, next"
:page-size="visitorPageSize"
:total="visitorCount">
< / el-pagination >
< / el-tab-pane >
< / el-tabs >
< / div >
< / el-col >
< el-col :span = "12" >
< div class = "sw-bg chatBgContext" >
< el-alert
:closable="false"
:type="chatTitleType"
show-icon
:title="chatTitle"
>
< / el-alert >
< div class = "funcBtns" v-show = "visitor.visitor_id" >
< el-button v-on:click = "transKefu" size = "small" type = "success" plain icon = "el-icon-position" > 转接< / el-button >
< el-button v-on:click = "closeVisitor(visitor.visitor_id)" size = "small" type = "success" plain icon = "el-icon-close" > 结束< / el-button >
< / div >
< div class = "chatBox" >
< el-row :gutter = "2" v-for = "v in msgList" v-bind:class = "{'chatBoxMe': v.is_kefu==true}" >
< div class = "chatTime" > < {v.time}>< / div >
< el-col :span = "3" > < el-avatar :size = "60" :src = "v.avator" > < / el-avatar > < / el-col >
< el-col :span = "21" >
< div class = "chatUser" > < {v.name}>< / div >
< div class = "chatContent" v-html = "v.content" > < / div >
< / el-col >
< / el-row >
< / div >
< div class = "iconBtnsBox" >
< div class = "faceBox kefuFaceBox" >
< ul class = "faceBoxList" >
< li v-on:click = "faceIconClick(i)" class = "faceIcon" v-for = "(v,i) in face" :title = "v.name" > < img :src = v.path > < / li >
< / ul >
< div class = "clear" > < / div >
< / div >
< div class = "faceBtn" > < / div >
< div class = "imageBtn" id = "uploadImg" v-on:click = "uploadImg('/uploadimg')" > < / div >
< el-button :disabled = "sendDisabled" size = "small" class = "floatRight" type = "primary" v-on:click = "chatToUser" > 发送< / el-button >
< / div >
< div class = "clear" > < / div >
< el-input type = "textarea" class = "chatArea" v-model = "messageContent" v-on:keyup . enter . native = "chatToUser" > < / el-input >
< / div >
< / el-col >
< el-col :span = "6" class = "chatRight" >
< div class = "chatBg" >
< el-tabs v-model = "rightTabActive" @ tab-click = "handleTabClick" >
< el-tab-pane label = "访客信息" name = "visitorInfo" >
< el-menu class = "visitorInfo" v-show = "visitor.visitor_id" >
< el-tooltip content = "点击加入黑名单" placement = "left" >
< el-menu-item v-on:click = "addIpblack(visitor.source_ip)" title = "点击加入黑名单" style = "padding-left:2px;" >
< i class = "el-icon-s-tools" > < / i >
< span slot = "title" > ClientIP： < {visitor.source_ip}>< / span >
< / el-menu-item >
< / el-tooltip >
< el-tooltip content = "点击加入黑名单" placement = "left" >
< el-menu-item v-on:click = "addIpblack(visitor.client_ip)" title = "点击加入黑名单" style = "padding-left:2px;" >
< i class = "el-icon-s-tools" > < / i >
< span slot = "title" > IP： < {visitor.client_ip}>< / span >
< / el-menu-item >
< / el-tooltip >
< el-menu-item v-on:click = "openUrl('https://www.baidu.com/s?wd='+visitor.client_ip)" style = "padding-left:2px;" >
< i class = "el-icon-s-tools" > < / i >
< span slot = "title" > 城市：< {visitor.city}>< / span >
< / el-menu-item >
< el-tooltip :content = "visitor.refer" placement = "left" >
< el-menu-item style = "padding-left:2px;" >
< i class = "el-icon-s-tools" > < / i >
< span slot = "title" > 来源：< {visitor.refer}>< / span >
< / el-menu-item >
< / el-tooltip >
< el-menu-item style = "padding-left:2px;" >
< i class = "el-icon-s-tools" > < / i >
< span slot = "title" > 创建时间：< {visitor.created_at}>< / span >
< / el-menu-item >
< el-menu-item style = "padding-left:2px;" >
< i class = "el-icon-s-tools" > < / i >
< span slot = "title" > 访问时间：< {visitor.updated_at}>< / span >
< / el-menu-item >
< el-tooltip content = "点击关闭连接" placement = "left" >
< el-menu-item v-on:click = "closeVisitor(visitor.visitor_id)" style = "padding-left:2px;" >
< i class = "el-icon-s-tools" > < / i >
< span slot = "title" > 状态：< {visitor.status}>< / span >
< / el-menu-item >
< / el-tooltip >
< / el-menu >
< / el-tab-pane >
< el-tab-pane label = "黑名单" name = "blackList" >
< el-row v-for = "item in ipBlacks" :key = "item.id" class = "" >
< el-tooltip content = "点击删除黑名单" placement = "left" >
< div v-on:click = "delIpblack(item.ip)" style = "cursor:pointer" class = "onlineUsers imgGray" >
< {item.ip}>
< / div >
< / el-tooltip >
< / el-row >
< / el-tab-pane >
< / el-tabs >
< / div >
< div class = "replyBox" >
< div class = "chatRightTitle" > 快捷回复
< a href = "javascript:void(0);" @ click = "replyGroupDialog = true" > +添加分组< / a >
< / div >
< el-input placeholder = "选中文字自动搜索" v-model = "replySearch" class = "replySearch" @ keyup . enter = "searchReply" >
< el-button slot = "append" icon = "el-icon-search" @ click = "searchReply" > < / el-button >
< / el-input >
< div class = "replyContent" >
< el-collapse v-show = "replySearchList" v-model = "replySearchListActive" >
< el-collapse-item v-for = "reply in replySearchList" :key = "reply.group_id" :title = "reply.group_name" :name = "reply.group_id" >
< template slot = "title" >
< i class = "header-icon el-icon-info" > < / i > < {reply.group_name}>
< / template >
< div class = "replyItem" @ click = "messageContent=item.item_content" v-for = "item in reply.items" > < {item.item_content}> < el-button @ click = "deleteReplyContent(item.item_id)" type = "text" > 删除< / el-button > < / div >
< el-button @ click = "replyContentDialog=true;groupName=reply.group_name;groupId=reply.group_id" type = "text" > +添加回复内容< / el-button >
< el-button @ click = "deleteReplyGroup(reply.group_id)" type = "text" > -删除组< / el-button >
< / el-collapse-item >
< / el-collapse >
< el-collapse v-show = "replySearchList.length==0" >
< el-collapse-item v-for = "reply in replys" :key = "reply.group_id" :title = "reply.group_name" :name = "reply.group_id" >
< template slot = "title" >
< i class = "header-icon el-icon-info" > < / i > < {reply.group_name}>
< / template >
< div class = "replyItem" @ click = "messageContent=item.item_content" v-for = "item in reply.items" > < {item.item_content}> < el-button @ click = "deleteReplyContent(item.item_id)" type = "text" > 删除< / el-button > < / div >
< el-button @ click = "replyContentDialog=true;groupName=reply.group_name;groupId=reply.group_id" type = "text" > +添加回复内容< / el-button >
< el-button @ click = "deleteReplyGroup(reply.group_id)" type = "text" > -删除组< / el-button >
< / el-collapse-item >
< / el-collapse >
< / div >
< / div >
< / el-col >
< / el-row >
<!-- 图片放大 -->
< div id = "bigPic" class = "bigPic" >
< img src = "/static/images/3.jpg" / >
< / div >
<!-- //图片放大 -->
< audio id = "chatMessageAudio" >
< source id = "chatMessageAudioSource" src = "/static/images/alert2.ogg" type = "audio/mpeg" / >
< / audio >
< audio id = "chatMessageSendAudio" >
< source id = "chatMessageSendAudioSource" src = "/static/images/sent.ogg" type = "audio/mpeg" / >
< / audio >
<!-- 转接 -->
< el-dialog
title="转移客服"
:visible.sync="transKefuDialog"
width="30%"
top="0"
>
< el-table
:data="otherKefus"
style="width: 100%">
< el-table-column
prop="nickname"
label="客服">
< / el-table-column >
< el-table-column
prop="status"
label="操作">
< template slot-scope = "scope" >
< el-tag v-show = "scope.row.status=='offline'"
disable-transitions>离线< / el-tag >
< el-button v-show = "scope.row.status=='online'" type = "primary" @ click = "transKefuVisitor(scope.row.name,visitor.visitor_id)" > 转移< / el-button >
< / template >
< / el-table-column >
< / el-table >
< span slot = "footer" class = "dialog-footer" >
< el-button @ click = "transKefuDialog = false" > 取 消< / el-button >
< / span >
< / el-dialog >
<!-- //转接 -->
<!-- 回复分组 -->
< el-dialog
title="添加分组"
:visible.sync="replyGroupDialog"
width="30%"
top="0"
>
< el-input v-model = "groupName" > < / el-input >
< span slot = "footer" class = "dialog-footer" >
< el-button @ click = "addReplyGroup" > 保 存< / el-button >
< el-button @ click = "replyGroupDialog = false" > 取 消< / el-button >
< / span >
< / el-dialog >
<!-- //回复分组 -->
<!-- 回复内容 -->
< el-dialog
title="添加回复内容"
:visible.sync="replyContentDialog"
width="30%"
top="0"
>
< el-input type = "textarea" v-model = "replyContent" > < / el-input >
< span slot = "footer" class = "dialog-footer" >
< el-button @ click = "addReplyContent" > 保 存< / el-button >
< el-button @ click = "replyContentDialog = false" > 取 消< / el-button >
< / span >
< / el-dialog >
<!-- //回复内容 -->
< / template >
< / div >
< / body >
< script src = "/static/js/chat-main.js?v=0.4.1" > < / script >
< / html >
