| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 |
- <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">
- <link rel="stylesheet" href="/static/css/emojione.min.css">
- <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 {height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;}
- .el-row{width:100%}#app{margin-top: 10px;}
- .chatBg{min-height: 100%;background: #fff;border: solid 1px #e6e6e6;overflow: hidden;}
- .chatLeft{ 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;}
- .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;}
- .chatArea{margin: 10px 0;}
- .chatBox{max-height: 350px;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-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
- :title="chatTitle"
- type="success">
- </el-alert>
- <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="faceBox kefuFaceBox">
- <ul class="faceBoxList">
- <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face" :title="v">
- <!-- <img :src=v.path>-->
- <span class="em" :class="v"></span>
- </li>
- </ul>
- <div class="clear"></div>
- </div>
- <el-input type="textarea" class="chatArea" v-model="messageContent" v-on:keyup.enter.native="chatToUser"></el-input>
- <div class="faceBtn"></div>
- <div class="imageBtn" id="uploadImg" v-on:click="uploadImg('/uploadimg')"></div>
- <el-button class="floatRight" type="primary" v-on:click="chatToUser">发送</el-button>
- <div class="clear"></div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="chatBg chatRight">
- <el-tabs v-model="rightTabActive" @tab-click="handleTabClick">
- <el-tab-pane label="访客信息" name="visitorInfo">
- <el-menu>
- <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-popover
- ref="popover"
- placement="top"
- title="来源"
- width="300"
- trigger="hover"
- :content="visitor.refer">
- </el-popover>
- <el-menu-item v-popover:popover style="padding-left:2px;">
- <i class="el-icon-s-tools"></i>
- <span slot="title" >来源：<{visitor.refer}></span>
- </el-menu-item>
- <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-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 visitors" :key="item.uid" class="">
- <div style="cursor:pointer" class="onlineUsers imgGray">
- 待开发
- </div>
- </el-row>
- </el-tab-pane>
- </el-tabs>
- </div>
- </el-col>
- </el-row>
- <!--图片放大-->
- <div id="bigPic" class="bigPic">
- <img src="/static/images/3.jpg"/>
- </div>
- <!--//图片放大-->
- </template>
- </div>
- </body>
- <script src="/static/js/chat-main.js?v=0.1.1"></script>
- </html>
|
