增加快捷回复的前端

config/go-fly.sql

@@ -134,12 +134,16 @@ CREATE TABLE `reply_group` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `group_name` varchar(50) NOT NULL DEFAULT '',
  `user_id` varchar(50) NOT NULL DEFAULT '',
- PRIMARY KEY (`id`)
+ PRIMARY KEY (`id`),
+ KEY `user_id` (`user_id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8|
 DROP TABLE IF EXISTS `reply_item`|
 CREATE TABLE `reply_item` (
  `id` int(11) NOT NULL,
  `content` varchar(1024) NOT NULL DEFAULT '',
  `group_id` int(11) NOT NULL DEFAULT '0',
- `user_id` int(11) NOT NULL DEFAULT '0'
+ `user_id` int(11) NOT NULL DEFAULT '0',
+ `item_name` varchar(50) NOT NULL DEFAULT '',
+ KEY `user_id` (`user_id`),
+ KEY `group_id` (`group_id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8|

controller/reply.go

@@ -3,9 +3,16 @@ package controller
 import (
 	"github.com/gin-gonic/gin"
 	"github.com/taoshihan1991/imaptool/models"
+	"log"
 )
 
 func GetReplys(c *gin.Context) {
-	kefuId, _ := c.Get("kefu_id")
+	kefuId, _ := c.Get("kefu_name")
-	models.FindReplyByUserId(kefuId)
+	log.Println(kefuId)
+	res := models.FindReplyByUserId(kefuId)
+	c.JSON(200, gin.H{
+		"code":   200,
+		"msg":    "ok",
+		"result": res,
+	})
 }

models/replys.go

@@ -4,6 +4,7 @@ type ReplyItem struct {
 	Id       string `json:"item_id"`
 	Content  string `json:"item_content"`
 	GroupId  string `json:"group_id"`
+	ItemName string `json:"item_name"`
 }
 type ReplyGroup struct {
 	Id        string      `json:"group_id"`
@@ -13,6 +14,6 @@ type ReplyGroup struct {
 
 func FindReplyByUserId(userId interface{}) ReplyGroup {
 	var replyGroup ReplyGroup
-	DB.Raw("select a.*,b.* from reply_group a left join reply_items b on a.id=b.group_id where a.user_id=? ", userId).Scan(&replyGroup)
+	DB.Raw("select a.*,b.* from reply_group a left join reply_item b on a.id=b.group_id where a.user_id=? ", userId).Scan(&replyGroup)
 	return replyGroup
 }

router/api.go

@@ -81,7 +81,7 @@ func InitApiRouter(engine *gin.Engine) {
 	engine.GET("/configs", middleware.JwtApiMiddleware, middleware.RbacAuth, controller.GetConfigs)
 	engine.POST("/config", middleware.JwtApiMiddleware, middleware.RbacAuth, controller.PostConfig)
 	engine.GET("/config", controller.GetConfig)
-	engine.GET("/replys", controller.GetReplys)
+	engine.GET("/replys", middleware.JwtApiMiddleware, controller.GetReplys)
 	//微信接口
 	engine.GET("/micro_program", middleware.JwtApiMiddleware, controller.GetCheckWeixinSign)
 }

static/css/common.css

@@ -225,6 +225,11 @@
 .chatLeft .el-tabs__nav,.chatRight .el-tabs__nav {
     margin-left: 20px;
 }
+.chatRight{
+    height: 100%;
+    overflow: scroll;
+    overflow: scroll!important;
+}
 .onlineUsers {
     padding: 5px;
     height: 40px;
@@ -314,4 +319,22 @@
 .footContact a{font-size: 12px;color: #999;text-decoration: none;}
 .chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
 .chatTimeHide{display: none;}
+.chatRightTitle{
+    color: #303133;
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+    font-size: 14px;
+    border-bottom:1px solid #E4E7ED;
+    background: #E3E3E3;
+}
+.replyBox{
+    padding: 0 10px;
+    font-size: 12px;
+    min-height: 300px;
+}
+.replyItem:hover{
+    background-color: #f0f9eb;
+    color: #67C23A;
+}
 .clear{clear:both;}

static/html/chat_main.html

@@ -12,8 +12,8 @@
     <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;}
+        html, body {overflow:hidden;height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;}
-        .el-row{width:100%}#app{margin-top: 10px;}
+        .el-row{width:100%}
         .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;}
@@ -198,7 +198,19 @@
                                 </el-row>
                             </el-tab-pane>
                         </el-tabs>
-
+                        <div class="chatRightTitle">快捷回复</div>
+                        <div class="replyBox">
+                            <el-collapse>
+                                <el-collapse-item title="客服营销" name="1">
+                                    <div class="replyItem">与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+                                    <div class="replyItem">在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+                                </el-collapse-item>
+                                <el-collapse-item title="通用话术" name="2">
+                                    <div class="replyItem">控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+                                    <div class="replyItem">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+                                </el-collapse-item>
+                            </el-collapse>
+                        </div>
                     </div>
                 </el-col>
             </el-row>