You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
go-fly/static/html/chat_main.html

285 lines
18 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<html lang="cn">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="陶士涵">
<title>GO语言开源客服系统-GOFLY</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;overflow:auto;}
.chatBgContext .el-row{margin-bottom: 5px;}
.chatBgContext{position: relative;height: 100%;width: 100%;}
.chatUser{
line-height: 24px;
font-size: 12px;
white-space: nowrap;
color: #999;
}
.chatBoxMe .el-col-3{float: right;text-align: right;}
.chatBoxMe .chatUser{text-align: right}
.chatBox{width: 100%;height:calc(100% - 175px);;overflow-y: auto;overflow-x: hidden;}
.chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
</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-badge value="new" :hidden="item.hidden_new_message" class="item">
<el-avatar shape="square" :size="40" :src="item.avator"></el-avatar>
</el-badge>
</el-col>
<el-col :span="16">
<div style="height:20px;overflow: hidden"><{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 shape="square" v-bind:class="{'imgGray': item.status==0 }" :size="40" :src="item.avator"></el-avatar>
</el-col>
<el-col style="height:40px;overflow: hidden" :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="kefuMainBg chatBgContext">
<el-alert
:closable="false"
:type="chatTitleType"
show-icon
:title="chatTitle+chatInputing"
>
</el-alert>
<div class="kefuFuncBtns" v-if="visitor.visitor_id">
<el-button v-on:click="getMesssagesByVisitorId(visitor.visitor_id,true)" size="small" type="success" plain icon="el-icon-user">加载全部</el-button>
<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 shape="square" :size="48" :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="kefuFuncBox">
<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>
<div class="folderBtn kefuFolderBtn" id="uploadFile" v-on:click="uploadFile('/uploadfile')"></div>
<el-button class="kefuSendBtn" :disabled="sendDisabled" size="small" 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" placeholder="请输入内容"></el-input>
</div>
</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;color: #666;">
<i class="el-icon-user"></i>
<span slot="title">IP地址<{visitor.source_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;color: #666;">
<i class="el-icon-map-location"></i>
<span slot="title">城市:<{visitor.city}></span>
</el-menu-item>
<el-tooltip :content="visitor.refer" placement="left">
<el-menu-item style="padding-left:2px;color: #666;">
<i class="el-icon-guide"></i>
<span slot="title" >来源:<{visitor.refer}></span>
</el-menu-item>
</el-tooltip>
<el-menu-item style="padding-left:2px;color: #666;">
<i class="el-icon-time"></i>
<span slot="title">首次访问:<{visitor.created_at}></span>
</el-menu-item>
<el-menu-item style="padding-left:2px;color: #666;">
<i class="el-icon-time"></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;color: #666;">
<i class="el-icon-circle-close"></i>
<span slot="title">状态:<{visitor.status}></span>
</el-menu-item>
</el-tooltip>
<el-tooltip v-for="v in visitorExtra" :content="v.val" placement="left">
<el-menu-item style="padding-left:2px;color: #666;">
<i class="el-icon-paperclip"></i>
<span slot="title"><{v.key}><{v.val}></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>&nbsp;<{reply.group_name}>
</template>
<div class="replyItem" @click="messageContent=item.item_content" v-for="item in reply.items" ><{item.item_content}> &nbsp;&nbsp;<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>&nbsp;<{reply.group_name}>
</template>
<div class="replyItem" @click="messageContent=item.item_content" v-for="item in reply.items" >
<div class="replyItemTitle">关键词: <{item.item_name}></div>
<div class="replyItemContent">回复内容: <{item.item_content}></div>
<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 style="margin-bottom: 10px;" placeholder="关键词" v-model="replyTitle"></el-input>
<el-input placeholder="内容" 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=1"></script>
</html>