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

291 lines
16 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>聊天界面</title>
<link rel="stylesheet" href="/static/css/common.css?v=0.3.7">
<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
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>
<div class="replyContent">
<el-collapse>
<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" ><{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>
</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.3.9"></script>
</html>