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

202 lines
11 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">
<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.name"><img :src=v.path></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>