msb-public
/
go-fly
mirror of https://github.com/taoshihan1991/go-fly.git
1
0
Code Issues Projects Releases Wiki Activity

优化聊天滚动

Browse Source
pull/30/head
taoshihan1991 4 years ago
parent 26737e9274
commit 59c75cb77d
4 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File

29
static/html/chat_main.html
Unescape View File

@ -50,6 +50,7 @@
.chatBoxMe .chatUser{text-align: right} .chatBoxMe .chatUser{text-align: right}
.chatBoxMe .chatContent:after{left:auto;right: -10px;} .chatBoxMe .chatContent:after{left:auto;right: -10px;}
.chatArea{margin: 10px 0;} .chatArea{margin: 10px 0;}
.chatBox{max-height: 350px;overflow-y: auto;overflow-x: hidden;}
</style> </style>
</head> </head>
<body> <body>
@ -66,13 +67,15 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="sw-bg chatContext"> <div class="sw-bg chatContext">
<el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}"> <div class="chatBox">
<el-col :span="3"><el-avatar :size="60" :src="v.avatar"></el-avatar></el-col> <el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
<el-col :span="21"> <el-col :span="3"><el-avatar :size="60" :src="v.avatar"></el-avatar></el-col>
<div class="chatUser"><{v.name}></div> <el-col :span="21">
<div class="chatContent"><{v.content}></div> <div class="chatUser"><{v.name}></div>
</el-col> <div class="chatContent"><{v.content}></div>
</el-row> </el-col>
</el-row>
</div>
<el-input type="textarea" class="chatArea" v-model="messageContent"></el-input> <el-input type="textarea" class="chatArea" v-model="messageContent"></el-input>
<el-button type="primary" v-on:click="chatToUser">发送</el-button> <el-button type="primary" v-on:click="chatToUser">发送</el-button>
</div> </div>
@ -149,6 +152,12 @@
this.msgListUser[redata.data[i].uid] = []; this.msgListUser[redata.data[i].uid] = [];
} }
} }
//发送给客户我在线
let mes = {}
mes.type = "kfConnect";
kfConfig.guest_id=redata.data[0].uid;
mes.data = kfConfig;
this.socket.send(JSON.stringify(mes));
} }
@ -167,6 +176,9 @@
this.msgListUser[msg.from_id] = []; this.msgListUser[msg.from_id] = [];
} }
this.msgListUser[msg.from_id].push(content); this.msgListUser[msg.from_id].push(content);
this.$nextTick(() => {
$('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
});
} }
}, },
//接手客户 //接手客户
@ -207,6 +219,9 @@
this.msgListUser[this.currentGuest] = []; this.msgListUser[this.currentGuest] = [];
} }
this.msgListUser[this.currentGuest].push(content); this.msgListUser[this.currentGuest].push(content);
this.$nextTick(() => {
$('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
});
}, },
}, },
created: function () { created: function () {

10
static/html/login.html
Unescape View File

@ -47,6 +47,7 @@
right: 2px; right: 2px;
bottom: 10px; bottom: 10px;
width: 325px; width: 325px;
text-align: left;
} }
.chatBox{ .chatBox{
max-height: 400px; max-height: 400px;
@ -62,7 +63,6 @@
text-align: left; text-align: left;
} }
.chatContent{ .chatContent{
text-align: left;
background-color: rgb(166,212,242); background-color: rgb(166,212,242);
color: #000; color: #000;
border: 1px solid rgb(152, 199, 230); border: 1px solid rgb(152, 199, 230);
@ -89,6 +89,7 @@
.chatBoxMe .chatUser{text-align: right} .chatBoxMe .chatUser{text-align: right}
.chatBoxMe .chatContent:after{left:auto;right: -10px;} .chatBoxMe .chatContent:after{left:auto;right: -10px;}
.chatArea{margin: 10px 0;} .chatArea{margin: 10px 0;}
.chatTitle{height: 30px;line-height: 30px;color: #1989fa}
</style> </style>
</head> </head>
@ -148,6 +149,7 @@
<!--客服代码--> <!--客服代码-->
<div class="chatContext"> <div class="chatContext">
<div class="chatTitle">在线咨询</div>
<div class="chatBox"> <div class="chatBox">
<el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}"> <el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
<el-col :span="3"><el-avatar :size="30" :src="v.avatar"></el-avatar></el-col> <el-col :span="3"><el-avatar :size="30" :src="v.avatar"></el-avatar></el-col>
@ -313,6 +315,9 @@
content.is_kefu = false; content.is_kefu = false;
content.time = msg.time; content.time = msg.time;
this.msgList.push(content); this.msgList.push(content);
this.$nextTick(() => {
$('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
});
} }
}, },
//发送给客户 //发送给客户
@ -332,6 +337,9 @@
content.is_kefu = true; content.is_kefu = true;
content.time = ''; content.time = '';
this.msgList.push(content); this.msgList.push(content);
this.$nextTick(() => {
$('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
});
}, },
setCache : function (key,obj){ setCache : function (key,obj){
if(typeof(Storage) !== "undefined"){ if(typeof(Storage) !== "undefined"){

2
static/html/main.html
Unescape View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="陶士涵"> <meta name="author" content="陶士涵">
<title>GO-IMAP网页版邮箱imap工具</title> <title>GO-FLY即时通讯工具集</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.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/element-ui@2.13.1/lib/index.js"></script>

2
static/html/nav.html
Unescape View File

@ -1,7 +1,7 @@
<el-menu <el-menu
default-active="4" default-active="4"
mode="horizontal"> mode="horizontal">
<el-menu-item class="mainLogo" v-on:click="openUrl('/login')">GO-IMAP</el-menu-item> <el-menu-item class="mainLogo" v-on:click="openUrl('/login')">GO-FLY</el-menu-item>
<el-menu-item index="2" v-on:click="openIframeUrl('/list')">邮箱<el-badge class="mark" :value="mailTotal" style="margin-bottom: 20px;"/> <el-menu-item index="2" v-on:click="openIframeUrl('/list')">邮箱<el-badge class="mark" :value="mailTotal" style="margin-bottom: 20px;"/>
</el-menu-item> </el-menu-item>
<el-menu-item index="3" v-on:click="openIframeUrl('/chat_main')">聊天</el-menu-item> <el-menu-item index="3" v-on:click="openIframeUrl('/chat_main')">聊天</el-menu-item>

Write Preview
Loading…
Cancel
Save