修改聊天界面滚动样式

cmd/install.go

@@ -13,7 +13,7 @@ import (
 
 var installCmd = &cobra.Command{
 	Use:   "install",
-	Short: "example:go-fly install",
+	Short: "安装导入数据",
 	Run: func(cmd *cobra.Command, args []string) {
 		install()
 	},

cmd/root.go

@@ -31,7 +31,6 @@ func Execute() {
 	}
 }
 func init() {
-	rootCmd.AddCommand(versionCmd)
 	rootCmd.AddCommand(serverCmd)
 	rootCmd.AddCommand(installCmd)
 	rootCmd.AddCommand(stopCmd)

cmd/version.go

@@ -1,15 +0,0 @@
-package cmd
-
-import (
-	"fmt"
-	"github.com/spf13/cobra"
-	"github.com/taoshihan1991/imaptool/common"
-)
-
-var versionCmd = &cobra.Command{
-	Use:   "version",
-	Short: "example:go-fly version",
-	Run: func(cmd *cobra.Command, args []string) {
-		fmt.Println("go-fly " + common.Version)
-	},
-}

static/css/common.css

@@ -256,6 +256,8 @@
     text-align: center;
 }
 /*客服聊天主板*/
+.chatBg{background: #fff;border: solid 1px #e6e6e6;overflow: hidden;}
+.chatLeft{height:100%;overflow:auto;}
 .chatLeft .el-tabs__nav,.chatRight .el-tabs__nav {
     margin-left: 20px;
 }
@@ -265,7 +267,7 @@
     overflow: scroll!important;
 }
 .onlineUsers {
-    padding: 5px;
+    padding: 4px;
     height: 40px;
     line-height: 40px;
     font-size: 14px;
@@ -297,8 +299,11 @@
     background: rgb(245,245,245);
     /*margin-bottom: 80px;*/
 }
+.chatVisitorPage{
+    height: calc(100% - 105px);
+    overflow-y: auto;
+}
 .chatVisitorPage .chatBox{
-    min-height: calc(100% - 105px);
     padding: 0 4px;
 }
 .chatBox .el-col{margin:10px 0;}
@@ -309,6 +314,9 @@
     text-align: left;
     margin-top: -15px;
 }
+.chatMainPage{
+    margin-top: 1px;
+}
 .chatContent{
     background-color: rgb(255,255,255);
     color: #000;

static/js/chat-page.js

@@ -36,11 +36,15 @@ new Vue({
             this.ping();
         },
         OnOpen:function() {
+            console.log("ws:onopen");
             this.chatTitle=GOFLY_LANG[LANG]['connectok'];
+            this.showTitle(this.chatTitle);
+
             this.socketClosed=false;
             this.focusSendConn=false;
         },
         OnMessage:function(e) {
+            console.log("ws:onmessage");
             this.socketClosed=false;
             this.focusSendConn=false;
             const redata = JSON.parse(e.data);
@@ -55,6 +59,13 @@ new Vue({
                 this.scrollBottom();
                 this.showKfonline=true;
             }
+            if (redata.type == "transfer") {
+                var kefuId = redata.data
+                if(!kefuId){
+                    return;
+                }
+                this.visitor.to_id=kefuId;
+            }
             if (redata.type == "notice") {
                 let msg = redata.data
                 if(!msg){
@@ -79,6 +90,9 @@ new Vue({
                 notify(msg.name, {
                     body: msg.content,
                     icon: msg.avator
+                },function(notification) {
+                    window.focus();
+                    notification.close();
                 });
                 this.scrollBottom();
                 flashTitle();//标题闪烁
@@ -178,6 +192,7 @@ new Vue({
             this.socket.send(JSON.stringify(message));
         },
         OnClose:function() {
+            console.log("ws:onclose");
             this.focusSendConn=true;
             //this.socketClosed=true;
             // this.chatTitle="连接关闭!请重新打开页面";
@@ -247,12 +262,13 @@ new Vue({
                             content.content = replaceContent(visitorMes["content"]);
                             content.time = visitorMes["time"];
                             _this.msgList.push(content);
-                            if(_this.msgList.length>=4){
+                            _this.scrollBottom();
-                                _this.scrollBottom();
-                            }
                         }
-                        _this.$nextTick(function(){
+                    }
-                            $(".chatBox").append("<div class=\"chatTime\">"+GOFLY_LANG[LANG]['historymes']+"</div>");
+                    if(data.code!=200){
+                        _this.$message({
+                            message: data.msg,
+                            type: 'error'
                         });
                     }
                     if(data.code!=200){
@@ -267,13 +283,13 @@ new Vue({
         //滚动到底部
         scrollBottom:function(){
             var _this=this;
-                this.$nextTick(function(){
+            this.$nextTick(function(){
-                        $('body').scrollTop($("body")[0].scrollHeight);
+                $('.chatVisitorPage').scrollTop($(".chatVisitorPage")[0].scrollHeight);
-             });
+            });
         },
         //软键盘问题
         textareaFocus:function(){
-            $('body').scrollTop($("body")[0].scrollHeight);
+            this.scrollBottom()
             if(/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
                 $(".chatContext").css("margin-bottom","0");
                 $(".chatBoxSend").css("position","static");
@@ -338,12 +354,15 @@ new Vue({
                             }
                             content.content = replaceContent(content.content);
                             _this.msgList.push(content);
-                            if(_this.msgList.length>=1){
+                            _this.scrollBottom();
-                                _this.scrollBottom();
-                            }
                             if(i==0){
                                 _this.alertSound();
                             }
+                            var redata={
+                                type:"message",
+                                data:content
+                            }
+                            window.parent.postMessage(redata,"*");
                             i++;
                         },4000);
                     }
@@ -376,7 +395,6 @@ new Vue({
                 var windheight = $(window).height();
                 $(window).resize(function(){
                     var docheight = $(window).height();  /*唤起键盘时当前窗口高度*/
-                    console.log(docheight,windheight);
                     //_this.scrollBottom();
                     $('body').scrollTop(99999999);
                     // if(docheight < windheight){            /*当唤起键盘高度小于未唤起键盘高度时执行*/
@@ -419,8 +437,6 @@ new Vue({
                     return;
                 }
                 _this.initConn();
-                _this.chatTitle=_this.flyLang['connectok'];
-                $(".chatBox").append("<div class=\"chatTime\">"+_this.chatTitle+"</div>");
                 _this.scrollBottom();
             }
             var _hmt = _hmt || [];
@@ -577,7 +593,41 @@ new Vue({
                 var p = b.play();
                 p && p.then(function(){}).catch(function(e){});
             }
-        }
+        },
+        sendAjax:function(url,method,params,callback){
+            let _this=this;
+            $.ajax({
+                type: method,
+                url: url,
+                data:params,
+                error:function(res){
+                    var data=JSON.parse(res.responseText);
+                    console.log(data);
+                    if(data.code!=200){
+                        _this.$message({
+                            message: data.msg,
+                            type: 'error'
+                        });
+                    }
+                },
+                success: function(data) {
+                    if(data.code!=200){
+                        _this.$message({
+                            message: data.msg,
+                            type: 'error'
+                        });
+                    }else if(data.result!=null){
+                        callback(data.result);
+                    }else{
+                        callback(data);
+                    }
+                }
+            });
+        },
+        showTitle:function(title){
+            $(".chatBox").append("<div class=\"chatTime\"><span>"+title+"</span></div>");
+            this.scrollBottom();
+        },
     },
     mounted:function() {
         document.addEventListener('paste', this.onPasteUpload)