diff --git a/static/css/common.css b/static/css/common.css index 0dc57cc..e3daa6e 100644 --- a/static/css/common.css +++ b/static/css/common.css @@ -234,6 +234,25 @@ 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;} diff --git a/static/css/dark-mode.css b/static/css/dark-mode.css index 1b83bde..7a3edad 100644 --- a/static/css/dark-mode.css +++ b/static/css/dark-mode.css @@ -51,6 +51,10 @@ 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; diff --git a/static/templates/chat_page.html b/static/templates/chat_page.html index 5d018d9..b06ba38 100644 --- a/static/templates/chat_page.html +++ b/static/templates/chat_page.html @@ -111,7 +111,11 @@
-
+
+ + + +
@@ -145,7 +149,7 @@
-<{ sendDisabled ? '发送中...' : '发送' }> +发送
@@ -349,7 +353,6 @@ }); return; } - this.sendDisabled=true; let _this=this; let content = {} @@ -359,6 +362,7 @@ content.is_kefu = false; content.time = _this.getNowDate(); content.show_time=false; + content.status = 'sending'; _this.msgList.push(content); _this.scrollBottom(); @@ -368,23 +372,37 @@ 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("/2/message",mes,function(res){ - _this.sendDisabled=false; if(res.code!=200){ - _this.msgList.pop(); - _this.$message({ - message: res.msg, - type: 'error' - }); + _this.$set(content, 'status', 'failed'); return; } - _this.messageContent = ""; + _this.$set(content, 'status', 'sent'); 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("/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;