客服输入框界面

static/css/common.css

@@ -331,9 +331,11 @@ a{color: #07a9fe;text-decoration: none;}
     color:#007aff;
     cursor: pointer;
 }
-.iconBtnsBox .kefuSendBtn{
-    margin-left: auto;
-    margin-right: 2px;
+.kefuSendBtn{
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 2;
 }
 .clear{clear:both;}
 
@@ -503,4 +505,25 @@ a{color: #07a9fe;text-decoration: none;}
     margin: 10px 0px;
     line-height: 23px;
     color: #666;
+}
+.chatArea .el-textarea__inner{
+    border: none;
+}
+    /* 定义滚动条的宽度、高度和背景色 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 10px;
+    background-color: #f5f5f5;
+}
+
+/* 定义滚动条滑块的样式 */
+::-webkit-scrollbar-thumb {
+    background-color: #c5c5c5;
+}
+
+
+
+/* 定义滚动条滑块在 hover 状态下的样式 */
+::-webkit-scrollbar-thumb:hover {
+    background-color: #999;
 }

static/js/chat-main.js

@@ -427,7 +427,8 @@ var app=new Vue({
                     if(data.result!=null){
                         let r=data.result;
                         _this.visitor=r;
-                        // _this.visitor.created_at=r.created_at;
+                        _this.visitor.created_at=formatDate(r.created_at);
+                        _this.visitor.updated_at=formatDate(r.updated_at);
                         // _this.visitor.refer=r.refer;
                         // _this.visitor.city=r.city;
                         // _this.visitor.client_ip=r.client_ip;

static/js/functions.js

@@ -187,4 +187,25 @@ function alertSound(id,src){
     var p = b.play();
     p && p.then(function(){}).catch(function(e){});
 }
+//日期格式化
+function formatDate(dateString, format = 'yyyy-MM-dd HH:mm:ss') {
+    const date = new Date(dateString);
+
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hour = String(date.getHours()).padStart(2, '0');
+    const minute = String(date.getMinutes()).padStart(2, '0');
+    const second = String(date.getSeconds()).padStart(2, '0');
+
+    const formattedDate = format
+        .replace(/yyyy/g, year)
+        .replace(/MM/g, month)
+        .replace(/dd/g, day)
+        .replace(/HH/g, hour)
+        .replace(/mm/g, minute)
+        .replace(/ss/g, second);
+
+    return formattedDate;
+}
 ;

static/templates/chat_main.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/static/css/common.css?v=dgftr65ujhfg">
     <script src="/assets/js/functions.js"></script>
     <script src="/assets/js/reconnecting-websocket.min.js"></script>
+    <link rel="stylesheet" href="/static/css/icon/iconfont.css?v=fgjlgfda"/>
     <style>
         html, body {overflow:hidden;height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;}
         .el-row{width:100%}
@@ -114,7 +115,7 @@
                                     <div class="clear"></div>
                                 </div>
                                 <el-tooltip content="发送表情" placement="top">
-                                    <div class="iconBtn faceBtn el-icon-s-shop" style="font-size: 24px;" @click.stop="showFaceIcon==true?showFaceIcon=false:showFaceIcon=true"></div>
+                                    <div class="iconBtn iconfont icon-xiaolian" style="font-size: 24px;" @click.stop="showFaceIcon==true?showFaceIcon=false:showFaceIcon=true"></div>
                                 </el-tooltip>
 
                                 <el-tooltip content="上传图片" placement="top">
@@ -126,10 +127,11 @@
                                 <el-tooltip content="消息记录" placement="top">
                                     <div  class="iconBtn el-icon-chat-line-round" v-on:click="getMesssagesByVisitorId(visitor.visitor_id,true)" style="font-size: 24px;"></div>
                                 </el-tooltip>
-                                <el-button class="kefuSendBtn" :disabled="sendDisabled" size="mini" type="primary" v-on:click="chatToUser">发送</el-button>
+
                             </div>
                             <div class="clear"></div>
-                            <el-input type="textarea" :rows="4" class="chatArea" v-model="messageContent"  v-on:keyup.enter.native="chatToUser"  placeholder="请输入内容"></el-input>
+                            <el-button class="kefuSendBtn" :disabled="sendDisabled" size="mini" type="primary" v-on:click="chatToUser">发送</el-button>
+                            <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 12}" class="chatArea" v-model="messageContent"  v-on:keyup.enter.native="chatToUser"  placeholder="请输入内容"></el-input>
                         </div>
 
                     </div>

static/templates/chat_page.html

@@ -13,7 +13,6 @@
 
     <script src="/assets/js/functions.js?v=fgffdwersdccvcbv"></script>
     <script src="/assets/js/reconnecting-websocket.min.js"></script>
-    <link rel="stylesheet" href="/static/css/front.css?v=1.0.0" />
     <link rel="stylesheet" href="/static/css/common.css?v=sdsderfrgfgdfdf" />
     <link rel="stylesheet" href="/static/css/icono.min.css" />
     <link rel="stylesheet" href="/static/css/icon/iconfont.css?v=fgjlgfda"/>