自动提示框

controller/notice.go

@@ -28,9 +28,13 @@ func GetNotice(c *gin.Context) {
 		result = append(result, h)
 	}
 	c.JSON(200, gin.H{
-		"code":   200,
-		"msg":    "ok",
-		"result": result,
+		"code": 200,
+		"msg":  "ok",
+		"result": gin.H{
+			"welcome":  result,
+			"username": user.Nickname,
+			"avatar":   user.Avator,
+		},
 	})
 }
 func GetNotices(c *gin.Context) {
@@ -56,7 +60,7 @@ func PostNoticeSave(c *gin.Context) {
 	kefuId, _ := c.Get("kefu_name")
 	content := c.PostForm("content")
 	id := c.PostForm("id")
-	models.UpdateWelcome(fmt.Sprintf("%s", kefuId),id, content)
+	models.UpdateWelcome(fmt.Sprintf("%s", kefuId), id, content)
 	c.JSON(200, gin.H{
 		"code":   200,
 		"msg":    "ok",

static/css/gofly-front.css

@@ -5,6 +5,7 @@
     left: auto!important;
 }
 .launchButtonNotice{
+    width: 270px;
     padding: 10px;
     margin: 0 auto;
     display: block;
@@ -85,7 +86,24 @@
     padding: 0!important;
     transition: .6s ease-in-out!important;
 }
-
+.launchButtonNotice .flyAvatar{
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: inline-block;
+    border:1px solid #cccccc;
+    float: left;
+}
+.launchButtonNotice .flyUsername{
+    font-weight: bold;
+    float: left;
+    margin-left: 4px;
+}
+.launchButtonNotice .flyUser{
+    height: 32px;
+    overflow: hidden;
+    line-height: 32px;
+}
 @-webkit-keyframes bounce-up {
     25% {-webkit-transform: translateY(6px);}
     50%, 100% {-webkit-transform: translateY(0);}

static/js/chat-page.js

@@ -248,8 +248,8 @@ new Vue({
             let _this=this;
             $.get("/notice?kefu_id="+KEFU_ID,function(res) {
                 //debugger;
-                if (res.result != null) {
-                    let msg = res.result;
+                if (res.result.welcome != null) {
+                    let msg = res.result.welcome;
                     var len=msg.length;
                     var i=0;
                     if(len>0){

static/js/gofly-front.js

@@ -95,28 +95,36 @@ GOFLY.clickBtn=function (){
     $(".launchButtonBox").on("click",function() {
         _this.showKefu();
     });
-    setTimeout(function(){
-        $("#launchIcon").show();
-        _this.getNotice();
-    },4000);
+    _this.getNotice();
 }
 GOFLY.getNotice=function(){
     var _this=this;
     $.get(this.GOFLY_URL+"/notice?kefu_id="+this.GOFLY_KEFU_ID,function(res) {
         //debugger;
-        if (res.result != null) {
-            var msg = res.result;
+        if (res.result.welcome != null) {
+            var msg = res.result.welcome;
             var len=msg.length;
             var i=0;
             if(len>0){
-                if(typeof msg[0]=="undefined"||msg[0]==null){
-                    return;
-                }
-                var content = msg[0];
-                if(typeof content.content =="undefined"){
-                    return;
-                }
-                $("#launchButtonNotice").html(replaceContent(content.content,_this.GOFLY_URL)).show();
+
+                _this.noticeTimer=setInterval(function(){
+                    if(i==0){
+                        $("#launchIcon").text(len).show();
+                    }
+                    if(i>=len||typeof msg[i]=="undefined"||msg[i]==null){
+                        clearInterval(_this.noticeTimer);
+                        return;
+                    }
+                    var content = msg[i];
+                    if(typeof content.content =="undefined"){
+                        return;
+                    }
+                    content.content = replaceContent(content.content);
+                    var welcomeHtml="<div class='flyUser'><img class='flyAvatar' src='"+res.result.avatar+"'/> <span class='flyUsername'>"+res.result.username+"</span></div>";
+                    welcomeHtml+="<div>"+replaceContent(content.content,_this.GOFLY_URL)+"</div>";
+                    $("#launchButtonNotice").html(welcomeHtml).show();
+                    i++;
+                },4000);
             }
 
         }