优化聊天滚动

5 years ago · 59c75cb77d
parent 26737e9274
commit 59c75cb77d
4 changed files with 33 additions and 10 deletions
--- a/static/html/chat_main.html
+++ b/static/html/chat_main.html
@ -50,6 +50,7 @@
        .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;}
    </style>
 </head>
 <body>
@ -66,13 +67,15 @@
                </el-col>
                <el-col :span="12">
                    <div class="sw-bg chatContext">
-                        <el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
-                            <el-col :span="3"><el-avatar :size="60" :src="v.avatar"></el-avatar></el-col>
-                            <el-col :span="21">
-                                <div class="chatUser"><{v.name}></div>
-                                <div class="chatContent"><{v.content}></div>
-                            </el-col>
-                        </el-row>
+                        <div class="chatBox">
+                            <el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
+                                <el-col :span="3"><el-avatar :size="60" :src="v.avatar"></el-avatar></el-col>
+                                <el-col :span="21">
+                                    <div class="chatUser"><{v.name}></div>
+                                    <div class="chatContent"><{v.content}></div>
+                                </el-col>
+                            </el-row>
+                        </div>
                        <el-input type="textarea" class="chatArea" v-model="messageContent"></el-input>
                        <el-button type="primary" v-on:click="chatToUser">发送</el-button>
                    </div>
@ -149,6 +152,12 @@
                            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].push(content);
+                    this.$nextTick(() => {
+                        $('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
+                    });
                }
            },
            //接手客户
@ -207,6 +219,9 @@
                    this.msgListUser[this.currentGuest] = [];
                }
                this.msgListUser[this.currentGuest].push(content);
+                this.$nextTick(() => {
+                    $('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
+                });
            },
        },
        created: function () {
--- a/static/html/login.html
+++ b/static/html/login.html
@ -47,6 +47,7 @@
            right: 2px;
            bottom: 10px;
            width: 325px;
+            text-align: left;
        }
        .chatBox{
            max-height: 400px;
@ -62,7 +63,6 @@
            text-align: left;
        }
        .chatContent{
-            text-align: left;
            background-color: rgb(166,212,242);
            color: #000;
            border: 1px solid rgb(152, 199, 230);
@ -89,6 +89,7 @@
        .chatBoxMe .chatUser{text-align: right}
        .chatBoxMe .chatContent:after{left:auto;right: -10px;}
        .chatArea{margin: 10px 0;}
+        .chatTitle{height: 30px;line-height: 30px;color: #1989fa}
    </style>

 </head>
@ -148,6 +149,7 @@

        <!--客服代码-->
        <div class="chatContext">
+            <div class="chatTitle">在线咨询</div>
            <div class="chatBox">
                <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>
@ -313,6 +315,9 @@
                    content.is_kefu = false;
                    content.time = msg.time;
                    this.msgList.push(content);
+                    this.$nextTick(() => {
+                        $('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
+                    });
                }
            },
            //发送给客户
@ -332,6 +337,9 @@
                content.is_kefu = true;
                content.time = '';
                this.msgList.push(content);
+                this.$nextTick(() => {
+                    $('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
+                });
            },
            setCache : function (key,obj){
                if(typeof(Storage) !== "undefined"){
--- a/static/html/main.html
+++ b/static/html/main.html
@ -4,7 +4,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" 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">
    <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>
--- a/static/html/nav.html
+++ b/static/html/nav.html
@ -1,7 +1,7 @@
 <el-menu
        default-active="4"
        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>
    <el-menu-item index="3" v-on:click="openIframeUrl('/chat_main')">聊天</el-menu-item>