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/templates/chat_main.html

325 lines
20 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="https://cdn.staticfile.org/element-ui/2.15.1/theme-chalk/index.min.css">
<script src="https://cdn.staticfile.org/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.1/index.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="/static/css/common.css?v=dgftr65ujhfg">
<script src="/assets/js/functions.js"></script>
<script src="/assets/js/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% - 170px);;overflow-y: auto;overflow-x: hidden;}
.chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
</style>
</head>
<body>
<div id="app" class="chatMainPage">
<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 :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 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" style="display: none">
<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>
<div class="chatRow">
<el-avatar v-if="v.is_kefu==false" class="chatRowAvator" :size="48" :src="v.avator"></el-avatar>
<div class="chatMsgContent">
<div class="chatUser"><{v.name}></div>
<div class="chatContent" v-html="v.content"></div>
</div>
<el-avatar v-if="v.is_kefu==true" class="chatRowAvator" :size="48" :src="v.avator"></el-avatar>
</div>
</el-row>
</div>
<div class="kefuFuncBox">
<div class="iconBtnsBox">
<div class="faceBox kefuFaceBox" v-show="showFaceIcon">
<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>
<el-tooltip content="发送表情" placement="top">
<div class="iconBtn faceBtn el-icon-s-shop" style="font-size: 24px;" @click.stop="showFaceIcon==true?showFaceIcon=false:showFaceIcon=true"></div>
</el-tooltip>
<el-tooltip content="上传图片" placement="top">
<div class="iconBtn el-icon-picture" id="uploadImg" v-on:click="uploadImg('/uploadimg')" style="font-size: 24px;"></div>
</el-tooltip>
<el-tooltip content="上传附件" placement="top">
<div class="iconBtn el-icon-upload" id="uploadFile" v-on:click="uploadFile('/uploadfile')" style="font-size: 26px;"></div>
</el-tooltip>
<el-tooltip content="消息记录" placement="top">
<div class="iconBtn el-icon-chat-line-round" v-on:click="getMesssagesByVisitorId(visitor.visitor_id,true)" style="font-size: 24px;"></div>
</el-tooltip>
<el-button class="kefuSendBtn" :disabled="sendDisabled" size="mini" type="primary" v-on:click="chatToUser">发送</el-button>
</div>
<div class="clear"></div>
<el-input type="textarea" :rows="4" 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-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="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-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="el-icon-folder"></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="el-icon-s-order"></i>&nbsp;<{reply.group_name}>
</template>
<div class="replyItem" @click="messageContent=item.item_content" v-for="item in reply.items" >
<el-popover
placement="left"
width="300"
trigger="hover">
<div v-html="replaceContent(item.item_content)">
</div>
<div class="replyItemTitle" slot="reference"><i class="header-icon el-icon-document"></i> <{item.item_name}></div>
</el-popover>
<el-button @click="editReplyContent('no',item.item_id,item.item_name,item.item_content)" type="text">编辑</el-button>
<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-popover
placement="top"
width="100"
v-model="visible">
<p>确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible = false;deleteReplyGroup(reply.group_id)">确定</el-button>
</div>
<el-button slot="reference" type="text">-删除组</el-button>
</el-popover>
</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>
<el-dialog
title="编辑回复内容"
:visible.sync="editReplyContentDialog"
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="editReplyContent('yes')">保 存</el-button>
<el-button @click="editReplyContentDialog = false">取 消</el-button>
</span>
</el-dialog>
<!--//回复内容-->
</template>
</div>
</body>
<script src="/assets/js/chat-main.js?v=1"></script>
</html>