static/css/common.css

@@ -234,25 +234,6 @@
     background-color: #cde0ff;
     color: #000;
 }
-.msg-bubble-wrap {
-    display: inline-flex;
-    align-items: flex-end;
-    gap: 4px;
-}
-.msg-status-icon {
-    flex-shrink: 0;
-    font-size: 12px;
-    line-height: 1;
-    margin-bottom: 1px;
-}
-.msg-status-sending {
-    color: #999;
-}
-.msg-status-failed {
-    color: #ff4d4f;
-    cursor: pointer;
-    font-size: 15px;
-}
 a{color: #07a9fe;text-decoration: none;}
 
 

static/css/dark-mode.css

@@ -51,10 +51,6 @@ body.dark-mode .chatBoxMe .chatContent {
     border: 1px solid #246153 !important;
 }
 
-/* 消息发送状态 */
-body.dark-mode .msg-status-sending { color: #7a9e9e; }
-body.dark-mode .msg-status-failed { color: #ff6b6b; }
-
 /* 时间戳 */
 body.dark-mode .chatTime {
     color: #A0BFBF !important;

static/templates/chat_page.html

@@ -111,11 +111,7 @@
                             </div>
                         </div>
                         <div class="kefuMe" v-if="v.is_kefu==false" style="display: flex;justify-content: flex-end;">
-                            <div class="chatContent chatContent2 replyContentBtn msg-bubble-wrap" :class="{'msg-bubble-failed': v.status=='failed'}">
+                            <div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
-                                <span v-html="v.content"></span>
-                                <span class="msg-status-icon msg-status-sending" v-if="v.status=='sending'"><i class="el-icon-loading"></i></span>
-                                <span class="msg-status-icon msg-status-failed" v-if="v.status=='failed'" @click.stop="resendMessage(v)" title="发送失败，点击重试"><i class="el-icon-warning"></i></span>
-                            </div>
                             <el-avatar style="margin-left:10px;flex-shrink: 0;" :size="36" :src="v.avator"></el-avatar>
                         </div>
                         <div class="clear"></div>
@@ -149,7 +145,7 @@
                     <el-input :rows="2" type="textarea" resize="none" class="visitorEditorArea" @focus="scrollBottom;showIconBtns=false" @blur="scrollBottom;showIconBtns=false" v-model="messageContent" v-on:keyup.enter.native="chatToUser">
                     </el-input>
                     <div class="btn-box">
-<el-button type="primary" size="mini" class="visitorEditorBtn" :disabled="messageContent==''" v-on:click="chatToUser();showIconBtns=false">发送</el-button>
+<el-button type="primary" size="mini" class="visitorEditorBtn" :loading="sendDisabled" :disabled="sendDisabled||messageContent==''" v-on:click="chatToUser();showIconBtns=false"><{ sendDisabled ? '发送中...' : '发送' }></el-button>
                     </div>
                 </div>
             </div>
@@ -353,6 +349,7 @@
                     });
                     return;
                 }
+                this.sendDisabled=true;
                 let _this=this;
 
                 let content = {}
@@ -362,7 +359,6 @@
                 content.is_kefu = false;
                 content.time = _this.getNowDate();
                 content.show_time=false;
-                content.status = 'sending';
                 _this.msgList.push(content);
                 _this.scrollBottom();
 
@@ -372,37 +368,22 @@
                 mes.from_id = this.visitor.visitor_id;
                 mes.to_id = this.visitor.to_id;
                 mes.content = this.messageContent;
-                content._rawMsg = Object.assign({}, mes);
-                this.messageContent = ""
                 $.post("/aicss/2/message",mes,function(res){
+                    _this.sendDisabled=false;
                     if(res.code!=200){
-                        _this.$set(content, 'status', 'failed');
+                        _this.msgList.pop();
+                        _this.$message({
+                            message: res.msg,
+                            type: 'error'
+                        });
                         return;
                     }
-                    _this.$set(content, 'status', 'sent');
+                    _this.messageContent = "";
                     clearInterval(_this.timer);
                     _this.sendSound();
-                }).fail(function(){
-                    _this.$set(content, 'status', 'failed');
                 });
 
             },
-            resendMessage:function(msg) {
-                if(msg.status !== 'failed') return;
-                let _this = this;
-                _this.$set(msg, 'status', 'sending');
-                let mes = msg._rawMsg;
-                $.post("/aicss/2/message", mes, function(res){
-                    if(res.code!=200){
-                        _this.$set(msg, 'status', 'failed');
-                        return;
-                    }
-                    _this.$set(msg, 'status', 'sent');
-                    _this.sendSound();
-                }).fail(function(){
-                    _this.$set(msg, 'status', 'failed');
-                });
-            },
             OnClose:function() {
                 console.log("ws:onclose");
                 this.focusSendConn=true;