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 2558bd8..5894938 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,22 +372,37 @@
mes.from_id = this.visitor.visitor_id;
mes.to_id = this.visitor.to_id;
mes.content = this.messageContent;
- $.post("/aicss/2/message",mes,function(res){
- _this.sendDisabled=false;
+ content._rawMsg = Object.assign({}, mes);
+ this.messageContent = ""
+ $.post("/2/message",mes,function(res){
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;